SpringBoot+Vue前后端分离项⽬--前后端登录接⼝对接
前⾔
我们先进⾏了登录页⾯的绘制：
然后再实现了后端登录接⼝：
现在可以进⾏前后端登录接⼝对接了。
准备⼯作
1、安装 axios
在 vue 项⽬中，需要使⽤ axios 发送⽹络请求，安装命令如下：
npm install axios
安装完毕后，package.json ⽂件中，会出现 axios 的版本号，表⽰安装好了。
2、前端统⼀失败处理
使⽤ axios 发送⽹络请求时，可能会成功，也可能会失败，为了⽅便，我们使⽤ vue 中的 message 标签，进⾏⽹络请求的统⼀失败处理。
在 vue 项⽬中新建包 utils，再在其中新建 js ⽂件：api.js，写⼊如下代码：
import axios from 'axios';
import { Message } from 'element-ui';
sponse.use(success =>{
if (success.status && success.status ==200 && success.data.status ==500){
<({message: success.data.msg});
return;
}
return success.data;
}, error => {
if (sponse.status ==504 || sponse.status ==404){
<({message: "服务器被吃了o(╯□╰)o"})
}else if (sponse.status ==403){
<({message: "权限不⾜，请联系管理员！"})
}else if (sponse.status ==401){
<({message: "没有登录，请登录！"})
}else if (sponse.data.msg){
<({message: sponse.data.msg})
}else {
<({message: "未知错误..."})
}
return;
})
这⾥配置了⼀个 axios 的响应，对响应的成功或者失败进⾏统⼀处理。
3、axios ⽹络请求⽅法封装
为了⽅便在 vue 中使⽤ axios 发送⽹络请求，需要对 post 请求进⾏封装⼀下，顺便再对其他⼏个⽅法进⾏封装⼀下，同样在 api.js ⽂件中编写。
此时 api.js 的完整代码如下：
import axios from 'axios';
import { Message } from 'element-ui';
sponse.use(success =>{
if (success.status && success.status ==200 && success.data.status ==500){
<({message: success.data.msg});
return;
}
return success.data;
}, error => {
if (sponse.status ==504 || sponse.status ==404){
<({message: "服务器被吃了o(╯□╰)o"})
}else if (sponse.status ==403){
<({message: "权限不⾜，请联系管理员！"})
}else if (sponse.status ==401){
<({message: "没有登录，请登录！"})
}else if (sponse.data.msg){
<({message: sponse.data.msg})
}else {
<({message: "未知错误..."})
}
return;
})
let base = "";
// 登录时的 post 请求
// params 默认是 json 格式，需要转换成 form 表单，因为登录请求只接受 form 表单传参
export const postKeyValueRequest=(url, params) =>{
return axios({
method: "post",
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = '';
for (let i in data){
ret += encodeURIComponent(i)+"="+ encodeURIComponent(data[i]) + "&";
}
return ret;
}],
header: {
"Content-Type": "application/x-www-urlencoded"
}
})
}
export const postRequest = (url, params) => {
return axios({
method: "post",
url: `${base}${url}`,
data: params,
// contentType: "application/json;charset=UTF-8"
})
}
export const putRequest = (url, params) => {
return axios({
method: "put",
url: `${base}${url}`,
data: params,
})
}
export const getRequest = (url, params) => {
return axios({
method: "get",
url: `${base}${url}`,
data: params,
})
}
export const deleteRequest = (url, params) => {
return axios({
method: "delete",
url: `${base}${url}`,
data: params,
})
}
需要注意的是，登录⽤到的 post 请求和业务上的 post 请求有所不同。
在使⽤ SpringSecurity 作为安全框架的项⽬中，登录请求默认使⽤ form 表单进⾏传参，⽽前后端分离的项⽬中，前后端使⽤ json 格式进⾏数据交互。
所以需要将 json 数据，转换成 form 表单，再进⾏登录请求。
所以 api.js ⽂件中，有两个 post 请求⽅法：
postKeyValueRequest：登录使⽤的
postRequest ：业务上的增加需求使⽤的
最后通过Vue.prototype, 制作插件，使得在 vue 项⽬的任何地⽅，都可以⽅便调⽤这⼏个⽹络请求的⽅法。
我们需要在 main.js ⽂件中添加如下⼏⾏：
import {postKeyValueRequest} from "./utils/api";
import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {getRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";
Vue.prototype.postKeyValueRequest = postKeyValueRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.putRequest = putRequest;
Request = getRequest;
Vue.prototype.deleteRequest = deleteRequest;
这样就可以在任⼀ vue 组件中通过this.postRequest调⽤对应的 post 请求。
4、设置请求转发
springboot和过滤器由于前后端分离，端⼝不同，前端向后端发送登录请求会涉及跨域问题，需要在 vue 项⽬中配置⼀下。具体配置⽅法，可以参考⽂章：
我这⾥⽤的是 vue2 ，所以在 config 包的 index.js ⽂件中，修改如下：
proxyTable: {
'/':{
target: "localhost:8081", // 后端地址
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
},
再重启 vue 项⽬才会⽣效。
5、建⽴ home 页
登录成功后，需要跳转⾄ home 页，这⾥先简单建⼀个 home 页，具体内容⽇后再填充。
在 views 包下，新建 Home.vue 组件，完整代码如下：
<template>
<div>
<h3 >这是⾸页</h3>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style>
</style>
在 router 中引⼊ Home 页，完整代码如下：
import Vue from 'vue'
import Router from 'vue-router'
import Login from "../views/Login"
import Home from "../views/Home"
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home
}
]
})
6、发送登录请求并跳转 Home 页
之前在⽂章已经制作好了登录页。
只需要在 <el-button 按钮下，添加⼀个点击事件：@click="submitLogin", 并实现点击事件：
methods:{
submitLogin:function () {
this.$refs.loginForm.validate((valid) =>{
if (valid){
this.postKeyValueRequest("doLogin", this.loginData).then(resp =>{
if (resp){
window.sessionStorage.setItem("user", JSON.stringify(resp.obj));
this.$place("/home");
}
})
}
else {
this.$('请输⼊所有字段');
return false;
}
})
}
}
为了⽅便输⼊密码后按回车就可以登录，可以在密码那个输⼊框 <el-input 中添加@native="submitLogin"。这⾥使⽤this.$place("/home")进⾏页⾯跳转，具体可参考⽂章：
7、效果
登录页：
home 页
每天学习⼀点点，每天进步⼀点点。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。