vue 前端显示图片加token_前端甩锅神器：vue中的mock使用

首先声明，本文所介绍的方法，只是用于，在做好前端联调的本分工作之余，把前后端联调责任划清界限，并不用于帮后端定位问题（当然，mock也有更全面的方法促进项目的进行，小女不才，在此不提供介绍）；

跟陌生甲方的后端联调的时候……呸……叫做“实现前后端数据渲染”的时候，经常会有后端赖我们前端没联调成功；

开什么玩笑，每次过去发现都是后端问题或者权限问题；

所以就用了mock，大概操作就是根据后端提供的接口文档（没提供的打死他），在前端代码写上约定的接口名、入参、出参，在mock中写入约定的假数据，模拟整个联调过程，如果在页面中正常显示，那么后期出什么问题都不是前端调用api所致；

接下来我们就来看vue中如何使用mock；

安装mock.js

项目前端根目录cmd

npm install mockjs --save-dev

文件配置

在文件夹src中，手动创建文件夹mock，在里面创建文件mock.js，写入内容——

// 引入mockjs
const Mock = require('mockjs');

接下来是假数据结构——

// 假数据：假设这个返出假数据名为“areaHotGroup ”
const areaHotGroup = function () {return
//接口文档中的模拟数据直接整个复制到这个位置
}

然后是对应的接口——

// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/area/hot', 'GET', areaHotGroup);

main.js

在已有的文件main.js里，一堆import下面，引入mock.js——

// 引入mockjs（路径可能要调整）
require('./mock/mock.js')

如果有需要，则还需要把vuex部分的api地址改成mock的端口——

axios拦截

在文件夹src里，手动创建文件夹http，里面手动创建文件api.js，写入内容——

// 创建http文件夹，在该文件夹下创建api.js用来对axios做了拦截设置处理。import axios from 'axios'axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'// 请求拦截器
axios.interceptors.request.use(config => {const token = localStorage.getItem('userToken');if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上tokenconfig.headers.accessToken = token;}return config;
},error => {return Promise.reject(error);})// 响应拦截器
axios.interceptors.response.use(response => {return response;
},error => {return Promise.reject(error);})export default axios

搭建mock服务器

vue项目在cmd中“npm run dev”之后，在同一层同时新开一个cmd，输入——

npm i @shymean/mock-server -g

即可全局安装mock服务器；

然后输入（路径可能要改动）——

mock -p 9999 -f ./src/mock/mock.js

即可启动mock服务器；

预览数据显示情况

vue项目npm run dev的时候有给个预览地址，比如这样——

那么模拟假数据在浏览器中的预览地址则是把后面的端口“3000”改成“9999”，在最后斜杠后面加上接口名字，即可预览到有没有成功拼上mock.js中的假数据，比如这样——

这个时候再去vue项目的预览页面去查看数据展示情况就好啦；

本技术方案由军需官 @yokel 指导提供；