在公司项目中,由于前端与后台通常一起开工,可作为jser的我,很多工作,是需要建立在后台返回数据的基础上去进行的,因此,大部分时间,代码都是在看不到效果,看不到数据的情况下编写出来,这就会导致在后台结束工作之前无法进行我的js代码的调试,无法看到js代码实现的效果。因此,公司项目在一定程度上来说,是后台程序员和jser串行而非并行进行工作,大大降低了工作效率。近日看到了mock.js这一模块,可以非常方便的生成后台假数据,大大的解决了我的问题。在此进行总结,如何使用mock.js生成假数据
Step1 在页面导入mock.js源码。
源码地址:http://mockjs.com/dist/mock.js 可以在此复制源码自己新建一个文件,放在项目中。
Step2 设置假数据格式。
比如,我现在想要生成的数据格式是这样的
其对应的 设置格式的js代码如下:
var template = {
'Id': '8f7d1859a26445df8931cd9b2d941451',
'PostTime': "2016-06-15 16:29:50",
'SourceId': "WENDANG|0D77017B23DD4F17A25D597FA656B2E4",
'SourceInfo': {
'DetailUrl': "http://192.168.105.25/krd/UserFavorites/Show?sourceID=WENDANG|0D77017B23DD4F17A25D597FA656B2E4",
'Image': "http://192.168.105.25/KRD/Hfs/GetFileStream?fileName=0D77017B23DD4F17A25D597FA656B2E4.jpg",
'Key': "WENDANG|0D77017B23DD4F17A25D597FA656B2E4",
'Title': "互联网信息采集"
},
'SourceType': 1,
'UserName': "TaskFlow"
}
Step3 生成假数据
简单形式
for (var i = 0; i < 20; i++) {
data.push(Mock.mock(template))
}
这样,data数组中就存放了20个我们生成的假数据对象。
ajax拦截生成假数据
Mock.mock(window.ApplicationPath + 'mytask/get', template);//其中window.ApplicationPath + 'mytask/get'为想要拦截的ajax的url。
然后正常通过
dataRepository.getXXX().done(function(json){
console.log(json)})//getXXX为与后台api对接的方法,即ajax请求
注:这里参数一定要为空,即dataRepository.getXXX(),而不能是dataRepository.getXXX(param),否则将无法对请求进行拦截
举个自己的demo做例子:
在这里附上一个对于生成数据格式定义的例子图片吧。图片截图来源:http://jsfiddle.net/nuysoft/Y3rg6/7/