mock.js 劫持 ajax，模拟数据

http://mockjs.com/

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

（引用）
http://www.javashuo.com/article/p-dhrlxnpb-r.htmlvar tempObj = { "user|1-3": [{ 'name': '@cname', 'id|18-28': 88 } ]}; console.log(Mock.toJSONSchema(tempObj));