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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/goodgirl1991/article/details/51700014

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

展开阅读全文

没有更多推荐了,返回首页