AI 辅助的 API 接口 Mock 数据生成：用 TaoToken 统一 Key 打通前端独立开发的数据引擎

1. 前端等接口等到发慌Mock 数据到底卡在哪后端接口没就绪前端页面已经画完这种场景做前端的都懂。你打开编辑器路由、组件、状态管理全写好了唯独fetch(/api/user/list)返回 404页面白屏。于是你开始手写假数据const mockList [{ id: 1, name: 张三, amount: 100 }]。写完之后页面能跑了但问题才刚开始。硬编码 Mock 有三个绕不过去的坑。第一是数据不真实所有用户都叫张三所有金额都是 100列表翻到第二页还是张三你根本看不出分页逻辑对不对。第二是数据不完整只覆盖了正常场景空列表、超长文本、特殊字符、金额为负这些边界情况一个都没有等后端接口上线前端直接崩在边界上。第三是维护成本高接口字段一改Mock 数据得手动同步漏改一处就是线上事故。我试过用 Faker.js 这类库自动生成但它只能按类型随机填充userName给你生成lorem ipsumorderAmount给你生成0.7234语义上完全不对。真正好用的方案是让 AI 读懂 OpenAPI Schema 里的字段名、类型、描述、约束生成语义丰富、边界完整的 Mock 数据。这篇就讲怎么用 TaoToken 统一 Key 打通这条链路让前端在后端接口就绪前就能拿到可用的数据引擎。TaoToken 在这里的角色是统一 API 通道。你不用在项目里维护多个模型厂商的 Key也不用改代码去适配不同 SDK一个 Key 走一个兼容接口就能让 Mock 生成脚本、AI 编码工具、对话调试都接上。官网入口在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 下面所有配置都围绕这两个地址展开。2. 用 TaoToken 统一 Key 搭好 Mock 生成前置2.1 为什么 Mock 生成需要一个统一通道Mock 生成脚本本质上是调 LLM 做结构化输出。你可能会想直接写死某家厂商的 SDK 不就行了。问题在于Mock 生成只是前端独立开发里的一环你后面还要用 AI 补全组件、写单测、调接口报错如果每个场景都接一套 Key 和 SDK项目里会堆一堆配置。TaoToken 的做法是提供一个兼容接口你拿一个 Key改一个base_url就能在 Mock 脚本、编辑器插件、命令行工具之间复用。对前端来说最直接的好处是Mock 生成脚本里不用引入厂商专属 SDK用标准 HTTP 请求就能调依赖干净CI 里跑也不挑环境。2.2 拿 Key 和确认通道先到控制台创建 API Key入口是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsole_keyutm_campaignrewrite 。创建完复制出来形如sk-xxxx后面配置里会用到。如果你还没决定用哪个模型可以先到模型对话页试一下生成效果入口是 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 输入一段 Schema 描述看返回的 JSON 质量确认没问题再写进脚本。Key 的管理页面在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 建议给 Mock 生成单独建一个 Key方便按项目统计用量也方便泄露时单独吊销。2.3 项目里的配置文件骨架前端项目通常有两类配置一类是构建工具或脚本用的config.toml一类是编辑器或 AI 工具用的settings.json。下面给出可复制骨架你按自己项目改路径和 Key 即可。config.toml放在项目根目录给 Mock 生成脚本读取# config.toml [mock] # OpenAPI 文档路径支持本地文件和 URL spec_path ./openapi/user-service.yaml # 生成条数 count 20 # 是否包含边界用例 edge_cases true # 语言环境 locale zh-CN # 缓存文件避免每次请求都调 LLM cache_path ./.mock-cache/user-service.json [llm] # TaoToken 统一通道 base_url https://taotoken.net/api api_key sk-你的Key model gpt-4o-mini # 单次请求超时Mock 生成较慢给足时间 timeout_ms 60000 # 失败重试次数 max_retries 2settings.json放在.vscode/或工具指定目录给编辑器侧的 AI 工具用{ aiMock.baseUrl: https://taotoken.net/api, aiMock.apiKey: sk-你的Key, aiMock.model: gpt-4o-mini, aiMock.specPath: ./openapi/user-service.yaml, aiMock.cacheDir: ./.mock-cache, aiMock.edgeCases: true, aiMock.locale: zh-CN }注意api_key不要提交到 Git。把config.toml里的 Key 换成环境变量读取比如api_key ${TAOTOKEN_API_KEY}在.env或 CI 密钥里注入。3. 可复制的 Mock 生成脚本与 Schema 解析3.1 解析 OpenAPI Schema 提取字段语义Mock 数据质量的上限取决于你喂给模型的上下文。直接把整个 OpenAPI 文档丢进去模型会抓不住重点。正确做法是先解析出目标接口的字段语义再组装 Prompt。// schema-parser.ts import { OpenAPIV3 } from openapi-types; export interface FieldSemantics { name: string; type: string; description?: string; enum?: string[]; format?: string; pattern?: string; example?: unknown; constraints: { minLength?: number; maxLength?: number; minimum?: number; maximum?: number; required?: boolean; }; } export function extractFieldSemantics( schema: OpenAPIV3.SchemaObject, fieldName: string, required false ): 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, }, }; } export 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) { const requiredList (schema.required as string[]) || []; return Object.entries(schema.properties).map(([name, prop]) extractFieldSemantics(prop as OpenAPIV3.SchemaObject, name, requiredList.includes(name)) ); } return []; }这段代码的关键点是把required也提取出来。很多 Mock 方案漏掉必填标记导致生成的数组里缺字段前端一渲染就报undefined。3.2 组装 Prompt 并调用 TaoToken 通道Prompt 的设计决定了生成数据的语义质量。核心思路是把字段名、类型、描述、约束、枚举值全部列清楚再明确要求数据多样性和边界覆盖。// ai-mock-generator.ts import type { FieldSemantics } from ./schema-parser; interface MockGenerationRequest { endpoint: string; method: string; fields: FieldSemantics[]; count: number; locale: zh-CN | en-US; edgeCases: boolean; } export async function generateMockData( request: MockGenerationRequest, config: { baseUrl: string; apiKey: string; model: string } ): PromiseRecordstring, unknown[] { const { endpoint, method, fields, count, locale, edgeCases } request; const fieldsDescription fields .map((f) { let desc - ${f.name}${f.type}${f.constraints.required ? 必填 : }; 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 fetch(${config.baseUrl}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${config.apiKey}, }, body: JSON.stringify({ model: config.model, messages: [ { role: system, content: systemPrompt }, { role: user, content: userPrompt }, ], temperature: 0.8, }), }); if (!response.ok) { throw new Error(Mock 生成请求失败${response.status} ${await response.text()}); } const result await response.json(); const content result.choices?.[0]?.message?.content ?? ; const jsonText content.replace(/json|/g, ).trim(); return JSON.parse(jsonText); }这里temperature设成 0.8是为了让多条数据之间有差异。设太低会生成一堆雷同记录设太高又容易跑偏约束。3.3 校验生成结果并缓存模型生成的数据不能直接信必须过一遍 Schema 校验。校验不通过的字段用默认值兜底同时把结果缓存到本地避免每次请求都调 LLM。// mock-validator.ts import type { FieldSemantics } from ./schema-parser; export function validateAgainstSchema( data: Recordstring, unknown[], fields: FieldSemantics[] ): Recordstring, unknown[] { return data.map((item) { const validated: Recordstring, 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; } }缓存策略很简单以method:path为 key首次生成后写入.mock-cache/下的 JSON 文件后续读取缓存。需要重新生成时删掉缓存文件即可。4. 验证请求与返回结构检查4.1 起一个 Mock Server 并验证把生成的数据挂到 Express 上前端就能直接请求。下面是最小可用的 Mock Server。// mock-server.ts import express from express; import fs from fs; import path from path; const app express(); app.use(express.json()); const cacheDir path.resolve(./.mock-cache); app.get(/api/user/list, (req, res) { const cacheFile path.join(cacheDir, user-service.json); const allData JSON.parse(fs.readFileSync(cacheFile, utf-8)); 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, }, }); }); app.listen(3001, () { console.log(Mock Server 运行在 http://localhost:3001); });启动后用 curl 验证返回结构curl -s http://localhost:3001/api/user/list?page1pageSize3 | jq .data.list | length预期返回3。再检查字段完整性curl -s http://localhost:3001/api/user/list?page1pageSize3 | jq .data.list[0] | keys预期输出包含 Schema 里定义的所有必填字段。如果缺字段说明校验环节没兜住回去检查validateAgainstSchema的必填判断。4.2 边界用例检查如果开了edge_cases最后两条数据应该包含边界值。检查一下curl -s http://localhost:3001/api/user/list?page1pageSize20 | jq .data.list[-2:]看返回的最后两条是否包含空字符串、最大长度文本、特殊字符或零值。如果全是正常数据说明 Prompt 里的边界要求没生效可以把edgeCases的描述再写具体一点比如明确列出「空字符串、最大长度、特殊字符、零值、负数」这几个词。4.3 切换真实接口的检查动作后端接口就绪后切换成本要尽可能低。建议在 Mock Server 和真实接口之间加一层环境变量开关// api-client.ts const USE_MOCK import.meta.env.VITE_USE_MOCK true; const BASE_URL USE_MOCK ? http://localhost:3001 : https://api.yourdomain.com; export async function fetchUserList(page: number, pageSize: number) { const res await fetch(${BASE_URL}/api/user/list?page${page}pageSize${pageSize}); return res.json(); }切换前跑一遍 Schema 兼容性检查把 Mock 返回的字段结构和真实接口返回的字段结构做 diff确保字段名、类型、嵌套层级一致。这一步能避免「Mock 跑得好好的切真实接口就崩」的尴尬。5. 本篇常见错排查5.1 请求返回 401 或 403先确认config.toml里的api_key是否正确以及是否带了Bearer前缀。TaoToken 的兼容接口要求Authorization: Bearer sk-xxxx少写Bearer或多了空格都会 401。如果 Key 是从环境变量读的检查.env文件是否被正确加载Node 脚本里需要dotenv或手动process.env读取。5.2 模型返回的不是纯 JSON模型有时会在 JSON 外面包一层json 代码块或者加一句「以下是生成的数据」。脚本里已经用 replace(/json|/g, )做了清理但如果模型加了额外说明文字JSON.parse还是会失败。解决办法是在 system prompt 里强调「只输出 JSON 数组不要输出任何解释文字」同时在解析前加一层容错找到第一个[和最后一个]截取中间部分再解析。5.3 生成的数据不符合约束如果生成的手机号格式不对、金额超出范围说明模型对约束的遵循率不够。LLM 对复杂约束正则、嵌套对象的遵循率大概在 85% 到 90%剩下的需要后处理。在validateAgainstSchema里加一层格式校验不符合的字段用默认值替换或者重新调一次模型只生成那几条。5.4 生成速度慢页面等不起生成 20 条包含 15 个字段的数据大概消耗 2000 到 3000 Tokens耗时 2 到 5 秒。这个速度不适合实时生成。正确做法是预生成加缓存项目初始化时跑一次生成脚本把数据写入.mock-cache/Mock Server 直接读缓存。只有手动触发「重新生成」时才调 LLM。5.5 缓存文件导致数据不更新改了 Schema 之后缓存文件还是旧的Mock Server 返回的字段对不上。解决办法是在生成脚本里加一个 Schema 哈希校验把 Schema 内容算个 hash存到缓存文件里每次读取时对比不一致就重新生成。这样既保留了缓存的速度又不会用到过期数据。6. 把 Mock 数据引擎接进你的开发流Mock 生成只是第一步真正让前端独立开发跑起来还需要把这条链路接进日常工具。如果你主要在编辑器里写代码可以用 Coding Plan 把 AI 编码和 Mock 生成串起来入口是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 适合长期做前端项目、需要频繁生成和调整 Mock 数据的场景。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有兼容接口的完整参数说明遇到请求格式问题可以先翻这里。如果你用的是 Claude Code 这类命令行工具Anthropic 兼容通道的配置在 https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite 把base_url指过去就能复用同一个 Key。落地路线上建议先在项目脚手架里集成 Mock Server开发阶段自动启动接口就绪后通过VITE_USE_MOCK环境变量切换到真实接口。关键原则是 Schema 作为唯一真相来源Mock 数据严格遵循 Schema切换时零成本。这样前端就不用再等后端数据引擎自己就能转起来。