mock 数据 解决方案

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

1、为何要使用mock数据：

　　一、后端接口数据没有的时候，前端根据接口文档，使用 mock 数据模拟后端数据。（我的以为 这里使用 mock数据并非很重要，还要本身根据文档配数据）

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

　　　 可是测试环境是能够正常跳到 本地 域名页面的，这个时候能够把测试环境数据不足的接口使用MOCK数据（直接把生产上返回的数据直接复制到mock数据上就能够了，根本不须要直接配mock了）。【开发医保大数据就碰到这个状况】

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

---

2、mockjs

一、官网： http://mockjs.com/  或  http://www.javashuo.com/article/p-uiqatlqd-ks.html (这个是使用 script 引入mockjs使用的)

二、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()

四、 Mock.Random ：  https://github.com/nuysoft/Mock/wiki/Mock.Random   （Mock.Random 是一个工具类，用于生成各类随机数据。）

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

五、扩展：  经过扩展，能够从自定义的数据中随机选取。（注意，新版的mockjs，对外暴露的借口只有Mock，因此Random方法挂在Mock对象下，即Mock.Random）

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

Random.constellation()
// => "水瓶座"

总结：直接使用mockjs做为假数据，在某些地方仍是很好用的。好比返回多种不同的随机数（须要过一会就变化的动态数据）。使用mockjs自带的接口能够很方便。

3、 Postman搭建mock server （推荐）

   　　　　参考： https://1991421.cn/2018/07/29/74fadb6c/  或 http://www.javashuo.com/article/p-xlytufgl-np.html （推荐，亲测有效）

　　　　　　　　postman的使用方法详解  ：  http://www.javashuo.com/article/p-pcgfxfnp-hd.html

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

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

　　　　注意：一、Postman 的 mock server 只是域名改变，后面的数据都不变

　　　　　　　二、一个项目能够创建多个 mock server 域名（域名是项目为单位创建的），可是这些域名都是等价的。（能够理解为指向的同一个IP）

　　　　　　　三、一个接口地址能够有多个响应数据的模板（模板是以接口为单位创建的，能够把以前请求的数据做为模板）。

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

　　　　　　    四、mock serve对应的接口，只是把原来接口的域名改为 mock server 域名就能够了。

　　　　　　　五、postman设置环境变量（如开发环境，生产环境），通常一个变量对应的是一个域名。

　　　　　　　　  若是，咱们把开发环境和生产环境的域名都设置成一个变量 url ，把请求地址都用 {{ url }} + "/abc"来表示，则只要切换不一样的环境就能够访问对应的接口了。

　　　　　　　　   而不须要从新输入请求地址。

4、在线mock服务  

　　参考 ： https://www.easy-mock.com/ （easy-mock挺好用的，就是请求相对本地比较慢）

 

5、本地搭建  mock server 服务器 （这个比较繁琐，不适合前端使用，目前没有发现安装软件就能够的mock server 服务器）

  　　

6、使用 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服务器  的数据须要本身对应一个一个输入，使用这种方式彻底不须要去配置，很方便，并且是彻底接近真实运行环境的。（推荐这种方式，开发时不多会用到大量的数据，本身设置字段也不会很复杂）