前端工程化之--Mock解决方案   https://www.jianshu.com/p/720b12b5d120

一、为什么要使用mock数据:

  1、后端接口数据没有的时候,前端根据接口文档,使用 mock 数据模拟后端数据。(个人觉得 这里使用 mock数据并不是很重要,还要自己根据文档配数据)

  2、后端接口开发好,但是 测试环境数据有限,生产环境数据比较全。通过代理本地是可以直接使用生产环境的数据。但是如果生产环境代码有认证系统,认证通过,由服务器决定跳转到指定的 生产上的域名地址。页面没有跳转到本地的域名的地址,无法调试开发。

    但是测试环境是可以正常跳到 本地 域名页面的,这个时候可以把测试环境数据不足的接口使用MOCK数据(直接把生产上返回的数据直接复制到mock数据上就可以了,根本不需要直接配mock了)。【开发医保大数据就碰到这个情况】

  总结:mock 数据不要所有的接口都是mock数据。配了mock数据的接口,请求会被拦截,使用mock数据;没有配置的话,请求正常发出,从后端接口获取数据。【antd pro 脚手架安装的项目,就是这个逻辑的mock】


二、mockjs

1、官网: http://mockjs.com/  或  https://www.cnblogs.com/CyLee/p/6072399.html (这个是使用 script 引入mockjs使用的)

2、Mock.mock() :   https://github.com/nuysoft/Mock/wiki/Mock.mock()

  a、Mock.mock( rurl, template )     ,当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。

  b、Mock.mock( rurl, function( options ) )    ,当拦截到匹配 rurl 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。

3 、Mock.setup() : https://github.com/nuysoft/Mock/wiki/Mock.setup()

4、 Mock.Random :  https://github.com/nuysoft/Mock/wiki/Mock.Random   (Mock.Random 是一个工具类,用于生成各种随机数据。)

  这里面的随机数据基本包含可能会用到的所有数据。

5、扩展:  通过扩展,可以从自定义的数据中随机选取。(注意,新版的mockjs,对外暴露的借口只有Mock,所以Random方法挂在Mock对象下,即Mock.Random)

Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
}
})
Random.constellation()
// => "水瓶座"

总结:直接使用mockjs作为假数据,在某些地方还是很好用的。比如返回多种不一样的随机数(需要过一会就变化的动态数据)。使用mockjs自带的接口可以很方便。

三、 Postman搭建mock server (推荐)

    参考: https://1991421.cn/2018/07/29/74fadb6c/  或 https://www.cnblogs.com/ceshi2016/p/7884343.html (推荐,亲测有效)

        postman的使用方法详解  :  https://www.cnblogs.com/xiao-lei/p/7309730.html

    说明:本质上 Postman 内置的 mock server 是在 将配置好的接口以及响应数据都放到了 外网的服务器上了(类似在线mock服务)。

        这个通过断网,就没有响应数据就已经验证了。

    注意:1、Postman 的 mock server 只是域名改变,后面的数据都不变

       2、一个项目可以建立多个 mock server 域名(域名是项目为单位建立的),但是这些域名都是等价的。(可以理解为指向的同一个IP)

       3、一个接口地址可以有多个响应数据的模板(模板是以接口为单位建立的,可以把之前请求的数据作为模板)。

         至于多个响应模板,实际响应的是哪个模板怎么选,还没研究出来。暂时就让一个接口,一个响应吧。

          4、mock serve对应的接口,只是把原来接口的域名改成 mock server 域名就可以了。

       5、postman设置环境变量(如开发环境,生产环境),一般一个变量对应的是一个域名。

          如果,我们把开发环境和生产环境的域名都设置成一个变量 url ,把请求地址都用 {{ url }} + "/abc"来表示,则只要切换不同的环境就可以访问对应的接口了。

           而不需要重新输入请求地址。

四、在线mock服务

  参考 : https://www.easy-mock.com/ (easy-mock挺好用的,就是请求相对本地比较慢)

五、本地搭建  mock server 服务器 (这个比较繁琐,不适合前端使用,目前没有发现安装软件就可以的mock server 服务器)

  

六、使用 json文件模拟后台数据  (最简单,推荐这个)

  使用json文件模拟后台的数据虽然方便,但是有条件限制:

    a、只能通过get请求获取json文件,因为静态服务器处理不了post请求,post请求需要后端程序处理   https://blog.csdn.net/u012612399/article/details/50888448

    b、请求的json文件,必须放在web服务器上(静态服务器)。资源管理器 (file协议) 处理不了ajax的请求,无法给出响应的数据。

总结: mock.js        的优势在于可以通过   js 程序生成 任意数量且随机的数据(如果数据条数很多,js用一个循环就可以生成,这样就提现出优势来了);

mock服务器  的数据需要自己对应一个一个输入,使用这种方式完全不需要去配置,很方便,而且是完全接近真实运行环境的。(推荐这种方式,开发时很少会用到大量的数据,自己设置字段也不会很复杂)

05-08 07:56
查看更多