mock 数据解决方案

一、为什么要使用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自带的接口可以很方便。

6、mock数据在项目中的实践： renren-fast-vue 中mock 的处理是比较好的，推荐参考这个。

　　需求：1、可控，通过传入参数 true/false 控制某个接口的是否启用mock数据。

　　　　　2、非生产环境不会引人 mock，使用require ，动态加载js 文件。

import Mock from "mockjs";
import * as common from "./modules/common";

// tips
// 1. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.
// 2. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.
fnCreate(common, false);

/**
 * 创建mock模拟数据
 * @param {*} mod 模块
 * @param {*} isOpen 是否开启?
 */
function fnCreate(mod, isOpen = true) {
  if (isOpen) {
    for (var key in mod) {
      (res => {
        if (res.isOpen !== false) {
          Mock.mock(new RegExp(res.url), res.type, opts => {
            opts["data"] = opts.body ? JSON.parse(opts.body) : null;
            delete opts.body;
            console.log("\n");
            console.log("%cmock拦截, 请求: ", "color:blue", opts);
            console.log("%cmock拦截, 响应: ", "color:blue", res.data);
            return res.data;
          });
        }
      })(mod[key]() || {});
    }
  }
}

// common.js
import Mock from 'mockjs'

// 登录
export function login () {
  return {
    // isOpen: false,   // 这个决定某个接口是否需要mock
    url: '/sys/login',
    type: 'post',
    data: {
      'msg': 'success',
      'code': 0,
      'expire': Mock.Random.natural(60 * 60 * 1, 60 * 60 * 12),
      'token': Mock.Random.string('abcdefghijklmnopqrstuvwxyz0123456789', 32)
    }
  }
}

// 退出
export function logout () {
  return {
    // isOpen: false,
    url: '/sys/logout',
    type: 'post',
    data: {
      'msg': 'success',
      'code': 0
    }
  }
}

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