前端数据模拟 Mock.js 使用教程
2018-02-07 10:46
936 查看
Mock.js 是一个用来生成模拟数据,拦截 AJAX 的工具。前后端分离的前端同学会经常使用。
Mock.js 官网地址:http://mockjs.com一、安装
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': valuename:属性名;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 |
五、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)
相关文章推荐
- 前端数据模拟---mock.js 使用教程
- 利用vue + koa2 + mockjs模拟数据的方法教程
- 让前端独立于后端进行开发,模拟数据生成器Mock.js
- 使用express+mockjs搭建服务器和模拟数据
- 应用express mockjs模拟前端json数据接口
- 使用mock.js提供模拟数据
- 前端数据模拟神器mock.js
- Mock.js 与 fiddler 前端模拟数据与拦截请求
- 简单的使用mock.js模拟数据,拦截ajax请求
- 前端数据可视化echarts.js使用指南
- js图片预加载---for与onload事件,图片数据模型到界面的单项绑定,使用interval模拟循环操作
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
- 用node.js搭建服务器,模拟返回json数据供客户端get,post请求使用
- 使用阿里Rap实现mock数据(模拟后台数据)
- 如何使用mock.js生成假数据
- 三分钟学会使用Chart.js,让我们在前端可视化数据
- 使用 mock.js 让前端开发与后端独立
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
- Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据