当前位置：首页 > news >正文

Mock.js

news 2026/2/10 20:40:52

　　在开发后端的应用中，我们使用postman来测试接口，观察和验证前后端之间的数据传递是否正常。

　　在开发前端的应用中，我们使用Mock.js来模拟后端服务，以便进行前端业务逻辑的开发和测试。

　　一般情况下，个人开发或者小团队开发是前后端分离的，各自完成后再集中组合测试，之前都是各自独立完成。虽然现在的开发者一般都是全栈（全端）的，但是提供一个完整的后端服务也不是一件容易的事情，建立与需求对应的数据库，然后使用开发工具进行开发，这些都需要时间。

　　现在的前端请求基于Axios的居多，而mock.js刚好基于XMLHttpRequest，它就是对 XMLHttpRequest 对象进行了拦截和重写来实现的提供数据的功能，它可以有效地拦截Axios请求并返回开发者所需要的数据，在前端测试完成后，删除或者注释掉mock.js提供的服务，那么就可以与后端的服务无缝集成了。

　　需要注意的是，如果是fetch请求的服务，那么mock.js并不能拦截，因为fetch并不基于XMLHttpRequest。（使用fetch-mock拦截）

　　mock.js的官网地址：Mock.js

　　一、在node中进行模拟
　　⑴新建一个目录；
　　⑵在该目录下安装mock.js；

npm install mockjs

　　⑶编写测试脚本并命名为test01.js；

//引入mock.js
const Mock=require("mockjs");
//创建模拟数据
const data=Mock.mock({'arr|1-5':[{'id|+1':1,'name':'@Cname','SFZ':generateSFZ() }]
})
//输出数据
//console.log(data);
//输出JSON格式的数据
console.log(JSON.stringify(data,null,4));function generateSFZ() {// 生成随机的省、市、县代码const regionCode = Math.floor(Math.random() * 1000).toString().padStart(6, '0');// 生成随机的出生日期const birthDate = randomDate(new Date(1970, 0, 1), new Date());// 生成随机的4位数字const randomCode = Math.floor(Math.random() * 10000).toString().padStart(4, '0');// 拼接身份证号码const idNumber = regionCode + birthDate + randomCode;return idNumber;
}// 生成指定范围内的随机日期
function randomDate(start, end) {return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toISOString().slice(0, 10).replace(/-/g, '');
}

　　⑷运行获取返回的结果；

nodemon test01.js

　　⑸得到如下数据；

{"arr": [{"id": 1,"name": "吴磊","SFZ": "000988197304198263"},{"id": 2,"name": "白秀兰","SFZ": "000988197304198263"},{"id": 3,"name": "姚秀兰","SFZ": "000988197304198263"},{"id": 4,"name": "胡霞","SFZ": "000988197304198263"},{"id": 5,"name": "高刚","SFZ": "000988197304198263"}]
}

　　二、在网页中进行模拟

　　大多数情况下，我们都是在网页中进行模拟。在网页中实现的操作比较简单，在网页中加载mock.js(将mock.js下载到本地)，然后就可以直接使用。
　　网页代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"></meta><title>MockJS</title><script src="mock.js"></script></head>
<body>    <textarea id="MyOutput" rows="10" cols="20"></textarea><button id="myButton">执行</button><script>const data=Mock.mock({'arr|1-5':[{'id|+1':1,'name':'@Cname','SFZ':generateSFZ() }]})function generateSFZ() {// 生成随机的省、市、县代码const regionCode = Math.floor(Math.random() * 1000).toString().padStart(6, '0');                // 生成随机的出生日期const birthDate = randomDate(new Date(1970, 0, 1), new Date());                // 生成随机的4位数字const randomCode = Math.floor(Math.random() * 10000).toString().padStart(4, '0');                // 拼接身份证号码const idNumber = regionCode + birthDate + randomCode;                return idNumber;}// 生成指定范围内的随机日期function randomDate(start, end) {return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toISOString().slice(0, 10).replace(/-/g, '');}// 获取按钮和多行文本框的 DOM 元素const Mybutton = document.getElementById("myButton");const Myoutput = document.getElementById("MyOutput");// 给按钮添加点击事件监听器Mybutton.addEventListener("click", function() {//将结果输出到多行文本框中Myoutput.value = JSON.stringify(data,null,4);});</script>
</body>
</html>

　　网页结果显示：

　　三、注意

　　1、拦截Axios请求，关键是请求地址的一致。

//Axios请求
axios.request({method:'get',url:"请求地址"
}).then(res=>{	console.log(res.data);	}
);//mock拦截
Mock.mock('请求地址',{'data|5':[{'name':'@cname','age':'@integer'}]
});

　　2、Mock.js的语法规范包括数据模板定义和数据占位定义。
　　　　数据模板定义：'属性名|生成规则':属性值。

　　支持函数和正则表达式很有用，根据开发需求可以使用函数或者正则表达式来完成，很方便灵活。
　　3、数据定义的占位符号@以及搭配，可以使用系统内置的名称来完成相应的数据定义，支持字符串的拼接。

　　例如下面的代码：

const Mock=require("mockjs");
const data=Mock.mock({'arr|3':[{'id':"@id",'name':"@cname",'email':"@email",'address':"@region",'integer':"@integer",'color':"@color",'datetime':"@datetime",'title':"@ctitle",'ip':"@ip",'url':"@url",}]
})

　　输出结果数据：

{"arr": [{"id": "130000199504118134","name": "侯平","email": "r.hosye@bpawnvjnn.sy","address": "西北","integer": 245581220630184,"color": "#f279a5","datetime": "1987-04-09 05:16:52","title": "技解马性石","ip": "159.228.60.56","url": "prospero://koimjk.bb/suwiijnm"},{"id": "34000020030915787X","name": "汪军","email": "b.tlkhrvmuu@htjgelx.gi","address": "华东","integer": 1558748183328488,"color": "#79c8f2","datetime": "2017-01-17 04:17:01","title": "正件做几二程","ip": "134.237.192.134","url": "cid://nounwtt.in/dppmbsr"},{"id": "450000200502184074","name": "龙娜","email": "j.uvvggjcr@ehnsid.sa","address": "华北","integer": 3322039815551336,"color": "#ebf279","datetime": "2008-03-17 01:28:18","title": "查标设民你题","ip": "97.194.44.215","url": "prospero://jbuxf.lc/qgrymgj"}]
}

　　4、带有图形界面的FastMock更简单和容易使用，地址：FastMock，可以根据个人情况下载使用。

Mock.js

相关文章：

Mock.js

【c++】list详细讲解

C#面：在.NET中类 System.Web.UI.Page 可以被继承吗？

AI：128-基于机器学习的建筑物能源消耗预测

php基础学习之可变函数（web渗透测试关键字绕过rce和回调函数）

MongoDB聚合操作符：$acos

开源PDF工具 Apache PDFBox 认识及使用(知识点+案例)

微软.NET6开发的C#特性——委托和事件

卷积神经网络的基本结构

python：使用GDAL库读取遥感影像指定行列数/经纬度坐标的像素值

Redis篇----第一篇

C语言-----用二维数组解决菱形的打印问题

.NET Core WebAPI中使用swagger版本控制，添加注释

css篇---移动端适配的方案有哪几种

一、部署Oracle

11-编写自动化测试

爱上JVM——常见问题（一）：JVM组成

C#系列-EF扩展框架AutoMapper应用实例（40）

DataX源码分析-插件机制

容器高级知识：适配器模式与 Sidecar 模式的区别

XML Group端口详解

华为云AI开发平台ModelArts

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

线程与协程

Linux离线（zip方式）安装docker

A2A JS SDK 完整教程：快速入门指南

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

AI语音助手的Python实现