解决 json-server 监听多个文件问题

• 问题描述：

  • 使用 json-server 无法直接监听多个 db.json 文件，需要创建多个终端启动json-server很麻烦

• 实现思路：

  • 通过 TypeScript 编写多个模块化的 Mock 数据文件，通过一个统一的脚本将这些模块的数据整合写入到 db.json 文件中，并启动 json-server 以提供 RESTful API 服务。

1、工程结构

• 工程结构

• 安装依赖：

# ts-node 运行ts文件
pnpm install ts-node

# mockjs 创建模拟数据
pnpm install mockjs

2、创建Mock数据模块

• 编写具体模块下，编写ts文件，并导出Mock出来的数据

• 案例：modules/message.ts

// 使用 Mock
const Mock = require('mockjs');

// 生成消息数据
const data = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|1-10': [
    {
      // 属性 id 是一个自增数，起始值为 1，每次增 1
      'id|+1': 1,
      name: '@name', // 生成随机名字
      message: '@sentence', // 生成随机消息
    },
  ],
});

// 导出数据
module.exports = {
  messages: data.list,
};

3、编写 mock.ts

• 该文件用于导入写好的模块数据，并写入到db.json中

const fs = require('fs');
const path = require('path');

// 引入 Mock 数据模块
const messages = require('./modules/message').messages;


// 合并所有数据
const db = {
  messages,
};

// 将数据写入到 db.json 文件
fs.writeFileSync(
  path.resolve('./src/mock/', 'db.json'),
  JSON.stringify(db, null, 2),
  'utf-8'
);

console.log('Mock data written to db.json');

4、配置 package.json，并写入mock命令

• 在scripts下添加一个mock命令，用于运行mock.ts脚本并启动json-server

"scripts": {
  "mock": "ts-node mock.ts && json-server --watch db.json --port 3000"
}

5、运行命令

• 在终端下执行如下命令：

pnpm run mock

• 执行结果：

1. 命令执行成功效果：

2. 自动创建出对应的db.json文件

3. 访问： http://localhost:3000/messages