whistle.interface

whistle.interface 是一个用于 API 管理和 Mock 配置的 Whistle 插件，提供服务、接口的可视化管理功能，同时扩展依托 Whistle 提供的 server 扩展能力，基于服务和接口的配置完成数据的 Mock 和转发。

功能特点

• 服务管理：创建、编辑、删除服务，支持多域名配置
• API 管理：针对服务创建 API，支持 RESTful 风格接口
• Mock 数据配置：支持 JSON 和 MockJS 两种数据格式
• 请求路由：自动匹配请求并返回 Mock 数据
• 可视化界面：便捷的服务和 API 管理界面

安装

前提条件

• 安装 Node.js (v12.0.0 或更高版本)
• 安装 Whistle

# 安装 whistle
npm install -g whistle

# 安装 whistle.interface 插件
npm install -g whistle.interface

# 启动 whistle
w2 start

使用说明

1. 访问插件界面

启动 Whistle 后，在浏览器中访问 Whistle 管理界面：http://localhost:8899/，然后在顶部菜单中找到并点击 "Interface" 进入插件界面。

2. 服务管理

在"服务管理"页面，您可以：

• 创建服务：点击"新建服务"按钮，填写服务名称、描述和域名信息
• 编辑服务：点击服务列表中的"编辑"按钮修改服务信息
• 删除服务：点击服务列表中的"删除"按钮删除服务
• 启用/禁用服务：切换服务状态开关
• 管理域名：为服务添加多个域名，并可单独控制域名的启用状态

3. API 管理

在"API 管理"页面，您可以：

• 创建 API：选择所属服务，填写 API 路径、请求方法、描述等信息
• 编辑 API：修改 API 的方法、描述等信息
• 删除 API：删除不需要的 API
• 启用/禁用 API：控制 API 的启用状态
• 配置 Mock 数据：为每个 API 配置 Mock 响应数据

4. Mock 数据配置

创建或编辑 API 时，可以配置 Mock 数据：

• JSON 格式：直接编辑 JSON 数据作为 API 响应
• MockJS 格式：使用 MockJS 语法创建动态 Mock 数据

示例 MockJS 数据：

{
  "code": 0,
  "message": "success",
  "data": {
    "list|10": [{
      "id|+1": 1,
      "name": "@cname",
      "email": "@email",
      "created_at": "@datetime"
    }],
    "total": 100
  }
}

5. 系统设置

在"设置"页面，您可以：

• 配置主题：切换浅色/深色主题
• 配置其他系统参数

使用流程

1. 创建服务并配置域名
2. 在服务下创建 API 并配置 Mock 数据
3. 在 Whistle 中将请求转发到插件（自动完成，无需额外配置）
4. 发送请求到已配置的域名和 API 路径，获取 Mock 数据响应

数据存储

插件将所有配置和数据存储在以下目录：

• Windows: C:\Users\{用户名}\.whistle\whistle.interface\
• macOS/Linux: ~/.whistle/whistle.interface/

注意事项

• 服务需要至少配置一个域名才能正常工作
• API 路径必须以 / 开头
• 确保 Whistle 代理已正确配置在您的系统或浏览器中

常见问题

Mock 数据未生效？

• 确认服务和 API 均已启用
• 确认请求的域名与服务配置的域名匹配
• 确认请求的路径和方法与 API 配置一致
• 检查 Whistle 是否正常启动并作为代理使用

如何查看请求日志？

在 Whistle 管理界面的 Network 标签页中可以查看所有经过代理的请求详情。