介绍
最近搭建了一个前后端分离的项目，后端基于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 } }
