json-server

零配置的 REST API Mock 服务器

MockREST Mock零配置假数据

基于 JSON 文件的零配置 REST API Mock 服务器，通过读取 `db.json` 自动生成标准 REST 端点（GET/POST/PUT/PATCH/DELETE），支持分页、排序、过滤和关系查询。适合快速原型、前端并行开发和教学演示，是前端调试工具链中最轻量的 Mock 方案之一。

访问官网

json-server REST Mock 服务器技术调研

json-server 是基于 JSON 文件的零配置 REST API Mock 服务器，通过读取 db.json 自动生成标准 REST 端点（GET/POST/PUT/PATCH/DELETE），支持分页、排序、过滤和关系查询。适合快速原型、前端并行开发和教学演示，是前端调试工具链中最轻量的 Mock 方案之一。

一、基本信息

维度	关键指标 / 描述
技术标签	REST Mock / 假数据 / 零配置 / 原型开发
开发商	typicode（开源社区）
官方网站	https://github.com/typicode/json-server
GitHub 仓库	typicode/json-server
npm 包	`json-server`
许可协议	MIT License
首次发布	2014 年
当前版本	json-server 0.17.x / 1.x beta（注意版本差异）
生态成熟度	高（快速 Mock 经典工具）

二、技术定位与简介

json-server 将静态 JSON 文件变为可交互的 REST API：

零代码：定义 db.json 即可启动服务。
完整 REST：自动支持资源 CRUD。
查询能力：_page、_limit、_sort、_order、_embed、_expand。
自定义路由：routes.json 重写或扩展默认路由。
中间件：json-server 基于 Express，可挂自定义中间件。

适合 hackathon、课程作业、前端在后端未就绪时快速联调；不适合复杂业务逻辑或生产环境。

三、快速上手安装说明

1. 安装

pnpm add -D json-server

2. 创建 db.json

{
  "users": [
    { "id": 1, "name": "Alice", "email": "[email protected]" },
    { "id": 2, "name": "Bob", "email": "[email protected]" }
  ],
  "posts": [
    { "id": 1, "title": "Hello", "userId": 1 }
  ]
}

3. 启动服务

npx json-server --watch db.json --port 3001

4. 自动生成的 API

GET    /users          # 列表
GET    /users/1        # 单条
POST   /users          # 创建
PUT    /users/1        # 全量更新
PATCH  /users/1        # 部分更新
DELETE /users/1        # 删除

5. package.json 脚本

{
  "scripts": {
    "mock": "json-server --watch db.json --port 3001"
  }
}

6. 查询示例

GET /posts?_page=1&_limit=10&_sort=title&_order=asc
GET /posts?userId=1
GET /users/1?_embed=posts

四、核心特性

1. 零配置 REST

根据 JSON 顶层 key 自动生成资源路由。

2. 实时持久化

--watch 模式下 POST/PUT 等操作写回 db.json。

3. 过滤与分页

查询参数 _page、_limit、字段名过滤。

4. 关系查询

_embed 嵌套关联资源，_expand 展开外键。

5. 自定义路由

{
  "/api/users": "/users",
  "/api/users/:id": "/users/:id"
}

json-server db.json --routes routes.json

6. 静态文件托管

--static ./public 同时提供静态资源。

7. 延迟模拟

--delay 500 模拟网络延迟。

五、适用场景

1. 黄金适用场景

快速原型与 demo。
前端课程与培训环境。
简单 CRUD 的前端并行开发。
与 Vue/React 教程配套的后端。
本地演示无需写后端代码。

2. 局限适用场景

复杂业务逻辑与校验（需真实后端或 MSW handlers）。
认证授权复杂场景。
生产环境（绝对禁止）。
需要 GraphQL。
测试内嵌 Mock（MSW 更合适）。

六、技术亮点

1. 极低上手成本

5 分钟从 JSON 到可用 API。

2. 真实 HTTP 服务

与 fetch/axios 真实网络请求，非拦截层 Mock。

3. Express 可扩展

可编写 server.js 挂中间件、自定义逻辑。

4. 教学友好

REST 概念直观，适合初学者。

5. 广泛教程引用

无数前端教程默认配套工具。

七、核心概念与架构

digraph JsonServer_Architecture {
  rankdir=LR
  node [shape=box, style="rounded,filled", fillcolor="#f0f9ff"]
  DB [label="db.json", fillcolor="#bae6fd"]
  Server [label="json-server\n(Express + lowdb)"]
  Client [label="Frontend App"]
  Routes [label="routes.json\n(optional)"]
 
  DB -> Server
  Routes -> Server
  Client -> Server
  Server -> DB
}

八、技术局限与边界

无业务逻辑：仅 CRUD，无法模拟复杂规则。
单文件瓶颈：大 db.json 性能差，并发写可能冲突。
无认证：需自行中间件模拟 JWT 等。
数据易失：多人共用 Mock 时数据互相覆盖。
版本 1.x 变化：注意 beta 与 0.17 API 差异。
非类型安全：JSON 无 schema 校验。

九、生态地图

类别	工具
底层	Express、lowdb
增强	json-server-auth、faker 生成数据
替代	MSW、Mirage、Prism
配合	Postman、Hoppscotch 调试

十、生态集成

方向	说明
Vite	`pnpm mock` 与 `pnpm dev` 并行运行。
concurrently	同时启动前端与 json-server。
faker	脚本生成大量 `db.json` 数据。
json-server-auth	社区 JWT 认证插件。
MSW	测试阶段从 json-server 迁移到 MSW handlers。

concurrently 示例

{
  "scripts": {
    "dev:all": "concurrently \"pnpm dev\" \"pnpm mock\""
  }
}

十一、开发与工程化

1. 自定义 server.js

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
 
server.use(middlewares)
server.use((req, res, next) => {
  if (req.method === 'POST') {
    req.body.createdAt = Date.now()
  }
  next()
})
server.use(router)
server.listen(3001)

2. 与 OpenAPI 对齐

手动维护 db.json 字段与 OpenAPI schema 一致。

3. Git 管理

db.json 纳入版本控制，团队共享初始数据。

十二、性能与安全

仅本地开发使用，绑定 127.0.0.1。
勿将 json-server 暴露公网。
db.json 勿含真实用户数据。
大列表注意分页，避免一次返回过多数据。
CI 中可用 json-server 启动临时 fixture 服务。

十三、技术对比

工具	优势	局限	适合
json-server	零代码、真实 HTTP	无业务逻辑	原型/教学
MSW	测试复用、灵活	需写 handlers	工程化项目
Prism	OpenAPI 驱动	需规范文件	Design-first
Mirage	内存 ORM	较重	关系 CRUD Mock

十四、最佳实践

仅用于开发与演示，禁止生产部署。
db.json 提交 Git，约定初始数据结构。
与 concurrently 并行启动前端和 Mock。
复杂接口用 server.js 中间件扩展，而非 fork 过多逻辑。
项目成熟后迁移到 MSW 或真实后端。
使用 --delay 测试加载状态 UI。
字段命名与真实 API 保持一致，减少切换成本。

十五、学习与社区资源

GitHub README：https://github.com/typicode/json-server
typicode 其他项目：lowdb、husky 等同作者工具
社区教程：各框架 + json-server 入门文章