浅谈前端mock

2024年2月11日 221次阅读 来源: Runningfyy

弁言

前端开辟常常须要守候后端的接口，严重影响了开辟效力，我们平常采纳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平台。

    原文作者：Runningfyy
    原文地址: https://segmentfault.com/a/1190000018251116
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞