前端数据模拟Mock.js使用教程

Mock.js 是一个用来生成模拟数据，拦截 AJAX 的工具。前后端分离的前端同学会经常使用。

一、安装

npm install --save mockjs

二、示例

import Mock from 'mockjs';

//不拦截 AJAX 的示例
let data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素?
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1?
        'id|+1': 1?
    }]?
});
?console.log(JSON.stringify(data, null, 4));

//拦截 AJAX 的示例
//会把请求'/v1/user'的 ajax 进行拦截，拦截地址那也可以写正则
Mock.mock('/v1/user', {
    'list|1-10': [{
        'id|+1': 1,
        'email': '@EMAIL'
    }]
})

三、数据模板定义规范 DTD

1. 'name | rule': value

name：属性名；rule：生成规则；value：属性值。

2. 生成规则的7种格式

(1) 'name | min-max' //生成 min-max 个

(2) 'name | count' //生成 count 个

(3) 'name | min-max.dmin-dmax'

生成一个浮点数，正数部分大于等于 min，小于等于 max，小数部分保留 dmin-dmax 位。

(4) 'name | min-max.dcount'

生成一个浮点数，正数部分大于等于 min，小于等于 max，小数部分保留 dcount 位。

(5) 'name | count.dmin-dmax'

(6) 'name | count.dcount'

(7) 'name | +step' //属性值自动加 step

3. 属性值中可以有@占位符。

属性值还制定了最终值的初始值和类型。

4. 属性值的数据类型可以是：String，Number，Boolean，Object，Array，Function，RegExp。

四、占位符

1. 占位符的位置会随记生成相对应的数据。

Mock.mock('@email')? //"[e-mail]"?
Mock.mock({email: '@email'})  ?//{ email: "[e-mail]" }

2. 占位符格式

@占位符

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

3. 占位符可选的值

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

4. 可以用 Mock.Random 扩展占位符。

五、Mockjs API

1. Mock.mock(rurl?, rtype?, template | function(options))

2. Mock.setup({timeout: 400})

表示 400 毫秒后才会返回响应的内容，值也可以是 ‘200-600’，表示介于 200-600 毫秒之间，默认值是 ‘10-100’。

3. Mock.Random

用于生成各种随记数据。

4. Mock.valid(template, data)

校验真实数据 data 是否与数据模板 template 匹配。

5. Mock.toJSONSchema(template)