把「数据 → 接口 → 页面」这条链路完整打通。这门课以「古典文学网」为贯穿项目,按技术栈拆成三门能独立开设的课——MySQL、Flask、Vue 3,最后用综合实战把它们合体、部署上线。学完你会有的是一个真能跑、能给别人看的项目,而不是一堆零散示例。
为什么要把一门「全栈」拆成三门课?因为全栈最容易变成「什么都会一点,什么都说不清」。拆开之后:课程一把数据这层打牢,后端 ORM 就不再是黑盒;课程二讲清数据怎么变成接口,你可以用 Postman 独立验证;课程三讲清接口怎么变成页面,前端全程对接真实后端,不写假数据。三课合起来,才是一条完整、可解释、可交付的链路。
数据存哪儿、怎么查。从 SELECT 到多表 JOIN、约束索引、视图与存储过程,最后落到「古典文学网」7 张表的设计与建库。
数据怎么变成接口。路由、请求响应、上下文、蓝图工程化、ORM、JWT 鉴权、文件上传,最后实现整站的 RESTful API。
接口怎么变成页面。Vite 工程化、组合式 API、组件化、路由、Pinia、axios 封装、Element Plus,做出完整 SPA。
三端合体:需求设计 → 建库 → 后端 → 前端 → 测试 → 上线 → 答辩。7 个阶段,每个阶段都留下一份能交的东西。
唐诗宋词元曲的作品列表:分页、按分类筛选、关键词搜索、排序;点进去看作品详情。背后是 works 与 categories 两张表的 JOIN 查询。
看别人的书评、发表自己的、回复、点赞、删掉自己发的。要用到 comments / replies / likes 三张表,以及登录态判断。
注册、登录(JWT)、看与改个人信息、上传头像、我的收藏。这是「鉴权」与「文件上传」两块硬骨头真正派上用场的地方。
上线后,前端不再是「开发时 5173 那个服务」,而是被打包成静态文件,由 Nginx 直接托管;动态请求(/api/*)才被 Nginx 反向代理给 Gunicorn 起的多个 Flask worker,Flask 再去查 MySQL。这样静态资源走 CDN 级别的速度,只有真正的计算才进 Python。
开发期不同:前端跑在 Vite(5173),由 Vite 把 /api 代理到 Flask(5000),前端感知不到跨域;上线期的跨域由 Nginx + 后端 CORS 共同处理(见 Flask 模块《基础概念图解》)。
「古典文学网」的数据模型是一张清晰的网:分类 → 作品、用户 → 作品(作者)、作品 → 书评 都是一对多;收藏和点赞是两张「中间表」,把「用户 ↔ 作品」的多对多拆开;轮播图可关联一篇作品。这张图就是课程一建库脚本、课程二 ORM 模型、课程三接口字段的共同源头。
把「用户中心怎么认出你是你」画成时间线:登录时 Flask 查库校验密码、签发一张带签名的 JWT 返回;之后前端每次请求把这张 token 放在请求头里,Flask 只验签名、不查库就信你——这就是「无状态」鉴权,也是 Cookie/Session 之外的另一种选择(细节见 Flask 模块《基础概念图解》)。
三门课的逐章大纲、项目设计、环境工具清单、自学路径与里程碑验收、考核方案、参考资料。
18 个接口的完整定义:统一响应格式 {code,msg,data}、JWT 鉴权、分页约定、请求/响应示例。课程二的实现清单、课程三的联调依据。
「古典文学网」7 张表 + 1 视图 + 种子数据 + 配套的练习查询。可直接导入 MySQL 8 运行。
三端环境搭建清单、常用命令速查、Postman 接口测试集合、数据库客户端与排错指南。
从三端到公网:打包构建 → 建库导入 → Gunicorn 起服 → Nginx 反代 → 防火墙放行,附答辩材料清单、评分维度与 5 分钟演示脚本。
三道门逐项打勾:SQL 注入(参数化/ORM)、密码加密(Werkzeug 哈希)、接口鉴权(JWT + 资源归属),外加 CORS/上传/密钥管理。
教材配套练习项目(电影主题)。每门课的章末练习都把「古典文学网」的做法搬过来——考的不是记忆,是迁移能力。
每章穿插自测题,两套期末模拟卷 + 智能组卷(易题加权、尽量让你过关)。考试从这批题库抽。
能跑出 Flask 的 Hello World;能建一个 MySQL 库并连上;能启动一个 Vite 空白页。三个窗口同时亮起来,就是你全栈的第一步。
独立写出「古典文学网」7 张表的建表语句;能写多表 JOIN 统计「每个分类下有几篇作品」。
用 Postman 走通「注册 → 登录 → 拿 token → 带 token 查个人信息」全流程。
Vue 页面能调用 Flask 接口,把数据库里的作品列表渲染到页面上——这是最有成就感的一刻。
完成「浏览 → 详情 → 写书评 → 点赞 → 收藏 → 个人中心」完整链路。
项目能从公网访问(域名或 IP),别人扫码就能用。