# mock-response

**Repository Path**: aimaier4869/mock-response

## Basic Information

- **Project Name**: mock-response
- **Description**: mock-response插件，谷歌浏览器mock请求响应的插件。
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-19
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Mock Response

mock响应体插件，可以根据MockJS的模板自动生成mock数据。

## 1. 快速开始

1. 安装插件
2. 添加你的API MOCK配置
3. 启用API，启用分组，启用插件
4. 刷新页面

## 2. 安装

1. 点击加载项管理

2. 打开开发者模式

3. 加载未打包的扩展项

4. 点击插件图标，把该插件固定到插件栏

## 3. 功能介绍

### 1. 界面

#### 1. 管理面板

![](assets/2025-11-07-11-17-31.png)

1. 插件启用或关闭 - 用来启用或关闭插件

2. 导入导出按钮 - 可以导出现有数据或从导出、swagger.json中导入数据

3. 分组列表 - 展示分组，点击分组标签可以查看该分组下的分组和api项

4. 添加api或分组按钮 - 可以在当前分组下新增api项或分组

5. api项列表 - 展示当前分组下的api项列表

6. 代码生成 - 生成业务代码

#### 2. 弹出式面板

![](assets/2025-11-07-11-40-31.png)

1. 插件启用或关闭 - 用来启用或关闭插件

2. 搜索框 - 可以搜索分组、api项（名称，url，期望名称，变量名称）等

3. 管理面板按钮 - 可以打开管理面板

4. 分组列表 - 展示分组，点击分组标签可以查看该分组下的分组和api项

5. api项列表 - 展示当前分组下的api项列表，可以快速切换期望，修改变量等

### 2. 分组

#### 1. 添加分组

1. 点击 添加API按钮 右侧的下拉箭头，在菜单中点击 添加分组

![](assets/2025-11-07-11-43-33.png)

2. 在对话框中输入分组名称，点击确定

![](assets/2025-11-07-11-43-48.png)

3. 新分组会添加到你当前选中的分组下

#### 2. 删除分组

1. 在分组列表中对应分组名称上方点击右键

![](assets/2025-11-07-11-45-22.png)

2. 选择删除分组

3. 在二次确认对话框中点击确定，注意：删除分组会删除改分组下的所有分组及api，且不可恢复

#### 3. 重命名分组

1. 在分组列表中对应分组名称上方点击右键

2. 选择重命名分组

3. 在对话框中输入新的分组名称，点击确定

#### 4. 启用分组

1. 在分组标签上，你可以看到一个启用开关

2. 点击开关可以启用或关闭该分组

3. 当分组被关闭时，该分组下的所有api项都不会被拦截

### 3. API项

#### 1. 添加API项

![](assets/2025-11-07-11-57-19.png)

1. 点击 添加API按钮，在面板中输入API信息

2. 配置API的基本信息：
   - 名称：API的显示名称（可选）
   - 请求方法：GET、POST、PUT、DELETE等
   - 匹配模式：包含、相等、正则
   - 请求地址：需要拦截的API地址

3. 配置期望：可以添加多个期望，每个期望可以有不同的变量值和mock规则

期望用于定义不同的mock场景，可以为同一个API配置多个期望：

- 默认期望：每个API都有一个默认期望
- 自定义期望：可以添加多个自定义期望，每个期望可以有不同的变量值和mock规则，

在弹出式面板中可以快速切换期望。

4. 配置变量：在默认期望中添加变量，变量可以在其他期望中复用

5. 配置请求处理：目前仅支持响应体（resBody）的mock，其他功能正在开发中

6. 点击保存按钮保存API配置

#### 2. 编辑API项

1. 在API项列表中，点击对应API项的编辑按钮

2. 修改API配置后，点击保存按钮

#### 3. 删除API项

1. 在API项列表中，点击对应API项的删除按钮

2. 在确认对话框中点击确定

#### 4. 启用API项

1. 在API项列表中，每个API项都有一个启用开关

2. 点击开关可以启用或关闭该API项

3. 当API项被关闭时，该API不会被拦截

### 4. API项中的MOCK模板

#### 1. 变量

变量用于在不同期望之间复用数据，支持以下类型：

- string：字符串类型
- number：数字类型
- boolean：布尔类型
- null：空值

变量配置包括：
- 变量名：变量的名称，用于在mock规则中引用
- 类型：变量的数据类型
- Mock规则：使用MockJS语法定义mock规则，例如 `@cname` 生成中文名
- 值：变量的值

#### 2. 表达式

使用 `{{ expression  }}` 计算表达式的值

#### 3. 快速MOCK

随意写一些json属性，点击 JSON转MOCK

![](assets/2025-11-07-12-03-08.png)

![](assets/2025-11-07-12-03-22.png)

#### 4. 唱吧活动引擎枚举mock规则

```
@snapshottag() : 快照标签 
@valuetype() : 值类型 
@drawcosttype() : 抽奖消耗类型 
@changbamoneytype() : 唱吧货币类型 
@ranktype() : 榜单类型 
@userprizerecordscenetype() : 发送奖励场景类型 
@snapshotstatus() : 快照状态 
@listenertopic() : 主题 
@gender() : 性别 
@activityteamtype() : 活动队伍类型 
@rankweight() : 榜单权重 
@event() : 事件 
@actiontype() : 动作 
@businessline() : 业务线 
@constantbusinesssubline() : 子业务线 
@prizetype() : 奖励类型 
@commoditylevel() : 奖励等级 
@operation() : 运算符 
@activitynumbertype() : 活动数值类型 
@sort() : 排序 
@refreshtype() : 刷新类型 
@membertype() : 成员类型 
@quantitylimitationtype() : 奖励数量限制类型 
@logicaloperation() : 逻辑运算 
@activitystatus() : 活动状态 
@gettertype() : 取值器类型 
```


更多语法请参考：http://mockjs.com/examples.html

### 5. 弹出式面板

弹出式面板是一个快捷操作面板，可以在不打开管理面板的情况下快速操作：

#### 1. 搜索功能

在搜索框中输入关键字，可以搜索：
- 分组名称
- API名称
- API地址
- 期望名称
- 变量名称

搜索结果会实时显示匹配的API项。

#### 2. 快速切换期望

在API项列表中，点击API项可以展开详情，可以快速切换期望。

#### 3. 快速修改变量

在API项详情中，可以快速修改变量的值，无需进入管理面板。

#### 4. 启用/关闭功能

- 顶部的开关可以启用或关闭整个插件
- 分组标签上的开关可以启用或关闭分组
- API项上的开关可以启用或关闭单个API

### 6. 导入

导入功能支持从多种数据源导入API配置：

#### 1. 从Swagger JSON URL导入

1. 在导入对话框中选择 Swagger JSON URL 模式

2. 输入Swagger JSON的URL地址

3. 点击预览按钮，系统会自动解析Swagger JSON并显示API列表

4. 选择需要导入的API项

5. 选择导入位置：
   - 选择父分组
   - 是否创建新分组
   - 新分组名称

6. 点击导入按钮完成导入

#### 2. 从导出文件导入

1. 在导入对话框中选择 Mock Response Export File 模式

2. 点击选择文件按钮，选择之前导出的JSON文件

3. 系统会自动解析文件并显示API列表

4. 选择需要导入的API项

5. 选择导入位置

6. 点击导入按钮完成导入

#### 3. 重复项处理

如果导入的API项与现有API项重复，系统会提示你选择处理方式

### 7. 导出

导出功能可以将API配置导出为JSON文件，方便备份和分享：

1. 在管理面板中点击导入导出按钮，选择导出

2. 在导出对话框中，系统会显示所有的分组和API项

3. 选择需要导出的项目：
   - 可以选择单个API项
   - 可以选择整个分组（会自动包含分组下的所有API项）

4. 点击确定按钮

5. 系统会自动下载一个JSON文件，文件名格式为 `export-{随机字符串}.json`

### 8. 代码生成

代码生成功能可以根据API配置自动生成业务代码，支持TypeScript和JavaScript：

#### 1. 生成代码

1. 在管理面板中选择一个分组

2. 点击代码生成按钮

3. 在代码生成面板中配置生成选项：
   - 选择API：选择需要生成代码的API项
   - 选择engineApi：选择需要生成的engine方法
   - 在js中使用默认值：是否在JavaScript代码中使用默认值

#### 2. 文件类型

TypeScript版本：
- `repository/index.ts`：mario 请求方法定义
- `repository/useAppContext.ts`：useAppContext
- `repository/types.ts`：TypeScript类型定义
- `repository/engine.ts`：活动引擎请求方法定义
- `store/index.ts`：pinia中使用请求方法
- `setup.ts`：Vue3 setup中使用请求方法

JavaScript版本：
- `repository/index.js`：mario 请求方法定义
- `repository/useAppContext.js`：useAppContext
- `repository/engine.js`：活动引擎请求方法定义
- `methods.vue`：Vue2 Options 中使用请求方法