本地模拟后端数据的第三种方法

这里介绍了第三种本地模拟后端接口的方法,使用第三方框架(mockjs),拦截ajax请求返回数据。
官网

1、引入mockjs,可以是在线地址,或者是下载到本地引入,一般在body结束标签前引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>第三方框架,mockjs拦截ajax请求返回数据</title>
</head>
<body>

<!--内容-->

<!--body结束标签前引用-->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
</body>
</html>

2、根据数据模板生成模拟数据。(一般场景配置两个参数够用了Mock.mock( rurl, template ))

  • 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 选项集,含有 url、type 和 body 三个属性。
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
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- (必选)加载 Mock -->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
$(function () {

/*
* Mock.mock( rurl, template )
* rurl:表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。
* template:表示数据模板,可以是对象或字符串
* */

// mock拦截ajax请求并返回数据
Mock.mock(/\.json/, {
'code':'000',
'message':'message信息',
'list|1-10': [{
'id|+1': 1,
'email': '@EMAIL',
'name': '@name'
}]
})


$.ajax({
url:'list.json',
contentType: 'application/json',
type: 'POST',
timeout: 5000,
dataType:'JSON',
data: JSON.stringify({schoolId: 123}),
success: function (res) {
if(res.code == 000){
console.log(res);
$('<pre>').text(JSON.stringify(res, null, 4)).appendTo('body');
}else{
alert(res.message);
}
},
Error: function (xhr, type, errorThrown) {
console.log(JSON.stringify(xhr));
console.log(type);
console.log(errorThrown);
}
});
})
</script>
  • 把html文件在浏览器里打开,出现以下格式的json数据;
  • 注意:每次打开页面或刷新一次页面数据会随机改变;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"code": "000",
"message": "message信息",
"list": [
{
"id": 1,
"email": "u.skubdwsbs@nfuzlwgd.et",
"name": "Michael Clark"
},
{
"id": 2,
"email": "u.sokjrkoja@lnmxlkx.kp",
"name": "Brian Davis"
},
{
"id": 3,
"email": "t.chpjw@jnidn.se",
"name": "Margaret Allen"
}
]
}

3、可选)配置拦截ajax请求时的行为;

  • Mock.setup( settings );
  • settings必选,支持的配置项有:timeout;
  • 指定被拦截的 Ajax 请求的响应时间,单位是毫秒。
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
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- (必选)加载 Mock -->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
$(function () {
// mock拦截ajax请求并返回数据
Mock.mock(/\.json/, {
'code':'000',
'message':'message信息',
'list|1-10': [{
'id|+1': 1,
'email': '@EMAIL',
'name': '@name'
}]
})
/*
* Mock.setup( settings )
* 配置拦截 Ajax 请求时的行为。支持的配置项有:timeout。
* settings必选。配置项集合。timeout可选。指定被拦截的 Ajax 请求的响应时间,单位是毫秒。值可以是正整数,例如 400,表示 400 毫秒 后才会返回响应内容;也可以是横杠 '-' 风格的字符串,例如 '200-600',表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。*/
Mock.setup({
timeout: 4000
})

$.ajax({
url:'list.json',
contentType: 'application/json',
type: 'POST',
timeout: 5000,
dataType:'JSON',
data: JSON.stringify({schoolId: 123}),
success: function (res) {
if(res.code == 000){
console.log(res);
$('<pre>').text(JSON.stringify(res, null, 4)).appendTo('body');
}else{
alert(res.message);
}
},
Error: function (xhr, type, errorThrown) {
console.log(JSON.stringify(xhr));
console.log(type);
console.log(errorThrown);
}
});
})
</script>

配置Mock.setup({timeout: 4000})之后网页打开4000毫秒之后才会返回数据;

Mock.Random 是一个工具类,用于生成各种随机数据。(其实上面例子中已经有使用)

  • Mock.Random 提供的完整方法(占位符)如下:
  • 基本:boolean, natural, integer, float, character, string, range,
  • 时间:date, time, datetime, now;
  • 图片:image, dataImage;
  • 颜色:color,hex,rgb,rgba,hsl;
  • 文本:paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle;
  • 名字:first, last, name, cfirst, clast, cname;
  • web:url, domain, email, ip, tld;
  • 地址:region,province,city,county,zip;
  • Helper:capitalize, upper, lower, pick, shuffle;
  • Miscellaneous:guid, id, increment;

使用方法:在模板数据中定义参数,值为@加上对应的占位符用引号引起来,比如'nowTime':'@now',请求返回的数据就是当前发送请求时的时间 “2017-09-02 11:42:06”;下面我使用了三个占位符,

1
2
3
4
5
6
7
8
9
10
Mock.mock(/\.json/, {
'code':'000',
'message':'message信息',
'list|1-10': [{
'id|+1': 1,
'email': '@EMAIL', //邮箱
'name': '@name', //名字
'time':'@now' //当前时间
}]
})

页面显示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
"code": "000",
"message": "message信息",
"list": [
{
"id": 1,
"email": "z.urorqdo@prrfhjnly.mil",
"name": "Joseph Taylor",
"time": "2017-09-02 11:42:06"
},
{
"id": 2,
"email": "m.oshsxmd@ewcolhl.na",
"name": "Mary Harris",
"time": "2017-09-02 11:42:06"
},
{
"id": 3,
"email": "l.zcbunjphx@hvdgteo.ir",
"name": "Susan Thomas",
"time": "2017-09-02 11:42:06"
}
]
}

这里简单介绍一下mockjs怎么使用的,想了解更详细的使用,请参考官方文档和官方示例,写的很详细,这里就不多说了还有Mock.valid( template, data )效验真实数据的方法,个人觉得用的不多,想了解的自行查看文档。

前2种方法快速链接:
方法一:基于node.js
方法二:请求本地json文件

-------------本文结束感谢您的阅读-------------
木槿前端不求人,有空就来坐坐。
0%