Mock 服务
约 701 字大约 2 分钟
Mock接口模拟数据生成
2026-04-15
概述
Mock 服务用于模拟后端接口返回,方便前后端并行开发。
JSON Server
安装使用
# 全局安装
npm install -g json-server
# 或本地安装
npm install json-server --save-dev启动服务
# 根目录创建 db.json
{
"users": [
{ "id": 1, "name": "Alice", "email": "alice@example.com" }
],
"posts": [
{ "id": 1, "title": "Hello", "authorId": 1 }
]
}
# 启动
json-server --watch db.json --port 3000API 访问
GET /users # 列表
GET /users/1 # 单个
POST /users # 创建
PUT /users/1 # 更新
PATCH /users/1 # 部分更新
DELETE /users/1 # 删除高级用法
# 自定义路由
json-server --watch db.json --routes routes.json
# 自定义 db.json
{
"db": "./db.js" # 使用 JS 文件动态生成
}// db.js
module.exports = () => {
const data = { users: [], posts: [] };
// 生成随机数据
for (let i = 0; i < 100; i++) {
data.users.push({
id: i + 1,
name: `User ${i}`,
email: `user${i}@example.com`,
});
}
return data;
};Mockoon
简介
Mockoon 是一个可视化 Mock 工具,支持 macOS、Windows、Linux。
创建 API
1. 新建环境
2. 添加 API
- Method: GET
- Path: /api/users
- Response: { "users": [...] }
3. 设置延迟
4. 启动服务特点
- 图形化界面
- 支持 HTTPS
- 支持自定义响应
- 环境切换方便
MSW (Mock Service Worker)
安装
npm install msw --save-dev配置
// src/mocks/browser.js
import { setupWorker, http, HttpResponse } from 'msw';
export const handlers = [
http.get('/api/users', () => {
return HttpResponse.json([
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
]);
}),
http.post('/api/users', async ({ request }) => {
const body = await request.json();
return HttpResponse.json({ id: 3, ...body }, { status: 201 });
}),
];
export const worker = setupWorker(...handlers);// src/mocks/node.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers';
export const server = setupServer(...handlers);启动
// browser/index.js
import { worker } from './mocks/browser';
async function enableMocking() {
if (process.env.NODE_ENV === 'development') {
return worker.start({
onUnhandledRequest: 'bypass',
});
}
}
enableMocking();Faker.js 数据生成
安装
npm install @faker-js/faker --save-dev使用
import { faker } from '@faker-js/faker';
// 个人信息
faker.person.fullName(); // 'Christina Anderson'
faker.internet.email(); // 'anderson@example.com'
faker.internet.avatar(); // 头像 URL
faker.phone.number(); // 电话号码
// 地址
faker.location.street(); // 街道
faker.location.city(); // 城市
faker.location.country(); // 国家
// 商业
faker.company.name(); // 公司名
faker.finance.accountName(); // 账户名
faker.finance.amount(); // 金额
// 日期
faker.date.past(); // 过去日期
faker.date.future(); // 未来日期
faker.date.between(); // 范围内日期
// 生成多个
faker.helpers.multiple(() => ({
id: faker.string.uuid(),
name: faker.person.fullName(),
email: faker.internet.email(),
}), { count: 10 });与 JSON Server 结合
// db.js
const { faker } = require('@faker-js/faker');
module.exports = () => {
const users = [];
for (let i = 0; i < 50; i++) {
users.push({
id: i + 1,
name: faker.person.fullName(),
email: faker.internet.email(),
avatar: faker.image.avatar(),
createdAt: faker.date.past().toISOString(),
});
}
return { users };
};常用 Mock 工具对比
| 工具 | 类型 | 特点 |
|---|---|---|
| JSON Server | REST API Mock | 简单快速,零编码 |
| Mockoon | 桌面应用 | 图形化,跨平台 |
| MSW | Service Worker Mock | 真实网络环境 |
| Prism | OpenAPI Mock | 基于 API 规范 |
| Nock | HTTP 拦截 | Node.js 专用 |
| Mirage | ORM-style Mock | 支持关系数据 |
最佳实践
1. 分层 Mock
// api/user.js
import { request } from './request';
export const userApi = {
list: (params) => request.get('/users', { params }),
get: (id) => request.get(`/users/${id}`),
create: (data) => request.post('/users', data),
};2. 统一 Mock 开关
// config/index.js
export const config = {
useMock: import.meta.env.VITE_USE_MOCK === 'true',
mockBaseURL: 'http://localhost:3000',
apiBaseURL: import.meta.env.VITE_API_BASE_URL,
};3. 按环境切换
// request.js
import { config } from '../config';
const baseURL = config.useMock ? config.mockBaseURL : config.apiBaseURL;应用场景
| 场景 | 推荐工具 |
|---|---|
| 快速原型 | JSON Server |
| 复杂业务 | MSW |
| 可视化配置 | Mockoon |
| 第三方集成 | nock |
| 大数据量 | Faker.js + JSON Server |
