玩转Mock.js：构建模拟数据的利器

会思想的苇草i2024-01-19 9:09

玩转Mock.js：构建模拟数据的利器

Mock.js基础介绍

为什么需要Mock.js

  • 对于前后端分离的项目，后端工程师的API数据迟迟没有上线；而前端工程师却没有JSON 数据进行数据填充，自己写后端模拟又太繁重；这个时候，Mock.js 就能解决这个问题，让前端工程师更加独立做自己
    • 前后端分离：让前端攻城师独立于后端进行开发
    • 开发无侵入：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据
    • 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
    • 增加单元测试的真实性：通过随机数据，模拟各种场显
    • 用法简单：符合直觉的接口
    • 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则
  • 原理：通过拦截XMLHttpRequest或fetch等网络请求，根据定义的规则返回模拟的数据。当开发者发起一个请求时，Mock.js会检查匹配的规则，并返回相应的模拟数据。
  • 官方网站为：Mock.js (mockjs.com)

安装与测试

  • Node下运行：创建Mock目录，npm instal mockjs；创建JS文件，键入官网示例代码运行即可输出对应的JSON格式的数据：
js 复制代码 
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果 将JavaScript对象转换为格式化的JSON字符串，并在控制台输出，null表示不使用自定义替换函数，4表示缩进为4个空格
console.log(JSON.stringify(data, null, 4))
  • 浏览器运行：直接在HTML文件中引入，编写代码在浏览器打开查看控制台输出：
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script>
        const data = Mock.mock({
            'list|1-10': [{
                'id|+1': 1
            }]
        });
        console.log(data);
        console.log(JSON.stringify(data, null, 4));
    </script>
</body>

</html>

Mock.js语法规范

  • Mock.js的语法规范包括两个部分：数据模板定义规范(DTD)和数据占位符定义规范(DPD)；
  • 数据模板定义的规范包含3个部分：属性名、生成规则和属性值
json 复制代码 
'属性名|生成规则' : 属性值 //'name|rule' : value
  • 其中，字符串、数值有7种生成规则：
生成规则 说明 示例
min-max 生成min~max之间的字符串 'list|1-10'
count 生成count个字符串 'list|5'
min-max.dmin-dmax 生成min~ max之间的浮点数，小数点位数在dmin ~dmax之间 'id|1-10.1-3':1
count.dcount 生成count个字符串，小数点位数为dcount 'id|8.2':1
min-max.dcount //同上
count.dmin-dmax //同上
+step 每次进行累加一个值 'id|+1':1
  • 除了以上几种规则格式，还有布尔值、对象和数组等规则
生成规则 说明 示例
布尔值 生成布尔值，1/2概率true 'flag|1':true
布尔值min-max 生成布尔值，概率为min/(min+max) 'flag|1-10':true
对象count 从对象中随机抽取count个属性 'obj|2':obj
对象min-max 从对象中随机抽取min-max属性 'obj|1-3':obj
数组1 获取1次数组 'arr|1':arr
数组count 重复count次组成新数组 'arr|2':arr
数组+1 累加 'arr|+1':arr
数组min-max 重复min-max次组成新数组 'arr|1-2':arr
  • 支持函数和正则表达式
生成规则 说明 示例
函数 支持函数 'fn|1':function
正则 支持正则 'reg|1'😕[a-z]/
  • 数据定义的占位符@，占领属性值的位置
  • 有两种方式可以输出这种随机占位符：
js 复制代码 
console.log(Mock.Random.cname());

console.log(Mock.mock('@cname'));
  • 所有占位符：
Type Method
Basic boolean,natural,integer,float,character,string,range,date,time,datetime,now
Image image,dataImage
Color color
Text paragraph,sentence,word,title,cparagraph,csentence,cword,ctitle
Name first,last,name,cfirst,clast,cname
Web url,domain,email,ip,tld
Address area,region
Helper capitalize,upper,lower,pick,shuffle
Miscellaneous guid,id
js 复制代码 
//随机中文人名，不带c就是英文
console.log(Mock.mock('@cname'));
//随机ID
console.log(Mock.mock('@id'));
//随机中文标题，不带c就是英文
console.log(Mock.mock('@ctitle'));
//随机ip地址
console.log(Mock.mock('@ip'));
//随机图片地址
console.log(Mock.mock('@image'));
//随机url地址
console.log(Mock.mock('@url'));
//随机颜色，十六进制
console.log(Mock.mock('@color'));
//随机数值
console.log(Mock.mock('@integer'));
//随机日期
console.log(Mock.mock('@datetime'));
//随机字符串
console.log(Mock.mock('@string'));
  • 如果没有想要的数据格式进行填充，可以使用扩展功能自己扩展：
js 复制代码 
//自行扩展占位符
Mock.Random.extend({
    cstore() {
        return this.pick([
            '宠物店',
            '美容店',
            '小吃店',
            '数码店',
            '快餐店'
        ]);
    }
});

console.log(Mock.mock('@cstore'));

Axios快速实践

  • axios.js是一个基于promise的HTTP库，支持浏览器·和Node环境；可以使用这个库来执行Ajax请求，获取JSON数据；可以利用axios发送get、post等一系列请求，然后得到数据
  • 安装：
  • 简单的在Node环境下实现远程获取json数据：
js 复制代码 
const axios = require('axios');

axios.get('url')
     .then(res => {
          console.log(res.data);
     })
     .catch(err => {
          console.log('错误' + err);
     });
  • 有时候需要在url地址配置参数进行数据筛选：
js 复制代码 
axios({
    method : 'get',
    url : 'url',
    params : {
        id : 1,
        status : 5
    }
}).then(res => {
    console.log(res.data);
});
  • 如果项目中产生多个异步请求，会根据耗时长短来执行；如果需要请求按指定的顺序执行，使用all()方法：
js 复制代码 
axios.all([
    axios({
        url : 'url',
        data : '1.异步'
    }),
    axios({
        url : 'url',
        data : '2.异步'
    }),
    axios({
        url : 'url',
        data : '3.异步'
    }),
]).then(axios.spread((res1, res2, res3) => {
    console.log(res1.config.data);
    console.log(res2.config.data);
    console.log(res3.config.data);
}));
  • 实例化操作与拦截操作：
js 复制代码 
const myAxios = axios.create();
myAxios.defaults.baseURL = 'url';

//请求拦截
myAxios.interceptors.request.use(config => {
    //打印，修改
    console.log('loading...');
    //config.url = '/data2.json';
    //config.timeout = 50;
    return config;
});

//响应拦截
myAxios.interceptors.response.use(response => {
    //修改返回数据的格式
    return response.data;
});

myAxios.request({
    method : 'get',
    url : '/data.json',
}).then(res => {
    console.log(res);
});

Mock拦截axios请求

Mock.mock

  • 假设axios异步请求的数据尚未上线或不全，然后通过mock请求拦截，随机生成填充的数据进行前端设计
js 复制代码 
//ajax
axios.request({
    method : 'get',
    url : 'url'
}).then(res => {
    console.log(res.data);
});

//mock拦截
Mock.mock('url', {
    'list|5-10' : [
        {
            'id|+1' : 1,
            'username' : '@cname',
            'email' : '@email',
            'gender' : '@boolean',
            'price' : '@integer'
        }
    ]
});

Mock.setup

  • 使用Mock拦截请求时，可以通过Mock.setup()配置进行特定的行为：
js 复制代码 
//响应时间为400毫秒(默认值是10-100)
Mock.setup({
    timeout: 400
})
// 响应时间介于200-600毫秒之间
Mock.setup({
    timeout: '200-600'
})
  • 注：目前，接口 Mock.setup( settings ) 仅用于配置 Ajax 请求，将来可能用于配置 Mock 的其他行为。

Mock.valid

  • 校验真实数据 data 是否与数据模板 template 匹配。
js 复制代码 
var template = {
    name: 'value1'
}
var data = {
    name: 'value2'
}

Mock.valid(template, data)

// =>
[
    {
        "path": [
            "data",
            "name"
        ],
        "type": "value",
        "actual": "value2",
        "expected": "value1",
        "action": "equal to",
        "message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
    }
]

Mock.toJSONSchema

  • 把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
js 复制代码 
const Mock = require('mockjs');

// 创建一个 Mock 对象
const mockData = Mock.mock({
    'list|1-10': [{
        'id|+1': 1,
        'name': '@cname',
        'age|18-60': 1
    }]
});

// 将 Mock 对象转换为 JSON Schema
const jsonSchema = Mock.toJSONSchema(mockData);

console.log(jsonSchema);

Mock在Vue项目实践

  • 创建好Vue项目，npm install mockjs安装mockjs包
  1. 新建.env.development，定义环境变量：
md 复制代码 
# 控制是否需要使用mock模拟的数据
MOCK = TRUE
  1. 定义接口路由，在接口中并返回mock模拟的数据；在项目文件创建mock文件夹，定义index.js文件：
js 复制代码 
const Mock = require('mockjs')

module.exports = function (app) {

    if (process.env.MOCK == 'true') {
        // node中的express框架
        // 参数1： 接口地址；参数2：服务器处理函数
        app.use('/api/userinfo', (req, res) => {
            // 随机生成一个对象
            var data = Mock.mock({
                id: '@id',
                username: '@cname',
                date: '@date(yyyy-MM-dd)',
                description: '@paragraph',
                email: '@email',
                'age|18-40': 0
            })
            // 将模拟的数据转成json格式返回给浏览器
            res.json(data)
        })
    }
}
  1. 在vue.config.js中配置devServer，在before属性中引入接口路由函数：
js 复制代码 
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // devServer在发送请求时，会先走到before指定的函数中进行处理，如果before中没有对应的接口路由，才会请求外网等
    onBeforeSetupMiddleware: require('./mock/index.js')
  }
})

3.使用axios调用该接口，获取数据:

vue 复制代码 
<template>
  <div id="app">
    <h1>Test</h1>
  </div>
</template>

<script>
import axios from "axios";

export default {
  created() {
    axios.get('/api/userinfo').then(res => {
      console.log(res);
    })
  }
}
</script>

<style></style>

总结与思维拓展

主流Mock方案对比

  • 代码侵入：

    • 直接在本地写死或者导入本地json数据文件
    • 优点：简单快捷
    • 缺点：冗余代码过多，需要一一剔除

  • 抓包工具：

    • 使用抓包工具对网络请求进行拦截，将其替换成我们需要的Mock数据
    • 优点：真实性强
    • 缺点：操作繁琐，成本较高

  • 本地服务：

    • 使用express或者koa等框架编写后端接口

    • 优点：真实，方便管理

    • 缺点：前端 === 全栈 ？

  • 浏览器插件：

    • 运行与浏览器，避免了本地部署和使用第三发的服务
    • 优点：方便快捷
    • 缺点：？
    • 注：这里笔者进行了一下实践，个人认为也是一种比较轻量级的快速上手方案，详情参考：一款好用的 Chrome Mock 插件 - 掘金 (juejin.cn)

  • 平台类：

    • 使用软件或者网页来进行接口管理模拟数据
    • 优点：全面快捷
    • 缺点：依赖后端，需要(maybe)收费

  • 请求拦截：

    • 通过拦截 XMLHttpRequest 或 fetch 等网络请求，然后根据自定义规则返回 mock 数据
    • 优点：不在依赖后端，直接拦截请求，数据真实
    • 缺点：一定的学习成本？
相关推荐
Sheldon一蓑烟雨任平生4 小时前
Vue3 依赖注入（provide 和 inject）
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
孤狼warrior5 小时前
爬虫进阶 JS逆向基础超详细，解锁加密数据
javascript·爬虫
前端炒粉5 小时前
18.矩阵置零（原地算法）
javascript·线性代数·算法·矩阵
listhi5205 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck5 小时前
基于SpringBoot+Vue的助农扶贫平台（AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博）
java·vue.js·spring boot·后端·websocket·spring
华仔啊6 小时前
这个Vue3旋转菜单组件让项目颜值提升200%！支持多种主题，拿来即用
前端·javascript·css
Sheldon一蓑烟雨任平生6 小时前
Vue3 重构待办事项（主要练习组件化）
vue.js·重构·vue3·组件化练习
CsharpDev-奶豆哥7 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
yume_sibai10 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书10 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）09Labelme从安装到标注：零基础完整指南10jdk21下载、安装（Windows、Linux、macOS）