Mock.js初体验——模拟前后端交互

1.png

虽然很早之前就已经知道mock,但是从未使用,一般自己构造几个数据也就得了。这次在做项目的时候,想想学学新东西,也是极好的,就用了一下,确实是个非常好上手的好东西呀。

直接上实例

用法很简单,原理就是你使用ajax请求时,会进行拦截,然后根据你的配置,给你返回构造好的随机数据。啦啦啦,不多说。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="js/jquery.min.js"></script>
<script src="js/mock-min.js"></script>
<script>
Mock.mock(/\.json/,{
'name|3': [{
// 'id|+1':1,
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}]
})
$.ajax({
url:"hello.json",
dataType:"JSON",
success:function (data) {
console.log(data);
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body');
}
})
</script>

生成结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"name": [
{
"first": "Margaret",
"middle": "Dorothy",
"last": "Moore",
"full": "Margaret Dorothy Moore"
},
{
"first": "Anna",
"middle": "Jose",
"last": "Clark",
"full": "Anna Jose Clark"
},
{
"first": "Thomas",
"middle": "Matthew",
"last": "Taylor",
"full": "Thomas Matthew Taylor"
}
]
}

数据模板

这里也不总结了,官网非常非常详细,猛戳这里