← 返回总目录 DAY 07 · 全栈整合
DAY 07 · 课程开始

全栈整合 + AI 驱动项目

把前 6 天的知识串起来,让 AI 帮你做出第一个真·全栈应用

6
章节
3
层架构
1
完整项目
CHAPTER 01

全栈架构鸟瞰图

"全栈" = 一个人/一个团队同时搞前端 + 后端 + 数据库

🌐

前端

Vue 3
浏览器
🖥️

后端

FastAPI
服务器
🗄️

数据库

MySQL
持久存储
[前端] 用户点了"提交留言"按钮
[前端] axios 发送 POST /messages(body: {text:"hi"})
[后端] FastAPI 收到请求,验证参数
[后端] 执行 INSERT INTO messages ...
[数据库] MySQL 把数据写入磁盘
[后端] 返回 {id: 42, text: "hi"}
[前端] 把新留言显示到列表里
🌟
记住这条数据流:用户操作 → 前端发请求 → 后端处理 → 数据库存 → 原路返回。所有 web 应用都是这个套路。
CHAPTER 02

完整项目生命周期

从一个想法到上线,要经过这 5 步

📋
1. 需求

想清楚做什么、给谁用

📐
2. 设计

页面结构 / 接口 / 数据库表

⚙️
3. 开发

前后端编码(AI 加速)

🧪
4. 测试

跑一下、找 bug、AI 修

🚀
5. 部署

上线给真实用户用

💡
新手陷阱:跳过设计直接写代码,写到一半发现表结构不对、接口缺字段,全部返工。AI 时代成本更低,但"先想清楚"依然是最高效的方式。
CHAPTER 03 · 实战

用 AI 做"留言板"

麻雀虽小五脏俱全的小项目,包含前后端 + 数据库

需求梳理

  • 用户能看到所有留言(昵称 + 内容 + 时间)
  • 能发新留言(昵称 + 内容)
  • 能删除自己的留言(靠"删除密码"识别)
  • 移动端友好、界面清新

给 AI 的"全栈一把梭"提示词

角色:你是资深全栈工程师。
上下文:简易留言板,前端 Vue 3(CDN 即可),后端 FastAPI,
        数据库先用 SQLite,后续可换 MySQL。
需求:
  · 后端:
    - GET    /messages          列出所有(按时间倒序)
    - POST   /messages          新建(body: nickname、content、del_pwd)
    - DELETE /messages/{id}     传 del_pwd,匹配才能删
  · 前端:
    - 顶部输入区(昵称 + 内容 + 删除密码 + 提交)
    - 下方留言卡片列表
    - 提交/删除后自动刷新列表
  · 数据库:messages 表(id, nickname, content, del_pwd_hash, created_at)
约束:
  · 给两个文件:backend/main.py、frontend/index.html
  · del_pwd 用 sha256 哈希存
  · 末尾给启动命令和 curl 测试样例
CHAPTER 04

AI 协作最佳实践

🎯

小步快跑

一次让 AI 做 1-2 个功能,跑通再做下一个。

🔍

每段都看懂

AI 写完逐段问"这是什么意思",不然没法维护。

📋

报错全文给

把完整错误 + 触发命令贴给 AI,别只说"报错"。

💾

多版本备份

用 git,AI 大改前 commit,改坏能回滚。

⚠️

敏感操作慎用

AI 提到 DELETE 全表、改权限时一定先看清。

🧪

边写边测

每个接口写完立刻 curl,前端每加功能立刻浏览器跑。

⚠️
AI 不是万能的:它可能"幻觉"出不存在的库;安全相关(鉴权、密码、SQL 注入)要双重确认;性能优化和复杂业务逻辑仍需人把关。
CHAPTER 05

7 天回顾 & 下一步

你已经走完整套基础路线 🎉

  • Day 1 编程思维 + 面向对象(类、对象、三大特性)
  • Day 2 AI 协作工作流 + 提示词四要素
  • Day 3 前端三件套 + Vue 3 入门
  • Day 4 Vue 3 实战 + 让 AI 写前端
  • Day 5 Python + FastAPI 后端
  • Day 6 MySQL + SQL + 表关系
  • Day 7 全栈整合 + AI 驱动完整项目
🎨

前端深入

Pinia / Vue Router / Element Plus

🚀

后端深入

JWT 鉴权 / SQLAlchemy / Redis / Docker

🔧

工程化

git / GitHub / CI/CD / Linux 命令

🤖

AI 协作

Cursor / Claude Code / Cowork

FINAL CHECK

课后小测

答对 3 题以上才能解锁完成

🎓

恭喜完成 7 天速成营!

你已具备 AI 时代的基础开发能力。是时候去检验学习成果了——期末考试在等着你。

上 · 下 · 空格 翻页