apifox-mock-generator 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +131 -0
- package/LICENSE +22 -0
- package/README.md +788 -0
- package/dist/package.json +61 -0
- package/dist/src/core/apifox-client.d.ts +6 -0
- package/dist/src/core/apifox-client.d.ts.map +1 -0
- package/dist/src/core/apifox-client.js +114 -0
- package/dist/src/core/apifox-client.js.map +1 -0
- package/dist/src/core/config-loader.d.ts +6 -0
- package/dist/src/core/config-loader.d.ts.map +1 -0
- package/dist/src/core/config-loader.js +16 -0
- package/dist/src/core/config-loader.js.map +1 -0
- package/dist/src/core/endpoint-filter.d.ts +12 -0
- package/dist/src/core/endpoint-filter.d.ts.map +1 -0
- package/dist/src/core/endpoint-filter.js +77 -0
- package/dist/src/core/endpoint-filter.js.map +1 -0
- package/dist/src/core/openapi-converter.d.ts +6 -0
- package/dist/src/core/openapi-converter.d.ts.map +1 -0
- package/dist/src/core/openapi-converter.js +35 -0
- package/dist/src/core/openapi-converter.js.map +1 -0
- package/dist/src/generators/mock-generator.d.ts +6 -0
- package/dist/src/generators/mock-generator.d.ts.map +1 -0
- package/dist/src/generators/mock-generator.js +30 -0
- package/dist/src/generators/mock-generator.js.map +1 -0
- package/dist/src/generators/templates/mock-template.d.ts +6 -0
- package/dist/src/generators/templates/mock-template.d.ts.map +1 -0
- package/dist/src/generators/templates/mock-template.js +283 -0
- package/dist/src/generators/templates/mock-template.js.map +1 -0
- package/dist/src/generators/templates/type-template.d.ts +18 -0
- package/dist/src/generators/templates/type-template.d.ts.map +1 -0
- package/dist/src/generators/templates/type-template.js +201 -0
- package/dist/src/generators/templates/type-template.js.map +1 -0
- package/dist/src/generators/type-generator.d.ts +6 -0
- package/dist/src/generators/type-generator.d.ts.map +1 -0
- package/dist/src/generators/type-generator.js +31 -0
- package/dist/src/generators/type-generator.js.map +1 -0
- package/dist/src/index.d.ts +4 -0
- package/dist/src/index.d.ts.map +1 -0
- package/dist/src/index.js +9 -0
- package/dist/src/index.js.map +1 -0
- package/dist/src/scripts/cli.d.ts +3 -0
- package/dist/src/scripts/cli.d.ts.map +1 -0
- package/dist/src/scripts/cli.js +28 -0
- package/dist/src/scripts/cli.js.map +1 -0
- package/dist/src/scripts/generate-mock.d.ts +2 -0
- package/dist/src/scripts/generate-mock.d.ts.map +1 -0
- package/dist/src/scripts/generate-mock.js +49 -0
- package/dist/src/scripts/generate-mock.js.map +1 -0
- package/dist/src/scripts/serve-mock.d.ts +2 -0
- package/dist/src/scripts/serve-mock.d.ts.map +1 -0
- package/dist/src/scripts/serve-mock.js +49 -0
- package/dist/src/scripts/serve-mock.js.map +1 -0
- package/dist/src/server/express-server.d.ts +7 -0
- package/dist/src/server/express-server.d.ts.map +1 -0
- package/dist/src/server/express-server.js +85 -0
- package/dist/src/server/express-server.js.map +1 -0
- package/dist/src/server/hot-reload.d.ts +7 -0
- package/dist/src/server/hot-reload.d.ts.map +1 -0
- package/dist/src/server/hot-reload.js +57 -0
- package/dist/src/server/hot-reload.js.map +1 -0
- package/dist/src/server/route-loader.d.ts +13 -0
- package/dist/src/server/route-loader.d.ts.map +1 -0
- package/dist/src/server/route-loader.js +147 -0
- package/dist/src/server/route-loader.js.map +1 -0
- package/dist/src/server/route-manager.d.ts +13 -0
- package/dist/src/server/route-manager.d.ts.map +1 -0
- package/dist/src/server/route-manager.js +25 -0
- package/dist/src/server/route-manager.js.map +1 -0
- package/dist/src/server/route-matcher.d.ts +10 -0
- package/dist/src/server/route-matcher.d.ts.map +1 -0
- package/dist/src/server/route-matcher.js +35 -0
- package/dist/src/server/route-matcher.js.map +1 -0
- package/dist/src/server/validation.d.ts +6 -0
- package/dist/src/server/validation.d.ts.map +1 -0
- package/dist/src/server/validation.js +119 -0
- package/dist/src/server/validation.js.map +1 -0
- package/dist/src/types/index.d.ts +167 -0
- package/dist/src/types/index.d.ts.map +1 -0
- package/dist/src/types/index.js +2 -0
- package/dist/src/types/index.js.map +1 -0
- package/dist/src/utils/block-updater.d.ts +6 -0
- package/dist/src/utils/block-updater.d.ts.map +1 -0
- package/dist/src/utils/block-updater.js +73 -0
- package/dist/src/utils/block-updater.js.map +1 -0
- package/dist/src/utils/code-formatter.d.ts +5 -0
- package/dist/src/utils/code-formatter.d.ts.map +1 -0
- package/dist/src/utils/code-formatter.js +43 -0
- package/dist/src/utils/code-formatter.js.map +1 -0
- package/dist/src/utils/file-helper.d.ts +21 -0
- package/dist/src/utils/file-helper.d.ts.map +1 -0
- package/dist/src/utils/file-helper.js +25 -0
- package/dist/src/utils/file-helper.js.map +1 -0
- package/dist/src/utils/file-operations.d.ts +29 -0
- package/dist/src/utils/file-operations.d.ts.map +1 -0
- package/dist/src/utils/file-operations.js +62 -0
- package/dist/src/utils/file-operations.js.map +1 -0
- package/dist/src/utils/logger.d.ts +10 -0
- package/dist/src/utils/logger.d.ts.map +1 -0
- package/dist/src/utils/logger.js +27 -0
- package/dist/src/utils/logger.js.map +1 -0
- package/dist/src/utils/path-utils.d.ts +13 -0
- package/dist/src/utils/path-utils.d.ts.map +1 -0
- package/dist/src/utils/path-utils.js +64 -0
- package/dist/src/utils/path-utils.js.map +1 -0
- package/dist/src/utils/type-mapping.d.ts +17 -0
- package/dist/src/utils/type-mapping.d.ts.map +1 -0
- package/dist/src/utils/type-mapping.js +75 -0
- package/dist/src/utils/type-mapping.js.map +1 -0
- package/package.json +61 -0
package/README.md
ADDED
|
@@ -0,0 +1,788 @@
|
|
|
1
|
+
# Apifox Mock Generator
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/apifox-mock-generator)
|
|
4
|
+
|
|
5
|
+
从 Apifox 拉取 API 接口并生成本地 Mock 数据和 TypeScript 类型文件的 npm 包。
|
|
6
|
+
|
|
7
|
+
## 🌟 为什么选择这个工具?
|
|
8
|
+
|
|
9
|
+
- ⚡ **零配置路由** - 自动发现和加载 Mock 路由,无需手动注册
|
|
10
|
+
- 🔥 **即时生效** - 热重载支持,修改 Mock 数据立即生效
|
|
11
|
+
- 🎯 **精准控制** - 强大的 API 筛选功能,服务端 + 客户端双重过滤
|
|
12
|
+
- 📝 **类型安全** - 自动生成 TypeScript 类型,开发更高效
|
|
13
|
+
- 🎨 **代码质量** - 自动格式化,生成的代码符合最佳实践
|
|
14
|
+
- 📦 **开箱即用** - 作为 npm 包安装,集成简单
|
|
15
|
+
|
|
16
|
+
## ✨ 功能特性
|
|
17
|
+
|
|
18
|
+
### 核心功能
|
|
19
|
+
- 🚀 **Apifox 集成** - 自动从 Apifox 项目拉取 API 接口定义(支持 OpenAPI 3.0)
|
|
20
|
+
- 📝 **类型生成** - 生成 TypeScript 类型文件(.ts 格式),支持复杂类型、嵌套对象、枚举等
|
|
21
|
+
- 🎭 **Mock 生成** - 基于 Schema 自动生成 Mock 数据,使用 Faker.js 生成真实感数据
|
|
22
|
+
- 🌐 **Mock 服务器** - 基于 Express 的本地 Mock 服务,快速响应,支持 CORS
|
|
23
|
+
|
|
24
|
+
### 高级特性
|
|
25
|
+
- 🔥 **热重载** - 修改 Mock 文件自动生效,无需重启服务器
|
|
26
|
+
- 🎯 **API 筛选** - 支持路径、方法、标签、操作 ID 等多维度筛选
|
|
27
|
+
- ⚡ **增量更新** - 智能识别文件变化,仅更新必要内容
|
|
28
|
+
- 🎨 **代码格式化** - 使用 Prettier 自动格式化生成的代码
|
|
29
|
+
- 🔄 **动态路由** - 自动发现和加载 Mock 路由,零配置
|
|
30
|
+
- ✅ **参数校验** - 基于 Schema 的请求参数验证
|
|
31
|
+
|
|
32
|
+
## 📦 安装
|
|
33
|
+
|
|
34
|
+
在你的 Vue/React/任意前端项目中安装:
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
pnpm add apifox-mock-generator -D
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## 🚀 快速开始
|
|
41
|
+
|
|
42
|
+
### 1. 创建配置文件
|
|
43
|
+
|
|
44
|
+
在你的项目根目录创建 `apifox.config.json`:
|
|
45
|
+
|
|
46
|
+
```json
|
|
47
|
+
{
|
|
48
|
+
"projectId": "YOUR_PROJECT_ID",
|
|
49
|
+
"token": "YOUR_APIFOX_TOKEN",
|
|
50
|
+
"mockDir": "./mock",
|
|
51
|
+
"typesDir": "./src/types/api",
|
|
52
|
+
"mockPort": 3000
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
> ⚠️ 重要:此文件包含敏感信息,请添加到 `.gitignore`
|
|
57
|
+
|
|
58
|
+
### 2. 配置 package.json 脚本
|
|
59
|
+
|
|
60
|
+
```json
|
|
61
|
+
{
|
|
62
|
+
"scripts": {
|
|
63
|
+
"mock:generate": "apifox-mock generate",
|
|
64
|
+
"mock:serve": "apifox-mock serve",
|
|
65
|
+
"mock:dev": "apifox-mock dev"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### 3. 生成 Mock 和类型文件
|
|
71
|
+
|
|
72
|
+
```bash
|
|
73
|
+
npm run mock:generate
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### 4. 启动 Mock 服务器
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
npm run mock:serve
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### 5. 配置代理(Vite 项目)
|
|
83
|
+
|
|
84
|
+
在 `vite.config.ts` 中:
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
export default defineConfig({
|
|
88
|
+
server: {
|
|
89
|
+
proxy: {
|
|
90
|
+
'/api': {
|
|
91
|
+
target: 'http://localhost:3000',
|
|
92
|
+
changeOrigin: true
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
})
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### 6. 使用生成的类型
|
|
100
|
+
|
|
101
|
+
```typescript
|
|
102
|
+
import type { LoginRequest, LoginResponse } from './src/types/api/auth/login'
|
|
103
|
+
|
|
104
|
+
const login = async (data: LoginRequest): Promise<LoginResponse> => {
|
|
105
|
+
const response = await fetch('/api/auth/login', {
|
|
106
|
+
method: 'POST',
|
|
107
|
+
body: JSON.stringify(data)
|
|
108
|
+
})
|
|
109
|
+
return response.json()
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## 🔧 配置说明
|
|
114
|
+
|
|
115
|
+
### 基础配置
|
|
116
|
+
|
|
117
|
+
- `projectId`: Apifox 项目 ID(在项目设置中查看)
|
|
118
|
+
- `token`: Apifox API Token(在账号设置中生成)
|
|
119
|
+
- `mockDir`: Mock 文件生成目录(默认:`./mock`)
|
|
120
|
+
- `typesDir`: TypeScript 类型文件生成目录(默认:`./src/types/api`)
|
|
121
|
+
- `mockPort`: Mock 服务器端口(默认:`3000`)
|
|
122
|
+
- `apiFilter`: API 筛选配置(可选)
|
|
123
|
+
|
|
124
|
+
### API 筛选配置
|
|
125
|
+
|
|
126
|
+
通过 `apiFilter` 配置项,您可以精确控制需要导出和生成的 API 接口。支持**服务端过滤**(Apifox API)和**客户端过滤**(生成时)。
|
|
127
|
+
|
|
128
|
+
#### 完整配置示例
|
|
129
|
+
|
|
130
|
+
```json
|
|
131
|
+
{
|
|
132
|
+
"projectId": "YOUR_PROJECT_ID",
|
|
133
|
+
"token": "YOUR_APIFOX_TOKEN",
|
|
134
|
+
"outputDir": "./apifox-output",
|
|
135
|
+
"mockDir": "./generated/mock",
|
|
136
|
+
"typesDir": "./generated/types",
|
|
137
|
+
"mockPort": 3000,
|
|
138
|
+
"apiFilter": {
|
|
139
|
+
"scope": {
|
|
140
|
+
"type": "ALL",
|
|
141
|
+
"excludedByTags": ["已废弃", "测试接口"]
|
|
142
|
+
},
|
|
143
|
+
"options": {
|
|
144
|
+
"includeApifoxExtensionProperties": false,
|
|
145
|
+
"addFoldersToTags": true
|
|
146
|
+
},
|
|
147
|
+
"includePaths": ["/api/auth/**", "/api/user/**"],
|
|
148
|
+
"excludePaths": ["/api/admin/**"],
|
|
149
|
+
"excludeDeprecated": true,
|
|
150
|
+
"includeMethods": ["GET", "POST"]
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
#### 服务端过滤(Apifox API)
|
|
156
|
+
|
|
157
|
+
**`scope` 配置** - 控制从 Apifox 导出哪些接口:
|
|
158
|
+
|
|
159
|
+
| 参数 | 类型 | 说明 |
|
|
160
|
+
|------|------|------|
|
|
161
|
+
| `type` | `'ALL' \| 'FOLDER' \| 'TAG' \| 'API_LIST'` | 导出类型:全部/按文件夹/按标签/按 API ID |
|
|
162
|
+
| `includedByTags` | `string[]` | 包含的标签 |
|
|
163
|
+
| `excludedByTags` | `string[]` | 排除的标签 |
|
|
164
|
+
| `folderPath` | `string` | 文件夹路径(type 为 FOLDER 时) |
|
|
165
|
+
| `apiIdList` | `string[]` | API ID 列表(type 为 API_LIST 时) |
|
|
166
|
+
|
|
167
|
+
**`options` 配置** - 导出选项:
|
|
168
|
+
|
|
169
|
+
| 参数 | 类型 | 说明 |
|
|
170
|
+
|------|------|------|
|
|
171
|
+
| `includeApifoxExtensionProperties` | `boolean` | 是否包含 Apifox 扩展属性 |
|
|
172
|
+
| `addFoldersToTags` | `boolean` | 是否将文件夹路径添加到标签 |
|
|
173
|
+
|
|
174
|
+
#### 客户端过滤(生成时)
|
|
175
|
+
|
|
176
|
+
在生成 Mock 和类型文件时进行二次过滤:
|
|
177
|
+
|
|
178
|
+
| 参数 | 类型 | 说明 |
|
|
179
|
+
|------|------|------|
|
|
180
|
+
| `includePaths` | `string[]` | 只包含这些路径(支持 `*` 和 `**` 通配符) |
|
|
181
|
+
| `excludePaths` | `string[]` | 排除这些路径 |
|
|
182
|
+
| `includeOperationIds` | `string[]` | 只包含这些 operationId |
|
|
183
|
+
| `excludeOperationIds` | `string[]` | 排除这些 operationId |
|
|
184
|
+
| `excludeDeprecated` | `boolean` | 排除废弃的接口 |
|
|
185
|
+
| `includeMethods` | `string[]` | 只包含这些 HTTP 方法 |
|
|
186
|
+
| `excludeMethods` | `string[]` | 排除这些 HTTP 方法 |
|
|
187
|
+
|
|
188
|
+
#### 常用场景
|
|
189
|
+
|
|
190
|
+
**场景 1:导出所有接口,排除已废弃**
|
|
191
|
+
```json
|
|
192
|
+
{
|
|
193
|
+
"apiFilter": {
|
|
194
|
+
"scope": {
|
|
195
|
+
"type": "ALL",
|
|
196
|
+
"excludedByTags": ["已废弃"]
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
**场景 2:只导出指定文件夹**
|
|
203
|
+
```json
|
|
204
|
+
{
|
|
205
|
+
"apiFilter": {
|
|
206
|
+
"scope": {
|
|
207
|
+
"type": "FOLDER",
|
|
208
|
+
"folderPath": "用户模块/用户管理"
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
**场景 3:按标签导出**
|
|
215
|
+
```json
|
|
216
|
+
{
|
|
217
|
+
"apiFilter": {
|
|
218
|
+
"scope": {
|
|
219
|
+
"type": "TAG",
|
|
220
|
+
"includedByTags": ["用户管理", "商品管理"]
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
**场景 4:服务端 + 客户端双重过滤**
|
|
227
|
+
```json
|
|
228
|
+
{
|
|
229
|
+
"apiFilter": {
|
|
230
|
+
"scope": {
|
|
231
|
+
"type": "ALL",
|
|
232
|
+
"excludedByTags": ["已废弃"]
|
|
233
|
+
},
|
|
234
|
+
"includePaths": ["/api/v1/**"],
|
|
235
|
+
"excludeMethods": ["DELETE"]
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
### 获取 Apifox Token
|
|
241
|
+
|
|
242
|
+
1. 登录 [Apifox](https://www.apifox.cn/)
|
|
243
|
+
2. 进入「个人设置」→「访问令牌」
|
|
244
|
+
3. 创建新的访问令牌
|
|
245
|
+
4. 复制 Token 到 `apifox.config.json`
|
|
246
|
+
|
|
247
|
+
## 📖 CLI 命令
|
|
248
|
+
|
|
249
|
+
安装后,你可以使用 `apifox-mock` 命令:
|
|
250
|
+
|
|
251
|
+
```bash
|
|
252
|
+
# 生成 Mock 和类型文件
|
|
253
|
+
apifox-mock generate
|
|
254
|
+
|
|
255
|
+
# 启动 Mock 服务器
|
|
256
|
+
apifox-mock serve
|
|
257
|
+
|
|
258
|
+
# 开发模式(生成 + 服务)
|
|
259
|
+
apifox-mock dev
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
或者通过 npm scripts:
|
|
263
|
+
|
|
264
|
+
```bash
|
|
265
|
+
npm run mock:generate
|
|
266
|
+
npm run mock:serve
|
|
267
|
+
npm run mock:dev
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
## 🎯 高级用法
|
|
271
|
+
|
|
272
|
+
### 自定义 Mock 数据
|
|
273
|
+
|
|
274
|
+
修改生成的 Mock 文件(如 `mock/api/auth/login.js`):
|
|
275
|
+
|
|
276
|
+
```javascript
|
|
277
|
+
export default {
|
|
278
|
+
method: 'POST',
|
|
279
|
+
path: '/api/auth/login',
|
|
280
|
+
response: {
|
|
281
|
+
code: 0,
|
|
282
|
+
message: 'success',
|
|
283
|
+
data: {
|
|
284
|
+
token: 'custom-token-12345', // 自定义数据
|
|
285
|
+
userId: 10086
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
> ⚠️ 注意:重新运行 `apifox-mock generate` 会覆盖自定义的修改
|
|
292
|
+
|
|
293
|
+
### 热重载
|
|
294
|
+
|
|
295
|
+
Mock 服务器支持热重载,修改 Mock 文件后会自动生效,无需重启:
|
|
296
|
+
|
|
297
|
+
```bash
|
|
298
|
+
npm run mock:serve
|
|
299
|
+
# 修改 mock 文件,保存后立即生效
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
## 🔄 工作流程
|
|
303
|
+
|
|
304
|
+
### 架构说明
|
|
305
|
+
|
|
306
|
+
作为 npm 包安装到你的项目中,工作模式如下:
|
|
307
|
+
|
|
308
|
+
```
|
|
309
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
310
|
+
│ 你的前端项目 (如 Vue) │
|
|
311
|
+
├─────────────────────────────────────────────────────────────┤
|
|
312
|
+
│ │
|
|
313
|
+
│ ┌──────────────────────────────────────────────────────┐ │
|
|
314
|
+
│ │ Apifox 平台 │ │
|
|
315
|
+
│ │ OpenAPI 数据 │ │
|
|
316
|
+
│ └───────────────┬──────────────────────────────────────┘ │
|
|
317
|
+
│ │ ① 拉取 API │
|
|
318
|
+
│ ↓ │
|
|
319
|
+
│ ┌──────────────────────────────────────────────────────┐ │
|
|
320
|
+
│ │ apifox-mock-generator (npm 包) │ │
|
|
321
|
+
│ │ • apifox-mock generate - 生成文件 │ │
|
|
322
|
+
│ │ • apifox-mock serve - 启动服务器 │ │
|
|
323
|
+
│ └───────────────┬──────────────────────────────────────┘ │
|
|
324
|
+
│ │ ② 生成 │
|
|
325
|
+
│ ↓ │
|
|
326
|
+
│ ┌──────────────────────────────────────────────────────┐ │
|
|
327
|
+
│ │ 生成的文件 │ │
|
|
328
|
+
│ │ • mock/ - Mock 数据文件 │ │
|
|
329
|
+
│ │ • src/types/api/ - TypeScript 类型 │ │
|
|
330
|
+
│ └──────┬───────────────────────────────────────────┬───┘ │
|
|
331
|
+
│ │ │ │
|
|
332
|
+
│ │ ③ 导入类型 │ ④ 提供 Mock 数据
|
|
333
|
+
│ ↓ ↓ │
|
|
334
|
+
│ ┌─────────────────┐ ┌─────────────────┐ │
|
|
335
|
+
│ │ 前端代码 │ HTTP 请求 │ Mock 服务器 │ │
|
|
336
|
+
│ │ (localhost:5173)│ ─────────────> │ (localhost:3000)│ │
|
|
337
|
+
│ │ │ /api/** │ │ │
|
|
338
|
+
│ │ • 业务逻辑 │ │ • Express 服务 │ │
|
|
339
|
+
│ │ • API 调用 │ <───────────── │ • Mock 响应 │ │
|
|
340
|
+
│ │ • TS 类型 │ Mock 数据 │ • 热重载 │ │
|
|
341
|
+
│ └─────────────────┘ └─────────────────┘ │
|
|
342
|
+
│ ↑ │
|
|
343
|
+
│ │ ⑤ Vite/Webpack 代理转发 │
|
|
344
|
+
│ └───────────────────────────────────────────────┘ │
|
|
345
|
+
└─────────────────────────────────────────────────────────────┘
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
### 详细步骤
|
|
349
|
+
|
|
350
|
+
#### 1️⃣ 安装并配置
|
|
351
|
+
|
|
352
|
+
```bash
|
|
353
|
+
# 在你的 Vue 项目目录
|
|
354
|
+
npm install apifox-mock-generator --save-dev
|
|
355
|
+
|
|
356
|
+
# 创建配置文件
|
|
357
|
+
vim apifox.config.json
|
|
358
|
+
|
|
359
|
+
# 配置 package.json
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
#### 2️⃣ 生成文件
|
|
363
|
+
|
|
364
|
+
```bash
|
|
365
|
+
npm run mock:generate
|
|
366
|
+
```
|
|
367
|
+
|
|
368
|
+
执行过程:
|
|
369
|
+
- 从 Apifox 拉取 API 定义
|
|
370
|
+
- 应用筛选规则
|
|
371
|
+
- 生成 TypeScript 类型 → `src/types/api/`
|
|
372
|
+
- 生成 Mock 数据 → `mock/`
|
|
373
|
+
|
|
374
|
+
#### 3️⃣ 启动 Mock 服务器
|
|
375
|
+
|
|
376
|
+
```bash
|
|
377
|
+
npm run mock:serve
|
|
378
|
+
```
|
|
379
|
+
|
|
380
|
+
在端口 3000 启动 Express 服务器。
|
|
381
|
+
|
|
382
|
+
#### 4️⃣ 配置前端代理
|
|
383
|
+
|
|
384
|
+
```typescript
|
|
385
|
+
// vite.config.ts
|
|
386
|
+
export default defineConfig({
|
|
387
|
+
server: {
|
|
388
|
+
proxy: {
|
|
389
|
+
'/api': {
|
|
390
|
+
target: 'http://localhost:3000',
|
|
391
|
+
changeOrigin: true
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
})
|
|
396
|
+
```
|
|
397
|
+
|
|
398
|
+
#### 5️⃣ 在代码中使用
|
|
399
|
+
|
|
400
|
+
```typescript
|
|
401
|
+
// 导入类型
|
|
402
|
+
import type { LoginRequest, LoginResponse } from '@/types/api/auth/login'
|
|
403
|
+
|
|
404
|
+
// 发起请求(自动代理到 Mock 服务器)
|
|
405
|
+
const response = await fetch('/api/auth/login', {
|
|
406
|
+
method: 'POST',
|
|
407
|
+
body: JSON.stringify(data)
|
|
408
|
+
})
|
|
409
|
+
```
|
|
410
|
+
|
|
411
|
+
### 项目结构
|
|
412
|
+
|
|
413
|
+
安装后,你的项目结构:
|
|
414
|
+
|
|
415
|
+
```
|
|
416
|
+
your-vue-project/
|
|
417
|
+
├── node_modules/
|
|
418
|
+
│ └── apifox-mock-generator/ # npm 包
|
|
419
|
+
├── src/
|
|
420
|
+
│ ├── types/
|
|
421
|
+
│ │ └── api/ # ✨ 生成的类型文件
|
|
422
|
+
│ │ ├── auth/
|
|
423
|
+
│ │ │ └── login.ts
|
|
424
|
+
│ │ └── user/
|
|
425
|
+
│ │ └── info.ts
|
|
426
|
+
│ └── components/
|
|
427
|
+
├── mock/ # ✨ 生成的 Mock 文件
|
|
428
|
+
│ └── api/
|
|
429
|
+
│ ├── auth/
|
|
430
|
+
│ │ └── login.js
|
|
431
|
+
│ └── user/
|
|
432
|
+
│ └── info.js
|
|
433
|
+
├── apifox.config.json # ⚙️ 配置文件
|
|
434
|
+
├── vite.config.ts # 配置代理
|
|
435
|
+
└── package.json
|
|
436
|
+
```
|
|
437
|
+
|
|
438
|
+
### 优势
|
|
439
|
+
|
|
440
|
+
✅ **集成简单** - 作为 npm 包安装,无需单独项目
|
|
441
|
+
✅ **类型安全** - 生成的类型文件直接在项目中使用
|
|
442
|
+
✅ **真实环境** - 通过 HTTP Mock,完全模拟真实 API
|
|
443
|
+
✅ **热重载** - 修改 Mock 数据立即生效
|
|
444
|
+
✅ **团队协作** - 配置和类型可以提交到 Git 共享
|
|
445
|
+
|
|
446
|
+
## 📁 项目结构
|
|
447
|
+
|
|
448
|
+
```
|
|
449
|
+
apifox-mock-generator/
|
|
450
|
+
├── src/ # 源代码
|
|
451
|
+
│ ├── core/ # 核心模块
|
|
452
|
+
│ │ ├── apifox-client.ts # Apifox API 客户端
|
|
453
|
+
│ │ ├── config-loader.ts # 配置加载器
|
|
454
|
+
│ │ ├── endpoint-filter.ts # 端点过滤器
|
|
455
|
+
│ │ └── openapi-converter.ts # OpenAPI 转换器
|
|
456
|
+
│ ├── generators/ # 生成器模块
|
|
457
|
+
│ │ ├── templates/ # 模板生成
|
|
458
|
+
│ │ │ ├── mock-template.ts # Mock 文件模板
|
|
459
|
+
│ │ │ └── type-template.ts # TypeScript 类型模板
|
|
460
|
+
│ │ ├── mock-generator.ts # Mock 文件生成器
|
|
461
|
+
│ │ └── type-generator.ts # 类型文件生成器
|
|
462
|
+
│ ├── server/ # Mock 服务器模块
|
|
463
|
+
│ │ ├── express-server.ts # Express 服务器配置
|
|
464
|
+
│ │ ├── hot-reload.ts # 热重载功能
|
|
465
|
+
│ │ ├── route-loader.ts # 路由加载器
|
|
466
|
+
│ │ ├── route-manager.ts # 路由管理器
|
|
467
|
+
│ │ ├── route-matcher.ts # 路由匹配器
|
|
468
|
+
│ │ └── validation.ts # 参数校验
|
|
469
|
+
│ ├── utils/ # 工具函数
|
|
470
|
+
│ │ ├── block-updater.ts # 增量更新工具
|
|
471
|
+
│ │ ├── code-formatter.ts # 代码格式化
|
|
472
|
+
│ │ ├── file-operations.ts # 文件操作
|
|
473
|
+
│ │ ├── file-helper.ts # 文件助手(统一导出)
|
|
474
|
+
│ │ ├── logger.ts # 日志工具
|
|
475
|
+
│ │ ├── path-utils.ts # 路径工具
|
|
476
|
+
│ │ └── type-mapping.ts # 类型映射
|
|
477
|
+
│ ├── scripts/ # 脚本入口
|
|
478
|
+
│ │ ├── generate-mock.ts # 生成脚本主入口
|
|
479
|
+
│ │ └── serve-mock.ts # 服务器脚本主入口
|
|
480
|
+
│ ├── types/ # 类型定义
|
|
481
|
+
│ │ └── index.ts # 公共类型
|
|
482
|
+
│ └── index.ts # 包入口文件
|
|
483
|
+
├── generated/ # 生成的文件(自动)
|
|
484
|
+
│ ├── mock/ # Mock 数据
|
|
485
|
+
│ └── types/ # TypeScript 类型
|
|
486
|
+
├── dist/ # 编译输出
|
|
487
|
+
├── apifox.config.json # 配置文件
|
|
488
|
+
├── package.json
|
|
489
|
+
└── tsconfig.json
|
|
490
|
+
```
|
|
491
|
+
|
|
492
|
+
### 🏗️ 架构设计
|
|
493
|
+
|
|
494
|
+
项目采用**模块化分层架构**,职责清晰分离:
|
|
495
|
+
|
|
496
|
+
| 层级 | 目录 | 职责 |
|
|
497
|
+
|------|------|------|
|
|
498
|
+
| **核心层** | `core/` | Apifox API 交互、配置加载、OpenAPI 转换和过滤 |
|
|
499
|
+
| **生成层** | `generators/` | Mock 和 TypeScript 类型生成、代码模板 |
|
|
500
|
+
| **服务层** | `server/` | Express 服务器、动态路由、热重载、参数校验 |
|
|
501
|
+
| **工具层** | `utils/` | 文件操作、增量更新、代码格式化、日志输出 |
|
|
502
|
+
| **脚本层** | `scripts/` | CLI 命令入口(generate、serve) |
|
|
503
|
+
| **类型层** | `types/` | 公共 TypeScript 类型定义 |
|
|
504
|
+
|
|
505
|
+
## 🛠️ 脚本说明
|
|
506
|
+
|
|
507
|
+
| 命令 | 说明 |
|
|
508
|
+
|------|------|
|
|
509
|
+
| `npm run build` | 编译 TypeScript 代码 |
|
|
510
|
+
| `npm run generate` | 一键生成(拉取 API + 生成 Mock + 生成类型) |
|
|
511
|
+
| `npm run serve` | 启动 Mock 服务器 |
|
|
512
|
+
| `npm run dev` | 开发模式(generate + serve) |
|
|
513
|
+
|
|
514
|
+
## 📚 技术栈
|
|
515
|
+
|
|
516
|
+
- **语言**: TypeScript 5.3+
|
|
517
|
+
- **运行时**: Node.js 16+
|
|
518
|
+
- **Web 框架**: Express 4.x
|
|
519
|
+
- **HTTP 客户端**: Axios
|
|
520
|
+
- **Mock 数据**: @faker-js/faker, Mock.js
|
|
521
|
+
- **文件监听**: Chokidar
|
|
522
|
+
- **代码格式化**: Prettier
|
|
523
|
+
- **日志工具**: Chalk
|
|
524
|
+
- **API 工具**: Apifox CLI
|
|
525
|
+
|
|
526
|
+
## ⚠️ 已知限制
|
|
527
|
+
|
|
528
|
+
当前版本暂不支持以下特性:
|
|
529
|
+
|
|
530
|
+
- ⚠️ OpenAPI 2.0 (Swagger) - 仅支持 OpenAPI 3.0
|
|
531
|
+
- ⚠️ 文件上传/下载类型
|
|
532
|
+
- ⚠️ WebSocket 协议
|
|
533
|
+
- ⚠️ GraphQL
|
|
534
|
+
|
|
535
|
+
## 💡 常见问题
|
|
536
|
+
|
|
537
|
+
### 1. 拉取 API 失败?
|
|
538
|
+
|
|
539
|
+
检查:
|
|
540
|
+
- `projectId` 和 `token` 是否正确
|
|
541
|
+
- Token 是否有「项目维护者」或「管理员」权限
|
|
542
|
+
- 网络连接是否正常
|
|
543
|
+
|
|
544
|
+
### 2. 端口被占用?
|
|
545
|
+
|
|
546
|
+
修改 `apifox.config.json` 中的 `mockPort` 配置。
|
|
547
|
+
|
|
548
|
+
### 3. 没有生成任何文件?
|
|
549
|
+
|
|
550
|
+
检查:
|
|
551
|
+
- `apiFilter` 筛选规则是否过于严格
|
|
552
|
+
- Apifox 项目中是否有匹配的接口
|
|
553
|
+
- 查看终端输出的错误信息
|
|
554
|
+
- 确认 Apifox Token 是否有正确的权限
|
|
555
|
+
|
|
556
|
+
### 4. 类型生成不准确?
|
|
557
|
+
|
|
558
|
+
建议:
|
|
559
|
+
- 在 Apifox 中完善接口的数据模型定义
|
|
560
|
+
- 使用 JSON Schema 定义清晰的数据结构
|
|
561
|
+
- 为每个字段添加描述和示例
|
|
562
|
+
|
|
563
|
+
### 5. 热重载不生效?
|
|
564
|
+
|
|
565
|
+
确认:
|
|
566
|
+
- Mock 文件保存成功
|
|
567
|
+
- 查看终端是否有文件变化的提示
|
|
568
|
+
- 检查文件路径是否在 `mockDir` 配置的目录下
|
|
569
|
+
|
|
570
|
+
## 🤝 不同框架的配置示例
|
|
571
|
+
|
|
572
|
+
### Vue CLI 项目
|
|
573
|
+
|
|
574
|
+
```javascript
|
|
575
|
+
// vue.config.js
|
|
576
|
+
module.exports = {
|
|
577
|
+
devServer: {
|
|
578
|
+
proxy: {
|
|
579
|
+
'/api': {
|
|
580
|
+
target: 'http://localhost:3000',
|
|
581
|
+
changeOrigin: true
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
```
|
|
587
|
+
|
|
588
|
+
### React (Create React App)
|
|
589
|
+
|
|
590
|
+
```javascript
|
|
591
|
+
// package.json
|
|
592
|
+
{
|
|
593
|
+
"proxy": "http://localhost:3000"
|
|
594
|
+
}
|
|
595
|
+
```
|
|
596
|
+
|
|
597
|
+
或使用 `http-proxy-middleware`:
|
|
598
|
+
|
|
599
|
+
```javascript
|
|
600
|
+
// src/setupProxy.js
|
|
601
|
+
const { createProxyMiddleware } = require('http-proxy-middleware');
|
|
602
|
+
|
|
603
|
+
module.exports = function(app) {
|
|
604
|
+
app.use(
|
|
605
|
+
'/api',
|
|
606
|
+
createProxyMiddleware({
|
|
607
|
+
target: 'http://localhost:3000',
|
|
608
|
+
changeOrigin: true
|
|
609
|
+
})
|
|
610
|
+
);
|
|
611
|
+
};
|
|
612
|
+
```
|
|
613
|
+
|
|
614
|
+
### Next.js
|
|
615
|
+
|
|
616
|
+
```javascript
|
|
617
|
+
// next.config.js
|
|
618
|
+
module.exports = {
|
|
619
|
+
async rewrites() {
|
|
620
|
+
return [
|
|
621
|
+
{
|
|
622
|
+
source: '/api/:path*',
|
|
623
|
+
destination: 'http://localhost:3000/api/:path*'
|
|
624
|
+
}
|
|
625
|
+
];
|
|
626
|
+
}
|
|
627
|
+
};
|
|
628
|
+
```
|
|
629
|
+
|
|
630
|
+
### 配置 .gitignore
|
|
631
|
+
|
|
632
|
+
建议将以下文件添加到 `.gitignore`:
|
|
633
|
+
|
|
634
|
+
```gitignore
|
|
635
|
+
# Apifox 配置(包含敏感 token)
|
|
636
|
+
apifox.config.json
|
|
637
|
+
|
|
638
|
+
# 生成的 Mock 文件(可选)
|
|
639
|
+
mock/
|
|
640
|
+
|
|
641
|
+
# 生成的类型文件建议提交,方便团队共享
|
|
642
|
+
# src/types/api/
|
|
643
|
+
```
|
|
644
|
+
|
|
645
|
+
### 💡 最佳实践
|
|
646
|
+
|
|
647
|
+
| 场景 | 建议 |
|
|
648
|
+
|------|------|
|
|
649
|
+
| **配置文件** | `apifox.config.json` 不要提交,提供 `.example` 示例 |
|
|
650
|
+
| **类型文件** | 建议提交到 Git,团队共享类型定义 |
|
|
651
|
+
| **Mock 数据** | 可以不提交,每个开发者自行生成 |
|
|
652
|
+
| **切换环境** | 后端完成后只需修改代理配置,代码无需改动 |
|
|
653
|
+
|
|
654
|
+
## 📝 更新日志
|
|
655
|
+
|
|
656
|
+
### v1.0.0 (2025-10-10)
|
|
657
|
+
|
|
658
|
+
#### 核心功能
|
|
659
|
+
- 🚀 **Apifox API 客户端** - 从 Apifox 项目拉取 API 接口定义
|
|
660
|
+
- 📝 **类型生成器** - 自动生成 TypeScript 类型文件(.ts 格式)
|
|
661
|
+
- 🎭 **Mock 生成器** - 基于 Schema 自动生成 Mock 数据文件
|
|
662
|
+
- 🌐 **Mock 服务器** - 基于 Express 的本地 Mock 服务
|
|
663
|
+
- 🔥 **热重载** - 修改 Mock 文件自动生效,无需重启服务器
|
|
664
|
+
|
|
665
|
+
#### 高级特性
|
|
666
|
+
- 🎯 **API 筛选** - 支持路径、方法、标签、操作 ID 等多维度筛选
|
|
667
|
+
- ⚡ **增量更新** - 智能识别文件变化,仅更新必要的内容
|
|
668
|
+
- 🎨 **代码格式化** - 使用 Prettier 格式化生成的代码
|
|
669
|
+
- 🔄 **动态路由** - 自动发现和加载 Mock 路由,零配置
|
|
670
|
+
- ⏱️ **延迟模拟** - 通过 `?_delay=1000` 参数模拟网络延迟
|
|
671
|
+
- ✅ **参数校验** - 基于 Schema 的请求参数验证
|
|
672
|
+
|
|
673
|
+
#### 支持的特性
|
|
674
|
+
- ✅ OpenAPI 3.0 规范
|
|
675
|
+
- ✅ HTTP 方法:GET、POST、PUT、DELETE、PATCH
|
|
676
|
+
- ✅ 路径参数、查询参数、请求体、响应体
|
|
677
|
+
- ✅ 复杂对象、数组、枚举、嵌套类型
|
|
678
|
+
- ✅ Schema 引用 ($ref)、allOf / anyOf / oneOf
|
|
679
|
+
|
|
680
|
+
详见 [CHANGELOG.md](./CHANGELOG.md) 获取完整更新日志。
|
|
681
|
+
|
|
682
|
+
## 📦 发布到 npm
|
|
683
|
+
|
|
684
|
+
如果你想 fork 并发布自己的版本:
|
|
685
|
+
|
|
686
|
+
### 1. 修改配置
|
|
687
|
+
|
|
688
|
+
```json
|
|
689
|
+
// package.json
|
|
690
|
+
{
|
|
691
|
+
"name": "your-package-name",
|
|
692
|
+
"version": "1.0.0",
|
|
693
|
+
"author": "Your Name",
|
|
694
|
+
"repository": {
|
|
695
|
+
"type": "git",
|
|
696
|
+
"url": "https://github.com/yourname/your-repo.git"
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
```
|
|
700
|
+
|
|
701
|
+
### 2. 编译项目
|
|
702
|
+
|
|
703
|
+
```bash
|
|
704
|
+
npm run build
|
|
705
|
+
```
|
|
706
|
+
|
|
707
|
+
### 3. 发布
|
|
708
|
+
|
|
709
|
+
```bash
|
|
710
|
+
# 登录 npm(首次)
|
|
711
|
+
npm login
|
|
712
|
+
|
|
713
|
+
# 发布
|
|
714
|
+
npm publish
|
|
715
|
+
|
|
716
|
+
# 或发布为 scoped package
|
|
717
|
+
npm publish --access public
|
|
718
|
+
```
|
|
719
|
+
|
|
720
|
+
### 4. 在项目中使用
|
|
721
|
+
|
|
722
|
+
```bash
|
|
723
|
+
npm install your-package-name --save-dev
|
|
724
|
+
```
|
|
725
|
+
|
|
726
|
+
## 👨💻 本地开发
|
|
727
|
+
|
|
728
|
+
如果你想参与开发或自定义:
|
|
729
|
+
|
|
730
|
+
```bash
|
|
731
|
+
# 克隆项目
|
|
732
|
+
git clone https://github.com/yourname/apifox-mock-generator.git
|
|
733
|
+
cd apifox-mock-generator
|
|
734
|
+
|
|
735
|
+
# 安装依赖
|
|
736
|
+
npm install
|
|
737
|
+
|
|
738
|
+
# 编译 TypeScript
|
|
739
|
+
npm run build
|
|
740
|
+
|
|
741
|
+
# 本地测试
|
|
742
|
+
npm link
|
|
743
|
+
|
|
744
|
+
# 在其他项目中使用本地版本
|
|
745
|
+
cd your-test-project
|
|
746
|
+
npm link apifox-mock-generator
|
|
747
|
+
```
|
|
748
|
+
|
|
749
|
+
## 🤝 贡献
|
|
750
|
+
|
|
751
|
+
欢迎贡献代码、报告问题或提出建议!
|
|
752
|
+
|
|
753
|
+
1. Fork 本仓库
|
|
754
|
+
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
|
|
755
|
+
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
|
756
|
+
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
|
757
|
+
5. 创建 Pull Request
|
|
758
|
+
|
|
759
|
+
## 📄 License
|
|
760
|
+
|
|
761
|
+
MIT License
|
|
762
|
+
|
|
763
|
+
Copyright (c) 2025
|
|
764
|
+
|
|
765
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
766
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
767
|
+
in the Software without restriction, including without limitation the rights
|
|
768
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
769
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
770
|
+
furnished to do so, subject to the following conditions:
|
|
771
|
+
|
|
772
|
+
The above copyright notice and this permission notice shall be included in all
|
|
773
|
+
copies or substantial portions of the Software.
|
|
774
|
+
|
|
775
|
+
## 🙏 致谢
|
|
776
|
+
|
|
777
|
+
- [Apifox](https://www.apifox.cn/) - API 设计、开发、测试一体化协作平台
|
|
778
|
+
- [Express](https://expressjs.com/) - 快速的 Node.js Web 框架
|
|
779
|
+
- [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集
|
|
780
|
+
- [@faker-js/faker](https://fakerjs.dev/) - 生成真实感测试数据
|
|
781
|
+
- [Chalk](https://github.com/chalk/chalk) - 终端彩色输出
|
|
782
|
+
|
|
783
|
+
---
|
|
784
|
+
|
|
785
|
+
如有问题或建议,欢迎提 [Issue](https://github.com/yourname/apifox-mock-generator/issues)!
|
|
786
|
+
|
|
787
|
+
⭐ 如果这个项目对你有帮助,请给一个 Star!
|
|
788
|
+
|