（一）从 JSON 接口回到页面操作

前一章用 FastAPI 接收模型、查数据库，再把结果交回 JSON。现在继续管理相同的书籍，但让服务器把记录放进 HTML 页面：浏览器显示书架，点击链接打开表单，提交后回到刚刚保存的书。

第十二章已经手动组织过页面和会话。Flask 会接管路径匹配、请求解析、Cookie 会话和模板调用，我们继续检查每一步的数据与状态。这个项目使用第五章的 sqlite3，把数据库连接如何随请求获取和关闭直接展开；前一章的事务、归属和参数绑定知识仍然用得上。

1. 阅读顺序与项目位置

先读（二）至（六），从最小请求进入工厂、上下文和 Blueprint；再读（七）至（十一），连接模板、表单和数据库。（十二）至（十九）完成登录、CSRF、归属、CRUD、跳转和错误页面。最后按（二十）至（二十三）组合项目，实际操作并运行测试。

配套 Flask 示例索引按正文排列代码，完整项目在 shelf_project。短例在 demos 中独立运行；项目文件按标记组合，标明“续写同一文件”的片段接在前段后面，配套文件已经组合好。

2. 准备 Python 3.12 环境

# 项目文件：shelf_project/pyproject.toml
# 声明页面项目依赖，并将 Jinja 模板与静态文件作为包数据一起安装。
[build-system]
requires = ["setuptools>=80"]
build-backend = "setuptools.build_meta"

[project]
name = "reading-flask-shelf"
version = "0.1.0"
description = "Python 3.12 学习笔记的 Flask 个人书架"
requires-python = ">=3.12,<3.13"
dependencies = ["flask>=3.1,<4", "werkzeug>=3.1,<4", "click>=8.1,<9", "httpx>=0.28,<1"]

[dependency-groups]
dev = ["pytest>=9.1,<10", "beautifulsoup4>=4.13,<5"]

[project.scripts]
shelf-books = "shelfweb.cli:main"

[tool.setuptools.packages.find]
where = ["src"]

[tool.setuptools.package-data]
shelfweb = ["schema.sql", "templates/*.html", "templates/auth/*.html", "templates/books/*.html", "static/*.css"]

[tool.pytest.ini_options]
testpaths = ["tests"]

Flask 负责 Web 调用，内部用 Werkzeug 处理请求与响应、用 Jinja 渲染模板；项目直接使用 Werkzeug 的密码和表单工具。Click 用于添加 Flask 命令，HTTPX 用于实际 HTTP 核验。pytest 与 Beautiful Soup 用来检查接口流程和生成的 HTML。

在 Python现代开发示例/Flask/shelf_project 中执行：

# uv 按锁定结果准备 Python 3.12 环境。
uv sync --locked
# 确认项目实际使用的解释器。
uv run python --version

pip + venv 路线使用相同的依赖清单：

# 在项目目录创建虚拟环境，安装锁定的依赖与当前包。
py -3.12 -m venv .venv
.\.venv\Scripts\python.exe -m pip install -r pip-requirements.txt
.\.venv\Scripts\python.exe -m pip install --no-deps -e .

后面的 uv run python 可以换为 .\.venv\Scripts\python.exe，uv run shelf-books 可以换为 .\.venv\Scripts\shelf-books.exe。编辑器继续选择项目 .venv。