做 AI 测试用例项目时最耗时的一步往往不是写代码本身而是先把项目结构、技术栈、目录、接口约定全部想清楚。尤其是用 AI 辅助开发后需求描述不完整、上下文缺失、结构反复调整反而比手写更慢。最近在用一个 AI 编程工具时发现“Plan 模式”能把这类工作拆解得非常清楚先让我确认方案再让 AI 按计划生成代码。这篇文章就以“AI 测试用例生成平台”为例完整演示如何用 Plan 模式在十分钟内搭好一个前后端分离的全栈项目框架并附上可以直接参考的文档结构、代码骨架和排错思路。适合以下读者正在尝试用 AI 编程工具做全栈项目的开发者。想规范测试用例管理、提升测试效率的测试开发工程师。被“项目结构反复改、AI 越改越乱”困扰的团队负责人。想理解 Plan 模式与手动模式区别并准备把 AI 接入日常开发流程的人。读完本文你将掌握Plan 模式的核心用法全栈项目框架的设计思路AI 测试用例项目的前后端代码骨架从零到可运行验证的完整路径以及在实际使用中常见的坑与规避方法。1. Plan 模式与手动模式AI 协作方式的区别1.1 为什么需要 Plan 模式用 AI 写代码的传统方式通常是人给一句需求AI 返回一段代码。这种方式在小脚本、单文件工具中很高效但一旦涉及全栈项目问题就暴露出来了AI 只能看到当前对话窗口的代码容易忽略全局设计。多次修改后代码风格、目录结构可能前后不一致。用户对 AI 产生的设计缺乏确认环节后期返工成本高。遇到复杂项目AI 容易“自说自话”生成不符合预期的内容。Plan 模式的出现就是为了解决“先想清楚再动手”的问题。在这种模式下AI 不会立刻写代码而是先输出一份完整的项目实施计划包括技术选型、目录结构、模块划分、接口设计、数据库表、风险点等。用户确认无误后再切换到执行阶段由 AI 按照既定计划逐步生成代码。换句话说手动模式用户逐条给指令AI 逐段响应适合局部修改。Plan 模式AI 先出方案用户确认后再执行适合整体搭建、框架设计、重构、多模块协作。1.2 Plan 模式的工作流程一个典型的 Plan 模式流程如下用户描述项目需求包含功能范围、技术偏好、约束条件。AI 输出项目实施计划可能包含多个备选方案。用户审阅计划提出调整意见。如果计划需要修改AI 根据反馈更新方案如果确认通过进入执行模式。执行模式中AI 按计划依次创建文件、安装依赖、编写代码并在关键节点向用户汇报进度。用户在每个阶段进行验证必要时回到计划模式调整方向。这个流程带来的最大价值是在写第一行业代码之前项目的基本框架已经确定。对于 AI 测试用例项目这种涉及前端、后端、数据库、AI 接口、测试执行模块的综合项目Plan 模式的优势非常明显。1.3 什么场景适合用 Plan 模式根据实际使用经验以下场景强烈建议使用 Plan 模式新项目初始化需要确定目录结构和模块边界。技术栈升级需要评估影响范围并制定迁移方案。多模块协作需要先确认接口定义和数据结构。重构老代码需要先梳理现有逻辑再确定改造步骤。需求复杂、描述模糊需要先由 AI 整理成可执行的任务清单。反过来如果只是修改一个函数、修复一个 bug、调整样式手动模式效率更高因为不需要等待 AI 生成完整的上下文。2. 环境准备与版本说明在开始搭建项目之前先确认本地开发环境。本文示例使用以下基础环境操作系统Windows 10 / macOS / Linux 均可不影响流程。后端语言Python 3.10。前端框架Vue 3 Vite。数据库SQLite本地开发生产环境可切换为 PostgreSQL。AI 接口兼容 OpenAI 格式的 API可替换为其他大模型服务。包管理工具后端使用 pip前端使用 npm 或 pnpm。开发工具VS Code 或任意支持终端操作的 IDE。版本说明以上版本以当前主流稳定版为例。实际项目请根据你的环境进行调整重点在于理解配置思路而不是照搬某一组具体版本号。建议先在本地创建如下目录结构ai-test-case-platform/ ├── backend/ ├── frontend/ └── docs/后端使用 FastAPI主要原因是它支持自动生成 OpenAPI 文档异步支持好与 AI 接口的 JSON 交互天然契合。前端使用 Vue 3组件化开发更方便后续扩展测试用例列表、执行报告、AI 生成配置等模块。如果你更熟悉其他技术栈比如 Spring Boot 或 React核心设计思路同样适用只需要把代码骨架对应替换。3. 用 Plan 模式设计全栈项目框架3.1 需求描述示例使用 Plan 模式的第一步是给 AI 一个相对完整的需求描述。这里给出一个可以直接复制的提示词模板请帮我设计一个 AI 测试用例生成平台的全栈项目框架。 功能需求 1. 用户可以输入需求描述调用 AI 生成对应的测试用例。 2. 测试用例支持保存、查看、编辑、删除。 3. 生成历史需要保留用户可以看到每次生成的记录。 4. 后端提供 REST API前端使用 Vue 展示和交互。 5. 数据库存储用户信息、测试用例、生成记录。 技术约束 - 后端使用 Python FastAPI。 - 前端使用 Vue 3 Vite。 - 数据库使用 SQLite 做本地开发。 - AI 接口使用 OpenAI 兼容格式api key 通过环境变量配置。 请先输出项目实施计划不要直接写代码。将这段描述提交给 AI 后在 Plan 模式下它会返回一份结构化的方案通常包括技术选型说明。目录结构。数据库表设计。API 接口定义。前端页面划分。分阶段实施步骤。可能遇到的问题。3.2 技术选型与目录结构设计下面是一个经过 Plan 模式整理后的标准全栈项目结构ai-test-case-platform/ ├── backend/ │ ├── app/ │ │ ├── main.py # FastAPI 入口 │ │ ├── config.py # 配置管理 │ │ ├── models.py # SQLAlchemy 模型 │ │ ├── schemas.py # Pydantic 模型 │ │ ├── api/ │ │ │ ├── test_case.py # 测试用例接口 │ │ │ ├── generation.py # AI 生成接口 │ │ │ └── auth.py # 用户认证接口 │ │ ├── services/ │ │ │ └── ai_service.py # AI 调用服务 │ │ └── database.py # 数据库连接 │ ├── requirements.txt │ └── .env # 环境变量 ├── frontend/ │ ├── src/ │ │ ├── api/ # 前后端接口封装 │ │ ├── views/ │ │ │ ├── Home.vue # 首页AI 生成测试用例 │ │ │ ├── TestCaseList.vue # 测试用例列表 │ │ │ └── History.vue # 生成历史 │ │ ├── router/index.ts # 路由配置 │ │ ├── stores/ # Pinia 状态管理 │ │ └── App.vue │ ├── package.json │ └── vite.config.ts └── docs/ └── API.md # 接口文档这个结构的特点是前后端完全分离可以独立开发、部署。后端按 api / services / models 分层接口逻辑、业务逻辑、数据模型解耦。前端按页面维度组织后续增加功能时只需要添加新页面。3.3 数据库表与 API 设计Plan 模式下AI 会建议至少设计三张表users用户表存储登录账号、密码哈希等。test_cases测试用例表存储用例内容、所属用户、关联的需求描述。generation_records生成记录表存储每次 AI 调用时间、消耗 token、生成结果。API 设计采用 RESTful 风格方法路径功能POST/api/auth/register用户注册POST/api/auth/login用户登录返回 JWTPOST/api/test-cases/generate调用 AI 生成测试用例GET/api/test-cases获取当前用户的用例列表GET/api/test-cases/{id}获取用例详情PUT/api/test-cases/{id}更新用例DELETE/api/test-cases/{id}删除用例GET/api/generation-records获取生成历史这个接口设计已经覆盖了核心业务场景用户登录、AI 生成、用例管理、历史查看。Plan 模式的输出在这个环节就已经把后续编码的关键约定确定下来了。4. 从 Plan 到 Code搭建后端框架4.1 初始化后端依赖确认计划后进入执行阶段。先创建后端目录并初始化依赖文件。文件路径backend/requirements.txtfastapi0.111.0 uvicorn[standard]0.30.1 sqlalchemy2.0.30 pydantic2.7.1 pydantic-settings2.2.1 python-dotenv1.0.1 openai1.30.1 passlib[bcrypt]0.4.6 python-jose[cryptography]3.3.0安装依赖cd backend pip install -r requirements.txt这里选择固定版本号是避免 AI 生成代码时因依赖升级出现不兼容问题。实际项目中可以根据需要升级到更高版本但要先读 changelog 确认破坏性变更。4.2 配置管理文件路径backend/app/config.pyfrom pydantic_settings import BaseSettings from dotenv import load_dotenv load_dotenv() class Settings(BaseSettings): app_name: str AI Test Case Platform database_url: str sqlite:///./test_cases.db ai_api_key: str ai_base_url: str https://api.openai.com/v1 ai_model: str gpt-3.5-turbo secret_key: str change-me-in-production access_token_expire_minutes: int 60 * 24 class Config: env_file .env settings Settings()环境变量文件backend/.envDATABASE_URLsqlite:///./test_cases.db AI_API_KEY你的_API_KEY AI_BASE_URLhttps://api.openai.com/v1 AI_MODELgpt-3.5-turbo SECRET_KEY请修改为随机字符串注意AI_API_KEY不能写死在代码里。通过环境变量管理密钥是保证项目不泄露敏感信息的基本实践。4.3 数据库模型文件路径backend/app/models.pyfrom datetime import datetime from sqlalchemy import Column, Integer, String, Text, DateTime, ForeignKey from sqlalchemy.orm import relationship from .database import Base class User(Base): __tablename__ users id Column(Integer, primary_keyTrue, indexTrue) username Column(String(50), uniqueTrue, indexTrue, nullableFalse) hashed_password Column(String(200), nullableFalse) created_at Column(DateTime, defaultdatetime.utcnow) test_cases relationship(TestCase, back_populatesowner) class TestCase(Base): __tablename__ test_cases id Column(Integer, primary_keyTrue, indexTrue) title Column(String(200), nullableFalse) content Column(Text, nullableFalse) requirement Column(Text, nullableTrue) user_id Column(Integer, ForeignKey(users.id), nullableFalse) created_at Column(DateTime, defaultdatetime.utcnow) owner relationship(User, back_populatestest_cases) class GenerationRecord(Base): __tablename__ generation_records id Column(Integer, primary_keyTrue, indexTrue) user_id Column(Integer, ForeignKey(users.id), nullableFalse) requirement Column(Text, nullableFalse) result Column(Text, nullableFalse) model Column(String(100), nullableTrue) token_used Column(Integer, default0) created_at Column(DateTime, defaultdatetime.utcnow)这里使用 SQLAlchemy 2.0 的声明式模型表结构对应 Plan 阶段的设计。为了让后续接口更清晰把测试用例内容和生成历史分开存储这样用户可以手动修改用例同时保留 AI 的原始生成记录。4.4 FastAPI 入口与接口实现文件路径backend/app/main.pyfrom fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from .database import Base, engine from .api import test_case, generation, auth Base.metadata.create_all(bindengine) app FastAPI(titleAI Test Case Platform) app.add_middleware( CORSMiddleware, allow_origins[http://localhost:5173], allow_credentialsTrue, allow_methods[*], allow_headers[*], ) app.include_router(auth.router, prefix/api/auth, tags[auth]) app.include_router(test_case.router, prefix/api/test-cases, tags[test-cases]) app.include_router(generation.router, prefix/api/test-cases, tags[generation]) app.get(/health) def health_check(): return {status: ok}CORS 配置允许前端开发服务器访问/health接口用于验证服务是否正常启动。AI 生成接口是项目的核心下面给出一个可运行的实现。文件路径backend/app/services/ai_service.pyimport json from openai import OpenAI from ..config import settings client OpenAI( api_keysettings.ai_api_key, base_urlsettings.ai_base_url, ) SYSTEM_PROMPT 你是一个资深的测试工程师。请根据用户提供的需求生成详细的测试用例。 输出格式为 JSON 数组每个用例包含以下字段 - title: 用例标题 - preconditions: 前置条件 - steps: 操作步骤列表 - expected: 预期结果 - priority: 优先级高/中/低 - type: 用例类型功能/性能/安全/兼容性/用户体验 def generate_test_cases(requirement: str) - list[dict]: response client.chat.completions.create( modelsettings.ai_model, response_format{type: json_object}, messages[ {role: system, content: SYSTEM_PROMPT}, {role: user, content: requirement}, ], ) content response.choices[0].message.content try: data json.loads(content) return data.get(test_cases, data) except json.JSONDecodeError: # AI 偶尔会输出非标准 JSON这里做基础兜底 return [{title: 解析失败请重试, content: content}]文件路径backend/app/api/generation.pyfrom fastapi import APIRouter, Depends, HTTPException from pydantic import BaseModel from sqlalchemy.orm import Session from ..database import get_db from ..models import GenerationRecord, TestCase from ..services.ai_service import generate_test_cases from .auth import get_current_user router APIRouter() class GenerateRequest(BaseModel): requirement: str router.post(/generate) def generate_test_case(req: GenerateRequest, db: Session Depends(get_db), userDepends(get_current_user)): if not req.requirement.strip(): raise HTTPException(status_code400, detail需求描述不能为空) result generate_test_cases(req.requirement) record GenerationRecord( user_iduser.id, requirementreq.requirement, resultstr(result), modelgpt-3.5-turbo, token_used0, ) db.add(record) db.commit() db.refresh(record) # 同时保存为测试用例便于用户后续编辑 test_case TestCase( titlereq.requirement[:50], contentstr(result), requirementreq.requirement, user_iduser.id, ) db.add(test_case) db.commit() return {record_id: record.id, test_cases: result}这段代码实现了接收前端传来的需求描述 → 调用 AI 服务生成用例 → 保存生成记录 → 同时创建一条可编辑的测试用例。一个接口同时完成生成和落库简化了前端的调用逻辑。5. 搭建前端框架5.1 初始化 Vue 3 项目如果已经通过 Plan 模式确定了前端目录结构可以直接用 Vite 创建项目cd frontend npm create vitelatest . -- --template vue-ts npm install npm install axios pinia vue-router创建后把 Vite 代理配置好避免前后端联调时的跨域问题。文件路径frontend/vite.config.tsimport { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8000, changeOrigin: true, }, }, }, })5.2 前端 API 封装文件路径frontend/src/api/index.tsimport axios from axios const api axios.create({ baseURL: /api, timeout: 30000, }) // 请求拦截器自动携带 token api.interceptors.request.use((config) { const token localStorage.getItem(token) if (token config.headers) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器统一处理错误 api.interceptors.response.use( (response) response.data, (error) { if (error.response?.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default api5.3 首页AI 生成测试用例文件路径frontend/src/views/Home.vuetemplate div classhome h2AI 测试用例生成/h2 textarea v-modelrequirement placeholder请输入需求描述例如用户注册功能需要验证用户名唯一性、密码强度、邮箱格式 / button :disabledloading clickhandleGenerate {{ loading ? 生成中... : 生成测试用例 }} /button div v-iftestCases.length classresult div v-foritem in testCases :keyitem.title classcase-card h4{{ item.title }}/h4 p classpriority优先级{{ item.priority }}/p ul li v-forstep in item.steps :keystep{{ step }}/li /ul p预期结果{{ item.expected }}/p /div /div /div /template script setup langts import { ref } from vue import api from ../api const requirement ref() const testCases refany[]([]) const loading ref(false) async function handleGenerate() { if (!requirement.value.trim()) { alert(请输入需求描述) return } loading.value true try { const data: any await api.post(/test-cases/generate, { requirement: requirement.value, }) testCases.value data.test_cases } catch (error) { console.error(error) alert(生成失败请检查后端服务和 API Key) } finally { loading.value false } } /script style scoped .home { max-width: 800px; margin: 0 auto; padding: 20px; } textarea { width: 100%; height: 120px; margin-bottom: 12px; padding: 8px; font-size: 14px; } .case-card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-top: 12px; } .priority { font-size: 12px; color: #666; } /style这里用最简单的方式实现了 AI 测试用例生成接口的调用。实际项目中你可以在这个基础上增加 markdown 渲染、用例编辑、标签筛选、导出等功能。6. 运行项目并验证全流程6.1 启动后端cd backend uvicorn app.main:app --reload --port 8000启动成功后终端会显示类似信息INFO: Uvicorn running on http://127.0.0.1:8000 INFO: Application startup complete.访问http://127.0.0.1:8000/docs可以看到 FastAPI 自动生成的 Swagger 文档可以直接在页面中测试接口。如果不需要登录即可测试生成接口可以在generation.py中临时去掉get_current_user依赖。正式项目中必须保留认证防止接口被恶意调用。6.2 启动前端在另一个终端中执行cd frontend npm run dev浏览器访问http://localhost:5173输入一段需求描述点击“生成测试用例”如果配置正确页面会展示 AI 生成的测试用例卡片。6.3 验证数据落库使用 SQLite 命令行或 DB Browser 打开backend/test_cases.db可以看到generation_records表和test_cases表都有数据说明整个链路已经打通。整个流程从 Plan 模式输出方案到前后端代码可运行在依赖安装顺利的情况下确实可以压缩到十分钟左右。核心加速点在于Plan 模式提前确定了目录、接口、表结构执行阶段 AI 不会出现方向性偏差不需要反复重写。7. 常见问题与排查思路问题现象常见原因解决思路AI 生成接口返回 401API Key 未配置或配置错误检查.env中的AI_API_KEY确认是否有余额前端请求跨域失败Vite 代理未生效或后端 CORS 未配置检查vite.config.ts代理确认后端 CORS 白名单包含前端地址FastAPI 启动报错ModuleNotFoundError依赖未安装完整执行pip install -r requirements.txt重新安装生成结果不是合法 JSON大模型输出不稳定在 prompt 中明确要求 JSON 格式并使用response_format参数SQLite 表已存在却报错修改了模型但未迁移测试阶段可删库重建正式环境使用 Alembic 做迁移前端生成按钮一直转圈后端服务未启动或代理地址错误检查后端终端日志先访问/health确认服务状态token_used始终为 0代码未从 OpenAI 响应中解析 token 字段在generate_test_cases中读取response.usage.total_tokens并返回8. 最佳实践与工程建议8.1 把 Plan 模式融入到团队开发流程Plan 模式不应只在最初搭建项目时使用。建议在以下节点回归 Plan 模式新增一个完整模块时先让 AI 输出接口设计。数据库表变更前让 AI 评估影响范围。技术栈升级时先输出迁移计划。需求不明确时用 Plan 模式把模糊描述转化为可执行任务清单。团队协作中AI 生成的 Plan 文档可以直接放入仓库的docs/目录作为技术设计的沉淀。8.2 安全与权限管理AI 测试用例项目涉及用户数据、AI 调用成本、接口安全需要特别关注认证与授权所有写操作接口必须校验登录态不要只在前端做路由守卫。API Key 管理AI 的 API Key 只能放在后端环境变量中前端不能直接暴露。接口限流为生成接口增加频率限制防止有人恶意刷接口造成 token 费用飙升。用户数据隔离查询测试用例列表时必须带user_id条件避免横向越权。敏感信息脱敏日志中不要打印完整的 API Key 和用户密码。8.3 可维护性设计全栈项目的长期维护依赖良好的代码分层和命名规范后端遵循routes - services - models的调用链不跨层调用。前端组件与页面分离复用性高的组件放入components/目录。数据库必须做迁移管理不要依赖create_all上线生产环境。AI 服务的 prompt 独立配置方便后期调试和优化。8.4 性能与成本控制AI 测试用例生成的运行成本主要来自大模型 API 的 token 消耗。建议从几个方向控制prompt 中限制用例数量和详细程度。相同需求重复生成时先查询缓存避免重复调用。生成记录中保存 token 消耗便于月度成本核算。对于生成内容较长的场景考虑使用流式输出提升用户等待体验。8.5 后续可扩展方向当前框架完成之后可以根据业务需要继续扩展增加用例标签与分类支持按模块筛选。接入测试执行引擎让生成的用例直接关联执行结果。支持导出 Excel / Markdown 格式的测试用例文档。增加团队空间允许多人协作编辑用例。引入 CI/CD 流水线在提交代码后自动生成对应模块的测试建议。最后分享一个实际使用中的小技巧Plan 模式下生成的方案文档不要直接丢进仓库当摆设。把它作为项目启动的“验收清单”每完成一个模块就在对应任务上标记完成。这样整个项目推进过程中团队和 AI 都始终围绕同一份计划执行能有效避免“计划是计划、代码是代码”的脱节。 用Plan模式10分钟搭建AI测试用例全栈项目实践
做 AI 测试用例项目时最耗时的一步往往不是写代码本身而是先把项目结构、技术栈、目录、接口约定全部想清楚。尤其是用 AI 辅助开发后需求描述不完整、上下文缺失、结构反复调整反而比手写更慢。最近在用一个 AI 编程工具时发现“Plan 模式”能把这类工作拆解得非常清楚先让我确认方案再让 AI 按计划生成代码。这篇文章就以“AI 测试用例生成平台”为例完整演示如何用 Plan 模式在十分钟内搭好一个前后端分离的全栈项目框架并附上可以直接参考的文档结构、代码骨架和排错思路。适合以下读者正在尝试用 AI 编程工具做全栈项目的开发者。想规范测试用例管理、提升测试效率的测试开发工程师。被“项目结构反复改、AI 越改越乱”困扰的团队负责人。想理解 Plan 模式与手动模式区别并准备把 AI 接入日常开发流程的人。读完本文你将掌握Plan 模式的核心用法全栈项目框架的设计思路AI 测试用例项目的前后端代码骨架从零到可运行验证的完整路径以及在实际使用中常见的坑与规避方法。1. Plan 模式与手动模式AI 协作方式的区别1.1 为什么需要 Plan 模式用 AI 写代码的传统方式通常是人给一句需求AI 返回一段代码。这种方式在小脚本、单文件工具中很高效但一旦涉及全栈项目问题就暴露出来了AI 只能看到当前对话窗口的代码容易忽略全局设计。多次修改后代码风格、目录结构可能前后不一致。用户对 AI 产生的设计缺乏确认环节后期返工成本高。遇到复杂项目AI 容易“自说自话”生成不符合预期的内容。Plan 模式的出现就是为了解决“先想清楚再动手”的问题。在这种模式下AI 不会立刻写代码而是先输出一份完整的项目实施计划包括技术选型、目录结构、模块划分、接口设计、数据库表、风险点等。用户确认无误后再切换到执行阶段由 AI 按照既定计划逐步生成代码。换句话说手动模式用户逐条给指令AI 逐段响应适合局部修改。Plan 模式AI 先出方案用户确认后再执行适合整体搭建、框架设计、重构、多模块协作。1.2 Plan 模式的工作流程一个典型的 Plan 模式流程如下用户描述项目需求包含功能范围、技术偏好、约束条件。AI 输出项目实施计划可能包含多个备选方案。用户审阅计划提出调整意见。如果计划需要修改AI 根据反馈更新方案如果确认通过进入执行模式。执行模式中AI 按计划依次创建文件、安装依赖、编写代码并在关键节点向用户汇报进度。用户在每个阶段进行验证必要时回到计划模式调整方向。这个流程带来的最大价值是在写第一行业代码之前项目的基本框架已经确定。对于 AI 测试用例项目这种涉及前端、后端、数据库、AI 接口、测试执行模块的综合项目Plan 模式的优势非常明显。1.3 什么场景适合用 Plan 模式根据实际使用经验以下场景强烈建议使用 Plan 模式新项目初始化需要确定目录结构和模块边界。技术栈升级需要评估影响范围并制定迁移方案。多模块协作需要先确认接口定义和数据结构。重构老代码需要先梳理现有逻辑再确定改造步骤。需求复杂、描述模糊需要先由 AI 整理成可执行的任务清单。反过来如果只是修改一个函数、修复一个 bug、调整样式手动模式效率更高因为不需要等待 AI 生成完整的上下文。2. 环境准备与版本说明在开始搭建项目之前先确认本地开发环境。本文示例使用以下基础环境操作系统Windows 10 / macOS / Linux 均可不影响流程。后端语言Python 3.10。前端框架Vue 3 Vite。数据库SQLite本地开发生产环境可切换为 PostgreSQL。AI 接口兼容 OpenAI 格式的 API可替换为其他大模型服务。包管理工具后端使用 pip前端使用 npm 或 pnpm。开发工具VS Code 或任意支持终端操作的 IDE。版本说明以上版本以当前主流稳定版为例。实际项目请根据你的环境进行调整重点在于理解配置思路而不是照搬某一组具体版本号。建议先在本地创建如下目录结构ai-test-case-platform/ ├── backend/ ├── frontend/ └── docs/后端使用 FastAPI主要原因是它支持自动生成 OpenAPI 文档异步支持好与 AI 接口的 JSON 交互天然契合。前端使用 Vue 3组件化开发更方便后续扩展测试用例列表、执行报告、AI 生成配置等模块。如果你更熟悉其他技术栈比如 Spring Boot 或 React核心设计思路同样适用只需要把代码骨架对应替换。3. 用 Plan 模式设计全栈项目框架3.1 需求描述示例使用 Plan 模式的第一步是给 AI 一个相对完整的需求描述。这里给出一个可以直接复制的提示词模板请帮我设计一个 AI 测试用例生成平台的全栈项目框架。 功能需求 1. 用户可以输入需求描述调用 AI 生成对应的测试用例。 2. 测试用例支持保存、查看、编辑、删除。 3. 生成历史需要保留用户可以看到每次生成的记录。 4. 后端提供 REST API前端使用 Vue 展示和交互。 5. 数据库存储用户信息、测试用例、生成记录。 技术约束 - 后端使用 Python FastAPI。 - 前端使用 Vue 3 Vite。 - 数据库使用 SQLite 做本地开发。 - AI 接口使用 OpenAI 兼容格式api key 通过环境变量配置。 请先输出项目实施计划不要直接写代码。将这段描述提交给 AI 后在 Plan 模式下它会返回一份结构化的方案通常包括技术选型说明。目录结构。数据库表设计。API 接口定义。前端页面划分。分阶段实施步骤。可能遇到的问题。3.2 技术选型与目录结构设计下面是一个经过 Plan 模式整理后的标准全栈项目结构ai-test-case-platform/ ├── backend/ │ ├── app/ │ │ ├── main.py # FastAPI 入口 │ │ ├── config.py # 配置管理 │ │ ├── models.py # SQLAlchemy 模型 │ │ ├── schemas.py # Pydantic 模型 │ │ ├── api/ │ │ │ ├── test_case.py # 测试用例接口 │ │ │ ├── generation.py # AI 生成接口 │ │ │ └── auth.py # 用户认证接口 │ │ ├── services/ │ │ │ └── ai_service.py # AI 调用服务 │ │ └── database.py # 数据库连接 │ ├── requirements.txt │ └── .env # 环境变量 ├── frontend/ │ ├── src/ │ │ ├── api/ # 前后端接口封装 │ │ ├── views/ │ │ │ ├── Home.vue # 首页AI 生成测试用例 │ │ │ ├── TestCaseList.vue # 测试用例列表 │ │ │ └── History.vue # 生成历史 │ │ ├── router/index.ts # 路由配置 │ │ ├── stores/ # Pinia 状态管理 │ │ └── App.vue │ ├── package.json │ └── vite.config.ts └── docs/ └── API.md # 接口文档这个结构的特点是前后端完全分离可以独立开发、部署。后端按 api / services / models 分层接口逻辑、业务逻辑、数据模型解耦。前端按页面维度组织后续增加功能时只需要添加新页面。3.3 数据库表与 API 设计Plan 模式下AI 会建议至少设计三张表users用户表存储登录账号、密码哈希等。test_cases测试用例表存储用例内容、所属用户、关联的需求描述。generation_records生成记录表存储每次 AI 调用时间、消耗 token、生成结果。API 设计采用 RESTful 风格方法路径功能POST/api/auth/register用户注册POST/api/auth/login用户登录返回 JWTPOST/api/test-cases/generate调用 AI 生成测试用例GET/api/test-cases获取当前用户的用例列表GET/api/test-cases/{id}获取用例详情PUT/api/test-cases/{id}更新用例DELETE/api/test-cases/{id}删除用例GET/api/generation-records获取生成历史这个接口设计已经覆盖了核心业务场景用户登录、AI 生成、用例管理、历史查看。Plan 模式的输出在这个环节就已经把后续编码的关键约定确定下来了。4. 从 Plan 到 Code搭建后端框架4.1 初始化后端依赖确认计划后进入执行阶段。先创建后端目录并初始化依赖文件。文件路径backend/requirements.txtfastapi0.111.0 uvicorn[standard]0.30.1 sqlalchemy2.0.30 pydantic2.7.1 pydantic-settings2.2.1 python-dotenv1.0.1 openai1.30.1 passlib[bcrypt]0.4.6 python-jose[cryptography]3.3.0安装依赖cd backend pip install -r requirements.txt这里选择固定版本号是避免 AI 生成代码时因依赖升级出现不兼容问题。实际项目中可以根据需要升级到更高版本但要先读 changelog 确认破坏性变更。4.2 配置管理文件路径backend/app/config.pyfrom pydantic_settings import BaseSettings from dotenv import load_dotenv load_dotenv() class Settings(BaseSettings): app_name: str AI Test Case Platform database_url: str sqlite:///./test_cases.db ai_api_key: str ai_base_url: str https://api.openai.com/v1 ai_model: str gpt-3.5-turbo secret_key: str change-me-in-production access_token_expire_minutes: int 60 * 24 class Config: env_file .env settings Settings()环境变量文件backend/.envDATABASE_URLsqlite:///./test_cases.db AI_API_KEY你的_API_KEY AI_BASE_URLhttps://api.openai.com/v1 AI_MODELgpt-3.5-turbo SECRET_KEY请修改为随机字符串注意AI_API_KEY不能写死在代码里。通过环境变量管理密钥是保证项目不泄露敏感信息的基本实践。4.3 数据库模型文件路径backend/app/models.pyfrom datetime import datetime from sqlalchemy import Column, Integer, String, Text, DateTime, ForeignKey from sqlalchemy.orm import relationship from .database import Base class User(Base): __tablename__ users id Column(Integer, primary_keyTrue, indexTrue) username Column(String(50), uniqueTrue, indexTrue, nullableFalse) hashed_password Column(String(200), nullableFalse) created_at Column(DateTime, defaultdatetime.utcnow) test_cases relationship(TestCase, back_populatesowner) class TestCase(Base): __tablename__ test_cases id Column(Integer, primary_keyTrue, indexTrue) title Column(String(200), nullableFalse) content Column(Text, nullableFalse) requirement Column(Text, nullableTrue) user_id Column(Integer, ForeignKey(users.id), nullableFalse) created_at Column(DateTime, defaultdatetime.utcnow) owner relationship(User, back_populatestest_cases) class GenerationRecord(Base): __tablename__ generation_records id Column(Integer, primary_keyTrue, indexTrue) user_id Column(Integer, ForeignKey(users.id), nullableFalse) requirement Column(Text, nullableFalse) result Column(Text, nullableFalse) model Column(String(100), nullableTrue) token_used Column(Integer, default0) created_at Column(DateTime, defaultdatetime.utcnow)这里使用 SQLAlchemy 2.0 的声明式模型表结构对应 Plan 阶段的设计。为了让后续接口更清晰把测试用例内容和生成历史分开存储这样用户可以手动修改用例同时保留 AI 的原始生成记录。4.4 FastAPI 入口与接口实现文件路径backend/app/main.pyfrom fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from .database import Base, engine from .api import test_case, generation, auth Base.metadata.create_all(bindengine) app FastAPI(titleAI Test Case Platform) app.add_middleware( CORSMiddleware, allow_origins[http://localhost:5173], allow_credentialsTrue, allow_methods[*], allow_headers[*], ) app.include_router(auth.router, prefix/api/auth, tags[auth]) app.include_router(test_case.router, prefix/api/test-cases, tags[test-cases]) app.include_router(generation.router, prefix/api/test-cases, tags[generation]) app.get(/health) def health_check(): return {status: ok}CORS 配置允许前端开发服务器访问/health接口用于验证服务是否正常启动。AI 生成接口是项目的核心下面给出一个可运行的实现。文件路径backend/app/services/ai_service.pyimport json from openai import OpenAI from ..config import settings client OpenAI( api_keysettings.ai_api_key, base_urlsettings.ai_base_url, ) SYSTEM_PROMPT 你是一个资深的测试工程师。请根据用户提供的需求生成详细的测试用例。 输出格式为 JSON 数组每个用例包含以下字段 - title: 用例标题 - preconditions: 前置条件 - steps: 操作步骤列表 - expected: 预期结果 - priority: 优先级高/中/低 - type: 用例类型功能/性能/安全/兼容性/用户体验 def generate_test_cases(requirement: str) - list[dict]: response client.chat.completions.create( modelsettings.ai_model, response_format{type: json_object}, messages[ {role: system, content: SYSTEM_PROMPT}, {role: user, content: requirement}, ], ) content response.choices[0].message.content try: data json.loads(content) return data.get(test_cases, data) except json.JSONDecodeError: # AI 偶尔会输出非标准 JSON这里做基础兜底 return [{title: 解析失败请重试, content: content}]文件路径backend/app/api/generation.pyfrom fastapi import APIRouter, Depends, HTTPException from pydantic import BaseModel from sqlalchemy.orm import Session from ..database import get_db from ..models import GenerationRecord, TestCase from ..services.ai_service import generate_test_cases from .auth import get_current_user router APIRouter() class GenerateRequest(BaseModel): requirement: str router.post(/generate) def generate_test_case(req: GenerateRequest, db: Session Depends(get_db), userDepends(get_current_user)): if not req.requirement.strip(): raise HTTPException(status_code400, detail需求描述不能为空) result generate_test_cases(req.requirement) record GenerationRecord( user_iduser.id, requirementreq.requirement, resultstr(result), modelgpt-3.5-turbo, token_used0, ) db.add(record) db.commit() db.refresh(record) # 同时保存为测试用例便于用户后续编辑 test_case TestCase( titlereq.requirement[:50], contentstr(result), requirementreq.requirement, user_iduser.id, ) db.add(test_case) db.commit() return {record_id: record.id, test_cases: result}这段代码实现了接收前端传来的需求描述 → 调用 AI 服务生成用例 → 保存生成记录 → 同时创建一条可编辑的测试用例。一个接口同时完成生成和落库简化了前端的调用逻辑。5. 搭建前端框架5.1 初始化 Vue 3 项目如果已经通过 Plan 模式确定了前端目录结构可以直接用 Vite 创建项目cd frontend npm create vitelatest . -- --template vue-ts npm install npm install axios pinia vue-router创建后把 Vite 代理配置好避免前后端联调时的跨域问题。文件路径frontend/vite.config.tsimport { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8000, changeOrigin: true, }, }, }, })5.2 前端 API 封装文件路径frontend/src/api/index.tsimport axios from axios const api axios.create({ baseURL: /api, timeout: 30000, }) // 请求拦截器自动携带 token api.interceptors.request.use((config) { const token localStorage.getItem(token) if (token config.headers) { config.headers.Authorization Bearer ${token} } return config }) // 响应拦截器统一处理错误 api.interceptors.response.use( (response) response.data, (error) { if (error.response?.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default api5.3 首页AI 生成测试用例文件路径frontend/src/views/Home.vuetemplate div classhome h2AI 测试用例生成/h2 textarea v-modelrequirement placeholder请输入需求描述例如用户注册功能需要验证用户名唯一性、密码强度、邮箱格式 / button :disabledloading clickhandleGenerate {{ loading ? 生成中... : 生成测试用例 }} /button div v-iftestCases.length classresult div v-foritem in testCases :keyitem.title classcase-card h4{{ item.title }}/h4 p classpriority优先级{{ item.priority }}/p ul li v-forstep in item.steps :keystep{{ step }}/li /ul p预期结果{{ item.expected }}/p /div /div /div /template script setup langts import { ref } from vue import api from ../api const requirement ref() const testCases refany[]([]) const loading ref(false) async function handleGenerate() { if (!requirement.value.trim()) { alert(请输入需求描述) return } loading.value true try { const data: any await api.post(/test-cases/generate, { requirement: requirement.value, }) testCases.value data.test_cases } catch (error) { console.error(error) alert(生成失败请检查后端服务和 API Key) } finally { loading.value false } } /script style scoped .home { max-width: 800px; margin: 0 auto; padding: 20px; } textarea { width: 100%; height: 120px; margin-bottom: 12px; padding: 8px; font-size: 14px; } .case-card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-top: 12px; } .priority { font-size: 12px; color: #666; } /style这里用最简单的方式实现了 AI 测试用例生成接口的调用。实际项目中你可以在这个基础上增加 markdown 渲染、用例编辑、标签筛选、导出等功能。6. 运行项目并验证全流程6.1 启动后端cd backend uvicorn app.main:app --reload --port 8000启动成功后终端会显示类似信息INFO: Uvicorn running on http://127.0.0.1:8000 INFO: Application startup complete.访问http://127.0.0.1:8000/docs可以看到 FastAPI 自动生成的 Swagger 文档可以直接在页面中测试接口。如果不需要登录即可测试生成接口可以在generation.py中临时去掉get_current_user依赖。正式项目中必须保留认证防止接口被恶意调用。6.2 启动前端在另一个终端中执行cd frontend npm run dev浏览器访问http://localhost:5173输入一段需求描述点击“生成测试用例”如果配置正确页面会展示 AI 生成的测试用例卡片。6.3 验证数据落库使用 SQLite 命令行或 DB Browser 打开backend/test_cases.db可以看到generation_records表和test_cases表都有数据说明整个链路已经打通。整个流程从 Plan 模式输出方案到前后端代码可运行在依赖安装顺利的情况下确实可以压缩到十分钟左右。核心加速点在于Plan 模式提前确定了目录、接口、表结构执行阶段 AI 不会出现方向性偏差不需要反复重写。7. 常见问题与排查思路问题现象常见原因解决思路AI 生成接口返回 401API Key 未配置或配置错误检查.env中的AI_API_KEY确认是否有余额前端请求跨域失败Vite 代理未生效或后端 CORS 未配置检查vite.config.ts代理确认后端 CORS 白名单包含前端地址FastAPI 启动报错ModuleNotFoundError依赖未安装完整执行pip install -r requirements.txt重新安装生成结果不是合法 JSON大模型输出不稳定在 prompt 中明确要求 JSON 格式并使用response_format参数SQLite 表已存在却报错修改了模型但未迁移测试阶段可删库重建正式环境使用 Alembic 做迁移前端生成按钮一直转圈后端服务未启动或代理地址错误检查后端终端日志先访问/health确认服务状态token_used始终为 0代码未从 OpenAI 响应中解析 token 字段在generate_test_cases中读取response.usage.total_tokens并返回8. 最佳实践与工程建议8.1 把 Plan 模式融入到团队开发流程Plan 模式不应只在最初搭建项目时使用。建议在以下节点回归 Plan 模式新增一个完整模块时先让 AI 输出接口设计。数据库表变更前让 AI 评估影响范围。技术栈升级时先输出迁移计划。需求不明确时用 Plan 模式把模糊描述转化为可执行任务清单。团队协作中AI 生成的 Plan 文档可以直接放入仓库的docs/目录作为技术设计的沉淀。8.2 安全与权限管理AI 测试用例项目涉及用户数据、AI 调用成本、接口安全需要特别关注认证与授权所有写操作接口必须校验登录态不要只在前端做路由守卫。API Key 管理AI 的 API Key 只能放在后端环境变量中前端不能直接暴露。接口限流为生成接口增加频率限制防止有人恶意刷接口造成 token 费用飙升。用户数据隔离查询测试用例列表时必须带user_id条件避免横向越权。敏感信息脱敏日志中不要打印完整的 API Key 和用户密码。8.3 可维护性设计全栈项目的长期维护依赖良好的代码分层和命名规范后端遵循routes - services - models的调用链不跨层调用。前端组件与页面分离复用性高的组件放入components/目录。数据库必须做迁移管理不要依赖create_all上线生产环境。AI 服务的 prompt 独立配置方便后期调试和优化。8.4 性能与成本控制AI 测试用例生成的运行成本主要来自大模型 API 的 token 消耗。建议从几个方向控制prompt 中限制用例数量和详细程度。相同需求重复生成时先查询缓存避免重复调用。生成记录中保存 token 消耗便于月度成本核算。对于生成内容较长的场景考虑使用流式输出提升用户等待体验。8.5 后续可扩展方向当前框架完成之后可以根据业务需要继续扩展增加用例标签与分类支持按模块筛选。接入测试执行引擎让生成的用例直接关联执行结果。支持导出 Excel / Markdown 格式的测试用例文档。增加团队空间允许多人协作编辑用例。引入 CI/CD 流水线在提交代码后自动生成对应模块的测试建议。最后分享一个实际使用中的小技巧Plan 模式下生成的方案文档不要直接丢进仓库当摆设。把它作为项目启动的“验收清单”每完成一个模块就在对应任务上标记完成。这样整个项目推进过程中团队和 AI 都始终围绕同一份计划执行能有效避免“计划是计划、代码是代码”的脱节。