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

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

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="http://mockjs.com/dist/mock.js"></script>
 <script>
    //模拟后台
    Mock.mock('http://api.com', {
      "user|5-10": [{
        'name': '@cname', //中文名称           
        'age|1-100': 100,   //100以内随机整数          
        'birthday': '@date("yyyy-MM-dd")',  //日期          
        'city': '@city(true)'   //中国城市
      }]
    });
   //请求数据
    $.ajax({
      url: 'http://api.com',
      dataType: 'json'
    }).done(function (data, status, xhr) {
      console.log(
        JSON.stringify(data, null, 4)
      )
    });
  </script>

查看响应

{    "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": "湖南省 衡阳市"
        }
    ]
}