用mock实现前端所需数据

mock.js的小demo及mock语法简述及JSON.stringify用法

[TOC]

工具:

Mock概述:

Mock.js实现的功能

  • 基于 数据模板 生成数据
  • 基于 HTML模板 生成数据
  • 拦截并模拟 Ajax请求

用法:

浏览器:

index.html:

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
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<script src="jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body');


//JQuery
//配置模拟数据
Mock.mock('http://g.cn',{
'name':'@name',
'age|1-100':100,
'color':'@color'
});

//发送Ajax请求
$.ajax({
url:'http://g.cn',
dataType:'json'
}).done(function(data,status,xhr){
console.log(
JSON.stringify(data,null,4)
)
});

</script>
</body>

</html>

页面返回值:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"list": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
}
]
}

浏览器控制台输出:

1
2
3
4
5
index.html:33 {
"name": "Deborah Williams",
"age": 2,
"color": "#ecf279"
}

语法

Mock.js 的语法规范包括两部分:

  • 数据模板定义(Data Temaplte Definition,DTD)
  • 数据占位符定义(Data Placeholder Definition,DPD)

数据模板定义 DTD

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

1
2
3
4
// 属性名   name
// 生成规则 rule
// 属性值 value
'name|rule': value

注意:

  • 属性名 和 生成规则 之间用 | 分隔。
  • 生成规则 是可选的。
  • 生成规则 有 7 种格式:
1
2
3
4
5
6
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

生成规则 的 含义 需要依赖 属性值 才能确定。

属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。

数据占位符定义 DPD

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。占位符 的格式为:

1
2
@占位符
@占位符(参数 [, 参数])

注意:

  1. 用 @ 来标识其后的字符串是 占位符。
  2. 占位符 引用的是 Mock.Random 中的方法。
  3. 通过 Mock.Random.extend() 来扩展自定义占位符。
  4. 占位符 也可以引用 数据模板 中的属性。
  5. 占位符 会优先引用 数据模板 中的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
}
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}

常用方法

Mock.mock( rurl?, rtype?, template|function(options) )

根据数据模板生成模拟数据。
参数的含义和默认值如下所示:

  • 参数 rurl:可选。表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /\/domain\/list.json/、’/domian/list.json’。
  • 参数 rtype:可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
  • 参数 template:可选。表示数据模板,可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、‘@EMAIL’。
  • 参数 function(options):可选。表示用于生成响应数据的函数。
  • 参数 options:指向本次请求的 Ajax 选项集。

Mock.mockjax(library)

覆盖(拦截) Ajax 请求,目前内置支持 jQuery、Zepto、KISSY。

Mock.Random

Mock.Random 是一个工具类,用于生成各种随机数据。Mock.Random 的方法在数据模板中称为“占位符”,引用格式为 @占位符(参数 [, 参数]) 。

Mock.tpl(input,options,helpers,partials)

基于 Handlebars、Mustache 的 HTML 模板生成模拟数据。

方法使用详情请参考mock.js文档

相关知识

JSON.stringify 方法

把一个对象通过 stringify 之后提交给后台或者存储在 Storage 里是很常用的手段。

demo:

1
2
3
4
5
6
7
var data = [
{name: "王尼玛", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data);
console.log(str_json);

这个是我们日常用法,非常简单,对吧。

比如说,我们的数据非常复杂,还有类似头像,昵称,个人签名之类的信息。
可是我保存在本地,只需要用户名,和性别,肿么破呢?
也许你会说 so easy, 遍历数据重新提取下即可。
例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
var data = [
{name: "王尼玛", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大锤", sex:1, age: 30}
];
for (var i=0, new_data=[]; i<data.length; i++) {
new_data.push({
name: data[i].name,
sex: data[i].sex
});
}
var str_json = JSON.stringify(new_data);
console.log(str_json);

确实分分钟搞定。

其实我们只需要用 stringify 第二个参数即可简单处理这种问题。

1
2
3
4
5
6
7
var data = [
{name: "王尼玛", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data, ["name", "sex"]);
console.log(str_json);

第二个参数如此强悍,为我们省去了不少麻烦。

还有第三个参数,用于格式化字符串用的。

1
2
3
4
5
6
7
8
9
var data = [
{name: "王尼玛", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data, null, "\t");
console.log(str_json);
str_json = JSON.stringify(data, ["name", "sex"], "\t");
console.log(str_json);

不想要的 key 返回 undefined 即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var data = [
{name: "王尼玛", sex:1, age: 30},
{name: "王尼美", sex:0, age: 20},
{name: "王大锤", sex:1, age: 30}
];
var str_json = JSON.stringify(data, function (k, v) {
if (k === "sex") {
return ["女", "男"][v];
} else if (k === "age" ) {
return undefined;
}
return v;
});

console.log(str_json);

JSON.stringify(str, null, 4) //表示使用四个空格缩进

参考链接:


本作品采用 知识共享署名 2.5 中国大陆许可协议 进行许可,欢迎转载,但转载请注明来自JayMo,并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文永久链接:http://jaymo666.github.io/2018/04/01/用mock实现前端所需数据/