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

流程图 · 先看图,再动手

六张图把项目讲透:架构怎么分、请求怎么走、登录怎么验、数据怎么存、先做哪步、最后怎么上线。 每张图下面有一句「怎么用」,课堂投影或自学对照都合适。

阅读顺序建议:① 架构 → ⑤ 路线图(知道全貌和节奏)→ 开工时随用 ② ③ ④ → 上线前看 ⑥。

① 总体架构:为什么是「分离」

前端是发出去的静态文件,后端是只回 JSON 的服务。两者唯一的约定就是 /api 接口——所以可以分开开发、分开部署、分开换。
前后端分离 · 总体架构浏览器用户 · Vue SPAnginx443 · HTTPS · 同域静态 / 接口 分发器前端静态产物dist/index.html + assetsFlask 后端gunicorn × 2 · 127.0.0.1:509918 个接口 · JWT数据SQLite(线上)/ MySQL(课程)① 请求 https://m369d.cn② 静态文件 /wenxue/③ /api/* 反代④ SQLAlchemy同一域名 = 天然同源没有跨域问题

② 一次请求的完整链路

以「点赞」为例:从点击按钮到数据库落账,一共七站。讲联调、排错时对着这张图找「卡在哪一站」。
一次「点赞」请求的完整链路浏览器 / VuenginxFlask / gunicorn用户点「赞」按钮ArticleDetail.vue 里 @click="toggleLike()"api/article.js → request.postapi 层函数:只管调,不写 URL请求拦截器自动加 Authorization: Bearer <token>nginx ^~ /api/同域反代 → 127.0.0.1:5099@article_bp.post("/like")蓝图路由命中@login_required校验 token → 挂 g.current_userUserLike 增删 + likes ± 1SQLAlchemy 提交事务

③ JWT 登录鉴权时序

token 怎么发、怎么存、怎么带、怎么验、过期了怎么办——一张时序图讲完。
JWT 登录鉴权 · 时序图用户Vue 前端Flask 后端MySQL输入用户名密码,点登录POST /api/user/login {username, password}SELECT * FROM user WHERE username=…一行记录(密码是哈希)check_password() 核对 → create_access_token{code:200, data:{token, user}}Pinia 存 token + localStorage 持久化GET /api/user/profile + Bearer token@login_required:验签 → 查用户状态{code:200, data:{profile…}} (若过期:code:401)页面渲染个人中心 (401 → 清态跳登录页)

④ 数据库 ER 图

7 张表、外键与一对多关系。对应 pyweb/sql/hiwen.sql。
数据库 ER 图 · 7 张表(■ 主键 · 关连线为「一对多」)useridusername 🔒唯一password(哈希)nickname / avatarstatus / created_atarticleidtitle / author / dynastycategory_id ↗summary / contentviews / likes(冗余)is_recommend / statuscategoryidname 🔒唯一descriptionsort / statuscommentiduser_id ↗ article_id ↗parent_id(回复)content / likesstatus / created_atfavorite(user_id,article_id)user_id ↗article_id ↗created_atuser_like(user_id,target…)user_id ↗target_typetarget_idcreated_atbanneridtitle / image / linksort / status1 : NN : 11 : N1 : N1 : N↗ 外键 🔒 唯一约束 user_like 用 target_type + target_id 一张表给作品和评论共用

⑤ 开发十步路线图

三条泳道 = 图纸 / 后端 / 前端。注意联调(⑨)为什么排在页面完成之后、部署之前。
开发十步 · 路线图(三条泳道)图纸后端前端① 需求原型② 数据库 ER/SQL③ 后端骨架④ 模型⑤ 响应/鉴权⑥ 18 接口⑦ 前端骨架⑧ 五个页面⑨ 联调⑩ 测试部署⑨ 联调要前后端都在场——这就是为什么后端写完核心、前端骨架建好,就先碰一次头

⑥ 部署拓扑

nginx 是唯一对外的门,四个内部服务各司其职。对应一键部署 [1] 的完整链路。
部署拓扑 · 本站真实形态(一台 1.6G 内存小服务器)阿里云 ECS · Ubuntu 24.04公网 80 / 443certbot 自动续期nginxgzip · 缓存 · 反代 · 门卫/var/www/teach 静态站课程页 + /wenxue/ 演示站hiwen-api.servicegunicorn × 2 · :5099teach-stats :8787访问统计(登录可见)teach-auth :8788私有内容登录门卫/var/lib/hiwen-api/hiwen.dbSQLite 单文件(课程本机用 MySQL 8)用户请求/api/ · /static/读写所有服务只听 127.0.0.1,外网统一走 nginx;systemd Restart=always 挂了自动拉起