为了前后端交流的便利,我们采用json格式定义接口的交流方法,其接口内容见博客
https://www.cnblogs.com/aminor/p/14981115.html (接口定义)
1、前后端交互
1)前端跨域配置
因为前端使用axios向后端请求信息会遇到跨域的问题,所以需要在前端进行配置。
在vue.config.js
添加如下代码:
module.exports = {
proxy: { //配置跨域
'/api': {
target: 'http://localhost:8181/', //
changOrigin: true, //允许跨域
pathRewrite: {
'^/api': ''
}
},
}
}
其中,我们的后端端口为localhost:8181,所以target的地址模拟的是真实的后台接口。
使用pathRewrite
是用于重写路径,例如 当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo
时,实际*问的地址是:http://121.121.67.254:8185/core/getData/userInfo
,因为重写/api。
此外,在与真实后端交互的时候,需要将devServer.before = require('./mock/mock-server.js')
注释或删除,防止因为mock.js而造成后端post请求出现问题。
2)请求模块编写
import {request} from "@/network/request";
export function my_request(vue, config) {
config.baseURL = 'api/';
config.timeout = 2500;
// config.baseURL = 'dev-api/';
return new Promise(((resolve, reject) => {
request(config)
.then(res => {
let code = res.data.code;
if (code === 200) {
resolve(res);
} else if (code === -1) {
let message = res.data.message;
vue.$message.error(message);
// reject(code);
}
})
.catch(err => {
vue.$message.error("服务器开小差了!")
});
}));
}
因为功能需要,所以与后端商量一套数据格式,约定code:200为返回成功,code:-1为出现错误,并由后端给出message字段在前端展示。
所以我们首先封装已有的request方法,返回new Promise,并在内部首先进行code值判断,并打印错误信息。
调用请求方法时,代码如下:
getData() {
this.loading = true;
let params = {}
return my_request(this, {
url: 'data/systemManagement/userList',
method: 'post',
data: params,
}).then(res => {
// 处理数据
}).finally(() => {
this.loading = false;
});
},
后端需要将post携带的负载,使用对象进行封装,相应代码如下
@PostMapping("/userList")
public Object queryUserList(
@RequestBody UserVo userVo
)
{
// 进行处理,前端传入的data相当于UserVo对象
return res;
}