介绍
最近搭建了一个前后端分离的项目,后端基于SSM框架,前端基于vue全家桶,数据库使用的MySQL。前后端分离的项目交互时,最重要的就是接口(API),而axios正好可以对接口进行封装,从而使前端调用后端接口时非常方便。
开始
安装
npm install axios
封装接口时我们需要用到qs插件,qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串,或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。
npm install qs
接下来在src目录下新建utils文件,并在此目录下新建base.js以及api.js。
base.js
import axios from 'axios'
import qs from 'qs'
axios.interceptors.request.use(
config => {
config.method === 'post' ?
config.data = qs.stringify({...config.data }) :
config.params = {...config.params };
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
return config
},
err => {
console.error('axios request 请求出错:', err)
return Promise.reject(err)
}
)
axios.interceptors.response.use(
response => {
if (response && response.data) {
let data = response.data || {}
if (data && (data['code'] === "201")) {
//登录失效
}
}
return response
},
err => {
console.error('axios response 请求出错:', err)
let res = {
success: false,
message: '系统错误,请重试!'
}
return Promise.resolve(res)
}
)
export default axios
api.js
这里分别是get请求和post请求(带参),这里的api是在index.js中已经配置好的后端地址。
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'ip地址/', // 后台api
changeOrigin: true, //是否跨域
https: true,
pathRewrite: {
'^/api': '' //需要rewrite的,
}
}
}
import axios from '../utils/base'
import QS from 'qs'
export const getData = data => {
return axios({
url: '/api/findAllRoomVue',
method: 'get',
})
};
export function Login(data) {
return axios({
url: '/api/loginClient',
method: 'post',
data: QS.stringify(data)
})
}
前端界面
import { getData } from "../utils/api.js";
methods: {
async getList() {
let res = await getData();
console.log(res)
this.listGood=res.data
}
}