课程一
MySQL 数据库基础与实战
32 学时 · 落到项目库的表、查询、约束、视图与安全。
课程二
Flask 后端开发
48 学时 · 路由／请求响应／上下文／蓝图／ORM／JWT 认证／文件上传／API 设计规范。
课程三
Vue 3 前端开发
48 学时 · Vite＋组合式 API＋路由＋Pinia＋axios＋Element Plus，做完整 SPA。
综合
项目整合与部署
24 学时 · 三端联调、业务闭环、打包上线（Nginx＋Gunicorn）、答辩。
1课程定位与前置要求
| 课程定位 | 专业核心课 / 项目式教学。以「做中学」为主线，学完能独立完成一个前后端分离的 Web 项目。 |
|---|---|
| 适用对象 | 计算机相关专业学生；或已掌握 Python 基础的社会学习者。 |
| 前置要求 | 必须：Python 语法基础（变量／流程控制／函数／列表字典／类与对象／模块），见本站《Python 程序设计》第 1–7 章。 |
| 建议前置 | HTML 基础（标签、表单）、CSS 基础、命令行基本操作、Git 版本管理。 |
| 能力目标 | ① 能设计并维护关系型数据库；② 能用 Flask 开发规范的 RESTful API；③ 能用 Vue 3 开发交互式单页应用；④ 能独立完成项目部署与联调。 |
| 参考教材 | 《Python Web全栈开发项目式教程（慕课版）》段仕浩 等，人民邮电出版社（"十四五"职业教育国家规划教材） |
| 辅助资料 | Flask／Vue／Element Plus 官方文档（见第 14 节） |
2课程体系：为什么这样拆
教材用的是"双项目式螺旋上升"：主线项目「古典文学网」贯穿全书，练习项目「红影赏析」同步巩固。这种编排非常适合课堂，但对自学者不够友好——知识点是按"项目进度"交织出现的，学生容易"跟着做完了，但说不出为什么"。
因此本规划把内容按技术栈纵向切开，重组为三门可独立开设的课程：
课程一 · MySQL先把"数据存哪儿、怎么查"打牢。有数据库基础后，后端的 ORM 才不是黑盒。
课程二 · Flask再把"数据怎么变成接口"讲透。此前有 MySQL 支撑，能写真实的增删改查 API。
课程三 · Vue 3最后把"接口怎么变成页面"讲透。前端全程对接课程二写的真实接口，不是假数据。
综合实战三端合体：完整业务闭环 + 部署上线 + 答辩。
拆分的三条原则：
① 每门课都能独立交付——课程一学完能独立建库查数据；课程二学完能独立写一套 API（可用 Postman 验证）；课程三学完能独立做 SPA（可对接任意后端）。
② 每门课都"挂着同一个项目"——讲的都是「古典文学网」里真实要用到的部分，不做与项目无关的玩具例子。
③ 顺序有依赖，但可并行教学——建议按 一→二→三 顺序学；若课表需要，二与三可并行（接口按本规划的 API 文档先行约定即可）。
② 每门课都"挂着同一个项目"——讲的都是「古典文学网」里真实要用到的部分，不做与项目无关的玩具例子。
③ 顺序有依赖，但可并行教学——建议按 一→二→三 顺序学；若课表需要，二与三可并行（接口按本规划的 API 文档先行约定即可）。
3贯穿项目：「古典文学网」
3.1 项目简介
一个前后端分离的古典文学赏析平台：用户可以浏览唐诗宋词元曲、按分类筛选、搜索作品、写书评、点赞收藏、管理个人中心。项目足够小，能在一学期做完；又足够完整，覆盖了全栈开发的全部核心技能。
3.2 角色与功能模块
| 模块 | 功能点 | 涉及课程 |
|---|---|---|
| 首页模块 | 轮播图、分类导航、文学推荐、搜索入口 | 二 · 三 |
| 赏文学模块 | 作品列表（分页／分类筛选／关键词搜索／排序）、作品详情 | 一 · 二 · 三 |
| 书评模块 | 书评展示、发表书评、回复、点赞、删除自己的书评 | 二 · 三 |
| 用户中心 | 注册、登录、退出、个人信息展示与修改、头像上传、我的收藏 | 二 · 三 |
| 后台（选做） | 作品／分类的增删改查管理 | 综合 |
3.3 技术架构（前后端分离）
| 层 | 技术选型 | 说明 |
|---|---|---|
| 前端 | Vue 3 + Vite + Vue Router + Pinia + Element Plus + axios | 单页应用（SPA），构建后是纯静态文件 |
| 后端 | Flask 3 + Flask-SQLAlchemy + PyMySQL + Flask-JWT-Extended + Flask-CORS | 只提供 JSON 接口，不渲染页面 |
| 数据库 | MySQL 8.x（utf8mb4 / InnoDB） | 7 张表 + 1 个视图 |
| 部署 | Nginx（静态 + 反向代理）+ Gunicorn（WSGI） | 教材用 Apache，本规划给出 Nginx 方案并附 Apache 对照 |
| 工具 | VS Code / PyCharm、Navicat / DBeaver、Postman / Apifox、Git | 见第 10 节 |
练习项目「红影赏析」：教材的同步练习项目（电影赏析）。本规划把它作为每门课的章末"迁移练习"——学完"作品列表"，自己用同样的方法做出"电影列表"。检验的不是记忆，而是迁移能力。
4课程一 · MySQL 数据库基础与实战
建议学时：32（理论 12 + 上机 20）
| 章 | 章节名称 | 核心知识点 |
|---|---|---|
| 1 | 数据库与 MySQL 入门 | 关系型数据库概念、MySQL 安装与连接、命令行与 Navicat、SQL 语言分类（DDL/DML/DQL/DCL） |
| 2 | 数据查询基础 | SELECT、SELECT DISTINCT、WHERE、ORDER BY、LIMIT |
| 3 | 条件、运算符与模糊查询 | AND / OR / NOT、LIKE 与通配符 % _、IN、BETWEEN、别名、比较与算术运算符 |
| 4 | 聚合函数与分组 | COUNT / SUM / AVG / MIN / MAX、GROUP BY、HAVING、NULL 值处理 |
| 5 | 多表连接与子查询 | INNER / LEFT / RIGHT / CROSS JOIN、自连接、UNION、EXISTS、ANY / ALL、子查询 |
| 6 | 数据的增删改 | INSERT INTO、INSERT … SELECT、UPDATE、DELETE、CASE 表达式 |
| 7 | 表结构、约束与索引 | CREATE / ALTER / DROP TABLE、数据类型、主键／外键／唯一／非空／默认／检查约束、索引、AUTO_INCREMENT、日期时间 |
| 8 | 视图与存储过程 | 创建／使用／删除视图、存储过程入门 |
| 9 | 项目数据库设计实战 | 需求分析→ER 图→三范式→物理建表；设计「古典文学网」7 张表并写建表脚本与种子数据 |
| 10 | 安全与 Python 连接 | SQL 注入原理与预处理语句、用户与权限、备份恢复、PyMySQL 连接 MySQL 做增删改查 |
课程一交付物
- 可运行建库脚本
pyweb/sql/hiwen.sql已产出 - 每章上机练习 + 参考答案待生成
- 「古典文学网」ER 图（教师版 + 学生填空版）待生成
5课程二 · Flask 后端开发
建议学时：48（理论 16 + 上机 32） 对接教材：项目 2 / 3 / 6 / 7 / 8 的后端部分
| 章 | 章节名称 | 核心知识点 | 对应教材课时 |
|---|---|---|---|
| 1 | 全栈开发与 Flask 起步 | 全栈开发概念、前后端分离、虚拟环境、Hello Flask、项目目录规范（hiflask） | 1.2.1–1.3.2 |
| 2 | 路由 | route 装饰器、变量规则 <int:id>、URL 构建、HTTP 方法 | 2.2.2 |
| 3 | 请求与响应 | request 对象、query／form／json 取值、make_response、jsonify | 2.2.3 / 2.2.5 |
| 4 | 应用上下文与请求上下文 | current_app、g 对象、上下文原理 | 2.2.4 |
| 5 | 蓝图与项目工程化 | Blueprint 拆分、配置管理（开发／生产）、应用工厂模式 | 项目结构 |
| 6 | 数据库与 ORM | Flask-SQLAlchemy、模型定义、增删改查、Flask-Migrate 迁移 | 3.3.1 |
| 7 | API 设计规范与统一响应 | RESTful 规范、统一返回格式、全局异常处理、CORS 跨域 | 3.2.1 |
| 8 | 认证与鉴权（JWT） | 密码哈希、注册／登录接口、JWT 签发与校验、@login_required 装饰器 | 2.3.2 / 2.3.3 / 3.3.2 / 3.3.3 |
| 9 | 文件上传与下载 | 文件保存、类型与大小校验、安全文件名、静态资源访问 | 8.2.1 / 8.2.2 |
| 10 | 中间件、请求钩子与消息闪现 | before_request / after_request、flash、请求日志 | 7.2.1 / 7.2.2 |
| 11 | 类视图 | MethodView、基于类的组织方式 | 6.2.1 |
| 12 | 接口测试与文档 | Postman／Apifox 用例、pytest 单元测试、Swagger 自动文档 | 拓展 |
| 13 | 项目后端实战 | 按《API 接口文档》实现作品／书评／收藏／用户中心共 18 个接口 | 项目 2–8 后端 |
课程二交付物
- 完整 API 接口文档
pyweb/docs/API接口文档.md已产出 - 后端项目骨架
hiflask/（可运行、含示例接口）待生成 - 每章讲义 + 可运行示例 + 章末练习待生成
- Postman 接口测试集合
hiwen.postman_collection.json待生成
6课程三 · Vue 3 前端开发
建议学时：48（理论 16 + 上机 32） 对接教材：项目 4 / 5 / 6 / 7 / 8 的前端部分
| 章 | 章节名称 | 核心知识点 | 对应教材课时 |
|---|---|---|---|
| 1 | 前端工程化与 Vue 起步 | Node.js／npm／pnpm、Vite 创建项目、单文件组件 SFC、组合式 API、项目结构（hivue） | 1.3.3 / 1.3.4 |
| 2 | 模板语法与指令 | 插值、v-bind、v-on、v-model 双向绑定、表单处理 | 4.2.3 |
| 3 | 计算属性与侦听器 | computed、watch、过滤器式格式化 | 4.2.4 |
| 4 | 条件渲染与列表渲染 | v-if / v-else / v-show、v-for、:key、数组更新 | 5.2.1 |
| 5 | 生命周期与组合式函数 | onMounted 等生命周期、ref／reactive、自定义组合式函数 | 5.2.2 |
| 6 | 组件化开发 | props / emit / slot、父子通信、组件拆分与复用 | 项目实战 |
| 7 | 路由 Vue Router | 路由配置、动态路由、导航守卫、懒加载 | 4.3.1 |
| 8 | 状态管理 Pinia | store 定义、state / getters / actions、用户状态持久化 | 4.3.1 拓展 |
| 9 | axios 与跨域 | axios 封装、请求／响应拦截器、Token 自动携带、Vite 跨域代理 | 5.2.4 / 4.3.2 / 4.3.3 |
| 10 | Element Plus 组件库 | 表单、表格、分页、轮播图、Upload、Message／MessageBox 反馈 | 6.2.2 / 7.2.3 / 8.2.3 |
| 11 | 项目前端实战 | 首页／赏文学／书评／用户中心四大模块，对接真实后端接口 | 项目 4–8 前端 |
| 12 | 打包构建与联调 | vite build、环境变量、前后端联调排错 | 项目 9 前置 |
课程三交付物
- 前端项目骨架
hivue/（Vite + 路由 + Pinia + Element Plus 已配好）待生成 - 每章讲义 + 可运行组件示例 + 章末练习待生成
- 接口联调对照表（前端页面 ↔ 后端接口）待生成
7综合实战 · 项目整合与部署
建议学时：24 对接教材：项目 9 部署 + 全书收口
| 阶段 | 名称 | 任务 | 产出 |
|---|---|---|---|
| 1 | 需求与设计 | 需求分析、功能清单、ER 图、接口设计、原型草图 | 《需求与设计说明书》 |
| 2 | 数据库实施 | 建库建表、导入种子数据、编写常用查询 | 可运行的 hiwen.sql |
| 3 | 后端开发 | 实现全部接口，Postman 自测通过 | 可运行的后端服务 |
| 4 | 前端开发 | 实现全部页面，与后端联调 | 可运行的前端 SPA |
| 5 | 测试 | 功能测试、异常测试、跨浏览器测试 | 《测试用例与测试报告》 |
| 6 | 部署上线 | 服务器环境、MySQL、Gunicorn 守护、Nginx 配置、HTTPS（可选） | 可公网访问的网址 |
| 7 | 答辩与复盘 | 演示、讲设计取舍、回答提问 | 答辩 PPT + 项目总结 |
部署提示：教材使用 Apache 部署。本规划主推 Nginx + Gunicorn（当前企业主流，配置更清晰）；同时在讲义中给出 Apache 的对照步骤，做到"教材能跑通、主流也不缺"。
8教材项目 → 课程 对照表
教材共 9 个项目，映射到本规划的三门课 + 综合实战，一目了然：
| 教材项目 | 主要内容 | 归入 |
|---|---|---|
| 项目1 搭建开发环境 | 全栈开发、前后端分离、Python/Flask/MySQL/Vue 概览、搭建 hiflask 与 hivue | 课程二、三 第 1 章 |
| 项目2 后端框架解析与开发 | Flask 路由／请求／上下文／响应、注册与登录 API | 课程二 第 2–4、8 章 |
| 项目3 首页 API 开发 | 后端 API 设计规范、Jinja2 模板、数据操作模块 | 课程二 第 6–7 章 · 课程一 第 9 章 |
| 项目4 前端框架解析及开发 | 事件监听与表单绑定、计算属性与侦听器、前端框架搭建、Token 管理、跨域 | 课程三 第 2–3、7–9 章 |
| 项目5 首页模块开发 | 条件与列表渲染、生命周期、vue-axios、轮播图、文学推荐、注册功能 | 课程三 第 4–5、9–11 章 |
| 项目6 赏文学模块开发 | Flask 类视图、Element Plus 组件、用户中心显示与退出 | 课程二 第 11 章 · 课程三 第 10–11 章 |
| 项目7 书评模块开发 | Flask 中间件／消息闪现、Element Plus、书评展示／发表／评价 | 课程二 第 10 章 · 课程三 第 10–11 章 |
| 项目8 用户中心模块开发 | 文件上传下载、Upload 组件、个人信息展示／头像上传／信息修改 | 课程二 第 9 章 · 课程三 第 10–11 章 |
| 项目9 部署项目 | 安装服务器、项目部署 | 综合实战 第 6 阶段 |
9每课统一教学结构
沿用本站《Python 程序设计》已验证的三段式 + 可运行代码台教学模式，保证站内风格统一、学生上手即懂：
| 环节 | 作用 | 形式 |
|---|---|---|
| ① 先讲为什么 | 先回答"这技术解决什么问题、为什么需要它"，建立动机 | 生活化类比 + 一个真实痛点 |
| ② 动手做 | 最小可运行示例，边写边看结果 | 代码块（标「可运行」）+ 真实运行结果 |
| ③ 讲透 | 原理、常见坑、与项目的关系 | 要点 + 避坑提示（warn） |
| ④ 章末小结 | 把本章串成一条线 | 小结卡片 |
| ⑤ 动手练习 | 巩固 + 迁移（红影赏析项目） | 练习 + 折叠参考答案 |
10环境与工具清单
| 用途 | 推荐 | 版本 / 说明 |
|---|---|---|
| Python 环境 | Python + venv 虚拟环境 | 3.10 及以上（建议 3.11/3.12） |
| 后端依赖 | Flask、Flask-SQLAlchemy、PyMySQL、Flask-JWT-Extended、Flask-CORS、Flask-Migrate | 以最新稳定版为准；提供 requirements.txt |
| 数据库 | MySQL Server | 8.x（utf8mb4 / InnoDB） |
| 数据库客户端 | Navicat 或 DBeaver（免费） | DBeaver 社区版免费，跨平台 |
| Node 运行时 | Node.js LTS | 18 / 20 LTS；包管理器 npm 或 pnpm |
| 前端构建 | Vite | 随 create-vue 脚手架生成 |
| 代码编辑器 | VS Code（推荐插件：Volar、Python、ESLint）或 PyCharm | 前后端通吃 |
| 接口测试 | Postman 或 Apifox | Apifox 中文、可生成文档 |
| 版本管理 | Git + Gitee / GitHub | 养成提交习惯，作为过程性考核依据 |
| 浏览器调试 | Chrome DevTools | 看网络请求、调接口 |
11全套资料清单
11.1 本期已产出已完成
| 文件 | 内容 |
|---|---|
pyweb/课程规划.html | 本文件：课程体系、三门课逐章大纲、项目设计、资料清单、自学路径 |
pyweb/sql/hiwen.sql | 可运行的建库建表脚本：7 张表 + 1 视图 + 种子数据 + 配套练习查询 |
pyweb/docs/API接口文档.md | 18 个 RESTful 接口的完整定义（统一响应、JWT、分页、请求/响应示例） |
11.2 待生成（建议分批产出）下一步
| 批次 | 资料 | 说明 |
|---|---|---|
| A | 课程一 MySQL 全套讲义 | 10 章：讲义 + 可运行 SQL + 练习 + 参考答案 + ER 图 |
| B | 课程二 Flask 全套讲义 | 13 章 + 后端项目骨架 hiflask/ + Postman 集合 |
| C | 课程三 Vue 全套讲义 | 12 章 + 前端项目骨架 hivue/ + 联调对照表 |
| D | 综合实战包 | 需求与设计说明书模板、项目工作手册（任务分解）、测试用例模板、部署手册 |
| E | 教学附件（可选） | 配套 PPT、教案、教学进度安排表、考核评分表 |
11.3 外部现成资源（直接可用）
| 类别 | 资源 |
|---|---|
| 教材配套 | 人邮教育社区（含 PPT／教案／项目工作手册／API 文档／数据库／素材）：m.ryjiaoyu.com/book/details/52244 人邮学院在线课（含课时视频）：rymooc.com/course/show/1121 |
| Flask | 官方文档（中英）：flask.palletsprojects.com ｜ 中文版：dormousehole.readthedocs.io |
| Vue 3 | 官方中文文档：cn.vuejs.org ｜ Vite：cn.vitejs.dev |
| 生态 | Vue Router：router.vuejs.org/zh ｜ Pinia：pinia.vuejs.org/zh ｜ Element Plus：element-plus.org ｜ axios：axios-http.com/zh |
| 数据库 | MySQL 官方文档：dev.mysql.com/doc ｜ SQLAlchemy：docs.sqlalchemy.org |
12自学路径与里程碑验收
面向自学者，把三门课拆成 6 个"可验收里程碑"。每过一个里程碑，都能得到一个能给别人看的东西——这是自学能坚持下去的关键。
| 里程碑 | 目标 | 验收标准（做到了才算过） |
|---|---|---|
| M1 | 三端环境跑通 | 能跑出 Flask 的 Hello World；能建一个 MySQL 库并连上；能启动一个 Vite 空白页 |
| M2 | 数据库能建能查 | 独立写出「古典文学网」7 张表的建表语句；能写多表 JOIN 查询统计"每个分类有几篇作品" |
| M3 | 后端接口可跑 | 用 Postman 走通"注册 → 登录 → 拿 token → 带 token 查个人信息" |
| M4 | 前后端首次联调 | Vue 页面能调用 Flask 接口，把作品列表渲染到页面上 |
| M5 | 业务闭环 | 完成"浏览 → 详情 → 写书评 → 点赞 → 收藏 → 个人中心"完整链路 |
| M6 | 部署上线 | 项目能从公网访问（域名或 IP），别人扫码能用 |
自学建议节奏：每周 6–8 小时。课程一约 4 周，课程二约 7 周，课程三约 7 周，综合实战约 3 周，合计约 21 周（一学期）。每完成一章，务必合上答案自己写一遍——看得懂和写得出是两件事。
13考核评价方案
| 模块 | 占比 | 评价依据 |
|---|---|---|
| 过程性考核 | 40% | 每章练习完成度、里程碑验收（M1–M5）、Git 提交记录、课堂／线上表现 |
| 项目考核 | 50% | 功能完整度（40%）、代码规范与结构（20%）、界面与体验（15%）、文档与部署（15%）、答辩表现（10%） |
| 拓展加分 | 10% | 完成后台管理模块／完成「红影赏析」迁移项目／加 Docker 部署／写技术博客 |
14参考资料
- 主教材：段仕浩、李光荣、许建豪．《Python Web全栈开发项目式教程（慕课版）》．人民邮电出版社，2025．ISBN 978-7-115-66493-8
- Flask：官方文档 flask.palletsprojects.com；中文 dormousehole.readthedocs.io
- Vue 3 / Vite / Router / Pinia / Element Plus / axios：各自官方中文文档（见 11.3）
- MySQL 8：dev.mysql.com/doc；SQLAlchemy：docs.sqlalchemy.org
- 教学法参考：本书采用的"双项目式螺旋上升"（主线项目 + 同步练习项目）——本规划完整沿用其项目主线