whistle.mock-plugins

# 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. 安装插件 ```bash # 通过npm安装 npm install whistle.mock-plugin -g # 或通过yarn安装 yarn global add whistle.mock-plugin ``` ### 2. 启动Whistle ```bash # 启动whistle w2 start # 打开whistle管理界面 # 访问 http://localhost:8899 ``` ### 3. 配置插件 1. 在Whistle管理界面中进入"Plugins"页面 2. 找到"mock-plugin"并启用 3. 点击插件名称进入管理界面 ### 4. 基本使用 1. **创建功能模块**：点击"添加功能模块"创建一个新的模块 2. **添加接口**：在功能模块中添加需要Mock的接口 3. **配置响应**：为接口添加多个响应内容 4. **启用代理**：启用功能模块和接口，开始拦截请求 ## 📝 配置示例 ### 基本接口配置 ```json { "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": "用户不存在" } } ] } ``` ### 通配符匹配配置 ```json { "name": "文件下载接口", "urlPattern": "/api/files/*", "method": "GET", "proxyType": "redirect", "targetUrl": "https://cdn.example.com/files/", "preserveParams": true } ``` ## 🤝 贡献指南欢迎提交Issue和Pull Request来帮助改进这个项目！ ### 开发环境搭建 ```bash # 克隆项目 git clone [repository-url] # 安装依赖 cd whistle.mock-plugin npm install # 启动开发服务 npm run dev # 构建项目 npm run build ``` ### 开发规范 - 使用ESLint进行代码检查 - 遵循React和Node.js最佳实践 - 提交前请运行测试用例 - 提交信息请使用中文并保持简洁明了 ## 📄 许可证 MIT License ## 🔗 相关链接 - [Whistle官方文档](https://wproxy.org/whistle/) - [Mock.js文档](http://mockjs.com/) - [Ant Design](https://ant.design/)