概述

Mock Server（模拟服务器）可以在没有真实后端的情况下，模拟 API 接口返回数据。这对于前端独立开发、原型演示、接口测试非常有用。

什么时候使用 Mock Server？

• 后端尚未开发完成，前端需要先行开发
• 原型演示需要模拟数据支撑
• 前端单元测试 / 集成测试需要稳定的数据响应
• 接口联调前的前端独立调试

技术特性

特性	说明
运行时	Node.js
语言	TypeScript / JavaScript
端口	默认 3000
数据存储	内存 / JSON 文件
热更新	支持

生成的项目结构

ThesisAI 生成的 Mock Server 项目结构简洁明了：

mock-server/
├── src/
│   ├── index.ts               # 入口文件
│   ├── routes/                # 模拟路由
│   │   ├── auth.ts            # 认证相关接口
│   │   └── users.ts           # 用户相关接口
│   ├── data/                  # 模拟数据
│   │   └── db.json            # JSON 数据文件
│   └── utils/                 # 工具函数
├── data/                      # 持久化数据目录
│   └── db.json                # 运行时数据
├── package.json
└── tsconfig.json

目录名称

根据生成的项目，目录可能叫 mock、mock-server 或 api-mock。

开发环境

环境要求

依赖	版本要求	说明
Node.js	>= 18.0	推荐 LTS 版本
pnpm	>= 8.0	包管理器

安装依赖

cd mock-server
pnpm install

启动 Mock Server

pnpm run dev

启动成功后，会看到类似这样的输出：

Mock Server running at http://localhost:3000
Available endpoints:
   POST /api/auth/login
   POST /api/auth/register
   GET  /api/users
   GET  /api/users/:id
   ...

:::success 启动成功 Mock Server 正在 http://localhost:3000 运行。 :::

默认用户账号

账号	密码	角色
admin	123456	管理员
user	123456	普通用户
test	test	测试账号

数据存储行为

Mock Server 的数据存储方式：

• 内存存储：重启后数据重置到初始状态
• JSON 文件：数据持久化到 data/db.json，重启后保留

数据重置

大多数 Mock Server 使用内存存储，重启后数据会恢复到初始状态。这对于测试来说非常方便，每次重启都能获得干净的数据环境。

与前端联调

Mock Server 启动后，需要配置前端连接：

1. 修改前端环境变量

在前端项目根目录的 .env 文件中设置：

VITE_API_URL=http://localhost:3000

2. 启动前端开发服务器

cd frontend
pnpm run dev

3. 验证联调

前端请求会自动转发到 Mock Server，实现完整的开发体验。

前后端同时运行

前端和 Mock Server 可以同时运行，互不干扰。前端默认运行在 http://localhost:5173，Mock Server 运行在 http://localhost:3000。

常用命令

命令	说明
pnpm run dev	启动开发服务器（热更新）
pnpm run start	启动生产服务器
pnpm run build	构建生产版本

切换到真实后端

当真实后端开发完成后，只需修改前端 .env 中的 API 地址即可切换：

# 从 Mock Server
VITE_API_URL=http://localhost:3000

# 切换到真实后端（如 NestJS）
VITE_API_URL=http://localhost:3001

相关资源

• Mock Service Worker (MSW)
• json-server