🎬前言
作为一名前端开发者，你一定经历过这样的场景：页面写好了，逻辑也完成了，就等着后端接口联调了，结果后端同学说："接口还没好，你再等等..." 😫 这时候你的选择是：
- 干等着，刷会微博摸会鱼
- 自己硬编码一些假数据先测试
- 用Mock.js优雅地模拟数据
如果你选择了3，那么恭喜你找到了提升开发效率的捷径！今天我们就来聊聊这个前端开发者的"救星"——Mock.js。
🤔什么是Mock.js？
Mock.js是一个前端数据模拟库，它能帮助开发者在前端独立于后端进行开发。简单来说，它让你能在后端接口还没完成时，自己"造"出符合要求的接口数据，而且这些数据看起来跟真的一模一样！
❓为什么需要Mock.js？
1. 前后端并行开发
不用再苦等后端接口，前后端可以同时进行开发，大大缩短项目周期。后端同学慢慢写他的接口，你这边先用Mock数据跑起来，等接口好了无缝切换。
2. 数据更真实
相比硬编码的固定数据，Mock.js能生成更接近真实场景的随机数据，包括各种边界情况，让你的测试更全面。
3. 减少联调时的"惊吓"
很多前后端联调时的"惊喜"（其实是惊吓）都源于双方对接口理解不一致。使用Mock.js提前定义好数据结构，相当于一份"接口合同"，减少后期扯皮。
🎯Mock.js核心功能一览
Mock.js的功能非常多，大家可以访问其中文官网查看各式各样的用法
下面主要介绍下它的一些比较重要、常用的核心功能
1. 数据模板定义
Mock.js最强大的功能就是它的数据模板了，通过简单的语法就能生成复杂的数据结构：
Mock.mock({
'list|10': [{ // 生成10条数据
'id|+1': 1, // 自增ID
'name': '@cname', // 随机中文名
'age|18-60': 1, // 18-60之间的随机数
'gender|1': ['男', '女'], // 性别二选一
'email': '@email', // 随机邮箱
'address': '@county(true)' // 随机地址
}]
})
2. 拦截Ajax请求
Mock.js可以拦截AJAX请求，返回模拟数据：
Mock.mock('/api/user/list', {
code: 200,
message: 'success',
data: {
'list|5-10': [{
'id|+1': 1,
'name': '@cname'
}]
}
})
这样当你调用fetch('/api/user/list')时，就会返回模拟数据，而不是真的发送请求。
3. 丰富的随机数据生成
Mock.js内置了大量数据生成器：
- 基础类型：boolean, natural, integer, float...
- 文本类型：character, string, title, paragraph...
- 名字类型：first, last, name, cname...
- 网络相关：url, domain, email, ip...
- 地址类型：region, province, city, county...
- 时间类型：date, time, datetime, now...
🚀实战：5分钟上手Mock.js
1. 安装
npm install mockjs --save-dev
# 或者
yarn add mockjs --dev
2. 基本使用
// 引入Mock.js
const Mock = require('mockjs')
// 模拟数据
const data = Mock.mock({
'list|10': [{
'id|+1': 1,
'name': '@cname',
'age|20-30': 1,
'gender|1': ['男', '女'],
'email': '@email'
}]
})
console.log(data)
3. 拦截Ajax请求
// mock.js
import Mock from 'mockjs'
Mock.mock('/api/login', 'post', (options) => {
const { username, password } = JSON.parse(options.body)
if(username === 'admin' && password === '123456') {
return Mock.mock({
code: 200,
message: '登录成功',
data: {
'token': '@guid',
'userId': '@id',
'username': username,
'avatar': '@image("100x100")'
}
})
} else {
return Mock.mock({
code: 401,
message: '用户名或密码错误'
})
}
})
然后在你的应用中就可以直接调用登录接口了，Mock.js会自动拦截并返回模拟数据。
🔀Mock使用的两种方式
上面这个案例介绍的是Mock的前端使用方式，其实Mock有两种使用方式，让我们系统介绍
1. mockjs 前端拦截模式
这个就是我们上面使用的方式
适用场景
- 纯前端项目，没有使用构建工具或框架
- 快速原型开发，需要立即看到效果
- 简单的API模拟，不需要复杂的服务端逻辑
- 后端接口尚未完成时的临时替代方案
使用方法
- 直接在浏览器中引入Mock.js：
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
- 定义Mock规则并拦截请求：
// 模拟GET请求
Mock.mock('/api/users', 'get', {
'users|5-10': [{
'id|+1': 1,
'name': '@cname',
'age|20-30': 1
}]
})
// 模拟POST请求
Mock.mock('/api/login', 'post', function(options) {
const { username, password } = JSON.parse(options.body)
if(username === 'admin' && password === '123456') {
return Mock.mock({
code: 200,
token: '@guid'
})
}
return { code: 401 }
})
- 像真实请求一样使用：
fetch('/api/users')
.then(res => res.json())
.then(data => console.log(data))
优点：简单直接，无需搭建服务
缺点：会污染全局作用域，无法在控制台看到真实的网络请求
2. vite-plugin-mock（或 mock-server）模式
适用场景
- 使用Vite/Webpack等现代构建工具的项目
- 需要更真实的API模拟体验
- 需要保留网络请求记录便于调试
- 项目复杂度较高，需要与构建流程集成
使用方法
- 安装依赖：
npm install vite-plugin-mock mockjs --save-dev
- 配置vite.config.js：
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
viteMockServe({
mockPath: 'mock', // mock文件存放目录
localEnabled: true, // 开发环境启用
prodEnabled: false, // 生产环境禁用
logger: true // 控制台日志显示
})
]
})
- 创建mock文件（如mock/user.js）：
import { mock } from 'mockjs'
export default [
{
url: '/api/users',
method: 'get',
response: () => {
return mock({
'list|10': [{
'id|+1': 1,
'name': '@cname',
'avatar': '@image("100x100")'
}]
})
}
},
{
url: '/api/login',
method: 'post',
timeout: 500, // 模拟网络延迟
response: (req) => {
const { username, password } = req.body
if(username === 'admin') {
return {
code: 200,
message: '登录成功',
data: {
token: mock('@guid'),
userInfo: {
userId: mock('@id'),
username
}
}
}
}
return {
code: 401,
message: '认证失败'
}
}
}
]
优点：
- 真实的网络请求体验（可以在DevTools中看到请求）
- 支持TypeScript类型提示
- 可以模拟请求延迟、错误状态等复杂场景
- 与构建工具深度集成
缺点：
- 需要一定的配置成本
- 依赖特定的构建工具
两种方式各有优劣，前端拦截模式适合快速验证想法，而构建工具集成模式更适合正式项目开发。根据你的项目需求选择合适的方案即可！
总结对比
| 模式 | mock 文件写法 | 适用场景 | Apifox/Postman 支持 | fetch/axios 支持 | 推荐场景 |
|---|---|---|---|---|---|
| vite-plugin-mock | export default [...] | Vite 项目全局 mock | ✅ | ✅ | 推荐，功能强大 |
| mockjs 前端拦截 | Mock.mock(...) | 只前端页面本地开发 mock | ❌ | ✅ | 只前端本地调试用 |
⚠️Mockjs的注意事项
- 生产环境记得关闭Mock：可以通过环境变量判断，只在开发环境启用Mock
- 保持数据结构一致性：Mock的数据结构要和真实接口保持一致，避免切换时出现问题
- 不要过度依赖Mock：当后端接口可用后，及时切换到真实接口测试
🎉总结
Mock.js就像前端开发者的"魔法棒"，轻轻一挥就能变出各种需要的数据。它不仅能提高开发效率，还能让我们的测试更全面。下次当后端同学说"接口还没好"时，你可以优雅地回一句："没关系，我有Mock.js！"
最后提醒：Mock虽好，可不要贪杯哦~ 真实接口完成后还是要及时切换测试的！
希望这篇博客能帮助你快速上手Mock.js。如果你有任何问题或有趣的Mock.js使用技巧，欢迎在评论区分享！🎉
