AI 辅助的 API 接口 Mock 数据生成：前端独立开发的数据引擎

AI 辅助的 API 接口 Mock 数据生成：前端独立开发的数据引擎

一、前后端协作的"等待困境"：接口未就绪，前端只能空转

前端开发中最常见的阻塞场景是：后端接口尚未开发完成，前端只能等待或用硬编码的假数据临时顶替。硬编码 Mock 数据存在三个核心问题：一是数据不真实，所有用户都叫"张三"、所有金额都是 100；二是数据不完整，只覆盖了正常场景，缺少边界情况（空列表、超长文本、特殊字符）；三是维护成本高，接口变更后 Mock 数据需要手动同步，遗漏和过期在所难免。

AI 辅助的 Mock 数据生成方案，可以根据接口定义（OpenAPI Schema）自动生成语义丰富、边界完整的 Mock 数据，让前端在后端接口就绪前就能进行完整的开发和测试。

二、基于 Schema 的智能 Mock 架构

AI Mock 生成的核心思路是：将 OpenAPI Schema 中的字段名、类型、描述、约束作为上下文，让 LLM 生成符合语义的 Mock 数据，而非随机填充。

flowchart LR A[OpenAPI Schema] --> B[Schema 解析器] B --> C[字段语义提取] C --> D[Prompt 组装] D --> E[LLM 数据生成] E --> F[Schema 校验] F -->|校验通过| G[Mock Server 响应] F -->|校验失败| D G --> H[前端开发/测试]

与传统 Mock 库（如 Faker.js）的区别在于：Faker.js 只能根据字段类型生成随机数据（string → "lorem ipsum"），而 AI Mock 能根据字段名和描述生成语义数据（userName → "李明辉"，orderAmount → 299.50）。

三、工程化实现

3.1 Schema 解析与语义提取

// schema-parser.ts import { OpenAPIV3 } from 'openapi-types'; interface FieldSemantics { name: string; type: string; description?: string; enum?: string[]; format?: string; // 如 date-time, email, uri pattern?: string; // 正则约束 example?: unknown; constraints: { minLength?: number; maxLength?: number; minimum?: number; maximum?: number; required?: boolean; }; } function extractFieldSemantics( schema: OpenAPIV3.SchemaObject, fieldName: string ): FieldSemantics { return { name: fieldName, type: schema.type || 'string', description: schema.description, enum: schema.enum as string[] | undefined, format: schema.format, pattern: schema.pattern, example: schema.example, constraints: { minLength: schema.minLength, maxLength: schema.maxLength, minimum: schema.minimum as number | undefined, maximum: schema.maximum as number | undefined, required: false, }, }; } // 从 OpenAPI 文档中提取接口的所有字段语义 function parseEndpoint( spec: OpenAPIV3.Document, path: string, method: string ): FieldSemantics[] { const pathItem = spec.paths[path]; if (!pathItem) return []; const operation = pathItem[method as keyof OpenAPIV3.PathItemObject] as OpenAPIV3.OperationObject; if (!operation?.responses) return []; const successResponse = operation.responses['200'] as OpenAPIV3.ResponseObject; const content = successResponse?.content?.['application/json']; if (!content?.schema) return []; const schema = content.schema as OpenAPIV3.SchemaObject; if (schema.type === 'object' && schema.properties) { return Object.entries(schema.properties).map(([name, prop]) => extractFieldSemantics(prop as OpenAPIV3.SchemaObject, name) ); } return []; }

3.2 AI Mock 数据生成

// ai-mock-generator.ts interface MockGenerationRequest { endpoint: string; method: string; fields: FieldSemantics[]; count: number; // 生成条数 locale: 'zh-CN' | 'en-US'; edgeCases: boolean; // 是否包含边界用例 } async function generateMockData( request: MockGenerationRequest ): Promise<Record<string, unknown>[]> { const { endpoint, method, fields, count, locale, edgeCases } = request; const fieldsDescription = fields.map((f) => { let desc = `- ${f.name}（${f.type}）`; if (f.description) desc += `：${f.description}`; if (f.format) desc += `，格式：${f.format}`; if (f.enum) desc += `，枚举值：${f.enum.join('/')}`; if (f.constraints.minimum !== undefined) desc += `，最小值：${f.constraints.minimum}`; if (f.constraints.maximum !== undefined) desc += `，最大值：${f.constraints.maximum}`; if (f.constraints.maxLength !== undefined) desc += `，最大长度：${f.constraints.maxLength}`; return desc; }).join('\n'); const systemPrompt = `你是一位专业的测试数据生成专家。根据接口字段定义生成语义丰富、符合真实场景的 Mock 数据。 要求： 1. 数据必须符合字段类型和约束条件 2. 数据应具有真实感：中文姓名、合理的价格、真实的地址等 3. 数据应具有多样性：不同记录之间应有明显差异 4. 语言：${locale === 'zh-CN' ? '中文数据（姓名、地址等使用中文）' : '英文数据'} ${edgeCases ? '5. 在最后 2 条数据中包含边界用例：空字符串、最大长度、特殊字符、零值、负数（如字段允许）' : ''} 输出 JSON 数组格式。`; const userPrompt = `接口：${method.toUpperCase()} ${endpoint} 字段定义： ${fieldsDescription} 请生成 ${count} 条 Mock 数据。`; const response = await callLLM(systemPrompt, userPrompt); const data = JSON.parse(response); // 校验生成的数据是否符合 Schema const validated = validateAgainstSchema(data, fields); return validated; } function validateAgainstSchema( data: Record<string, unknown>[], fields: FieldSemantics[] ): Record<string, unknown>[] { return data.map((item) => { const validated: Record<string, unknown> = {}; fields.forEach((field) => { const value = item[field.name]; if (value === undefined && field.constraints.required) { // 必填字段缺失时用默认值填充 validated[field.name] = getDefaultValue(field); } else { validated[field.name] = value; } }); return validated; }); } function getDefaultValue(field: FieldSemantics): unknown { switch (field.type) { case 'string': return field.enum ? field.enum[0] : ''; case 'number': case 'integer': return field.constraints.minimum || 0; case 'boolean': return false; case 'array': return []; default: return null; } }

3.3 Mock Server 集成

// mock-server.ts import express from 'express'; class MockServer { private app = express(); private mockDataCache = new Map<string, Record<string, unknown>[]>(); constructor(private spec: OpenAPIV3.Document) { this.app.use(express.json()); this.setupRoutes(); } private setupRoutes(): void { // 遍历 OpenAPI 文档中的所有接口，注册 Mock 路由 for (const [path, pathItem] of Object.entries(this.spec.paths)) { for (const method of ['get', 'post', 'put', 'delete'] as const) { const operation = pathItem[method]; if (!operation) continue; const expressPath = path.replace(/{(\w+)}/g, ':$1'); this.app[method](expressPath, async (req, res) => { const cacheKey = `${method}:${path}`; // 使用缓存的 Mock 数据，避免每次请求都调用 LLM if (!this.mockDataCache.has(cacheKey)) { const fields = parseEndpoint(this.spec, path, method); const data = await generateMockData({ endpoint: path, method, fields, count: 20, locale: 'zh-CN', edgeCases: true, }); this.mockDataCache.set(cacheKey, data); } const allData = this.mockDataCache.get(cacheKey)!; // 支持分页参数 const page = parseInt(req.query.page as string) || 1; const pageSize = parseInt(req.query.pageSize as string) || 10; const start = (page - 1) * pageSize; const paginatedData = allData.slice(start, start + pageSize); res.json({ code: 0, data: { list: paginatedData, total: allData.length, page, pageSize, }, }); }); } } } start(port: number = 3001): void { this.app.listen(port, () => { console.log(`Mock Server 运行在 http://localhost:${port}`); }); } }

四、AI Mock 方案的 Trade-offs

生成一致性无法保证：LLM 每次生成的数据不同，同一个接口两次请求可能返回完全不同的数据集。这在开发阶段是可接受的，但在回归测试中会导致测试不稳定。解决方案是：首次生成后缓存到本地 JSON 文件，后续请求直接读取缓存，仅在手动触发时重新生成。

Schema 约束的遵循率：LLM 对复杂约束（如正则 pattern、嵌套对象结构）的遵循率约为 85%-90%。对于严格的约束（如手机号格式），仍需后处理校验和修正。建议在 Mock Server 中增加一层 Schema 校验中间件，自动过滤或修正不符合约束的数据。

Token 成本与生成速度：生成 20 条包含 15 个字段的数据，约消耗 2000-3000 Tokens。按 GPT-4 的价格计算，单个接口的 Mock 数据生成成本约 0.03-0.05 美元。对于一个包含 50 个接口的中型项目，总成本约 1.5-2.5 美元，可接受。但生成速度较慢（每次调用约 2-5 秒），不适合实时生成，应采用预生成 + 缓存策略。

与真实接口的切换成本：当后端接口就绪后，需要从 Mock 切换到真实接口。如果 Mock 数据结构与真实接口不一致，切换成本很高。建议在 Mock 生成时严格遵循 OpenAPI Schema，并在 CI 中加入 Schema 兼容性测试，确保 Mock 数据与真实接口的结构一致。

五、总结

AI 辅助的 Mock 数据生成将前端从"等待后端"的困境中解放出来，通过 OpenAPI Schema 驱动的语义化数据生成，让前端在后端接口就绪前就能进行完整的开发和测试。落地路线上，建议先在项目脚手架中集成 Mock Server，开发阶段自动启动，接口就绪后通过环境变量切换到真实接口。关键原则：Schema 是唯一真相来源，Mock 数据必须严格遵循 Schema，切换到真实接口时零成本。