Fork me on GitHub

MockJs

本节主要讲述 MockJs

安装

Node (CommonJS)

1
2
# 安装
npm install mockjs (cnpm install mockjs)
1
2
3
4
5
6
7
8
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个字符串,其中含有 1 到 5 个元素
'list|5-10': "Qian"
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

语法规范

数据模板定义规范 DTD

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

1
2
3
4
// 属性名   name
// 生成规则 rule
// 属性值 value
'name|rule': value

生成规则和示例:

1. 属性值是字符串 String

  1. 'name|min-max': string

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

  1. 'name|count': string

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

2. 属性值是数字 Number

  1. 'name|+1': number

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

???????????????????????????????????????????????????????????????????????????

  1. 'name|min-max': number

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

  1. 'name|min-max.dmin-dmax': number

    生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmindmax

3. 属性值是布尔型 Boolean

  1. 'name|1': boolean

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

  2. 'name|min-max': value

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

4. 属性值是对象 Object

  1. 'name|count': object

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

  1. 'name|min-max': object

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

5. 属性值是数组 Array

  1. 'name|1': array

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

  1. 'name|+1': array

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

  1. 'name|min-max': array

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

  1. 'name|count': array

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

6. 属性值是函数 Function

  1. 'name': function

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

7. 属性值是正则表达式 RegExp

  1. 'name': regexp

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

数据占位符定义规范 DPD

格式

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

注意事项:

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

Random方法总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
1\. Random.boolean()   随机布尔值
2\. Random.natural( min?, max? ) 随机自然数 min-max之间
3\. Random.integer( min?, max? ) 随机整数min-max之间
4\. Random.float() 随机浮点数
5\. Random.character( pool? ) 随机字母 pool对应有(lower[小写]/upper[大写]/number[数字]/symbol[符号])
6\. Random.string( pool?, min?, max? ) 随机字符串
7\. Random.range(start?, stop, step?) 随机范围数字组成的数组
8\. Random.date( format? ) 随机日期
9\. Random.time( format? ) 随机时间
10\. Random.datetime( format? ) 随机日期+时间
11\. Random.now( unit?, format? ) 当前时间
12\. Random.image( size?, background?, foreground?, format?, text? ) 图片占位
13\. Random.dataImage( size?, text? ) 生成base64格式图片
14\. Random.color() 随机颜色
15\. Random.rgb() 随机rgb颜色
16\. Random.rgba() rgba颜色值
17\. Random.paragraph( min?, max? ) 段落
18\. Random.sentence()
19\. Random.word( min?, max? )
20\. Random.title( min?, max? )
21\. Random.cparagraph( min?, max? ) 中文段落
22\. Random.csentence( min?, max? ) 中文句子
23\. Random.cword( pool?, min?, max? ) 汉字
24\. Random.ctitle( min?, max? ) 标题
25\. Random.first() 姓
26\. Random.last() 名
27\. Random.name( middle? ) 姓名
28\. Random.cfirst() 中文姓
29\. Random.clast() 中文名
30\. Random.cname() 中文姓名
31\. Random.url() 随机URL
32\. Random.domain() 随机域名
33\. Random.protocol()
34\. Random.email() 邮箱
35\. Random.region()
36\. Random.province() 省
37\. Random.city( prefix? ) 市 (prefix是否带前缀省,值为boolean)
38\. Random.county( prefix? ) 区县 (prefix是否带缀省,市)
39\. Random.increment( step? ) 递增

Mock.mock()

rurl

可选。

表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/'/domian/list.json'

#rtype)rtype

可选。

表示需要拦截的 Ajax 请求类型。例如 GETPOSTPUTDELETE 等。

#template)template

可选。

表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }'@EMAIL'

#functionoptions)function(options)

可选。

表示用于生成响应数据的函数。

Mock.mock( template )

根据数据模板生成模拟数据。

1
2
3
4
5
6
7
8
9
10
var template = {
name: "Qian",
age: 12,
sex: "mam"
}

var data = Mock.mock(template)

var mockhtml = document.querySelector(".mock");
mockhtml.innerHTML = (JSON.stringify(data, null, 4))

Mock.mock( rurl, template )

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

1
2
3
4
5
6
7
8
9
10
11
12
13
Mock.mock(/\.json/,{
'list|1-10': [{
'id': 1,
'email': '@email'
}]
})

$.ajax({
url: 'hello.json',
dataType: 'json'
}).done(function(data,status,jqXHR){
console.log(data)
})

Mock.mock( rurl, function( options ) )

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

Mock.setup()

Mock.setup( settings )

  • Mock.setup( settings )

配置拦截 Ajax 请求时的行为。支持的配置项有:timeout

#settings)settings

必选。

配置项集合。

#timeout)timeout

可选。

指定被拦截的 Ajax 请求的响应时间,单位是毫秒。值可以是正整数,例如 400,表示 400 毫秒 后才会返回响应内容;也可以是横杠 '-' 风格的字符串,例如 '200-600',表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'

1
2
3
4
5
6
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})

目前,接口 Mock.setup( settings ) 仅用于配置 Ajax 请求,将来可能用于配置 Mock 的其他行为。