1.什么是Mock.js
- 官网:http://mockjs.com/
- 文档:https://github.com/nuysoft/Mock/wiki
- Mock.js 是用于生成随机数据,拦截 Ajax 请求。
通过拦截 Ajax 请求,根据数据模板生成并返回模拟数据,让前端攻城师独立于后端进行开发,帮助编写单元
测试。 - Mock.js 作用:
- 前后端分离
让前端攻城师独立于后端进行开发。
- 增加单元测试的真实性
通过随机数据,模拟各种场景。
- 开发无侵入
不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
- 用法简单
符合直觉的接口。
- 数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
- 方便扩展
支持扩展更多数据类型,支持自定义函数和正则。
2.为什么要是用Mock.js模拟数据
前后端分离项目,前端和后端的测试人员都是根据API文档进行开发项目的,不应该直接相互依赖 ,前端人员不应该等待后端接口开发好后进行测试。所以我们可以通过模拟数据生成器,通过一定规则 (API文档)生成模拟数据接口, 提供给前端人员进行测试。
3.安装 Mock.js
- 在命令提示符窗口,用 npm 安装 mockjs
npm install mockjs --save-dev
4.入门案例
编码实现:
- 新建 mockjs-demo 目录,通过命令提示符窗口进入到该文件夹,执行下面命令进行初始化项目
npm init -y
- Mock.js 安装
npm install mockjs
-
新建 demo1.js 代码如下
const Mock = require('mockjs') const data = Mock.mock({ 'memberList|4': [ { 'id': 1, 'name': '小梦' } ] }) console.log(JSON.stringify(data, null, 2))
-
查看效果,执行命令
node demo1.js
5.语法规则
Mock.js 的语法规范包括两部分:
- 数据模板定义规范(Data Template Definition,DTD)
- 数据占位符定义规范(Data Placeholder Definition,DPD)
数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
// ‘属性名|生成规则’: 属性值
‘name|rule’: value
注意:
-
属性名 和 生成规则 之间用竖线 | 分隔。
-
生成规则 是可选的,生成规则 有 7 种格式:
- ‘name|min-max’: value
- ‘name|count’: value
- ‘name|min-max.dmin-dmax’: value
- ‘name|min-max.dcount’: value
- ‘name|count.dmin-dmax’: value
- ‘name|count.dcount’: value
- ‘name|+step’: value
-
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
-
属性值 中可以含有 @占位符 。
-
属性值 指定了最终值的初始值和类型。
属性值是字符串 String
- ‘name|count’: string
通过重复 string 生成一个字符串,重复次数等于 count 。 - ‘name|min-max’: string
通过重复 string 生成一个字符串,重复次数大于等于 min ,小于等于 max 。
属性值是数字 Number
- ‘name|+1’: number
属性值自动加 1,初始值为 number 。 - ‘name|min-max’: number
生成一个大于等于 min 、小于等于 max 的整数,属性值 number 只是用来确定类型。 - ‘name|min-max.dmin-dmax’: number
生成一个浮点数,整数部分大于等于 min 、小于等于 max ,小数部分保留 dmin 到 dmax 位。
属性值是布尔型 Boolean
- ‘name|1’: boolean
随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。 - ‘name|min-max’: value
随机生成一个布尔值,值为 value 的概率是 min / (min + max) ,值为 !value 的概率是 max / (min + max) 。
属性值是对象 Object
- ‘name|count’: object
从属性值 object 中随机选取 count 个属性。 - ‘name|min-max’: object
从属性值 object 中随机选取 min 到 max 个属性。