Mock.js 的使用

212 阅读4分钟

安装

npm install mockjs 
#
yarn add mockjs

语法规范

数据模板定义规范 DTD
// 属性名 name
// 生成规则 rule
// 属性值 value
"name|rule": value

生成规则可选,其7种格式:

  1. "name|min-max": value
  2. "name|count": value
  3. "name|min-max.dmin-dmax": value
  4. "name|min-max.dcount": value
  5. "name|count.dmin-dmax": value
  6. "name|count.dcount": value
  7. "name|+step": value

生成规则的含义,需要依赖属性值的类型才能确定。

  1. 属性值种可以含有 @占位符
  2. 属性值还指定了最终值得初始值和类型

生成规则:

  1. 属性值是 String

    1. "name|min-max": string

      通过重复 string 生成一个字符串,重复次数大于等于min, 小于等于max。

    2. "name|count": string

      通过重复 string 生成一个字符串,重复次数等于 count。

  2. 属性值是 Number

    1. "name|+1": number

      属性值自动加1, 初始值为number。

    2. "name|min-max": number

      生成一个大于等于min, 小于等于max的整数,属性值number只是用于确定类型。

    3. "name|min-max.dmin-dmax": number

      生成一个浮点数,整数部分大于等于min, 小于等于max,小数部分保留dmin 到 dmax 位。

  3. 属性值是 Boolean

    1. "name|1": boolean

      随机生成一个布尔值,true的概率为 1/2, false 亦然。

    2. "name| min-max": value

      随机生成一个布尔值,值为value的概率为 min/(min+max) , 值为!value的概率为 max/(min+max)。

  4. 属性值是 Object

    1. "name|count": object

      从属性值 object 中随机选取 count 个属性。

    2. "name|min-max": object

      从属性值 object 中随机选取 min 到 max 个属性。

  5. 属性值是 Array

    1. "name|1": array

      从属性值 array 中随机选取1个元素,作为最终值。

    2. "name|+1": array

      从属性值 array 中顺序选取1个元素,作为最终值。

    3. "name|min-max": array

      通过重复属性值 array 生成一个新数组,重复次数大于等于min, 小于等于max。

    4. "name|min-max": array

      通过重复属性值 array 生成一个新数组,重复次数为count。

  6. 属性值是 Function

    1. "name": function

      执行函数 function,取其返回值最为最终的属性值,函数的上下文为属性 "name" 所在的对象。

  7. 属性值是 RegExp

    1. "name": regexp

      根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

数据占位符定义规范 DPD

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

占位符格式:

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

注意:

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

Mock.mock()

// 根据数据模板生成模拟数据
Mock.mock(template)
# 或
Mock.mock(rurl?, rtype?, template|function(options))

// 记录数据模板。
// 当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
Mock.mock(rurl, template)

// 记录用于生成响应数据的函数。
// 当拦截到匹配 rurl 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
Mock.mock( rurl, function( options ) )

// 记录数据模板。
// 当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
Mock.mock( rurl, rtype, template )

// 记录用于生成响应数据的函数。
// 当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
Mock.mock( rurl, rtype, function( options ) )

// options: 指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性

Mock.setup()

配置拦截 Ajax 请求时的行为。指定被拦截的 Ajax 请求的响应时间,单位是毫秒。

Mock.setup({
	timeout: 400
})
Mock.setup({
	timeout: '200-600'
})

Mock.Random

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

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

var Random = Mock.Random()
Random.email()					// => 'n.clark@mailler.io'
Mock.mock('@email')				// => 'y.lee@qq.com'
Mock.mock({email: '@email'})	// => { email: '123@wang.com'}

Mock.valid()

Mock.valid(template, data): 校验真实数据 data 是否与数据模板 template 匹配。

Mock.toJSONSchema()

Mock.toJSONSchema( template ): 把 Mock.js 风格的数据模板 template 转换成 JSON Schema。

官网地址:github.com/nuysoft/Moc…