2分钟学会数据mock,独立于后端开发

前言

为什么说两分钟就能学会? 因为你看完这篇文章只需要两分钟。

概述

  • 相对于其他同类的框架的实现,mock.js超出了大家的意料。
  1. 基于 数据模板 生成模拟数据。
  2. 基于 HTML模板 生成模拟数据。
  3. 拦截并模拟 ajax 请求。
  • 是的,mock.js只做上述的几件事,但做的足够出色。

解决的问题

开发时,后端还没完成数据输出,前端只好写静态模拟数据。

  • 数据太长了,将数据写在js文件里,完成后挨个改url。
  • 某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。
  • 想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。
  • 特殊的格式,例如IP,随机数,图片,地址,需要去收集。
  • 超烂的破网速…

安装

安装太简单,跳过

mockjs基本语法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
注意:
属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 是可选的。
生成规则 有 7 种格式:
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。

mockjs 官网

1
http://mockjs.com/

配置模拟数据

1
2
3
4
5
Mock.mock('http://g.cn', {
'name' : '@cname',
'age|1-100': 100,
'color' : '@color'
});

发送ajax请求(jquery版)

1
2
3
4
5
6
7
$.ajax({
url: 'http://g.cn',
}).done(function(data, status, xhr){
console.log(
JSON.stringify(data, null, 4)
)
});

查看响应的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 结果1
{
"name": "Elizabeth Hall",
"age": 91,
"color": "#0e64ea"
}
// 结果2
{
"name": "Michael Taylor",
"age": 61,
"color": "#081086"
}
// 结果N ..

数据模板用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var template = {
'/admin/a1': {
code: 1,
msg: '成功',
data: {},
},
'/admin/a2': {
code: 1,
msg: '成功',
data: {
name: '@cname',
address: '@province',
email: '@email',
}
}
};
for (key in template) {
if (template.hasOwnProperty(key)) {
Mock.mock(key, template[key]);
}
}
$.ajax({
url: '/admin/a2'
})
.done(function(data, status, xhr) {
console.log('%s', '这是a2', data)
});
$.ajax({
url: '/admin/a1'
})
.done(function(data, status, xhr) {
console.log('%s', '这是a1', data)
});

高级用法(根据请求方法来返回数据)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var template = {
'/admin': function(req) {
if (req.type === 'GET') {
return {
code: 1,
msg: "接到get请求",
data: {}
}
} else if (req.type === 'POST') {
return {
code: 1,
msg: '接到post请求',
data: {}
}
}
}
}
for (key in template) {
if (template.hasOwnProperty(key)) {
Mock.mock(key, template[key]);
}
}
$.ajax({
url: '/admin',
type: 'post'
})
.done(function(data, status, xhr) {
console.log(data)
})

高级用法(根据请求参数来返回数据)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var template = {
'/admin': function(req) {
var param = str2obj(req.body);
if (param.type === '1') {
return {
code: 1,
msg: "type是1",
data: {}
}
} else if (param.type === '2') {
return {
code: 1,
msg: "type是2",
data: {}
}
}
}
}
function str2obj(str) {
var obj = {};
var reg = /(\w+)=(\w+)/ig;
str.replace(reg, function(a, b, c) {
obj[b] = c;
});
return obj;
}
for (key in template) {
if (template.hasOwnProperty(key)) {
Mock.mock(key, template[key]);
}
}
$.ajax({
url: '/admin',
type: 'post',
data: {
type: 2,
status: 0
}
})
.done(function(data, status, xhr) {
console.log(data)
})

高级用法(特殊处理get请求)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var template = {
'/admin': function(req) {
console.log(req)
var param = str2obj(req.url);
if (param.type === '1') {
return {
code: 1,
msg: "type是1",
data: {}
}
} else if (param.type === '2') {
return {
code: 1,
msg: "type是2",
data: {}
}
}
}
}
function str2obj(str) {
var obj = {};
var reg = /(\w+)=(\w+)/ig;
str.replace(reg, function(a, b, c) {
obj[b] = c;
});
return obj;
}
for (key in template) {
if (template.hasOwnProperty(key)) {
var url = new RegExp(key);
Mock.mock(url, template[key]);
}
}
$.ajax({
url: '/admin',
type: 'get',
data: {
type: 2,
status: 0
}
})
.done(function(data, status, xhr) {
console.log(data)
})