当前位置： 移动技术网 > IT编程>网页制作>CSS > 前端数据模拟Mock.js使用教程

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

2018年02月08日  | 移动技术网IT编程  | 我要评论

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')? //"y.lee@lewis.org"?
Mock.mock({email: '@email'})  ?//{ email: "v.lewis@hall.gov" }

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)

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网