前端救星：Mock、Express 与 JSON Server 助力前后端联调与独立开发
前端救星：在前端开发中，等待后端接口的日子，是所有前端工程师共同的噩梦，Mock、Express 与 JSON Server 助力前后端联调与独立开发。
前端救星：Mock、Express 与 JSON Server 助力前后端联调与独立开发
在前端开发中，等待后端接口的日子，是所有前端工程师共同的噩梦。 好消息是：这个世界上有三大神器可以让你不再等待——Mock、Express、JSON Server。
不论你在开发后台管理平台、企业级应用、前端工程化项目，还是要构建 SaaS 产品、做低代码工具，这三者都能让你在没有后端的情况下勇往直前。
一、前后端联调到底有多痛？
几乎每个前端都有过这样的经历：
- 后端接口还没写完，前端团队只能干等
- 接口返回字段和文档不一致
- 多人联调被阻塞，一个接口影响全场
- 本地接口、测试环境接口、线上接口各种版本不统一
- 数据量太少导致 UI 难以调试
- 测试同学无法复现某些数据场景
- 开发体验极差，效率大打折扣
那么问题来了：
有没有一种方法能让前端摆脱对后端的强依赖？ 答案就是：
Mock.js：前端本地假数据模拟 Express：搭建真正可控的后端服务 JSON Server：极速构建 RESTful API
接下来我将用最系统最容易理解的方式，把这三个工具讲清楚讲透。
二、Mock：前端本地假数据模拟神器
2.1 Mock 是什么？
Mock.js 是一个前端假数据生成 + 请求拦截工具。 它就像一个“临时演员”，可以在后端缺席时顶上来帮你完成拍戏。
它可以做两件事：
✔ 生成随机数据
适合前端页面布局、表格、图表的调试与 UI 还原。
✔ 拦截接口请求并返回模拟接口数据
无需改后端，不用修改 axios/fetch，只在前端本地拦截。
2.2 基础用法示例
拦截 API 并返回数据
import Mock from 'mockjs';
Mock.mock('/api/user', 'get', {
name: '@cname',
age: '@integer(18, 60)',
email: '@email'
});请求 /api/user 时会自动返回模拟数据，无需真实后端。
生成更多复杂数据
Mock.mock('/api/list', {
'list|5-10': [{
'id|+1': 1,
'title': '@ctitle(5, 10)',
'author': '@cname',
'createdAt': '@datetime'
}]
});2.3 Mock 的使用场景
| 场景 | 优势 |
|---|---|
| UI 开发阶段提前构造数据 | 表格、图表 UI 不需要等待接口 |
| 后端接口还未完成 | 前端可以独立推进 |
| 测试大量数据场景 | 批量自动生成数据 |
| 模拟复杂状态 | 模拟分页、过滤、错误码 |
三、Express：前端工程师的“轻量后端框架”
如果 Mock.js 解决“假数据”问题， 那么 Express 的作用就是：
前端工程师最容易上手的真后端能力。
你可以：
- 搭建真实的 API 服务
- 构建可持续维护的后端逻辑
- 写中间件、路由、数据库操作
- 同时可做前端接口代理
3.1 最简单的 Express API 服务
const express = require('express');
const app = express();
app.use(express.json());
app.get('/api/user', (req, res) => {
res.json({
name: '张三',
age: 20
});
});
app.listen(3000, () => {
console.log('API 服务已启动：http://localhost:3000');
});3.2 增删改查（CRUD）示例
let users = [{ id: 1, name: '张三' }];
app.post('/api/users', (req, res) => {
const user = { id: Date.now(), ...req.body };
users.push(user);
res.status(201).json(user);
});Express 的优势在于灵活性极高：
- 你可以引入 Mock.js 一起用
- 你可以连接数据库
- 你可以写权限系统、Session、Token
- 你可以搭建本地真实数据流
它更适合： 需要真实业务逻辑、操作数据、模拟复杂后端的前端项目。
四、JSON Server：3 秒生成完整 REST API
如果你觉得 Express 太重，Mock.js 太轻， 那 JSON Server 绝对是最适合的中间态。
它的使用场景是：
✔ 我要一个完整的 RESTful API ✔ 但我不想写代码 ✔ 最快几分钟搭建数据服务 ✔ 用 JSON 当数据库即可
4.1 最简单的用法
创建一个 db.json：
{
"users": [
{ "id": 1, "name": "李四", "age": 20 }
]
}启动 JSON Server：
npx json-server --watch db.json然后你就获得了：
| 接口 | 功能 |
|---|---|
| GET /users | 获取全部用户 |
| GET /users/1 | 获取某用户 |
| POST /users | 新增用户 |
| PUT /users/1 | 修改用户 |
| DELETE /users/1 | 删除用户 |
是不是非常不可思议？
你甚至不用写任何一行代码。
五、Mock、Express、JSON Server 如何选择？
以下表格非常重要。
| 工具 | 特点 | 适用场景 |
|---|---|---|
| Mock.js | 拦截请求 + 自动生成假数据 | 前端 UI 开发、接口未完成 |
| JSON Server | 完整 REST API，无需写代码 | CRUD 项目、后台管理、测试环境 |
| Express | 真后端，可写逻辑 | 模拟真实后端、复杂场景开发 |
六、三者组合的“终极联调方案”
最推荐的方案：
Mock.js 做前端本地假数据 JSON Server 提供基础 API Express 写真实逻辑和代理中间层
如下系统架构：
前端 React / Vue / Next.js
│
Mock.js（本地拦截）
│
Express（中间层）
│
JSON Server（模拟数据）
│
↓ 或 连接真实后端 ↓
后端 API这是一种 大前端独立开发 的理想方式：
- UI 完全不被接口阻塞
- 本地可模拟各种状态
- 能模拟真实后端行为（权限、登录、业务规则）
- 还能在后端完成后快速切换联调
七、真实工作流中的最佳实践
7.1 目录结构推荐
mock/
index.js
server/
app.js (Express 中间层)
db.json (JSON Server 数据)
src/
api/
pages/7.2 前端请求的自动切换机制
开发环境走 Mock.js：
if (import.meta.env.DEV) {
require('../mock');
}生产环境走真实后端：
axios.defaults.baseURL = '/api';八、总结：这三大神器让前端真正独立开发
前端不再依赖后端，不再被接口阻塞，不再等后端回复。
Mock.js：解决无接口时的开发问题（前端自给自足）
JSON Server：解决 CRUD 快速搭建问题（0 代码后端）
Express：解决真实逻辑模拟问题（前端也能玩后端）
这三者组合，可以让你在：
- 开发企业后台
- SaaS 系统
- 移动端接口
- Web 中后台
- B 端产品
- 大前端全栈项目
都可以做到：
✔ 不等后端也能快速开发 ✔ UI 调试效率极高 ✔ 联调体验极佳 ✔ 更贴近真实后端逻辑 ✔ 前端更有掌控感
周温
全栈开发工程师，专注于前端技术栈和物联网应用开发。拥有丰富的 React、Next.js、Nest.js 项目经验，擅长构建高性能、可扩展的 Web 应用。热爱技术分享，致力于将复杂的技术问题转化为易懂的实践指南。