AI专业者开发社区 1 号成员
  •  0 回帖  •  26 浏览  •  4 个月前
   

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 开发者模式调试登录接口
login-interface
2. 查看 login 请求传参和返回的参数
login-interface-detail
从上往下看的分别是请求头，响应的数据格式，请求的参数
提取重点信息：POST 请求，URL 地址
3. 查看 info 请求传参和返回的参数
info-interface

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

vue-admin-template 登录接口代码详解#

找到 login.vue 文件，在点击登录按钮后会触发处理登录的函数
login-code
如果通过 element ui 的表单校验则会进入红色方框的代码块

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

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

login 请求详解#

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

Vuex-structure

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

进入到第二个 login 方法会发现它其实就是封装 axios 进行异步请求
login-response

你可以找到顶部 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

login-setToken

可以看到引入 js.cookies
js-cookies

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

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

登录接口请求头详解#

在项目的根目录下有 vue.config.js
vue.config.js
打开里面的这个文件，就可以看到 vue 前端的项目端口默认的端口 9528
如果在开发的环境中没有改变过端口就会默认使用这个端口

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

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

里面有一个 VUE_APP_BASE_API 的基础 URL

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

至此登录接口的详细解释就全部了解完了，下面就开始用自己简单写一个后端数据接口来进行交互，我这里用的是 SpringBoot 来进行数据交互

SpringBoot 整合 vue-admin-template 登录接口#

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

vue.config.js 文件改动#

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

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

另外需要改动的就是接口的地址
edit-api-detial

main.js 注释掉 mock 生成数据

edit-mock

SpringBoot 中代码#

SpringBoot 中代码，只需要写一个 controller 既可以，其他默认自动生成结构如下
springboot-vue-structure

Copy
@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;
    }

<span class="hljs-meta">@CrossOrigin</span>
<span class="hljs-meta">@GetMapping(value = "/vue-admin-template/user/info")</span>
<span class="hljs-meta">@ResponseBody</span>
<span class="hljs-keyword">public</span> Map <span class="hljs-title function_">info</span><span class="hljs-params">()</span> {
    HashMap&lt;String, Object&gt; responseInfo = <span class="hljs-keyword">new</span> <span class="hljs-title class_">HashMap</span>&lt;&gt;();
    HashMap&lt;String, Object&gt; responseData = <span class="hljs-keyword">new</span> <span class="hljs-title class_">HashMap</span>&lt;&gt;();
    responseData.put(<span class="hljs-string">"roles"</span>,<span class="hljs-string">"admin"</span>);
    responseData.put(<span class="hljs-string">"name"</span>,<span class="hljs-string">"Super admin"</span>);
    responseData.put(<span class="hljs-string">"avatar"</span>,<span class="hljs-string">"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"</span>);
    responseInfo.put(<span class="hljs-string">"code"</span>,<span class="hljs-number">20000</span>);
    responseInfo.put(<span class="hljs-string">"msg"</span>,<span class="hljs-string">"登录成功"</span>);
    responseInfo.put(<span class="hljs-string">"data"</span>,responseData);
    <span class="hljs-keyword">return</span> responseInfo;
}



}

登录效果及请求和数据返回
demo-result

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

数据返回
demo-result3

文章配套的源码：#

链接: https://pan.baidu.com/s/1FRwVZpH1ye4zPEAll1ER4Q 提取码: ubif