引言
前端开发经常需要等待后端的接口,严重影响了开发效率,我们一般采用mock方式来避免这个问题。本人参考了大量文章,结合自己的经验,给出自己在mock上的一些理解。
1. 原理
何为mock,我认为mock主要就是通过正常请求
在后端接口进度落后
的情况下,还
能获取到和后端约定数据结构一样的模拟数据
的一门技术,以避免后端接口进度滞后影响我们正常的开发。
mock可能会涉及到4门技术,分别是服务端技术、随机生成特定格式数据的技术、请求转发、请求拦截。
2. 常用手段分类
2.1 硬刚型
将模拟数据直接写在代码里
优点:简单暴力
缺点:改变了代码原有逻辑,且耦合度高,当后端接口完成的时候还需要再改代码。
2.2 拦截型
mockjs
mockjs通过改写ajax函数来实现拦截请求,同时它还能伪造各种随机数据,通过mockjs我们能很方便的实现简单的mock效果,
优点:简单方便
缺点:在chrome里面没法看请求(查看传递的参数是否正确),不支持fetch(需要额外调用插件)
Mock.mock('/api/news', { name: 'Jack', 'age|10-20': 10 });
Charles、 Fiddler 、postman
利用 Charles、 Fiddler 等代理工具拦截请求
优点:有真实的请求
缺点:配置上优点复杂
2.3 Mock Server
node/express/json-server + mockjs/fakejs
Mock Server简单的说就是起一个服务器,服务器提供接口产生相应的mock数据
前者用来起服务,后者用来产生模拟数据。
json-server是对express的一个封装,用于快速构建服务器而不用写后台代码这里重点注意一下,对于一般的项目我们可以用json-server起一个服务,但是如果是在vue-cli之类的webpack生成的项目里面,实际上webpack已经帮我们起了一个服务,我们可以在webpack的devServer.before里面进行配置。当然你要不嫌麻烦,可以用proxy代理到自己到json-server起的服务上....
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
对于小型开发团队的话,Mock Server或者mockjs完全够了,因为此时前后端沟通代价比较小。但是如果是大型开发团队呢,这时候,文档的编写,接口的变更,通知到每一个人,代价就比较大了。
这也是RAP,Easy-Mock这类mock平台由来的原因。
优点:接口代理,协同编辑,mock数据,智能提醒,自动生成文档
缺点:你要说服后端使用它
3 具体开发流程举例
这里就假设我们用devServer.before + mock.js来开发
假设后端要开发两个接口 www.test/api/news/, www.test/api/price/
3.1 后端开没开动
我们在devServer虚拟两个接口
//在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数据,没有问题
3.2 后端开发了部分接口,比如www.test/api/news/开发完毕
//在/src/api/index.js里面修改/api1为/api
const getNews = axios.get(www.test/api/news) //此时这个请求不会被拦截,走真实接口,而未开发完的接口请求还是走模拟数据接口
3.3 后端全部开发完毕
全部将/api1修改为/api,同时注释掉devserver.before
当然,这个拦截功能也可以直接用mockjs来做,步骤差不多,但是更简单
4. 展望
现阶段暂时无法接口联动
,也就是对于前端来说,接口变更或者开发完成,还需要手动在ide上修改代码。如果能够开发一套插件,前端只需初始编写一次代码,后面ide自动同步接口变化,然后自动修改代码,不是爽歪歪!
总结
今天关于前端mock的介绍就到这里,具体的代码实现可以自行google。由于作者刚参加工作,水平有限,如果哪里写到不对,请评论指出。
中小型项目,推荐使用mockjs或者devServer.before,如果项目比较大,多人协作,还是建议使用在线mock平台。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。