往期

从0到1完成一个Vue后台管理项目（一、创建项目）

从0到1完成一个Vue后台管理项目（二、使用element-ui）

从0到1完成一个Vue后台管理项目（三、使用SCSS/LESS，安装图标库）

从0到1完成一个Vue后台管理项目（四、引入axios、配置路由）

从0到1完成一个Vue后台管理项目（五、登录页（表单校验的使用和封装））

mock

我们现在要请求接口了，那么如果我们不会后端技术，不会写接口的话，我们就可以去mock一些假的数据

mock文档地址：http://mockjs.com/0.1/#Mock

在这里插入图片描述

安装mock

cnpm install mockjs

建mock的文件夹
在这里插入图片描述

mock数据

import Mock from 'mockjs';
const vehicle = Mock.mock('/api/login', 'post', (req, res) => {return {code: 200,data: [{id: 1,username: 'shaka',}],message: '登陆成功'}})
const user = Mock.mock('/api/user', 'get', (req, res) => {return {code: 200,data: {id: 1,sex: 1,age: 25,createTime: '2017-04-01'},message: '查询成功'}})
export default {vehicle,user
}

在项目的main.js中导入刚编辑的接口数据

import mockdata from "./mock"; 
//这样的话组件里就可以随意调用接口了

调用

在这里插入图片描述

token

我们封装一个专门用来操作token的方法

utils下建立setToken.js

在这里插入图片描述

在login.vue使用

在这里插入图片描述

axios二次封装

这里我们就不mock数据了，这里有真实的接口供大家使用

配置proxy

在vue.config.js配置proxy

在这里插入图片描述

service.js

我们创建一个service.js用来封装axios

在这里插入图片描述
代码

import axios from "axios";
import { getToken } from "./utils/setToken";
import { Message } from "element-ui";
const service = axios.create({baseURL: '/api',  //把前缀封装一下timeout: 3000 //请求超过这个时间就会中断
})// 添加请求拦截器
service.interceptors.request.use((config) => {// 请求前的操作(获取并设置token)config.headers['token'] = getToken('token')return config
}, (error) => {return Promise.reject(error)
})
// 添加响应拦截器
service.interceptors.response.use((response) => {// 对响应数据做些什么let { status, message } = response.dataif (status !== 200) {Message({ message: message || 'error', type: 'warning' })}return response
}, (error) => {return Promise.reject(error)
})export default service