前端技术栈：Mock.js 测试工具

定义

Mock 是在测试过程中，对于一些不容易构造/获取的对象，创建一个 Mock 对象来模拟对象的行为。一般多用于前后端分离的开发环境中，前端工程师用来模拟后端的 API 接口进行数据传递的工具。

Mock.js

官网：http://mockjs.com/

• 前后端分离：让前端攻城师独立于后端进行开发；
• 增加单元测试的真实性：通过随机数据，模拟各种场景；
• 开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；
• 用法简单：符合直觉的接口；
• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；
• 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。

---

免费开源工具：Fast Mock

官网：https://www.fastmock.site/#/

Fast Mock 可以让你在没有后端程序的情况下能真实地在线模拟 Ajax 请求，可以用 Fast Mock 实现项目初期纯前端的效果演示，也可以用 Fast Mock 实现开发中的数据模拟从而实现前后端分离。

一个例子：验证登录信息

{
  "code": "0000",
  "data": {
    "verifySuccess": function({_req, Mock}) {
      let body = _req.body;
      return body.username === 'admin' && body.password === '123456';
    },
    "userInfo": function({_req, Mock}) {
      let body = _req.body;
      if (body.username === 'admin' && body.password === '123456') {
        return Mock.mock({
          username: "admin",
          email: "@email",
          address: "@address"
        });
      } else {
        return null;
      }
    },
  },
  "desc": "成功"
}

---

引入 Mock 基本语法支持

基础随机内容的生成

{
  "string|1-10": "=", // 随机生成1到10个等号
  "string2|3": "=", // 随机生成2个或者三个等号
  "number|+1": 0, // 从0开始自增
  "number2|1-00.1-3": 1, // 生成一个小数，小数点前面1到10，小数点后1到3位
  "boolean": "@boolean( 1, 2, true )", // 生成boolean值 三个参数，1表示第三个参数true出现的概率，2表示false出现的概率
  "name": "@cname", // 随机生成中文姓名
  "firstname": "@cfirst", // 随机生成中文姓
  "int": "@integer(1, 10)", // 随机生成1-10的整数
  "float": "@float(1,2,3,4)", // 随机生成浮点数，四个参数分别为，整数部分的最大最小值和小数部分的最大最小值
  "range": "@range(1,100,10)", // 随机生成整数数组，三个参数为，最大最小值和加的步长
  "natural": "@natural(60, 100)", // 随机生成自然数（大于零的数）
  "email": "@email", // 邮箱
  "ip": "@ip" ,// ip
  "datatime": "@date('yy-MM-dd hh:mm:ss')" // 随机生成指定格式的时间
  // ......
}

列表数据

{
  "code": "0000",
  "data": {
    "pageNo": "@integer(1, 100)",
    "totalRecord": "@integer(100, 1000)",
    "pageSize": 10,
    "list|10": [{
      "id|+1": 1,
      "name": "@cword(10)",
      "title": "@cword(20)",
      "descript": "@csentence(20,50)",
      "price": "@float(10,100,10,100)"
    }]
  },
  "desc": "成功"
}

图片

mock.js 可以生成任意大小，任意颜色块，且用文字填充内容的图片，使我们不用到处找图片资源就能轻松实现图片的模拟展示.

{
  "code": "0000",
  "data": {
    "pageNo": "@integer(1, 100)",
    "totalRecord": "@integer(100, 1000)",
    "pageSize": 10,
    "list|10": [{
      // 参数从左到右依次为，图片尺寸，背景色，前景色（及文字颜色）,图片格式，图片中间的填充文字内容
      "image": "@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')" 
    }]
  },
  "desc": "成功"
}