4.3 Flask 入门：账本搬进浏览器

4.3 Flask 入门：账本搬进浏览器

本节摘要：Flask 是 Python 世界最轻量的 Web 框架，核心只有一张"路由表"：哪个网址对应哪个函数。本节先花三分钟讲清"为什么入门选 Flask"，然后动手写出轻记账的 Web 版雏形：一个显示账目的首页、一个接收表单的记账接口。Ledger 类原封不动地担任业务核心——前三章的工程化在此兑现回报。

动手前先定目标

阅读完本节，你应当能够：

1. 说出 Flask 与 Django 的定位差异，解释本项目选 Flask 的理由
2. 创建 Flask 应用实例并定义路由与视图函数
3. 从 POST 请求中取出表单数据，调用 Ledger 类完成记账
4. 用重定向解决"刷新重复提交"问题
5. 在调试模式下运行应用并读懂报错页面

选型三分钟：Flask 还是 Django

同一批人做的两个框架，性格相反。Django 是全家桶：自带后台管理、用户系统、数据库层、表单系统，开箱即给一整套，代价是先学完它的一套规矩才能动手。Flask 是积木：核心只管路由和请求响应，数据库、登录全靠你自己选件拼装，代价是初期要自己拿主意。选型的尺子还是 2.3 节那把：覆盖、成熟度、传染性。本书选 Flask，理由有三——概念面小，每个零件看得见摸得着，适合建立"框架不是魔法"的正确直觉；轻记账体量小，用不着全家桶；第五章会自己动手集成 SQLAlchemy，亲手拼一次才知道全家桶帮你省的是什么。Django 没有缺席，第 5 章末有一整节速览它。

图 4-3 Flask 应用的请求处理管线

第一个应用：三行起步

装过 flask（2.4 的环境里已备好），应用本体短得让人不敢相信：

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "轻记账已上线，浏览器里见到我了。"

# 开发服务器启动方式（终端命令，非代码）：
# flask --app main run --debug
​

@app.route("/") 是装饰器，作用是登记路由：把这个函数挂到根路径上。运行后浏览器访问本机的 5000 端口，就能看到返回的字符串。--debug 打开调试模式：改代码自动重启、报错显示完整回溯——开发期务必开着，上线后必须关掉（第 6 章安全节会讲为什么）。

从请求到账本：接上业务

给首页配上真数据，再加记账接口：

from flask import Flask, request, redirect
from ledger import Ledger          # 第三章写好的类，原样复用

app = Flask(__name__)
ledger = Ledger()

@app.route("/")
def index():
    lines = []
    for record in ledger.all():
        lines.append(f"<li>{record['item']} {record['amount']} 元</li>")
    total = sum(r["amount"] for r in ledger.all())
    return f"<h1>本月支出合计 {total:.1f} 元</h1><ul>{''.join(lines)}</ul>"

@app.route("/records", methods=["POST"])
def add_record():
    item = request.form.get("item", "").strip()
    amount = request.form.get("amount", type=float)
    if not item or not amount or amount <= 0:
        return "用途或金额不合法", 400
    ledger.add_record(item, amount)
    return redirect("/")           # 记完跳回首页
​

四个新面孔逐一过：methods=["POST"] 声明这个路由只收 POST——4.1 的"改数据不用 GET"落地；request.form 是表单数据的字典视图，get 方式取值给默认值，用户没填也不崩；redirect("/") 返回一个重定向响应，浏览器收到 302 立刻请求首页；返回元组的第二个元素 400 直接指定状态码——"你提交的数据不对"，4.1 节的状态码知识再次兑现。

现在建一个静态 HTML 测试页（内容用 4.2 的表单，action 指向 records），打开两个窗口：一个开着表单页，一个开着首页。提交一笔账，切到首页刷新——终端程序里的账目出现在了网页上。v0.5 到此成形。

重定向的用意：防刷新重复提交

试着不加重定向直接返回文字：记账成功后按下 F5，浏览器会提示"重新提交表单？"——因为刷新重放了上一次的 POST，同一笔账会被记两遍。重定向把"POST 响应"换成"302 跳转首页"，刷新时浏览器重放的是无害的 GET。这是 Web 开发经典的"提交后重定向"模式，第 6 章前后端分离后它以另一副面孔出现，此处先建立条件反射。

演练与变式

变式一：加路由 /records/clear（POST）清空账目，记得先想清楚这算不算该有的功能——生产系统里"一键清空"必须三思。变式二：把 4.2 的静态表单页改造成由 Flask 返回的页面，表单提交后自动跳回。你会发现 Python 字符串拼 HTML 又丑又容易错——这正是下一节模板引擎存在的理由。

易错点清单

• 忘记 methods 参数：POST 打到只收 GET 的路由上，得到 405 方法不允许
• 直接 trust 表单数据：没校验就入库，负数金额、空用途全放行——后端校验永远不能省
• 调试模式带上生产：--debug 会把源码和密码暴露给任何访客，只属于开发机
• 端口被占用：上次没关干净，换端口或先找到旧进程停掉

本节要点回顾

• Flask 轻、Django 全：小项目选轻框架，亲手拼装学到的是真知识
• 路由表是框架内核：装饰器把网址挂到函数上
• request.form 取表单数据，取值必带默认与校验
• 提交后重定向：302 治好刷新重复提交
• Ledger 类无缝复用：第三章的封装在此兑现——业务核心不因界面更换而重写

页面能用但仍靠字符串拼 HTML，又丑又脆。下一节请出模板引擎，让数据与页面体面地合体。