Mock.js使用

always_fly

Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简
单方便, 无侵入性, 基本覆盖常用的接口数据类型.

在我们的生产实际中，后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都
要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端
接口呢，答案是肯定的。应该有人通过编写json文件来模拟后台数据，但是很局限，比如增删改查这些接口怎
么实现呢，于是今天我们来介绍一款非常强大的插件Mock.js，可以非常方便的模拟后端的数据，也可以轻松
的实现增删改查这些操作。

大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki

安装
使用npm安装: npm install mockjs;
或直接<script src="http://mockjs.com/dist/mock.js"></script>;

数据模板格式:
'name|rule': value

属性名|生成规则: 属性值
GET请求
发起get请求:

1. 
   
2. $.ajax({
   
3.     url: 'http://test.com',
   
4.     type: 'get',
   
5.     dataType: 'json'
   
6. }).done(function(data, status, xhr) {
   
7.     console.log(JSON.stringify(data, null, 4));
   
8. });
   
9. Mock.js响应:
   
10. 
    
11. var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'};
    
12. 
    
13. // Mock响应模板
    
14. Mock.mock('http://test.com', {
    
15.     "user|1-3": [{   // 随机生成1到3个数组元素
    
16.         'name': '@cname',  // 中文名称
    
17.         'id|+1': 88,    // 属性值自动加 1，初始值为88
    
18.         'age|18-28': 0,   // 18至28以内随机整数, 0只是用来确定类型
    
19.         'birthday': '@date("yyyy-MM-dd")',  // 日期
    
20.         'city': '@city(true)',   // 中国城市
    
21.         'color': '@color',  // 16进制颜色
    
22.         'isMale|1': true,  // 布尔值
    
23.         'isFat|1-2': true,  // true的概率是1/3
    
24.         'fromObj|2': obj,  // 从obj对象中随机获取2个属性
    
25.         'fromObj2|1-3': obj,  // 从obj对象中随机获取1至3个属性
    
26.         'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
    
27.         'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
    
28.         'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组
    
29.     },{
    
30.         'gf': '@cname'
    
31.     }]
    
32. });
    
33. 可以看到结果:
    
34. 
    
35. {
    
36.     "user": [
    
37.         {
    
38.             "name": "董静",
    
39.             "id": 88,
    
40.             "age": 25,
    
41.             "birthday": "2015-04-01",
    
42.             "city": "湖南省 怀化市",
    
43.             "color": "#c0f279",
    
44.             "isMale": false,
    
45.             "isFat": false,
    
46.             "fromObj": {
    
47.                 "dd": "44",
    
48.                 "aa": "11"
    
49.             },
    
50.             "fromObj2": {
    
51.                 "bb": "22",
    
52.                 "cc": "33"
    
53.             },
    
54.             "brother": "jack",
    
55.             "sister": "jack",
    
56.             "friends": [
    
57.                 "jack",
    
58.                 "jim",
    
59.                 "jack",
    
60.                 "jim"
    
61.             ]
    
62.         },
    
63.         {
    
64.             "gf": "田杰"
    
65.         }
    
66.     ]
    
67. }
    
68. 响应时也可以是使用function, 如:
    
69. 
    
70. Mock.mock('http://test.com', 'get', function() {
    
71.     return Mock.mock({
    
72.         "user|1-3": [{
    
73.             'name': '@cname',
    
74.             'id': 88
    
75.         }
    
76.       ]
    
77.     });
    
78. });
    
79. 结果:
    
80. 
    
81. {
    
82.     "user": [
    
83.         {
    
84.             "name": "许超",
    
85.             "id": 88
    
86.         }
    
87.     ]
    
88. }
    
89. POST请求
    
90. 发起post请求:
    
91. 
    
92. $.ajax({
    
93.     url: 'http://test.com',
    
94.     type: 'post',
    
95.     dataType: 'json',
    
96.     data: {
    
97.       account: 888,
    
98.       pwd: 'abc123'
    
99.     }
    
100. }).done(function(data, status, xhr) {
     
101.     console.log(JSON.stringify(data, null, 4));
     
102. });
     
103. Mock.js响应:
     
104. 
     
105. Mock.mock('http://test.com', function(options) {
     
106.     console.log(options);
     
107.     return Mock.mock({
     
108.         "user|1-3": [{
     
109.             'name': '@cname',
     
110.             'id|+1': 88
     
111.         }
     
112.       ]
     
113.     });
     
114. });
     
115. 可以看到结果:
     
116. 
     
117. {url: "http://test.com", type: "POST", body: "account=888&pwd=abc123"}
     
118. 
     
119. {
     
120.     "user": [
     
121.         {
     
122.             "name": "曾明",
     
123.             "id": 88
     
124.         }
     
125.     ]
     
126. }
     
127. 自定义响应时间
     
128. 可以自定义设置响应时间, 可以是绝对值, 也可以是区间.
     
129. 
     
130. // 设置4秒后再响应
     
131. Mock.setup({ timeout: 4000 });  
     
132. 
     
133. // 设置1秒至4秒间响应
     
134. Mock.setup({ timeout: '1000-4000' });
     
135. 数据集
     
136. Mock.Random是一个工具类，用于生成各种格式随机数据. 有两种写法:
     
137. 
     
138. 第一种:
     
139. 
     
140. // 生成一个email格式的字符串
     
141. console.log(Mock.mock('@email'));  // 结果: s.uorjeqdou@crqfpdypt.gw
     
142. 第二种:
     
143. 
     
144. var Random = Mock.Random;
     
145. console.log(Random.email());  // 结果: r.quyppn@yit.cv
     
146. 提供的种类有:
     
147. 
     
148. Type        Method
     
149. Basic        boolean, natural, integer, float, character, string, range, date, time, datetime, now
     
150. Image        image, dataImage
     
151. Color        color
     
152. Text        paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
     
153. Name        first, last, name, cfirst, clast, cname
     
154. Web        url, domain, email, ip, tld
     
155. Address        area, region
     
156. Helper        capitalize, upper, lower, pick, shuffle
     
157. Miscellaneous        guid, id
     
158. 如果上面没有你需要的种类, 还可以自定义扩展, 如下:
     
159. 
     
160. Random.extend({
     
161.     weekday: function(date) {
     
162.         var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
     
163.         return this.pick(weekdays);
     
164.     },
     
165.     sex: function(date) {
     
166.         var sexes = ['男', '女', '中性', '未知'];
     
167.         return this.pick(sexes);
     
168.     }
     
169. });

复制代码

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

1. Mock.mock('http://123.com',{
   
2.     'name|3':'fei',//这个定义数据的模板形式下面会介绍
   
3.     'age|20-30':25,
   
4. })
   
5. 
   
6. $.ajax({
   
7.     url:'http://123.com',
   
8.     dataType:'json',
   
9.     success:function(e){
   
10.        console.log(e)
    
11.     }
    
12. })

复制代码

': 88 } ]};
console.log(Mock.toJSONSchema(tempObj));
增删改查这些操作
1.一个简单的例子：

复制代码

复制代码
在这个例子中我们截获地址为http://123.com返回的数据是一个拥有name和age的对象，那么ajax返回的数据就是Mock定义的数据，返回的数据格式如下：

{
     name:'feifeifei',
     age:26,
}
至于上面的定义模板数据的格式是什么意思，下面就给大家介绍。

2.介绍如何定义数据

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value
1.'name|min-max': string   通过重复
string
生成一个字符串，重复次数大于等于
min
，小于等于
max
例子：'lastName|2-5':'jiang', 重复jiang这个字符串 2-5 次

2.'name|count': string   通过重复
string
生成一个字符串，重复次数等于
count

例子：'firstName|3':'fei', 重复fei这个字符串 3 次，打印出来就是'feifeifei'。

3.'name|min-max': number   生成一个大于等于
min
、小于等于
max
的整数，属性值
number
只是用来确定类型。
例子：'age|20-30':25, 生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型

4.'name|+1': number   属性值自动加 1，初始值为
number

例子：'big|+1':0, 属性值自动加 1，初始值为 0，以后每次请求在前面的基础上+1

5.'name|min-max.dmin-dmax': number   生成一个浮点数，整数部分大于等于
min
、小于等于
max
，小数部分保留
dmin
到
dmax
位。
例子：'weight|100-120.2-5':110.24, 生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位

6.'name|1': boolean   随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
例子：'likeMovie|1':Boolean, 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。