浅谈前端mock

xialong 发布于2019-08-05 18:10 / 2186人阅读

摘要：引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用方式来避免这个问题。可能会涉及到门技术，分别是服务端技术随机生成特定格式数据的技术请求转发请求拦截。

引言

前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用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平台。

超融合服务器专线服务设计浅谈浅谈javascript 浅谈sdwan解决方案浅谈正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60671.html

浅谈前端mock

摘要：引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用方式来避免这个问题。可能会涉及到门技术，分别是服务端技术随机生成特定格式数据的技术请求转发请求拦截。引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用mock方式来避免这个问题。本人参考了大量文章，结合自己的经验，给出自己在mock上的一些理解。 1. 原理何为mock,我认为mock主要就是通...

elina 2019-08-23 15:24 评论0 收藏0
浅谈前后端分离与实践（一）

摘要：前后端的界限是按照浏览器和服务器的划分。前后端彼此互不关联。关于作者本文部分图片段落参考文章实践中的前后端分离。淘宝前后端分离实践本文源码详见服务端代码。一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Des...

dantezhao 2019-08-01 17:46 评论0 收藏0
浅谈前后端分离与实践（一）

摘要：前后端的界限是按照浏览器和服务器的划分。前后端彼此互不关联。关于作者本文部分图片段落参考文章实践中的前后端分离。淘宝前后端分离实践本文源码详见服务端代码。一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Des...

yy13818512006 2019-08-21 16:59 评论0 收藏0
浅谈前后端分离与实践（一）

摘要：前后端的界限是按照浏览器和服务器的划分。前后端彼此互不关联。关于作者本文部分图片段落参考文章实践中的前后端分离。淘宝前后端分离实践本文源码详见服务端代码。一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Des...

hearaway 2019-08-05 12:11 评论0 收藏0
浅谈easy-mock 最好的备胎没有之一

摘要：引言今天我们来聊聊，随着互联网发展，这两年前后端分离的开发模式兴起，也从以住的幕后走上了台面，让更多的人而得知，以前传统的开发方式大多局限在后端人员接触较多一些。 showImg(https://segmentfault.com/img/bVbi8JE?w=1008&h=298); 引言　　今天我们来聊聊Mock，随着互联网发展，这两年前后端分离的开发模式兴起，Mock也从以住的幕...

cyrils 2019-08-23 12:50 评论0 收藏0