# Web 管理界面 📱

访问管理界面：http://localhost:9005 (opens new window)

# 🔍 请求监控

# 实时请求列表

所有被拦截的请求都会实时显示，支持排序和搜索。

请求列表详情

列名	说明	功能
ID	请求唯一标识	点击查看详情
Code	HTTP 状态码	🟢 2xx 🟡 3xx 🔴 4xx/5xx
Type	响应内容类型	JSON、HTML、图片等
Method	HTTP 请求方法	GET、POST、PUT、DELETE
API	请求路径	支持搜索过滤

# 快速操作

🔍 搜索过滤 - 按路径、状态码、方法快速查找
📊 排序 - 点击表头按任意列排序
🔄 自动刷新 - 新请求实时显示

# 🔬 请求详情

# 核心功能

# 🔄 重放 (Replay)

重放功能

一键重现错误：使用完全相同的参数重新发起请求。

使用场景：

🐛 快速重现 Bug，无需重新登录
🧪 测试接口稳定性
🔄 验证修复效果

# 📸 截图 (Capture)

截图功能

快速留证：一键截取当前页面状态。

适用于：

📝 Bug 报告附图
📊 界面状态记录
🤝 与团队分享问题

# 📖 Swagger 集成

Swagger集成

自动关联文档：配置 OpenAPI 后自动显示对应的 Swagger 调试界面。

核心优势：

🔑 自动携带最新 Token，无需手动登录
📋 查看完整接口定义和参数说明
🧪 直接在文档中测试接口

# 📜 历史记录 (History)

历史记录

参数对比神器：查看同一接口的所有请求历史。

列名	说明
Code	HTTP 状态码
Req	请求体大小（query + body）
Res	响应体大小

使用技巧：

🔍 通过请求/响应大小快速定位异常
📊 对比不同请求的参数差异
🧭 支持按大小排序，快速找到问题请求

💡 常见问题

Q: 重放后页面没更新？
A: 重放会生成新的请求记录，在 History 中查看最新结果。

Q: 截图功能失效？
A: 页面内容过多或包含 iframe 时可能失败，建议使用专业截图工具。

Q: Swagger 按钮不显示？
A: 检查 OpenAPI 配置是否正确，确认当前接口在文档中存在。

# 📋 请求响应详情

完整的 HTTP 通信展示：

请求部分 (Request)：

🌐 请求行 - 方法、URL、查询参数
📄 请求头 - 完整的 Headers 信息
📦 请求体 - POST/PUT 数据内容

响应部分 (Response)：

✅ 状态行 - 状态码、状态消息
📋 响应头 - 服务器返回的 Headers
📄 响应体 - 实际返回的数据内容

查看请求详情

请求详情界面

💡 JSON 预览提示

确保响应头 Content-Type 为 application/json 才能正常预览。建议后端使用 res.json() 而非 res.send()。

# ⚙️ 接口管理

# 🎛️ 接口控制面板

接口编辑界面

可视化管理所有接口，支持 WebAPI 在线编辑。

如果还没有真实的接口, 可以通过此功能创建便于前后端参考的 接口|文档 , 它描述了请求的地址, 方法, 参数的位置, 类型, 响应, 并且可以生成供前端调用的接口.

这里创建的接口称为 webApi 接口, 与 config.api 中编写的接口进行合并, 重复时会被后者覆盖.

mockm 会根据填写的 字段名, 示例值, 类型 转换为对应的响应数据, 支持 mockjs 语法.

转换规则

字段名: 即字段的名称, 可使用 mockjs 的生成规则.
示例值: 字段的示例值, 支持 mockjs 语法, 如 @cname 生成随机中文名字.

快速操作：

➕ 新建接口 - 点击表头 + 按钮
🔄 批量开关 - 一键禁用/启用所有 WebAPI
⚙️ 单独控制 - 控制单个接口的启用状态

# ✏️ 在线接口编辑器

# 🎯 编辑模式选择

# 📊 表格模式 - 快速构建结构化数据

表格编辑模式

适用场景：结构化数据、API 原型设计

核心功能：

📝 字段定义 - 字段名、示例值、类型设置
🎲 数据生成 - 支持 MockJS 语法
📋 预览实时 - 立即查看生成效果
🔧 响应头设置 - 自定义 HTTP Headers

字段类型支持：

类型	说明	示例
`string`	字符串	`"用户名"`
`number`	数字	`123`, `3.14`
`boolean`	布尔值	`true`, `false`
`object`	对象	嵌套字段结构
`array`	数组	数组对象集合
`eval`	JS 代码	`Date.now()`, `Mock.mock('@cname')`

MockJS 增强支持：

🎭 占位符 - 如 @cname（中文姓名）、@email（邮箱）
🔢 数量控制 - 如 name|2-5（2-5个字符）
📊 规则生成 - 如 list|10-20（10-20条数据）

快捷操作：

Ctrl+S - 保存接口
Ctrl+E - 切换到代码模式

# 💻 代码模式 - 完全自定义逻辑

代码编辑模式

适用场景：复杂业务逻辑、条件响应

全局工具 tool 对象：

{
  libObj: {
    mockjs,    // MockJS 实例
    axios      // HTTP 请求库
  },
  wrapApiData,  // 统一数据包装函数
  listToData,   // 表格数据转换函数
  cur          // 当前接口信息
}

实用示例：

(req, res) => {
  const { wrapApiData, listToData, cur, libObj: { mockjs } } = tool
  
  // 获取请求参数
  const { body, query, params } = req
  
  // 根据参数返回不同数据
  if (query.type === 'error') {
    return res.status(500).json({ error: '模拟错误' })
  }
  
  // 使用表格数据
  const { table, example } = cur.responses['200']
  const tableData = listToData(table, example).data
  
  // 组合返回数据
  const data = {
    user: mockjs.mock('@cname'),
    timestamp: Date.now(),
    request: { body, query, params },
    tableData
  }
  
  // 设置自定义响应头
  res.set({ 'X-Custom-Header': 'MockM Generated' })
  
  // 返回统一格式数据
  res.json(wrapApiData({ data, code: 200 }))
}

# 📜 历史模式 - 复用真实数据

历史数据模式

使用场景：

🔄 重现问题 - 使用特定请求的响应数据
🧪 A/B 测试 - 固定某个成功的响应
📊 数据一致性 - 确保测试环境数据稳定

操作方法：输入历史请求的 ID，该接口将始终返回指定请求的完整响应（包括 Headers）。

# 🚀 批量操作

# 📝 文本导入 - 快速创建字段结构

双击表格添加按钮，在弹窗中输入结构化文本：

用户信息
- 姓名
- 邮箱  
- 头像
- 个人资料
  - 年龄
  - 生日
  - 手机号
- 地址信息
  - 省份
  - 城市
  - 详细地址

智能功能：

🔄 自动翻译 - 中文字段名自动生成英文键名
🎯 类型推断 - 根据字段名智能推断数据类型
🎲 Mock 生成 - 自动匹配合适的 MockJS 规则

批量添加演示

层级支持：

使用 - 或空格缩进表示子级
支持多层嵌套结构
自动生成对象和数组类型

💡 专业提示

表格模式 vs 代码模式选择：

📊 表格模式 - 适合快速原型、结构清晰的 API
💻 代码模式 - 适合复杂逻辑、动态响应、条件判断
📜 历史模式 - 适合重现问题、固定测试数据

最佳实践：

新接口用表格模式快速搭建
需要逻辑判断时切换到代码模式
调试问题时临时使用历史模式

保存方式：

Ctrl+S - 快捷键保存
点击 Action → Save - 菜单保存
自动保存提示 - 修改后会提示保存状态

← 示例命令行参数 →