SpringBoot实现Vue-admin-template登陆

SpringBoot实现vue-admin-template登陆接口

vue-admin-template

vue-admin-template是一个简化版的vue-element-admin的模板，
适合vue用来作项目的搭建，虽然官方文档以及花裤衩前端大佬
在博客中已经将大部分的疑难杂症解决了，但当彻底本身搭建的
时候才发现多折腾

vue-admin-template登陆接口请求详解

要想搞懂一个接口，最好的方式就是
1.去看接口的定义声明的参数
2.发送请求查看返回的数据格式

1.在Github拉项目下来运行，Chrome开发者模式调试登陆接口

2.查看login请求传参和返回的参数

从上往下看的分别是请求头，响应的数据格式，请求的参数
提取重点信息：POST请求，URL地址
3.查看info请求传参和返回的参数

从上往下看分别是请求头和响应的数据格式
提取重点信息：GET请求，URL地址，URL地址中传递参数

vue-admin-template登陆接口代码详解

找到login.vue文件，在点击登陆按钮后会触发处理登陆的函数

若是经过element ui的表单校验则会进入红色方框的代码块

this.$store.dispatch('user/login', this.loginForm)

这里的代码是Vuex的状态管理模式方法调用，转发到user的login方法下

login请求详解

在store文件夹能够找到user.js文件，在里面声明的actions中能够找到具体的方法

这里有两个login方法，第一个方法是user.js中声明的，第二个方法能够在顶部看到是src目录下的api文件夹中的user.js引入进来的

进入到第二个login方法会发现它其实就是封装axios进行异步请求
从url和请求方式大体和登陆请求的详解的图能对上能够猜出是发送异步请求

你能够找到顶部request.js点进去看到，你就发现它引入axios

图中的baseURL先圈起来，后面会考（会用到）

看到这里也就不难明白转发(dispatch)的目的

1.发送login请求获取到token值
2.并存储到Vuex状态管理模式中，供多个组件同时识别使用

不懂Vuex状态，能够暂时肤浅的理解为全局的一个变量，能被子组件识别到

说完大概的发送请求，接下来就是看响应的数据格式，回到login的代码块中
能够看到请求后的数据用response接收，

这个response在这以前就已经通过request.js处理过再返回

途中的res.code!==20000就跟login返回的参数有一点眼熟，
这里应该是把data.code的值设置为20000才能不报错，

同时另外的一个info请求，还涉及到
data.code不能设为50000 ，500012这些，否则也会报错

info请求详解

上面的login请求还有一点收尾没讲，就是要把获取到token
存储cookie中，具体setToken的方法在utils文件夹下auth.js

能够看到引入js.cookies

接下来就是info的请求了，这个请求跟login请求相似，稍微提下的参数便可，
这里我没有找到它具体的调用的位置，可是这个请求是必定会发送的
它是用来获取用户的权限的信息，头像信息和名字等的我的信息的

在login获取并设置token后它去store中获取token，放在url中请求接口，
接口须要返回头像（avatar），姓名（name），权限信息(roles)既可
经过校验其中权限是必需要有的，其余能够不返回

登陆接口请求头详解

在项目的根目录下有vue.config.js

打开里面的这个文件，就能够看到vue前端的项目端口默认的端口9528
若是在开发的环境中没有改变过端口就会默认使用这个端口

还有before属性是引入mock.js用前端产生假数据来进行先后交互
若是有后端的接口，就须要把这行注释掉

剩下的还有一个dev-api这个请求头信息，它其实在.env.development文件中

里面有一个VUE_APP_BASE_API 的基础URL

咱们要进行后端接口数据交互有时候须要改动这里

至此登陆接口的详细解释就所有了解完了，下面就开始用本身简单写一个后端数据接口来进行交互，我这里用的是SpringBoot来进行数据交互

SpringBoot整合vue-admin-template登陆接口

这里不会涉及到数据库的操做，只是在后端模拟生成
前端的mock.js里的数据，并按照对应的格式，能成功登陆跳转便可，
若是再写数据库操做，博文就很长很臭，之后再另外开一篇

vue.config.js文件改动

1.注释掉mock.js生成数据
2.open属性改成false，这里是为了编译启动项目时不要开两个网页

3.若是改了open那么须要在package.json的启动命令中加上 --open（只在完成编译后才启动界面），其中2和3非必须

另外须要改动的就是接口的地址

main.js注释掉mock生成数据

SpringBoot中代码

SpringBoot中代码，只须要写一个controller既能够，其余默认自动生成结构以下

@Controller
public class LoginController {
    @CrossOrigin
    @PostMapping(value = "/vue-admin-template/user/login")
    @ResponseBody
    public Map login() {
        HashMap<String, Object> response = new HashMap<>();
        HashMap<String, Object> responseData = new HashMap<>();
        responseData.put("token",1);
        response.put("code",20000);
        response.put("msg","登陆成功");
        response.put("data",responseData);
        return response;
    }

    @CrossOrigin
    @GetMapping(value = "/vue-admin-template/user/info")
    @ResponseBody
    public Map info() {
        HashMap<String, Object> responseInfo = new HashMap<>();
        HashMap<String, Object> responseData = new HashMap<>();
        responseData.put("roles","admin");
        responseData.put("name","Super admin");
        responseData.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        responseInfo.put("code",20000);
        responseInfo.put("msg","登陆成功");
        responseInfo.put("data",responseData);
        return responseInfo;
    }
}

登陆效果及请求和数据返回

请求头涉及到跨域访问前端时8081后端是8080，采起代理模式

数据返回