如何使用mock.js生成假数据

在公司项目中，由于前端与后台通常一起开工，可作为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/