一、Json server

轻量级，将已有的json文件跑在服务器上供前端调用

npm install -g json-server

启动JSON数据服务器：

json-server --watch json文件名
或
json-server --watch json文件 --port 指定端口

此时可请求此目录下的json；每个json都要手写，意义不大；所以使用下面的mock，不但能“监听”，还能按要求模拟数据。

二、Mock 服务

• 支持 GET / POST / PUT
• 支持返回 json 格式
• 支持返回结果实时替换
• 支持按照特定参数动态返回指定内容

1.安装

npm install mockjs --save-dev

在 package.json 文件里面提现出来的区别就是，使用 --save-dev 安装的插件将被写入到 devDependencies 里面，而使用 --save 安装的插件则被写入到 dependencies 对象里面。

2.创建 Mock

在src下创建mock文件夹，在文件夹下创建index.js，以及一个示例login文件夹和下面的index.js（模块化）

//src/mock/index.js
import Mock from 'mockjs'
import { postLogin } from './login'// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
Mock.setup({timeout: '300-600'
})Mock.mock(/\/api\/login/, 'post', postLogin)
// Mock.mock('/api/login', 'post', postLogin)

// src/mock/login/index.js
// import Mock from 'mockjs' //由于此下无需模拟数据，故不引入mock
let passwords = {admin: '1',user: '1',
}let tokens = {admin: 'admin-token'
}let users = {'admin-token': {roles: ['admin'],introduction: 'I am a super administrator',avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',name: 'admin'}
}export const postLogin = response => {console.log(response, '开始执行mock')let res = JSON.parse(response.body)let token = tokens[res.name]let user = users[token]if (passwords[res.name] == res.password) {console.log("用户名密码正确")if (token) {console.log("有token",token)} else {console.log("创建新token",token)token = {}[res.name] = res.name + '-token'tokens[res.name] = tokenuser = {roles: ['admin'],introduction: 'I am a super administrator',avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',name: res.name}users[token] = user}console.log(passwords, tokens, users)return {code: 200,data: { token, user },msg: "登陆成功"}}else {console.log("用户名密码错误")return {code: 1001,msg: '用户名密码错误'}}
}

3.main.js引入

具体看你的mock文件夹放在了哪

// 引入 mock 模拟数据
import './mock' 

4.组件中axure请求

直接使用axure请求

 axios.post(url: '/api/login',{data:{ name: "user", password: "1" }}).then(res => {console.log(res);this.$router.push("/index");}).catch((error) => {console.log(error);});

使用自己封装后的axios请求(因为有了响应器拦截，所以支持失败响应)：

import { postLogin } from "@/api/login";postLogin({ name: "user", password: "1" }).then((res) => {console.log(res);this.$router.push("/index");}).catch((error) => {console.log(error);});

src下创建api，api下创建login.js

import request from '@/utils/request.js' 
export const postLogin = (data) => {return request({url: '/login',method: 'post',data})
}

src下创建utils，utils下创建request.js

import axios from 'axios'
import store from '@/store'
import router from '@/router'// create an axios instance
const service = axios.create({baseURL: "/api", // url = base url + request urltimeout: 5000, // request timeout
})//添加请求拦截器，若token存在则在请求头中加token，不存在也继续请求
service.interceptors.request.use(config => {// 每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器,没有则不带token// Authorization是必须的// if (store.getters.getToken) {//    config.headers.Authorization = store.getters.getToken;// }return config;},error => {console.log("在request拦截器显示错误：", error.response)return Promise.reject(error);}
);//respone拦截器
service.interceptors.response.use(response => {// 在status正确的情况下，code不正确则返回对应的错误信息（后台自定义为200是正确，并且将错误信息写在message），正确则返回响应// 在这里当code不是200时返回错误，否则axure catch不到return response.data.code == 200 ? response : Promise.reject(response.data);},error => { // 在status不正确的情况下，判别status状态码给出对应响应if (error.response) {console.log("在respone拦截器显示错误：", error.response)switch (error.response.status) {case 401://可能是token过期，清除它store.commit("delToken");router.replace({ //跳转到登录页面path: '/login',// 将跳转的路由path作为参数，登录成功后跳转到该路由query: { redirect: router.currentRoute.fullPath }});}}return Promise.reject(error.response);}
);
export default service