Mock.js 介绍

在我们的实际开发当中，后端的接口往往是较晚才会出来。于是前端的许多开发都要等到后端的接口出来了才能进行，这样对于前端开发来说显得十分别动。如果有什么东西可以制造一些假的测试数据来模拟后端接口的话，那样前端开发就要方便很多了。

而 Mock.js，就刚好满足了这样的需求。Mock.js 的特点就是：生成随机数据、拦截 Ajax 请求。

安装

• 下载 mock.js 文件

  https://raw.githubusercontent.com/nuysoft/Mock/refactoring/dist/mock.js

  直接右键下载就 OK 了。

• npm 安装 mock 模块

  项目路径下执行npm install mock命令。

使用

1. 生成随机数据

Mock.mock( templete )

参数 templete 表示数据模版，可以是对象或者字符串。根据数据模版来生成数据。

数据模版中的每个属性由 3 部分构成：属性名name、生成规则rule、属性值value：

"name|rule": value

说明：

• 属性名和生成规则之间用竖线|分隔。
• 生成规则是可选的。

具体示例如下：

const data = Mock.mock({
    // 随机生成一个包含 4 个对象的数组
    'list|4': [{
        // 对象的 id 属性名依次加 1
        'id|+1': 1,
        // 随机产生一个中文的姓名
        "name": '@cname()',  
        // 随机生成一个地址
        addr: '@county(true)', 
        // 随机生成一个数字 大小在 18 到 30
        'age|18-30': 1, 
        // 随机生成一个日期
        birth: '@date()', 
        // 随机生成一个整数，0/1 ，根据这个来给“男”、“女”
        gender: '@integer(0, 1)',
        // 随机生成一个邮箱
        email: '@EMAIL()', 
        // 在数组中随机找一个
        'like|1':['看书','运动','听音乐'], 
        // 1-100 中随机生成一个保留两位小数点
        'score|1-100.2':1, 
        // 随机生成一个日期
        time: "@date('yyyy-MM-dd')",
        // 用正则匹配 1 开头的 11 位数字的手机号
        mobile: /^1[3-9]\d{9}$/ 
    }]
})
console.log( data );

2. 拦截 Ajax 请求

Mock.mock( rurl, templete )

rurl表示需要拦截的 URL。当拦截到匹配rurl的 Ajax 请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。

例：

Mock.mock(/getStudent/, {
    'list|4': [{
        // 对象的 id 属性名依次加 1
        'id|+1': 1,
        // 随机产生一个中文的姓名
        "name": '@cname()',  
        // 随机生成一个地址
        addr: '@county(true)', 
        // 随机生成一个数字 大小在 18 到 60
        'age|18-60': 1, 
        // 随机生成一个日期
        birth: '@date()', 
        // 随机生成一个整数，0/1 ，根据这个来给“男” “女”
        sex: '@integer(0, 1)',
        // 随机生成一个邮箱
        email: '@EMAIL()', 
        // 在数组中随机找一个
        'like|1':['看书','运动','听音乐'],
        // 1-100 中随机生成一个保留两位小数点
        'num1|1-100.2':1, 
        // 随机生成一个邮箱
        time: "@date('yyyy-MM-dd')",
        // 用正则匹配 1 开头的 11 位数字的手机号
        mobile: /^1[0-9]{10}$/ 
    }]
})

$.ajax({
    url: "/getStudent",
    type: "GET",
    success(msg){
        console.log( JSON.parse(msg) );
    }
})