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

古典文学网 · 前后端分离全栈项目

这是《Python Web 全栈开发》的综合实战项目:用 Flask 造后端、Vue 3 造前端、 MySQL 存数据,三头合龙成一个真正上线的网站。它不只用来「看」——演示站、API、源码、图纸(流程图 / 原型图)、 十步开发教程全部公开,零基础也能照着一步步搭出同款。

这个项目怎么用:先去作品库搜一首诗,知道要做什么;再打开 API 实验室,看看页面背后是谁在喂数据;然后按开发十步从零搭一遍——十步走完,前后端分离就算真正入门了。

四个入口,各管一件事

都建在本站,点开即用
🏯

项目演示站 → /wenxue/

项目的线上真身:注册 / 登录、赏文学、写书评、收藏、个人中心,点开即玩(数据存于浏览器本地;想调真后端请去 API 实验室)。

🧪

Swagger 文档 → /apidocs

全部接口的在线文档:点开任意接口 → Try it out → Execute,直接看到服务器返回的真实结果。

🧪

API 实验室 → api.html

接口的中文讲解 + 调试台:每个参数是什么意思、为什么要这么设计,配合 Swagger 一起用。

📚

项目文档 → docs.html

技术栈、目录结构、数据库设计、接口约定、部署方式与排错手册——把项目「说清楚」的那部分。

  • 🖼️ 图纸:流程图(架构 / 请求链路 / JWT 鉴权 / ER 图 / 部署拓扑)与 原型图(五个页面的线框稿 + 设计规范),动手之前先看图。
  • 📦 源码:后端 hiflask(Flask,zip 下载) · 前端 hivue(Vue 3,zip 下载), 注释逐句可读(每个文件开头讲思路,每行代码旁边讲含义)。
  • 🧭 课程对照:官方指南 × 12 章 × 源码对照表——每个语法点在项目里的落点。
  • 项目身家:一页看清

    数字都在线上真实跑着
    11万+作品数据(chinese-poetry 数据集灌入)
    18后端接口(Flask 蓝图 × 5 模块)
    5前端页面(Vue Router 路由)
    7数据表(user / article / comment …)
    10开发步骤(零基础可照抄)
    2技术栈(Flask + Vue 3)
    100%线上可用(本站同服务器部署)
    三门课程如何在这个项目里合龙
    课程在这个项目里负责关键产出
    课程一 · MySQL7 张表的库表设计 + SQL 脚本(hiwen.sql)ER 图、建库脚本、索引与约束
    课程二 · Flask18 个 REST 接口:统一响应、JWT 鉴权、分页、CORShiflask 工程蓝图(models / views / utils)
    课程三 · Vue 35 个页面 + axios 封装 + Pinia 登录态 + 路由守卫hivue 工程(Vite 构建,npm run build 即上线)

    开发十步:路线图

    点任意一步直达 → 完整教程 flow.html
    01需求与原型想清楚做什么,画出来 02数据库设计7 张表 + ER 图 + SQL 03后端工程初始化venv / Flask / 蓝图骨架 04数据模型SQLAlchemy 七个模型 05统一响应与鉴权工具success / fail / 登录装饰器 06写完 18 个接口五模块 + Postman 自测 07前端工程初始化Vite / Element Plus / axios 08五个页面逐个做首页 / 列表 / 详情 / 登录 / 我的 09前后端联调代理 / 跨域 / token 三个关卡 10测试与部署上线build / gunicorn / nginx

    30 秒本地跑起来

    先起后端,再起前端;详细版见 flow.html 第 3、7 步
    终端 · 两个窗口
    # 窗口一:后端(MySQL 已导入 hiwen.sql 的前提下)
    cd pyweb/code/hiflask
    python -m venv venv && venv/bin/pip install -r requirements.txt   # Windows: venv\Scripts\pip
    python app.py            # → http://127.0.0.1:5000/api/health
    
    # 窗口二:前端
    cd pyweb/code/hivue
    npm install
    npm run dev              # → http://localhost:5173(Vite 已把 /api 代理给 5000)
    本站线上部署用的是 SQLite(小服务器跑 MySQL 太重)——同一套 SQLAlchemy 模型一行不改, 只在环境变量里把 DB_ENGINE 换成 sqlite。这本身就是很好的一课:ORM 的意义就是让你换数据库不用改业务代码。