npm.io
1.3.1 • Published 6d ago

whistle.mock-plugins

Licence
MIT
Version
1.3.1
Deps
8
Size
2.5 MB
Vulns
2
Weekly
0
SummaryDependencyVersions

Whistle Mock Plugin

一个功能强大的Whistle接口Mock插件，提供完整的API接口模拟解决方案，支持多响应管理、智能参数匹配、灵活代理配置等高级功能。

核心功能特性

1. 功能模块管理

  • 模块化组织：将相关接口按功能模块分组管理
  • 批量控制：一键启用/禁用整个功能模块
  • 描述信息：为每个模块添加详细说明和标签
  • 状态统计：实时显示模块下接口数量和启用状态
2. 多响应管理 核心特性
  • 多响应支持：每个接口可配置多个不同的响应内容
  • 响应切换：可随时切换不同的响应场景
  • 响应描述：为每个响应添加名称和详细描述
  • 内容预览：支持JSON格式化预览和编辑
  • 向下兼容：完全兼容单响应模式的历史配置
3. 智能接口匹配
  • 多种匹配模式：
    • 精确匹配：完全匹配URL路径
    • 通配符匹配：支持 * 通配符模式
    • 正则表达式：支持复杂的URL匹配规则
  • HTTP方法过滤：支持GET、POST、PUT、DELETE等方法筛选
  • 参数匹配：支持query参数、body参数的智能匹配
  • 匹配优先级：精确匹配优先，正则匹配兜底
4. 代理模式支持
  • 响应模式：直接返回配置的JSON/HTML响应内容
  • 文件代理：返回本地文件内容作为响应
  • URL重定向：将请求转发到指定的目标URL
  • 参数保留：重定向时可选择保留原始请求参数
5. Mock.js 集成
  • 动态数据生成：集成Mock.js库，支持动态数据生成
  • 模板语法：支持Mock.js的所有数据模板语法
  • 随机数据：自动生成随机的姓名、地址、图片等数据
  • 数据类型：支持字符串、数字、布尔值、数组、对象等所有数据类型
6. 高级配置选项
  • 响应延迟：模拟网络延迟，设置响应时间
  • HTTP状态码：自定义返回状态码（200、404、500等）
  • 响应头设置：配置Content-Type、CORS等响应头
  • 请求日志：详细记录所有匹配的请求信息
7. 用户界面特性
  • 现代化UI：基于Ant Design的美观界面
  • 响应式设计：适配不同屏幕尺寸
  • 实时预览：JSON内容格式化显示
  • 快速操作：支持快捷键和批量操作
  • 搜索过滤：快速查找接口和功能模块

使用场景

开发阶段
  • 前后端分离开发：前端独立开发，不依赖后端接口
  • 接口设计验证：快速验证接口设计的合理性
  • 并行开发：前后端团队并行开发，提高效率
测试阶段
  • 边界测试：模拟各种异常状态和边界数据
  • 压力测试：模拟高延迟、超时等网络状况
  • 错误场景：测试错误处理逻辑和用户体验
演示阶段
  • 客户演示：构建稳定的演示环境
  • 功能展示：展示不同的业务场景和数据状态
  • 原型验证：快速搭建原型进行需求验证

项目架构

whistle.mock-plugin/
├── lib/                          # 核心业务逻辑
│   ├── models.js                 # 数据模型定义
│   ├── ruleManager.js           # 规则匹配引擎
│   └── routes/                  # API路由
│       ├── features.js          # 功能模块管理
│       └── interfaces.js        # 接口管理
├── ui/                          # 前端界面
│   ├── src/
│   │   ├── components/          # 通用组件
│   │   ├── pages/              # 页面组件
│   │   │   ├── Home.js         # 首页
│   │   │   ├── FeatureManagement.js  # 功能模块管理
│   │   │   └── InterfaceManagement.js # 接口管理
│   │   └── utils/              # 工具函数
│   └── public/                 # 静态资源
├── app/                        # Whistle插件入口
│   └── index.js               # 插件主文件
├── test/                      # 测试文件
├── package.json              # 项目依赖
└── README.md                # 项目文档

安装和使用

1. 安装插件
# 通过npm安装
npm install whistle.mock-plugin -g

# 或通过yarn安装
yarn global add whistle.mock-plugin
2. 启动Whistle
# 启动whistle
w2 start

# 打开whistle管理界面
# 访问 http://localhost:8899
3. 配置插件
  1. 在Whistle管理界面中进入"Plugins"页面
  2. 找到"mock-plugin"并启用
  3. 点击插件名称进入管理界面
4. 基本使用
  1. 创建功能模块：点击"添加功能模块"创建一个新的模块
  2. 添加接口：在功能模块中添加需要Mock的接口
  3. 配置响应：为接口添加多个响应内容
  4. 启用代理：启用功能模块和接口，开始拦截请求

配置示例

基本接口配置
{
  "name": "用户信息接口",
  "urlPattern": "/api/user/info",
  "method": "GET",
  "responses": [
    {
      "id": "success",
      "name": "成功响应",
      "description": "正常返回用户信息",
      "content": {
        "code": 200,
        "data": {
          "id": "@integer(10000, 99999)",
          "name": "@cname",
          "email": "@email",
          "avatar": "@image('200x200')"
        }
      }
    },
    {
      "id": "error",
      "name": "错误响应", 
      "description": "用户不存在的情况",
      "content": {
        "code": 404,
        "message": "用户不存在"
      }
    }
  ]
}
通配符匹配配置
{
  "name": "文件下载接口",
  "urlPattern": "/api/files/*",
  "method": "GET",
  "proxyType": "redirect",
  "targetUrl": "https://cdn.example.com/files/",
  "preserveParams": true
}

贡献指南

欢迎提交Issue和Pull Request来帮助改进这个项目！

开发环境搭建
# 克隆项目
git clone [repository-url]

# 安装依赖
cd whistle.mock-plugin
npm install

# 启动开发服务
npm run dev

# 构建项目
npm run build
开发规范
  • 使用ESLint进行代码检查
  • 遵循React和Node.js最佳实践
  • 提交前请运行测试用例
  • 提交信息请使用中文并保持简洁明了

许可证

MIT License

相关链接

Keywords

whistlepluginmockapi