Mock.js 模拟ajax数据 使用
2018-07-12 16:59
405 查看
Mock.js 是一款前端开发中拦截
Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki
安装
使用npm安装:
npm install mockjs;
或直接
<script src="http://mockjs.com/dist/mock.js"></script>;
数据模板格式:
'name|rule': value 属性名|生成规则: 属性值
GET请求
发起get请求:
$.ajax({ url: 'http://test.com', type: 'get', dataType: 'json' }).done(function(data, status, xhr) { console.log(JSON.stringify(data, null, 4)); });Mock.js响应:
var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'}; // Mock响应模板 Mock.mock('http://test.com', { "user|1-3": [{ // 随机生成1到3个数组元素 'name': '@cname', // 中文名称 'id|+1': 88, // 属性值自动加 1,初始值为88 'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型 'birthday': '@date("yyyy-MM-dd")', // 日期 'city': '@city(true)', // 中国城市 'color': '@color', // 16进制颜色 'isMale|1': true, // 布尔值 'isFat|1-2': true, // true的概率是1/3 'fromObj|2': obj, // 从obj对象中随机获取2个属性 'fromObj2|1-3': obj, // 从obj对象中随机获取1至3个属性 'brother|1': ['jack', 'jim'], // 随机选取 1 个元素 'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果 'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组 },{ 'gf': '@cname' }] });可以看到结果:
{ "user": [ { "name": "董静", "id": 88, "age": 25, "birthday": "2015-04-01", "city": "湖南省 怀化市", "color": "#c0f279", "isMale": false, "isFat": false, "fromObj": { "dd": "44", "aa": "11" }, "fromObj2": { "bb": "22", "cc": "33" }, "brother": "jack", "sister": "jack", "friends": [ "jack", "jim", "jack", "jim" ] }, { "gf": "田杰" } ] }响应时也可以是使用
function, 如:
Mock.mock('http://test.com', 'get', function() { return Mock.mock({ "user|1-3": [{ 'name': '@cname', 'id': 88 } ] }); });结果:
{ "user": [ { "name": "许超", "id": 88 } ] }
POST请求
发起post请求:$.ajax({ url: 'http://test.com', type: 'post', dataType: 'json', data: { account: 888, pwd: 'abc123' } }).done(function(data, status, xhr) { console.log(JSON.stringify(data, null, 4)); });Mock.js响应:
Mock.mock('http://test.com', function(options) { console.log(options); return Mock.mock({ "user|1-3": [{ 'name': '@cname', 'id|+1': 88 } ] }); });可以看到结果:
{url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"} { "user": [ { "name": "曾明", "id": 88 } ] }
自定义响应时间
可以自定义设置响应时间, 可以是绝对值, 也可以是区间.// 设置4秒后再响应 Mock.setup({ timeout: 4000 }); // 设置1秒至4秒间响应 Mock.setup({ timeout: '1000-4000' });
数据集
Mock.Random是一个工具类,用于生成各种格式随机数据. 有两种写法:第一种:
// 生成一个email格式的字符串 console.log(Mock.mock('@email')); // 结果: s.uorjeqdou@crqfpdypt.gw第二种:
var Random = Mock.Random; console.log(Random.email()); // 结果: r.quyppn@yit.cv提供的种类有:
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 |
如果上面没有你需要的种类, 还可以自定义扩展, 如下:
Random.extend({ weekday: function(date) { var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; return this.pick(weekdays); }, sex: function(date) { var sexes = ['男', '女', '中性', '未知']; return this.pick(sexes); } }); console.log(Random.weekday()); // 结果: Saturday console.log(Mock.mock('@weekday')); // 结果: 112Tuesday console.log(Random.sex()); // 结果: 男 console.log(Mock.mock('@sex')); // 结果: 未知
校验
Mock.valid(template, data): 用来校验真实数据
data是否与数据模板
template匹配
var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]}; var realData = { "user": [{ 'name': '张三', 'id': 90 } ]}; console.log(Mock.valid(tempObj, realData));
JSON Schema
Mock.toJSONSchema(template): 用来把
Mock.js风格的数据模板
template转换成
JSON Schema
var tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]}; console.log(Mock.toJSONSchema(tempObj));阅读更多
相关文章推荐
- 简单的使用mock.js模拟数据,拦截ajax请求
- AJAX数据模拟之Mock.js
- 前端数据模拟---mock.js 使用教程
- 前端数据模拟 Mock.js 使用教程
- 使用express+mockjs搭建服务器和模拟数据
- 使用mock.js提供模拟数据
- 让前端独立于后端进行开发,模拟数据生成器Mock.js
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定
- 使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
- 如何使用mock.js生成假数据
- asp.net 使用ajax请求地址接口数据 ajax返回类型是json js get post请求数据
- 使用js的ajax方法读取txt文本里面的JSON数据并追加到Html元素节点上
- Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
- 前后端分离开发——模拟数据mock.js
- 【菜鸟学WCF】使用js+ajax调用WCF以及返回数据类型的控制
- MOCK.JS 生成随机数据,拦截 Ajax 请求
- js 模拟ajax方式提交数据
- knock.js的subscribe使用 通过$.ajax(); $get();解析JSON数据
- js图片预加载---for与onload事件,图片数据模型到界面的单项绑定,使用interval模拟循环操作
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定