码上问学问代码之理,学编程之道

Python Web 全栈开发

把「数据 → 接口 → 页面」这条链路完整打通。这门课以「古典文学网」为贯穿项目,按技术栈拆成三门能独立开设的课——MySQL、Flask、Vue 3,最后用综合实战把它们合体、部署上线。学完你会有的是一个真能跑、能给别人看的项目,而不是一堆零散示例。

依据教材《Python Web全栈开发项目式教程(慕课版)》(段仕浩、李光荣、许建豪 主编,人民邮电出版社,ISBN 978-7-115-66493-8)。教材为「双项目式」:主线项目「古典文学网」贯穿全书,练习项目「红影赏析」同步巩固。本课程完整沿用其项目主线,并把知识按技术栈纵向重切,让自学者也能一章一章走得踏实。

为什么要把一门「全栈」拆成三门课?因为全栈最容易变成「什么都会一点,什么都说不清」。拆开之后:课程一把数据这层打牢,后端 ORM 就不再是黑盒;课程二讲清数据怎么变成接口,你可以用 Postman 独立验证;课程三讲清接口怎么变成页面,前端全程对接真实后端,不写假数据。三课合起来,才是一条完整、可解释、可交付的链路。

01

路线与项目

四步走 + 贯穿项目「古典文学网」+ 前后端分离技术架构

四步走:这条链路怎么走

每门课都能单独开设、单独学

贯穿项目:「古典文学网」

三门课讲的都是它,不写玩具例子

赏文学模块

唐诗宋词元曲的作品列表:分页、按分类筛选、关键词搜索、排序;点进去看作品详情。背后是 works 与 categories 两张表的 JOIN 查询。

书评模块

看别人的书评、发表自己的、回复、点赞、删掉自己发的。要用到 comments / replies / likes 三张表,以及登录态判断。

用户中心

注册、登录(JWT)、看与改个人信息、上传头像、我的收藏。这是「鉴权」与「文件上传」两块硬骨头真正派上用场的地方。

立即体验:古典文学网
无需安装,打开即可浏览、登录、收藏与书评
迁移练习「红影赏析」:每门课的章末练习里,都有一题是把「古典文学网」的做法搬到「红影赏析」(电影主题)。考的不是记忆,是迁移——能在新场景里把方法用出来,才算真的学会了。

技术架构(前后端分离)

三端各自独立,靠 JSON 接口对话
前端 · Vue 3 SPA Vite · Router · Pinia Element Plus · axios 后端 · Flask 3 RESTful API · JWT SQLAlchemy · CORS 数据库 · MySQL 8 7 张表 + 1 视图 utf8mb4 · InnoDB HTTP / JSON SQL / ORM 前后端分离:三端各自独立部署,只靠接口约定耦合 开发期 Vite 代理跨域 · 上线期 Nginx 托管静态 + 反向代理 /api
02

整体项目图解

架构图 · 实体类图 · 时序图,一眼看懂「古典文学网」怎么跑

① 系统部署架构图

四层:浏览器 → Nginx → Gunicorn/Flask → MySQL

上线后,前端不再是「开发时 5173 那个服务」,而是被打包成静态文件,由 Nginx 直接托管;动态请求(/api/*)才被 Nginx 反向代理给 Gunicorn 起的多个 Flask worker,Flask 再去查 MySQL。这样静态资源走 CDN 级别的速度,只有真正的计算才进 Python。

古典文学网 · 系统部署架构(上线期) 浏览器 / 用户 Vue 3 打包后的静态文件(SPA) Nginx(80 / 443) 托管静态 + 反向代理 /api Gunicorn(WSGI) 多 worker 跑 Flask 应用 MySQL 8 7 张表 + 1 视图 · InnoDB HTTPS 反向代理 /api SQL(ORM)

开发期不同:前端跑在 Vite(5173),由 Vite 把 /api 代理到 Flask(5000),前端感知不到跨域;上线期的跨域由 Nginx + 后端 CORS 共同处理(见 Flask 模块《基础概念图解》)。

② 数据库实体类图(7 张表)

谁和谁一对多、谁和谁多对多

「古典文学网」的数据模型是一张清晰的网:分类 → 作品、用户 → 作品(作者)、作品 → 书评 都是一对多;收藏和点赞是两张「中间表」,把「用户 ↔ 作品」的多对多拆开;轮播图可关联一篇作品。这张图就是课程一建库脚本、课程二 ORM 模型、课程三接口字段的共同源头。

1 — * 作者 1 — * 分类 1 — * 评论 1 — * 评论 * — * 收藏 * — * 点赞 FK article_id FK article_id 0..1 — 1 关联 User 用户 id, username, password_hash nickname, avatar, email Category 分类 id, name Article 作品 id, title, author, content category_id, dynasty, views, likes Comment 书评 id, article_id, user_id content, created_at Favorite 收藏(中间表) id, user_id, article_id UserLike 点赞(中间表) id, user_id, article_id Banner 轮播图 id, title, image_url article_id(可空)

③ 登录鉴权时序图

一次「登录 → 带 token 访问」走了几步

把「用户中心怎么认出你是你」画成时间线:登录时 Flask 查库校验密码、签发一张带签名的 JWT 返回;之后前端每次请求把这张 token 放在请求头里,Flask 只验签名、不查库就信你——这就是「无状态」鉴权,也是 Cookie/Session 之外的另一种选择(细节见 Flask 模块《基础概念图解》)。

浏览器 · Vue Nginx Flask MySQL ① POST /api/login {用户名, 密码} ② SELECT user WHERE username=? ③ 用户记录 ④ 比对密码哈希 ⑤ 200 { token: JWT } ⑥ 保存 token(内存/本地) ⑦ GET /api/user/me · Authorization: Bearer <token> ⑧ 验签 JWT(不查库) ⑨ 200 { 用户信息 } 说明:所有请求均经 Nginx 反向代理转发到 Flask(图中省略代理连线,以突出业务逻辑)
03

资源与自学

配套资源,以及 6 个里程碑的自学路径

配套资源

规划、脚本、接口文档、项目骨架、练习工具

课程总体规划 已产出

三门课的逐章大纲、项目设计、环境工具清单、自学路径与里程碑验收、考核方案、参考资料。

规划14 节

RESTful API 接口文档 已产出

18 个接口的完整定义:统一响应格式 {code,msg,data}、JWT 鉴权、分页约定、请求/响应示例。课程二的实现清单、课程三的联调依据。

18 接口JWT联调依据

建库脚本 hiwen.sql 已产出

「古典文学网」7 张表 + 1 视图 + 种子数据 + 配套的练习查询。可直接导入 MySQL 8 运行。

建表种子数据练习查询

环境与工具 工具页

三端环境搭建清单、常用命令速查、Postman 接口测试集合、数据库客户端与排错指南。

环境命令速查Postman

部署与答辩 项目 9

从三端到公网:打包构建 → 建库导入 → Gunicorn 起服 → Nginx 反代 → 防火墙放行,附答辩材料清单、评分维度与 5 分钟演示脚本。

NginxGunicorn答辩

安全编码要点 素质目标

三道门逐项打勾:SQL 注入(参数化/ORM)、密码加密(Werkzeug 哈希)、接口鉴权(JWT + 资源归属),外加 CORS/上传/密钥管理。

SQL注入密码加密JWT

迁移练习「红影赏析」 同步练习

教材配套练习项目(电影主题)。每门课的章末练习都把「古典文学网」的做法搬过来——考的不是记忆,是迁移能力。

迁移练习电影主题

题库与模考 2 套卷

每章穿插自测题,两套期末模拟卷 + 智能组卷(易题加权、尽量让你过关)。考试从这批题库抽。

自测组卷模拟考

自学路径:6 个里程碑

每过一个,都能拿出一个能给别人看的东西

M1 · 三端环境跑通 第 1 周

能跑出 Flask 的 Hello World;能建一个 MySQL 库并连上;能启动一个 Vite 空白页。三个窗口同时亮起来,就是你全栈的第一步。

M2 · 数据库能建能查 课程一末

独立写出「古典文学网」7 张表的建表语句;能写多表 JOIN 统计「每个分类下有几篇作品」。

M3 · 后端接口可跑 课程二末

用 Postman 走通「注册 → 登录 → 拿 token → 带 token 查个人信息」全流程。

M4 · 前后端首次联调 课程三中

Vue 页面能调用 Flask 接口,把数据库里的作品列表渲染到页面上——这是最有成就感的一刻。

M5 · 业务闭环 课程三末

完成「浏览 → 详情 → 写书评 → 点赞 → 收藏 → 个人中心」完整链路。

M6 · 部署上线 综合实战

项目能从公网访问(域名或 IP),别人扫码就能用。

前置要求:先学完本站《Python 程序设计》第 1–7 章(变量、流程控制、函数、列表字典、类与对象、模块)。另外建议会一点 HTML/CSS 与命令行基本操作。不需要任何 Web 开发经验。