一、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 中体现出来。

✅ 总结

二、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" }]

🧠 常见问题

🧰 更多技巧

• 支持 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 的新增能力：