Mockjs入门简介

Mock.js可生成随机数据,拦截Ajax请求,实现前后端分离的目的。Mockjs支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等数据类型,增加了单元测试的真实性,具有用法简单,方便扩展和开发无侵入的特点。下面简单介绍Mockjs的用法。

开始 & 安装

Node (CommonJS)

1
2
# 安装
npm install mockjs
1
2
3
4
5
6
7
8
9
10
11
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

语法规范

Mock.js 的语法规范包括两部分:

  • 数据模板定义规范(Data Template Definition,DTD)
  • 数据占位符定义规范(Data Placeholder Definition,DPD)

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

1
2
3
4
// 属性名   name
// 生成规则 rule
// 属性值 value
'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
  • 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
  • 属性值 中可以含有 @占位符。
  • 属性值 还指定了最终值的初始值和类型。

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。

占位符 的格式为:

1
2
@占位符
@占位符(参数 [, 参数])

注意:

  • 用 @ 来标识其后的字符串是 占位符。
  • 占位符 引用的是 Mock.Random 中的方法。
  • 通过 Mock.Random.extend() 来扩展自定义占位符。
  • 占位符 也可以引用 数据模板 中的属性。
  • 占位符 会优先引用 数据模板 中的属性。
  • 占位符 支持 相对路径 和 绝对路径。

Mock.Random

Mock.Random 是一个工具类,用于生成各种随机数据。

Mock.Random 的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) 。

1
2
3
4
5
6
7
var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

参考链接

  1. Mockjs,by nuysoft.
  2. Mockjs语法规范,by nuysoft.
  3. Mock.Random,by nuysoft.