mock.js的替代方案easy-mock的使用

项目上线部署离不开测试，而测试也离不开数据的支撑。一般而言，在后端设计表结构的时候，前后端商量接口格式以及返回数据机构，尽量保证在数据库表结构设计完成没多久，一份较完整的接口文档会给到前端，前端以此进行开发。

常见的数据模拟

1. 前端本地写死数据

比如一个列表list，前端同学可能这么定义：

const list = [
	{
		id: 1,
		name: 'xxx',
		logo: 'xxx',
		age: 18,
		sex: 0,
		status: 0,
		title: 'xxxx',
		content: 'xxxx'
	}
];

这里只定义了一个，当然可以定义多个，或者拿着这一个进行循环，当然这也可以调试，可是数据单一，检测不出什么隐藏性bug，比如title和content过长，需要隐藏等，单行省略以及多行省略策略的执行，又或者数字过长，出现小数该保留几位等，那么这些边界情况很容易忽视掉从而被测试大大们无情的打回来重改。

2. 前端本地mock

既然本地造固定的假数据有问题，那使用mock没问题了吧，那当然是没问题的，mock.js的使用能够很大程度上的模拟真实数据，还原生产环境的各种情况，但问题同时也出现了，每个模块的mock你需要单独建立，这样就产生了一大堆的冗余数据，而且对多人协作也不够友好，比如开发公共模块时，很可能出现重复为同一个数据接口mock的情况。

3. 使用easy-mock

Easy Mock 是一个可视化，并且能快速生成 模拟数据 的持久化服务。这货长这样

如何使用easy-mock

按照easy-mockgithub上面的教程，一步一步创建即可。但是这里企鹅推荐大家使用镜像，dockerhub上面的easymock傻瓜式操作，当然前提是你需要懂一丢丢docker的知识，真的一丢丢就够用了，实在不会，那就给运维大哥中餐加个鸡腿，让他帮忙在服务器上面整一个。当然企鹅这里是本地搭建的，虽然只是公司局域网有效，但是也够用了。当然你使用镜像自己搭gitlab也是阔以的，大腿们都已经造好轮子了，可劲造就完了。

创建项目

创建接口

预览接口

同步Swagger

如果你们的接口文档是基于Swagger创建的，那么恭喜你，你只需要在项目设置哪里填写Swagger的接口地址，那么easy-mock会基于此创建接口实例。

function 使用

easymock其它的语法企鹅这里就不介绍了，文档里很详细，但是有一点文档里涉及function的很少，这里就简单介绍如何使用。
一个完整的接口当然包含参数等等，那么easymock如何限制参数，捕获参数呢？
答案就是使用function
我们可以在 数据编辑器 中，为某个属性指定一个 Function。在 Function 中，我们提供了 _req 对象，这使得我们可以通过请求对象编写逻辑，实现响应式数据。像这样

下面的数据就是上面的接口返回的

{
  "success": true,
  "data": {
    "default": "hah",
    "_req": {
      "method": "GET",
      "url": "/mock/599e9e962f17da111139eaf9/example/query",
      "header": {
        "connection": "keep-alive",
        "accept": "application/json, */*",
        "content-type": "application/json",
        "accept-encoding": "gzip, deflate",
        "accept-language": "zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4,ja;q=0.2",
        // ...
      }
    },
    "name": "nk_Melissa Hernandez"
  }
}

其中，Function 参数说明

比如有一个接口是这样的获取用户评论数据/get/{id}/comments/list

{
  /**
   * @desc 获取用户评论列表
   * @param {object}
   * - @param {string} id 用户id
   * - @param {number} pageNo 页码
   * - @param {number} pageSize 条数
   */
  "status": "10000",
  "data": function({
    _req,
    Mock
  }) {
    if (!_req.query.pageNo || !_req.query.pageSize) {
      return returnBody('缺少pageNo或pageSize参数')
    }
    if (!isExist(_req.params.id)) {
      return returnBody('id不正确')
    }
    return {
      "success": true,
      "data": Mock.mock({
        "total": function() {
          return this.records.length;
        },
        "records|0-10": [{
          "id": "@id",
          "name": "@cname",
          "lessname": "@cname",
          "createTime": "@datetime",
          "status|1": [1, 2, 3]
        }]
      }),
      "msg": '成功'
    }
  }
}

function isExist(target) {
  return /^\d+$/.test(target)
}

function returnBody(msg) {
  return {
    "success": false,
    "data": null,
    "msg": msg
  }
}

这里企鹅是这么写的，巧妙的利用function可以实现捕获参数从而实现真实接口的情况。
当然，easymock也是存在缺点的，比如部署有一点难度，不支持es6，接口没有划分模块，对参数捕获不友好，其内部备注说明也不支持markdown语法等等。但偶然之间逛easymock的github仓库时，发现有团队表示会对easymock进行二次开发，希望早点开源出来，大家一起贡献吧。