前端数据模拟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')? //"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)
推荐阅读
-
Python的Django框架中使用SQLAlchemy操作数据库的教程
-
逍遥安卓模拟器怎么用?逍遥安卓模拟器安装及使用教程图文详解
-
火车头采集器本地编辑任务采集数据功能的图文使用教程
-
Windroye 安卓爷模拟器v2.8.0下载 及使用图文教程
-
PHP面向对象的使用教程 简单数据库连接
-
纯真ip数据库转换为(access)使用图文教程
-
iDreamPiano(模拟钢琴软件)功能设置介绍 iDreamPiano使用教程(附自制神话视频教程)
-
Sonic Visualiser(音频数据分析软件)视频使用教程
-
mock.js实现模拟生成假数据功能示例
-
SQLite Database Browser数据库查看器图文使用教程