mockjs 初识

mockjs

推荐文章：

• 【Mock.js 官方文档】
• 【正确开启Mockjs的三种姿势：入门参考（一）】

mockjs 可以在不修改既有代码的情况下拦截请求，模拟后端接口返回数据，可以根据一定的规则生成测试数据

可以通过拦截请求，模拟网络响应时间等，返回指定规则的数据，从而实现前后端独立开发（即前端工程师不需要等待后端工程师接口写好后再进行开发，也可以通过模拟数据来避免固定加数据带来的情况考虑不周）

• 默认为只有这几项、默认为文本只有这么长，导致后续布局需要跟着数据变

开始 & 安装

• 需要 Node 环境

# 安装
npm install mockjs

基本使用

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

模拟数据案例

• 参照这个快速创建模拟数据，可能来的更快一些，相比去对照规则找

// 使用 Mock
let Mock = require('mockjs');
Mock.mock('http://1.json','get',{
    // 属性 list 的值是一个数组，其中含有 1 到 3 个元素
    'list|1-3': [{
        // 属性 sid 是一个自增数，起始值为 1，每次增 1
        'sid|+1': 1,
        // 属性 userId 是一个5位的随机码
        'userId|5': '',
        // 属性 sex 是一个bool值
        "sex|1-2": true,
        // 属性 city对象 是对象值中2-4个的值
        "city|2-4": {
            "110000": "北京市",
            "120000": "天津市",
            "130000": "河北省",
            "140000": "山西省"
        },
        //属性 grade 是数组当中的一个值
        "grade|1": [
            "1年级",
            "2年级",
            "3年级"
        ],
        //属性 guid 是唯一机器码
        'guid': '@guid',
        //属性 id 是随机id
        'id': '@id',
        //属性 title 是一个随机长度的标题
        'title': '@title()',
        //属性 paragraph 是一个随机长度的段落
        'paragraph': '@cparagraph',
        //属性 image 是一个随机图片 参数分别为size, background, text
        'image': "@image('200x100', '#4A7BF7', 'Hello')",
        //属性 address 是一个随机地址
        'address': '@county(true)',
        //属性 date 是一个yyyy-MM-dd 的随机日期
        'date': '@date("yyyy-MM-dd")',
        //属性 time 是一个 size, background, text 的随机时间
        'time': '@time("HH:mm:ss")',
        //属性 url 是一个随机的url
        'url': '@url',
        //属性 email 是一个随机email
        'email': '@email',
        //属性 ip 是一个随机ip
        'ip': '@ip',
        //属性 regexp 是一个正则表达式匹配到的值 如aA1
        'regexp': /[a-z][A-Z][0-9]/,
    }]
})

官网测试数据模版（待后续补充）

• 【示例】
  • 可以通过正则表达式生成数据（批量生成测试手机号）

几种类型的应用

类型	可能的应用
Object	随机选择对象的几个属性
Function	可以自定义函数，根据函数返回值返回（this.foo,this可以直接访问已有规则）
Path	可以根据相对路径，绝对路径，使用已有规则来生成新的数据项
Date	可以生成各种格式的时间
Image	可以生成各种测试图片（可以用的在线地址，图片的自定义程度还挺高，用来占位布局再好不过了）
Color	可以生成随机颜色，rgb、rgba、hex 类型的颜色值都可以
Text	可以随机生成文本段落、指定单词数（中文、英文的都支持），在指定单词里按规则随机组合
Name	可以随机生成名字、姓、名（中英文都支持）
Web	可以生成一系列的网址等
Address	可以生成邮编、地址、省份、国家等，还可以指定是否携带上级（哪个省的什么市）
Miscellaneous	可以生成id

题外话

不一定要用它来拦截请求

在我看来，mockjs 的数据生成还是挺好用的

在后端接口未实现，或者数据库没有相对完善的数据时，可以使用 mockjs 的规则来生成一些测试数据，来检验边缘情况（也可以用在后端作为测试数据）

• 就反正比你自己去写代码生成复杂的测试数据来的可能更快些，而且更加随机些

新创建一个 html 文件，来生成随机测试数据（每次需要数据了，改下规则，打开网页让他自动生成一下就好了，从 chrome 控制台把新的测试数据复制出来）

上述代码执行的结果（基本上每次刷新，结果都不一样）

{
    "list": [
        {
            "id": 1,
            "cname": "方明",
            "phoneNum": "18949435702"
        },
        {
            "id": 2,
            "cname": "李勇",
            "phoneNum": "13534825625"
        },
        {
            "id": 3,
            "cname": "田超",
            "phoneNum": "13216235134"
        },
        {
            "id": 4,
            "cname": "陈静",
            "phoneNum": "13238971923"
        }
    ]
}

其他推荐

后续可以考虑用网易云的 NEI 平台（接口管理平台，有点类似 Yapi）

• 网易开源的，可以本地部署

• 【官网】

• 【NEI github 官方文档】

B站视频

• 链接地址：https://www.bilibili.com/video/BV1FC4y1x72d

• 百度网盘链接：https://pan.baidu.com/s/1Sy8zB-BCddNYs8LUernv_g

• 提取码：q9pm