使用Mock.js生成前端测试数据

概述

Mock.js是一个模拟数据生成器，可以让前端独立于后端进行开发。如果你正在开发一个前端页面，可是后台还没有完成供你调用的Api，并且数据格式已经确定，那么你就可以使用Mock.js模拟相关的接口，生成假数据来查看页面效果。Mock.js的功能：生成随机数据，拦截 Ajax 请求。

使用

• 引入mock.js和JQuery

• 创建模拟Api，拦截Ajax请求，返回测试数据

    //模拟后台
    Mock.mock('http://api.com', {
        "user|5-10": [{
            'name': '@cname',   //中文名称
            'age|1-100': 100,   //100以内随机整数
            'birthday': '@date("yyyy-MM-dd")',  //日期
            'city': '@city(true)'   //中国城市
        }]
    });

• 发送ajax请求

    //JQuery方式
    $.ajax({
        url: 'http://api.com',
        dataType: 'json'
    }).done(function(data, status, xhr) {
        console.log(
            JSON.stringify(data, null, 4)
        )
    });

    //原生ajax方式
    function myajax(url) {
            if (window.XMLHttpRequest) {
                ajax = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                try {
                    ajax = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        ajax = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }
            if (!ajax) {
                window.alert("不能创建XMLHttpRequest对象实例.");
                return false;
            }
            ajax.open("GET", url, true);
            ajax.send(null);
            ajax.onreadystatechange = function() {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    console.log(ajax.responseText);
                }
            }
        }

    myajax('http://api.com');

• 查看响应

{
    "user": [
        {
            "name": "锺丽",
            "age": 17,
            "birthday": "1983-11-01",
            "city": "内蒙古自治区 赤峰市"
        },
        {
            "name": "陈艳",
            "age": 25,
            "birthday": "1973-07-10",
            "city": "河南省 驻马店市"
        },
        {
            "name": "冯霞",
            "age": 59,
            "birthday": "2010-10-28",
            "city": "澳门特别行政区 离岛"
        },
        {
            "name": "贾秀英",
            "age": 63,
            "birthday": "1973-01-22",
            "city": "新疆维吾尔自治区 伊犁哈萨克自治州"
        },
        {
            "name": "周勇",
            "age": 34,
            "birthday": "1985-05-21",
            "city": "湖南省 衡阳市"
        }
    ]
}

总结

Mock.js所能做的当然不止这些，可以结合Node、RequireJS等框架进行使用，它包含各种各样的模拟数据，可以自定义相应的规则来生成你想要的模拟数据，可以查看Mock.js官网，了解更多Mock命令。

本文为作者kMacro原创，转载请注明来源：http://www.jianshu.com/p/8453b045544f。

作者：kMacro
链接：https://www.jianshu.com/p/8453b045544f
來源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。