ZhenYu's 知识库

外观

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 3000

API 访问

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 ServerREST API Mock简单快速，零编码
Mockoon桌面应用图形化，跨平台
MSWService Worker Mock真实网络环境
PrismOpenAPI Mock基于 API 规范
NockHTTP 拦截Node.js 专用
MirageORM-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