【Mock server】最全面的json-server 使用跟配置

一、db.json配置

✅ 1. `db.json` 该怎么写？

如果接口 get("/xx1/api/card/list", {}) 是一个 HTTP 请求，那 json-server 接收到请求时，会从 db.json 中找对应的字段名。

所以 db.json 应该有一个顶层字段叫做 xx1/api/card/list ------ 但！json-server 默认不能解析这种路径格式（带斜杠的字段名） 。

为了解决这个问题，有两种写法：

✅ 推荐写法：使用嵌套结构 + `rewriter`

1.1 `db.json` 结构

json 复制代码

{
  "cards": [
    { "id": 1, "title": "Card A", "type": "basic" },
    { "id": 2, "title": "Card B", "type": "advanced" }
  ]
}

1.2 配置 `json-server` 的 `routes.json`（重写路由）

创建一个 routes.json（和 db.json 同目录）：

json 复制代码

{
  "/xx1/api/card/list": "/cards"
}

这样当浏览器请求 /xxa/api/card/list 时，json-server 实际上会返回 /cards 的内容。

1.3 启动 mock server（`index.js` 中）

ini 复制代码

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
const rewriter = jsonServer.rewriter(require('./routes.json'));

server.use(middlewares);
server.use(rewriter);
server.use(router);

server.listen(3001, () => {
  console.log('JSON Server is running at http://localhost:3001');
});

✅ 2. 如果当前页有多个接口要请求，`db.json` 怎么写？

完全支持！比如你在 home/index.tsx 里调用多个接口，比如：

csharp 复制代码

const cards = await get("/xx1/api/card/list");
const users = await get("/xx1/api/user/list");

那你的 db.json 要有这两个字段映射的实际数据：

db.json:

json 复制代码

{
  "cards": [
    { "id": 1, "title": "Card A" },
    { "id": 2, "title": "Card B" }
  ],
  "users": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ]
}

routes.json:

json 复制代码

{
  "/xx1/api/card/list": "/cards",
  "/xx1/api/user/list": "/users"
}

这样你就可以 mock 多个接口，无需写额外逻辑，只需要加到 db.json 和 routes.json 中。

✅ 3. 结合 `proxy.config.js` 和 `rsbuild.config.ts`

如果开发环境请求逻辑如下图：

bash 复制代码

前端请求: /xx1/api/card/list
       ↓
代理到: http://muhome-dev.service.com:81

如果启用本地 mock server：

你需要"切断代理"或者"代理到你自己的 mock server"，这样就能拦截请求，不再发到远程后端。

修改 `proxy.config.js`：

arduino 复制代码

export const proxy = {
  "/xx1/api": {
    devTarget: 'http://localhost:3001', // mock server 地址
    uatTarget: 'http://muhome-uat.service.com:81'
  }
}

这样本地开发时（rsbuild dev 启动时）：

/xx1/api/card/list 会被代理到本地的 json-server（3001 端口）
mock server 会查找 db.json 并返回响应

✅ 补充： router.tsx 路由结构与 mock 数据的关系

React Router 的配置（如下）：

javascript 复制代码

createBrowserRouter([
  {
    id: "root",
    path: "/",
    Component: Layout,
    children: [
      { index: true, lazy: () => import("./home") }, // 首页
      { path: "editor/:cardId?", lazy: () => import("../editor") },
      { id: "filters", path: "/filters", lazy: () => import("./filter") },
    ]
  }
])

这个路由结构对 mock server 没有直接影响。关键是：你每个页面里有没有用到 API 请求 ，只要用到了，就需要把请求路径在 db.json + routes.json 中体现出来。

✅ 总结

项目元素	配置说明
`db.json`	定义真实 mock 数据，字段名是"简化路径名"（如 `cards`、`users`）
`routes.json`	将复杂接口路径（如 `/xx1/api/card/list`）映射到 `db.json` 中的字段
`proxy.config.js`	在 dev 环境中将 `/xx1/api/*` 指向 `http://localhost:3001` mock server
`router.tsx`	只决定页面结构，mock 数据是否加载，取决于页面内是否请求接口
多接口支持	`db.json` 中添加多个字段 + `routes.json` 添加对应映射即可

二、mock server 目录文件补充

接下来，把这个 mock server 目录下的文件结构补成可用模板 😎 好嘞！下面是一个在 monorepo 项目中使用 json-server 搭建 mock server 的完整可用模板，适合你目前的结构（如：myui、pnpm、代理配置等场景）。

✅ mock-server 目录结构

放在你 monorepo 的根目录下，比如：

go 复制代码

project-root/
├── mock-server/
│   ├── db.json
│   ├── routes.json
│   ├── index.js
│   └── package.json

🔧 文件内容一览

1. `mock-server/db.json`

这里是你模拟的数据：

json 复制代码

{
  "cards": [
    { "id": 1, "title": "Card A", "type": "basic" },
    { "id": 2, "title": "Card B", "type": "advanced" }
  ],
  "users": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ]
}

2. `mock-server/routes.json`

配置接口路径与 db.json 字段的映射关系：

json 复制代码

{
  "/xx1/api/card/list": "/cards",
  "/xx1/api/user/list": "/users"
}

3. `mock-server/index.js`

这是启动 mock server 的脚本：

ini 复制代码

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
const rewriter = jsonServer.rewriter(require('./routes.json'));

server.use(middlewares);
server.use(rewriter);
server.use(router);

const port = 3001;
server.listen(port, () => {
  console.log(`✅ Mock server is running at http://localhost:${port}`);
});

4. `mock-server/package.json`

mock server 自身的依赖和启动命令：

json 复制代码

{
  "name": "mock-server",
  "version": "1.0.0",
  "scripts": {
    "dev": "node index.js"
  },
  "dependencies": {
    "json-server": "^0.17.4"
  }
}

📦 安装依赖（推荐全局管理）

在 monorepo 根目录执行：

复制代码

pnpm install

这样 mock-server 的依赖就会被正确安装，不会污染其他子项目 ，同时会在 mock-server 下生成 node_modules 和 package-lock.json（或 pnpm-lock.yaml 更新）。

🖥️ 启动方式

你可以单独运行：

r 复制代码

pnpm -F mock-server dev

或者用 concurrently 和前端一起启动（如在 myui/package.json 中的 scripts）：

vbscript 复制代码

"scripts": {
  "start": "concurrently "pnpm -F mock-server dev" "rsbuild dev""
}

🔁 记得配置代理

proxy.config.js 中：

arduino 复制代码

export const proxy = {
  "/xx1/api": {
    devTarget: "http://localhost:3001", // 本地 mock
    uatTarget: "http://muhome-uat.service.com:81"
  }
};

✅ 最终效果

你前端页面只要写了：

csharp 复制代码

await get('/xx1/api/card/list');

页面一加载，mock server 就返回 db.json 中的 cards 数据啦 🎉

三、 .env.local 或自动化启动脚本

当然可以，咱来个一套齐活的：

✅ 推荐做法：使用 `.env.local` + 自动启动脚本

适合你这种 monorepo + mock + 多项目并行开发的场景。

✅ 一、在根目录加 `.env.local`

路径：project-root/.env.local

内容如下：

ini 复制代码

# mock server 端口
VITE_MOCK_PORT=3001

# 前端服务端口（如 myui）
VITE_DEV_PORT=4200

这个 .env.local 文件你可以用在脚本里，也可以在前端读取（如 Vite 或 Rsbuild 支持 import.meta.env.VITE_XXX 变量）。

✅ 二、自动化启动脚本（推荐在根目录新增）

路径：project-root/start-dev.js

javascript 复制代码

const { exec } = require('child_process');

const mockPort = process.env.VITE_MOCK_PORT || 3001;
const devPort = process.env.VITE_DEV_PORT || 4200;

const mockCommand = `pnpm -F mock-server dev`;
const frontCommand = `pnpm -F myui dev`;

const concurrently = `npx concurrently "${mockCommand}" "${frontCommand}"`;

console.log(`🚀 Starting dev environment:
- Mock server: http://localhost:${mockPort}
- Frontend   : http://localhost:${devPort}
`);

exec(concurrently, (err, stdout, stderr) => {
  if (err) {
    console.error(`❌ Error: ${err}`);
    return;
  }
  console.log(stdout);
  console.error(stderr);
});

需要你已安装 concurrently（可以用 pnpm add -w concurrently 安装）

✅ 三、在根目录 `package.json` 里加个命令：

json 复制代码

{
  "scripts": {
    "dev": "node start-dev.js"
  }
}

这样你只需要运行：

复制代码

pnpm dev

就会自动：

启动 mock server
启动 myui（假设你的前端在这里）
输出地址提示

🛠️ 可选增强：跨平台兼容（加上 dotenv）

如果你希望自动读取 .env.local 并注入环境变量：

1. 安装 dotenv

csharp 复制代码

pnpm add -w dotenv

2. 在 `start-dev.js` 顶部加：

lua 复制代码

require('dotenv').config({ path: '.env.local' });

✅ 总结目录结构更新

lua 复制代码

project-root/
├── .env.local
├── start-dev.js
├── mock-server/
│   ├── index.js
│   ├── db.json
│   ├── routes.json
│   └── package.json
├── src/
│   └── muiUI/
│       └── apps/
│           └── myui/

四、配置 `mock-server` 的 `README.md` ，让协作者也能快速上手 😎

一个清爽简洁、能快速上手的 mock-server/README.md，适合协作者第一次使用这个目录 👇

📁 `mock-server/README.md`

yaml 复制代码

# 📦 mock-server

本目录是用于本地开发阶段的 mock 接口服务，基于 [`json-server`](https://github.com/typicode/json-server) 实现。

适用于 `monorepo` 项目中的本地模拟接口，避免开发时频繁依赖远端后端。

---

## 📋 文件结构

mock-server/ ├── db.json # mock 数据源 ├── routes.json # 接口路径重写映射 ├── index.js # 启动 mock server 的入口文件 ├── package.json # 项目依赖及启动脚本

yaml 复制代码

---

## 🚀 快速开始

### 安装依赖

在 monorepo 根目录下执行：

```bash
pnpm install

会自动安装本目录下的 json-server 依赖，无需单独 cd 进来。

启动 mock server（单独运行）

r 复制代码

pnpm -F mock-server dev

默认启动在端口：http://localhost:3001

结合前端一起运行

在根目录已配置自动化启动脚本，可直接运行：

复制代码

pnpm dev

该命令将同时启动：

mock-server（本目录）
前端项目（如 myui）

📌 mock 数据配置说明

示例接口：获取卡片列表

1. 页面请求：

csharp 复制代码

await get('/xx1/api/card/list');

2. 在 `routes.json` 中添加路径映射：

json 复制代码

{
  "/xx1/api/card/list": "/cards"
}

3. 在 `db.json` 中添加实际数据：

json 复制代码

{
  "cards": [
    { "id": 1, "title": "Card A" },
    { "id": 2, "title": "Card B" }
  ]
}

4. 启动服务后，访问：

bash 复制代码

GET http://localhost:3001/xx1/api/card/list

css 复制代码

[  { "id": 1, "title": "Card A" },  { "id": 2, "title": "Card B" }]

🧠 常见问题

问题	说明
mock 数据不生效？	请确认 `/xx1/api/xxx` 是否在 `routes.json` 中配置了映射。
端口冲突怎么办？	修改 `.env.local` 中的 `VITE_MOCK_PORT` 值，并同步更新代理配置。
mock server 没有启动？	请确保运行了 `pnpm dev` 或 `pnpm -F mock-server dev`。

🧰 更多技巧

支持 GET、POST、PUT、DELETE 等 REST 风格操作
支持 query 参数筛选，如：/cards?type=basic
支持数据自动递增 ID、分页等能力（见官方文档）

五、顺手加一个 `.gitignore` 过滤掉 mock-server 里的 `node_modules` 和日志

这里是适用于 monorepo 项目里 mock-server/ 目录的 .gitignore 模板，可以避免无用的依赖、缓存、日志文件等被提交到 Git：

✅ mock-server/.gitignore

lua 复制代码

# 忽略 node_modules
node_modules/

# 忽略日志文件
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# 忽略 lock 文件（如果你不希望锁住）
package-lock.json
yarn.lock

# 忽略 IDE 文件
.idea/
.vscode/
.DS_Store

# 忽略临时数据
*.local
*.tmp
*.swp
.env.local
.env.*.local

✅ 提交建议

可以把这个 .gitignore 放在：

bash 复制代码

mock-server/.gitignore

🔒 如果你项目中统一使用 pnpm-lock.yaml，可以选择 不忽略它，确保团队依赖一致性。

六、 🧪 mock-server 接口的自动化测试脚本

mock-server 进一步升级，加入：

✅ 一、🧪 mock-server 接口的自动化测试

我们使用 Vitest + supertest 来测试 mock 接口是否能返回预期数据。

🔧 安装依赖（在 `mock-server/` 目录下）

csharp 复制代码

pnpm add -D vitest supertest

📁 添加测试文件结构

vbscript 复制代码

mock-server/
├── tests/
│   └── cards.test.js

✨ 示例测试：`tests/cards.test.js`

ini 复制代码

import request from 'supertest';
import { describe, it, expect, beforeAll } from 'vitest';
import jsonServer from 'json-server';
import routes from '../routes.json' assert { type: 'json' };

let server;

beforeAll(() => {
  const app = jsonServer.create();
  const router = jsonServer.router('db.json');
  const middlewares = jsonServer.defaults();
  const rewriter = jsonServer.rewriter(routes);

  app.use(middlewares);
  app.use(rewriter);
  app.use(router);
  server = app;
});

describe('GET /xx1/api/card/list', () => {
  it('should return card list', async () => {
    const res = await request(server).get('/xx1/api/card/list');
    expect(res.statusCode).toBe(200);
    expect(Array.isArray(res.body)).toBe(true);
    expect(res.body.length).toBeGreaterThan(0);
  });
});

🔧 package.json 中添加命令（在 mock-server 的 package.json）：

json 复制代码

"scripts": {
  "test": "vitest run"
}

✅ 运行测试：

bash 复制代码

pnpm -F mock-server test

七、 🛎️ mock-server 的热更新功能（mock-server 自动重启）

使用 nodemon

🔧 安装：

csharp 复制代码

pnpm add -D nodemon

✨ 修改 mock-server/package.json：

json 复制代码

"scripts": {
  "dev": "nodemon index.js",
  "test": "vitest run"
}

默认配置下，nodemon 会监听 .js、.json 文件变动，自动重启。

如果你想自定义监听文件和扩展名，也可以创建 nodemon.json：

📁 mock-server/nodemon.json（可选）

json 复制代码

{
  "watch": ["db.json", "routes.json", "index.js"],
  "ext": "js,json",
  "ignore": ["node_modules"],
  "exec": "node index.js"
}

🔚 总结现在 mock-server 的新增能力：

能力	说明
✅ mock 接口单元测试	使用 Vitest + Supertest 进行 HTTP 接口验证
🛎️ 热更新重启	修改 mock 数据或路由时自动重启服务
📁 .gitignore 完善	避免无用文件进入 Git
📖 README 文档清晰	协作者 0 成本上手

【Mock server】最全面的json-server 使用跟配置

一、db.json配置

✅ 1. db.json 该怎么写？

✅ 推荐写法：使用嵌套结构 + rewriter

1.1 db.json 结构

1.2 配置 json-server 的 routes.json（重写路由）

1.3 启动 mock server（index.js 中）

✅ 2. 如果 当前 页有多个接口要请求，db.json 怎么写？

db.json:

routes.json:

✅ 3. 结合 proxy.config.js 和 rsbuild.config.ts

如果启用本地 mock server：

修改 proxy.config.js：

✅ 补充： router.tsx 路由结构与 mock 数据的关系

✅ 总结

二、mock server 目录文件补充

✅ mock-server 目录结构

🔧 文件内容一览

1. mock-server/db.json

2. mock-server/routes.json

3. mock-server/index.js

4. mock-server/package.json

📦 安装依赖（推荐全局管理）

🖥️ 启动方式

🔁 记得配置代理

✅ 最终效果

✅ 推荐做法：使用 .env.local + 自动启动脚本

✅ 一、在根目录加 .env.local

✅ 二、自动化启动脚本（推荐在根目录新增）

✅ 三、在根目录 package.json 里加个命令：

🛠️ 可选增强：跨平台兼容（加上 dotenv）

1. 安装 dotenv

2. 在 start-dev.js 顶部加：

✅ 总结目录结构更新

四、 配置 mock-server 的 README.md ，让协作者也能快速上手 😎

📁 mock-server/README.md

启动 mock server（单独运行）

结合前端一起运行

📌 mock 数据配置说明

示例接口：获取卡片列表

1. 页面请求：

2. 在 routes.json 中添加路径映射：

3. 在 db.json 中添加实际数据：

4. 启动服务后，访问：

🧠 常见问题

🧰 更多技巧

五、顺手加一个 .gitignore 过滤掉 mock-server 里的 node_modules 和日志

✅ mock-server/.gitignore

✅ 提交建议

六、 🧪 mock-server 接口的自动化测试脚本

✅ 一、🧪 mock-server 接口的自动化测试

🔧 安装依赖（在 mock-server/ 目录下）

📁 添加测试文件结构

✨ 示例测试：tests/cards.test.js

🔧 package.json 中添加命令（在 mock-server 的 package.json）：

✅ 运行测试：

七、 🛎️ mock-server 的热更新功能（mock-server 自动重启）

🔧 安装：

✨ 修改 mock-server/package.json：

📁 mock-server/nodemon.json（可选）

🔚 总结现在 mock-server 的新增能力：

✅ 1. `db.json` 该怎么写？

✅ 推荐写法：使用嵌套结构 + `rewriter`

1.1 `db.json` 结构

1.2 配置 `json-server` 的 `routes.json`（重写路由）

1.3 启动 mock server（`index.js` 中）

✅ 2. 如果当前页有多个接口要请求，`db.json` 怎么写？

✅ 3. 结合 `proxy.config.js` 和 `rsbuild.config.ts`

修改 `proxy.config.js`：

1. `mock-server/db.json`

2. `mock-server/routes.json`

3. `mock-server/index.js`

4. `mock-server/package.json`

✅ 推荐做法：使用 `.env.local` + 自动启动脚本

✅ 一、在根目录加 `.env.local`

✅ 三、在根目录 `package.json` 里加个命令：

2. 在 `start-dev.js` 顶部加：

四、配置 `mock-server` 的 `README.md` ，让协作者也能快速上手 😎

📁 `mock-server/README.md`

2. 在 `routes.json` 中添加路径映射：

3. 在 `db.json` 中添加实际数据：

五、顺手加一个 `.gitignore` 过滤掉 mock-server 里的 `node_modules` 和日志

🔧 安装依赖（在 `mock-server/` 目录下）

✨ 示例测试：`tests/cards.test.js`