mock 数据 解决方案

前端工程化之--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服务器  的数据需要自己对应一个一个输入，使用这种方式完全不需要去配置，很方便，而且是完全接近真实运行环境的。（推荐这种方式，开发时很少会用到大量的数据，自己设置字段也不会很复杂）