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

挥刀北上

发布于 2019-07-19 15:38:01

1K0

发布于 2019-07-19 15:38:01

文章被收录于专栏：Node.js开发Node.js开发

前端工程师在做前后端分离的项目的时，有时候接口未开发完成，或者开发环境不允许使用接口，这时候就需要前端工程师自己模拟数据了，模拟数据的方式有很多种，今天给大家介绍一款npm包，Mock.js。

首先我们要明白Mock.js的本质是拦截ajax请求，并返回约定好的数据。数据需要根据开发者的需求结合Mock.js的文档来定制，下面来看一下如何使用：

引入mock.js和JQuery

 <script src="js/jquery-1.12.4.min.js"></script>
 <script src="http://mockjs.com/dist/mock.js"></script>

创建模拟Api，这里需要结合需求按照文档编写，拦截Ajax请求，返回测试数据，这里面需要注意的是mock的第一个参数，指的是我们将来发送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请求，只要是用XMLhttprequest的实例发送的请求，都会被Mock.js拦截，诸如axios、vue-resurce等等。

看一下响应结果：

{
    "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的使用。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript