何为mock,我认为mock主要就是通过正常请求在后端接口进度落后的情况下，还能获取到和后端约定数据结构一样的模拟数据的一门技术，以避免后端接口进度滞后影响我们正常的开发。mock可能会涉及到4门技术，分别是服务端技术、随机生成特定格式数据的技术、请求转发、请求拦截。
引言
1. 原理
2. 常用手段分类
2.1 硬刚型
将模拟数据直接写在代码里
2.2 拦截型
mockjs
Mock.mock('/api/news', { name: 'Jack', 'age|10-20': 10 });
Charles、 Fiddler 、postman
2.3 Mock Server
node/express/json-server + mockjs/fakejs
devServer: {
// proxy: { //额外起一个服务，然后进行转发
// '/api': {
// target: 'json-server服务的ip：端口号',
// pathRewrite: { '/api': '' }
// }
// }
before: function(app) { //直接用devserver这个服务
app.get('/api/news', function(req, res) {
res.json({ msg: 'dev-before' })
})
}
}
2.4 Mock 平台
RAP/Easy-Mock
3 具体开发流程举例
在devserver里面配置before
devServer: {
before: function(app) {
app.get('www.test/api1/news', function(req, res) { //只对api1进行拦截
res.json({ mockjs产生的模拟数据 })
})
app.get('www.test/api1/price', function(req, res) { //只对api1进行拦截
res.json({ mockjs产生的模拟数据 })
})
}
}
//在/src/api/index.js里面
const getNews = axios.get(www.test/api1/news)
const getPrice = axios.get(www.test/api1/price)
export {
getNews,getPrice
}
// 由于/api1会被before拦截从而得到mock数据，没有问题
//在/src/api/index.js里面修改/api1为/api
const getNews = axios.get(www.test/api/news) //此时这个请求不会被拦截，走真实接口，而未开发完的接口请求还是走模拟数据接口
4. 展望
总结
服务热线 19970861797
