还在等后端接口？自己写得了
前言
前端：芜湖~静态页面写完，起飞
前端：接口能不能搞快点
后端：没空
前端：emmmmmm
迭代结束.....
老板：前端你怎么回事？搞这么慢
前端：
A：跳起来打老板
B：跳起来打后端
C：不干了
D：自己全干
E：继续挨骂
CABABABABABBABABABABBABD当然是选择
Mock.js啦（骗你的，我自己也不用）
Mock.js 的使用教程
一、什么是 Mock.js？
Mock.js 是一个用于生成随机数据的 JavaScript 库，它可以帮助开发者快速模拟后台接口返回的数据，常用于前端开发中的接口调试和数据展示。通过使用 Mock.js，前端开发者无需依赖后端接口就可以模拟真实的接口数据，提升开发效率。
Mock.js 支持的数据类型非常丰富，包括字符串、数字、日期、图片等，并且可以对数据进行自定义设置，模拟出不同的场景。
二、安装 Mock.js
Mock.js 是一个轻量级的库，可以通过 npm 或 yarn 安装：
# 使用 npm 安装
npm install mockjs --save
# 使用 yarn 安装
yarn add mockjs
如果你没有使用包管理工具，也可以直接在 HTML 页面中通过 <script> 标签引入 Mock.js：
<script src="https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock.min.js"></script>
三、Mock.js 的基本使用
Mock.js 提供了一个全局的 Mock 对象，使用 Mock 对象，你可以轻松地创建模拟数据。
1. 使用 Mock.mock() 方法
Mock.mock() 是 Mock.js 的核心方法，用于创建模拟数据。它接受一个模板作为参数，根据这个模板生成相应的模拟数据。
示例：生成简单的随机数据
const Mock = require('mockjs');
// 模拟一个简单的用户数据对象
const userData = Mock.mock({
'name': '@name', // 随机生成姓名
'age|18-60': 25, // 随机生成 18-60 之间的年龄
'email': '@email', // 随机生成邮箱地址
});
console.log(userData);
在这个例子中，@name、@email 等是 Mock.js 内置的随机数据生成规则，'age|18-60': 25 是一种范围随机生成规则，它会生成 18 到 60 之间的随机数。
模拟输出：
{
"name": "张三",
"age": 34,
"email": "example@example.com"
}
2. 模拟数组数据
Mock.js 还可以生成数组数据，支持定义数组长度以及每个元素的生成规则。
const Mock = require('mockjs');
// 模拟一个包含多个用户的数组
const userList = Mock.mock({
'users|3-5': [{ // 随机生成 3 到 5 个用户对象
'name': '@name',
'age|20-30': 25,
'email': '@email'
}]
});
console.log(userList);
模拟输出：
{
"users": [
{ "name": "李四", "age": 22, "email": "user1@example.com" },
{ "name": "王五", "age": 28, "email": "user2@example.com" },
{ "name": "赵六", "age": 25, "email": "user3@example.com" }
]
}
3. 使用自定义规则生成数据
Mock.js 还支持自定义规则，你可以定义数据生成的规则，或者通过函数来生成特定的数据。
const Mock = require('mockjs');
// 使用自定义函数生成随机数据
const customData = Mock.mock({
'customField': () => {
return Math.random().toString(36).substr(2, 8); // 返回一个随机的 8 位字符串
}
});
console.log(customData);
模拟输出：
{
"customField": "rkf7hbw8"
}
四、常用的 Mock.js 模板规则
Mock.js 提供了丰富的数据生成规则，下面列出一些常用的规则。
1. 字符串相关规则
@name：生成一个随机的中文名字。@cname：生成一个随机的中文全名。@word(min, max)：生成一个随机的单词，min和max控制长度。@sentence(min, max)：生成一个随机的句子，min和max控制单词数量。@email：生成一个随机的邮箱地址。@url：生成一个随机的 URL 地址。
2. 数字相关规则
@integer(min, max)：生成一个随机整数，min和max控制范围。@float(min, max, dmin, dmax)：生成一个随机浮点数，min和max控制范围，dmin和dmax控制小数点位数。@boolean：生成一个随机布尔值。@date(format)：生成一个随机日期，format为日期格式，默认是yyyy-MM-dd。@time(format)：生成一个随机时间。
3. 其他类型
@image(size, background, foreground)：生成一张图片，size控制图片大小，background控制背景色，foreground控制前景色。@guid：生成一个 GUID。@id：生成一个随机的身-份-证号。@province、@city、@county：生成随机的省、市、区名称。
五、Mock.js 用于模拟接口数据
Mock.js 常用于前端开发中模拟接口数据，帮助前端开发人员在没有后端接口的情况下进行开发和调试。可以通过 Mock.mock() 来拦截 HTTP 请求，并返回模拟的数据。
示例：模拟一个接口请求
假设我们有一个接口需要返回用户数据，我们可以使用 Mock.js 来模拟这个接口。
const Mock = require('mockjs');
// 模拟接口请求
Mock.mock('/api/users', 'get', {
'users|5-10': [{ // 随机生成 5 到 10 个用户数据
'id|+1': 1, // id 从 1 开始递增
'name': '@name',
'email': '@email',
'age|18-60': 25,
}]
});
console.log('接口已模拟，发送请求查看结果');
在上面的代码中，Mock.mock() 拦截了对 /api/users 的 GET 请求，并返回一个包含随机用户数据的对象。当前端代码请求 /api/users 时，Mock.js 会自动返回模拟的数据。
六、Mock.js 高级用法
1. 延迟模拟
有时你可能希望模拟网络延迟，Mock.js 支持使用 timeout 配置来延迟接口响应。
Mock.mock('/api/data', 'get', {
'message': '成功获取数据'
}).timeout = 2000; // 设置延迟时间为 2000ms (2秒)
2. 使用正则表达式生成数据
Mock.js 还支持通过正则表达式来生成数据。例如，生成一个特定格式的电话号码。
const phoneData = Mock.mock({
'phone': /^1[3-9]\d{9}$/ // 正则表达式生成一个中国大陆手机号
});
console.log(phoneData);
3. 动态修改数据
Mock.js 还允许你在数据生成后对其进行动态修改，可以通过调用 Mock.Random 对象来获取随机数据，并进一步自定义。
const random = Mock.Random;
const customData = {
name: random.name(),
email: random.email(),
phone: random.phone(),
};
console.log(customData);
七、总结
Mock.js 是一个强大的工具，可以帮助你快速生成模拟数据，尤其适用于前后端分离的开发模式，前端开发人员可以独立于后端接口进行开发和调试。Mock.js 提供了灵活的数据生成规则，支持随机数、日期、图片等多种类型，并且能够模拟 HTTP 接口请求，极大地提高了开发效率。
掌握 Mock.js 的基本用法，可以帮助你在开发过程中更加高效，减少对后端开发的依赖，提升整个项目的开发速度。
各位彦祖亦菲再见ヾ(￣▽￣)ByeBye
来源：juejin.cn/post/7442515129173262351
