把前 6 天的知识串起来,让 AI 帮你做出第一个真·全栈应用
"全栈" = 一个人/一个团队同时搞前端 + 后端 + 数据库
从一个想法到上线,要经过这 5 步
想清楚做什么、给谁用
页面结构 / 接口 / 数据库表
前后端编码(AI 加速)
跑一下、找 bug、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 测试样例
一次让 AI 做 1-2 个功能,跑通再做下一个。
AI 写完逐段问"这是什么意思",不然没法维护。
把完整错误 + 触发命令贴给 AI,别只说"报错"。
用 git,AI 大改前 commit,改坏能回滚。
AI 提到 DELETE 全表、改权限时一定先看清。
每个接口写完立刻 curl,前端每加功能立刻浏览器跑。
你已经走完整套基础路线 🎉
Pinia / Vue Router / Element Plus
JWT 鉴权 / SQLAlchemy / Redis / Docker
git / GitHub / CI/CD / Linux 命令
Cursor / Claude Code / Cowork
答对 3 题以上才能解锁完成
你已具备 AI 时代的基础开发能力。是时候去检验学习成果了——期末考试在等着你。