springboot+vue实现登录案例（附VUE整个项目代码）

---

前言

提示：这里可以添加本文要记录的大概内容：

---

一、准备环境

1.1 springboot 整合mybatis、swagger、代码生成器、Lombok

上一篇文章已经讲到

springboot 整合mybatis、swagger、代码生成器、Lombok

1.2 环境工具

vue 框架（使vscode导入已经写好的前端项目）
springboot框架（IDEA开发工具）

二、开发思路及流程

2.1 根据前端登录代码和用户页面设计对象返回类型

根据上述的前端页面和代码，发现success和msg是公共的（都需要返回的一个数据）；
除此之外，还有一个data，这个应该是一个用户的实体类对象。这个data的属性还包含了token。
根据上述页面设计返回对象的工具类及相关的对象。
1、提取公共的属性：

package com.tzw.ecbms.util;

import lombok.Data;
import lombok.experimental.Accessors;

import java.util.HashMap;
import java.util.Map;

/**
 * @author tzw
 * @version 1.0
 * 返回结果
 */
@Data
@Accessors(chain = true)
public class Resp {
   
    //操作是否成功
    private Boolean success;
    //状态码
    private Integer code;
    //消息
    private  String message;


}

2、针对code去设计一个接口，里面存放code常量

package com.tzw.ecbms.util;

/**
 * @author tzw
 * @version 1.0
 */
public interface ResultCode {
   
    Integer SUCCESS = 20000;//成功
    Integer ERROR = 20001;//失败

}

3、返回的数据不能携带密码，所以针对用户去重新设计一个返回类。(不含密码，且包含需要返回的数据)

package com.tzw.ecbms.util;

import lombok.Data;

/**
 * @author tzw
 * @version 1.0
 */
@Data
public class UserResp {
   
    private String deptId;
    private String realName;
    private Long accountId;
    private String userPhone;
    private String status;
    private String token;

}

4、返回的对象中既包括用户信息，还包含公共的数据。所以我们针对用户登录再去设计一个返回类。它继承公共数据Resp类，然后把UserResp类作为data加入到自己的属性中，这样登录类的返回信息就较为完善了。

package com.tzw.ecbms.util;

import lombok.Data;

/**
 * @author tzw
 * @version 1.0
 */
@Data
public class LoginResp extends Resp {
   
    private UserResp