Mock拦截请求URL返回模板数据

背景 ：
前后端开发依赖后端数据， 当前端页面开发完成 ，后端在没有提供前端数据的情况下 ，前端无法测试，
导致开发效率低 ，速度慢 ，为了解决这一问题 ，通过Mock模拟生成数据在不改变原有代码前提下拦截url返回数据。

开始实验

1、随机生成长度1~3的数组

// array数组
var data = Mock.mock({
'list|1-3': [{// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'id|+1': 1, // 属性 id 是一个自增数，起始值为 1，每次增 1
'name|1':"吴小明",  //字符串
"city": {
'number|1':"03443",
'cityname|1':"北京"
}
}]
})

2、拦截url 返回生成数据
Mock.mock( rurl, template )
记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

Mock.mock( '/user_list', data )

3、创建一个ajax请求

$.get('/user_list',function(response){
console.log("result->"+response);
})

4、输出结果

result->{
"list": [
{
"id": 1,
"name": "吴小明",
"city": {
"number": "03443",
"cityname": "北京"
}
},
{
"id": 2,
"name": "吴小明",
"city": {
"number": "03443",
"cityname": "北京"
}
}
]
}

其他格式

// object对象
var data = Mock.mock({
"city|2": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
})

结果 ：

result->{
"city": {
"310000": "上海市",
"320000": "江苏省"
}
}

// 生成多数组
var data = Mock.mock({
'code':0,
'result':{
'monthAmount|1-5': [{
'date': '2016-08',
'income|1000-100000':2289,
'expend|1000-100000':2000
}],
'billList|1-10': [{
'id|+1': 1,
'amount|1000-500000':500000,
'balance|1000-500000':500000,
'type|1-2':1,
'sourceId|1-5':2,
'orderNumber':'45678900443432',
'mchName':'大王杂货店',
'date':"2017-09-14 16:58:52"
}]
}
})

结果 ：

result->{
"code": 0,
"result": {
"monthAmount": [
{
"date": "2016-08",
"income": 12645,
"expend": 56038
},
{
"date": "2016-08",
"income": 30689,
"expend": 46730
}
],
"billList": [
{
"id": 1,
"amount": 191426,
"balance": 197800,
"type": 2,
"sourceId": 2,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 2,
"amount": 340886,
"balance": 432764,
"type": 1,
"sourceId": 2,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 3,
"amount": 361772,
"balance": 306595,
"type": 1,
"sourceId": 3,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 4,
"amount": 360725,
"balance": 35917,
"type": 1,
"sourceId": 3,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 5,
"amount": 182107,
"balance": 413671,
"type": 1,
"sourceId": 2,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 6,
"amount": 351296,
"balance": 42905,
"type": 1,
"sourceId": 4,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
},
{
"id": 7,
"amount": 457212,
"balance": 43885,
"type": 1,
"sourceId": 3,
"orderNumber": "45678900443432",
"mchName": "大王杂货店",
"date": "2017-09-14 16:58:52"
}
]
}
}

完整代码已提交到github ，使用的话可以直接从github上面下载运行
https://github.com/fozero/front-awesome/tree/master/mockjs

mock官方地址： http://mockjs.com/

总结 ：
在前端开发中，学会使用一些工具，能极大的提高开发效率 ， 减少重复劳动 ，意义重大。