哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？
没办法啊，资本主义的XX嘴脸啊
来吧，技术评审我俩把接口格式对一把，你先开发，我这边结束了我跟上，再联调
MMP，那又增加了我的工作量啊，每次我都要自己先把数据放在一个配置文件中，引入使用，然后对接的
时候还得删除无用代码，好气
你自己Mock接口啊，就向我们后端经常用PostMan一样模拟请求啊
Mock？？我去查查看
二：Mock的概念
1：Mock的描述
Mock接口其实就是模拟真实接口提供一个在开发环境的假数据，甚至是真实数据，在开发时，经常出现
接口内容不能够及时的跟进，导致开发过程中添加一些额外的工作量。接下来的例子全部围绕着Vue为主体介绍
前后端提前确定好通信的JSON格式之后，我们在不依赖后端进度的同时，能提供一套好的开发体验。
2：Mock能解决的问题
减少额外工作，在没有Mock接口的时候我们模拟数据的方式很烦躁，比如list列表，需要在data中声明list，去调试内容，或者引入一个mock文件，这样做导致在联调调用接口的部分代码没有写，联调成功的时候要删除很多无用代码 ---> 通过Mock只需在联调的时候把Mock接口的地址换成真实地址即可
import { mockList2 } from 'mock/list.js'; export default { data () { return { mockList: [ { "name": 'tx', "age": 12 } ], mockList2 } } }
如果采用上述的方式去模拟数据，缺少真正缺口所具备的状态，比如删除接口，有成功和失败的区分，这个模拟就很恶心了 ----> 通过Mock，可以直接通过实在的query或者其他的操作来达到同样的目的
3：Mock的几种方式以及对应的优缺点
Mock的方式
优缺点
本地Mock接口
优点：可以更加细粒度的控制mock的内容。缺点：需要增加本地的代码量，以及需要配置webapck
Mock.js实现ajax拦截
优点：数据通过mock.js会更丰富。缺点：增加一些本地配置，拦截ajax
后端Controller的静态JSON
优点：接口联调不需要修改任何东西。缺点：修改Mock内容沟通成本高，跟后端扯皮
利用FastMock去模拟Mock
优点：可控内容以及实现动态Restful api。缺点：如果项目包装axios等请求库之后需要针对接口转发做不同处理
4：本地Mock接口
该篇文章针对本地Mock接口进行操作，其他的方式会简要介绍并给出对应的链接，如果有需要，自行去查阅。
三：本地Mock周边知识
本地Mock的思想就是利用Node + express完成Restful Api。结合webpack配置项devServer同时利用Vue-cli3.0的暴露的配置利用本地express完成mock接口的添加
1、Node+Express的相关知识点，用node+express写过Restful Api的就应该知道接下来Mock怎么处理了，这里我先简要介绍一下我们需要用到的技术吧（Express的路由以及node的fs模块）
Express路由相关，具体的见文档，这里不区分请求方法，直接app.use
const express = require('express'); const app = express(); // 这样一个简单的路由就完成了，请求到/ajax-get-info的请求就能拿到对应的JSON数据 app.use('/ajax-get-info', (req, res) => { res.send({ "success": true, "code": 0, "data": {} }) });
针对不同的请求生成动态的内容，我们可以通过req.query和req.params等来生成动态内容，在express中，我们传入的body内容，在req.body中并获取不到，需要添加中间件body-parser，需要注意的是这个中间件不能在app全局路由使用，不然会影响到代码到测服的接口，利用http-proxy-middleware转发的接口，所以我们需要单独的设置一个Mock路由，针对路由级别的使用中间件，代码如下
const bodyParser = require('body-parser'); const express = require('express'); const mockRouter = express.Router(); // express middleware bodyParser for mock server // for parsing application/json mockRouter.use(bodyParser.json()); // for parsing application/x-www-form-urlencoded mockRouter.use(bodyParser.urlencoded({ extended: true })); // Api prefix named /mock app.use('/mock', mockRouter); // now you can set mock api use mockRouter mockRouter.use('/ajax-get-info', (req, res) => { // use req.body to get request body info console.log(req.body); res.send({ "success": true, "code": 0, "data": { // return dynamic JSON name: req.body.name } }) });