json-api-mocker/README.ch.md

A mock server with visual management interface

# JSON API Mocker

一个轻量级且灵活的 Mock 服务器，支持 JSON 配置和可视化界面管理。

<p align="center">
  <img src="https://img.shields.io/npm/v/json-api-mocker" alt="npm 版本" />
  <img src="https://img.shields.io/npm/l/json-api-mocker" alt="许可证" />
  <img src="https://img.shields.io/npm/dt/json-api-mocker" alt="下载量" />
</p>

## ✨ 特性

- 🚀 全新的可视化管理界面
- 🚀 支持配置文件和 UI 两种使用方式
- 🔄 支持所有常用 HTTP 方法
- 📝 自动数据持久化
- 🔍 内置分页支持
- 🛠 可自定义响应结构
- 🎭 集成 Mock.js 实现强大的数据模拟
- 📊 实时请求日志和统计
- 💡 TypeScript 支持

## 📦 安装

```bash
npm install -g json-api-mocker
```

## 🚀 快速开始

服务器使用固定端口：
- API 服务器：35728
- Web 界面：35729
- WebSocket：35730

### 方式一：使用可视化界面（推荐）

1. 创建 `data.json` 文件：
```json
{
  "server": {
    "port": 35728,
    "baseProxy": "/api"
  },
  "routes": []
}
```

2. 启动服务器：
```bash
# 启动服务器并打开浏览器
json-api-mocker -o
```

启动后，浏览器会自动打开管理界面，你可以：
1. 可视化创建和管理 API
2. 实时查看请求日志
3. 监控 API 调用统计
4. 在线调试 Mock 数据

### 方式二：使用配置文件（兼容旧版本）

创建 `data.json` 文件：

```json
{
  "server": {
    "port": 8080,
    "baseProxy": "/api"
  },
  "routes": [
    {
      "id": "user-api",
      "route": {
        "path": "/users",
        "methods": {
          "get": {
            "status": 200,
            "response": {
              "code": 200,
              "message": "success",
              "data": {
                "list|10": [{
                  "id": "@id",
                  "name": "@cname",
                  "email": "@email"
                }]
              }
            }
          }
        }
      }
    }
  ]
}
```

然后启动服务器：

```bash
json-api-mocker
```

## 📖 配置说明

### 服务器配置

```json
{
  "server": {
    "port": 8080,      // 服务器端口号
    "baseProxy": "/api" // API 基础路径
  }
}
```

### API 配置

每个 API 配置包含：

```json
{
  "id": "unique-id",    // API 唯一标识
  "route": {
    "path": "/users",   // API 路径（不含基础路径）
    "methods": {        // 支持的 HTTP 方法
      "get": {
        "status": 200,  // 响应状态码
        "headers": {    // 自定义响应头
          "Content-Type": "application/json"
        },
        "response": {   // 响应数据（支持 Mock.js 语法）
          "code": 200,
          "data": {
            "name": "@name",
            "age": "@integer(18, 60)"
          }
        }
      }
    }
  }
}
```

## 🎮 可视化界面功能

### 1. API 管理
- 创建、编辑、删除 API
- 支持多种 HTTP 方法
- 可视化编辑响应数据
- Mock.js 语法提示

### 2. 实时日志
- 请求路径和方法
- 响应状态和耗时
- 请求参数记录
- 响应数据查看

### 3. 统计面板
- API 总数统计
- 请求量监控
- 平均响应时间
- 成功率统计

## 🔧 命令行参数

```bash
json-api-mocker [options]

选项：
  -p, --port <number>     指定服务器端口号（默认：8080）
  -c, --config <path>     指定配置文件路径（默认：data.json）
  -o, --open             自动打开管理界面
  -h, --help            显示帮助信息
  -v, --version         显示版本号
```

## 📄 许可证

MIT © [熊海银]

## 🙏 致谢

- 感谢所有贡献者和用户
- 特别感谢 Mock.js 提供数据模拟支持