实战项目：用AI从零搭建一个全栈Web应用

实战项目：用AI辅助开发一个完整Web应用

本章将带你用AI编程工具从零构建一个完整的Web应用——一个个人财务追踪器。你将体验AI编程的全流程：需求分析→架构设计→数据库建模→API开发→前端构建→测试策略→部署上线。重点不是写出完美的代码，而是掌握人机协作编程的高效工作流，这个流程你以后可以复用到任何项目中。

需求分析与产品设计

产品需求定义

在开始写任何代码之前，先明确你要做什么。我们的目标是一个个人记账Web应用，核心功能包括：①收入/支出记录（金额、分类、日期、备注）；②分类管理（自定义收入/支出分类）；③月度统计（按月查看收支汇总和分类占比）；④可视化图表（饼图展示分类占比、折线图展示趋势）；⑤数据导出（CSV格式）。

技术栈选择

**前端**：Next.js 14 + TypeScript + Tailwind CSS + shadcn/ui组件库。Next.js是React的全栈框架，TypeScript提供类型安全，Tailwind简化样式开发，shadcn/ui提供高质量的UI组件。**后端**：Next.js API Routes（App Router格式），不需要单独的后端服务器。**数据库**：SQLite（本地开发）或Supabase（线上部署，免费PostgreSQL）。**ORM**：Prisma——类型安全的数据库操作工具，让你用TypeScript写数据库查询而不是原始SQL。这个技术栈组合对初学者友好，AI工具支持度高，且能免费部署到Vercel。

架构设计——让AI帮你做决策

AI架构设计的正确方式

打开Claude或Cursor的Chat，描述你的需求让AI帮你设计项目架构。Prompt示例：「我要做一个个人记账应用，用Next.js 14 App Router + TypeScript + Prisma + Tailwind CSS。请帮我设计：1.完整的项目文件结构 2.Prisma数据模型（Transaction和Category两个表） 3.API路由列表 4.前端页面列表。要求：简单、可扩展、适合一个人开发。」AI会给出完整的文件结构和数据库Schema。你的工作是审核并调整——架构决策是人的职责，AI只是给出建议。

数据库设计详解

数据库是应用的核心。对于记账应用，我们需要两个主要的数据表：**Transaction表**——记录每一笔收支，包含字段：id（唯一标识）、amount（金额，使用整数存储分，避免浮点数精度问题）、type（收入/支出）、categoryId（关联分类）、description（备注）、date（日期）、createdAt（创建时间）。**Category表**——管理收支分类，包含字段：id、name（分类名称）、type（收入分类/支出分类）、icon（图标标识）、color（颜色代码）。让AI帮你生成Prisma Schema文件，然后审查字段类型和关联关系是否正确。

工具准备

**AI编程助手**：Cursor（最推荐）、GitHub Copilot + VS Code（最成熟）、Windsurf（新秀）。三选一即可，不要同时装多个。**AI对话辅助**：Claude（复杂架构讨论和代码审查）或ChatGPT（快速问答和代码片段），两者配合编程助手使用效率最高。**部署与DevOps**：Vercel（Next.js首选，免费层够用）、Supabase（免费PostgreSQL + Auth）、GitHub（代码托管）。

动手开发：六步详细指南

Step 1——项目初始化（30分钟）

用Cursor创建Next.js项目。在Cursor的Composer中说：「帮我初始化一个Next.js 14 App Router项目，配置TypeScript、Tailwind CSS、Prisma ORM（SQLite）和shadcn/ui。创建.cursorrules文件包含项目规范。」Composer会自动执行命令并创建所有配置文件。你要做的是：①确认npm run dev能正常启动；②检查浏览器中能看到默认页面；③确认Prisma能连接SQLite数据库。

Step 2——数据模型与数据库（30分钟）

让AI帮你定义Prisma Schema。在Chat中说：「在schema.prisma中定义Transaction和Category两个模型。Transaction包含id、amount（Int类型存储分）、type（枚举INCOME/EXPENSE）、description、date、categoryId（关联Category）、createdAt。Category包含id、name、type、icon、color。添加适当的索引。」审核生成的Schema后，运行npx prisma db push创建数据库表。

Step 3——API开发（1-2小时）

逐个创建API路由。顺序建议：先做Category的CRUD（简单，建立信心），再做Transaction的CRUD（稍复杂，有关联查询），最后做统计API（聚合查询）。每个API端点都遵循相同的模式：接收请求→验证参数→操作数据库→返回响应。让AI在Composer中逐个生成，每完成一个就用Thunder Client（VS Code插件）测试。

Step 4——前端组件开发（2-3小时）

前端开发的核心策略是「先骨架后血肉」：先用AI生成所有页面的基础结构（布局、路由、空组件），确认页面间导航正常；然后逐个组件填充功能。关键组件包括：**记账表单组件**——金额输入、分类选择、日期选择器、备注输入框；**交易列表组件**——展示所有收支记录，支持排序和筛选；**统计图表组件**——用Recharts渲染饼图和折线图；**导航栏组件**——页面间切换。让AI生成每个组件时，明确指定使用Tailwind CSS和shadcn/ui。

Step 5——测试策略（1小时）

测试不需要100%覆盖，但关键路径必须测试。让AI帮你写：**API测试**——每个端点至少一个正常路径和一个异常路径测试；**金额计算测试**——确保分到元的转换正确；**组件渲染测试**——确保关键组件能正常渲染。使用Jest和React Testing Library。

Step 6——部署上线（30分钟）

部署流程：①在GitHub上创建仓库并推送代码；②在Supabase创建项目，获取数据库连接URL，修改Prisma配置从SQLite切换到PostgreSQL；③在Vercel中导入GitHub仓库，配置环境变量；④点击Deploy，等待2-3分钟，你的应用就上线了。

代码审查清单——AI代码的常见问题

安全性检查

AI生成的代码经常忽略安全性。你需要检查：①API是否有输入验证（防止SQL注入和XSS）；②敏感信息是否使用环境变量而非硬编码；③是否有适当的错误处理（不要把内部错误信息暴露给前端）；④是否有CORS配置。

性能和代码质量检查

常见的性能问题：①数据库查询是否有N+1问题；②前端是否有不必要的重渲染；③API响应数据是否只返回了必要的字段。代码质量方面：①命名是否一致且有意义；②是否有重复代码可以抽取为共用函数；③TypeScript类型是否正确定义（避免使用any类型）。

项目交付与展示

一个高质量的GitHub仓库应该包含：**README.md**——项目截图（至少3张）、一句话项目介绍、技术栈列表、本地运行指南、在线演示链接、AI工具使用记录。部署前确认：①所有环境变量已配置；②数据库迁移已执行；③首页加载速度在3秒以内；④手机端页面布局正常；⑤基本功能在线上环境正常运行。

进阶挑战：添加用户认证（用NextAuth.js）和数据可视化仪表盘（用Recharts），让应用更完整。这两个功能都可以让AI在30分钟内帮你实现。完成后你的项目就是一个真正的全栈SaaS应用了。