标签：his   col   自定义函数   官网   模版   gif   html   ide   接口   

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]/,
    }]
})

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

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

几种类型的应用

题外话

不一定要用它来拦截请求

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

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

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

// 别忘了引入
// 随机中文人名，不带 c 就是英文 
console.log(Mock.mock(‘@cname‘));

其他推荐

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

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

• 【官网】

• 【NEI github 官方文档】

B站视频

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

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

• 提取码：q9pm

mockjs 初识

标签：his   col   自定义函数   官网   模版   gif   html   ide   接口   

原文地址：https://www.cnblogs.com/suwanbin/p/13200521.html