Python入门构建网页

用纯 Python 构建 Web 应用

本教程将带你从零开始，构建一个交互式的待办事项清单。

fasthtml 的核心哲学是“回归初心，大道至简”。在当今复杂的前后端分离技术栈中 ，它提供了一条返璞归真的路径，旨在让你能用纯粹的 Python 构建从简单到复杂的全栈 Web 应用，彻底告别“前端/后端分离”带来的割裂感。

第一步：环境准备与项目初始化

首先，我们需要安装 fasthtml。它基于 Starlette 和 Uvicorn，性能卓越。

打开你的终端（CMD、PowerShell 或 Terminal）并运行以下命令：

pip install python-fasthtml

安装完成后，创建一个名为 todo_app.py 的文件，准备编写代码。

第二步：Python代码

# -*- coding: utf-8 -*-# ==============================================================================
# 1. 导入与初始化 (Imports & Initialization)
# ==============================================================================
# 从 fasthtml.common 导入所有核心组件。
# fasthtml 巧妙地借助 fastcore.xml 库，将所有标准HTML标签（如Div, P, Form）都变成了Python中的类。
# 这让你可以在纯 Python 代码中直接构建 HTML 结构，无需使用模板语言。
from fasthtml.common import *# AttrDict 允许我们用 `todo.task` 这样的属性访问方式替代 `todo['task']`，让代码更优雅。
from fastcore.utils import *# `fast_app()` 会创建应用实例和路由装饰器。
# app 是一个基于 Starlette 的高性能 ASGI 应用实例。
# rt 是路由对象，用于将 URL 路径（如'/'）与处理函数关联起来。
app, rt = fast_app()# ==============================================================================
# 2. 数据存储 (Data Store)
# ==============================================================================
# 使用带唯一ID的列表来存储数据。
# 原始代码使用 list.index()，当任务重名时会导致错误。唯一ID是更健壮的实践。
todos = []
next_id = 0# ==============================================================================
# 3. 组件化渲染 (Componentized Rendering)
# ==============================================================================
# 将UI元素封装成函数是 fasthtml 的核心优势之一，这极大地促进了代码的复用和组件化。
# 这个函数就是一个可复用的 “ToDo Item” 组件。
def render_todo(todo: AttrDict):"""根据传入的 todo 对象，生成对应的 HTML 列表项 <li>。"""return Li(Div(# --- HTMX 驱动的动态交互 ---# HTMX 是 fasthtml 实现动态交互的秘密武器。# 它让任何HTML元素都能向服务器发请求，并用返回的HTML片段更新页面局部，无需刷新。Input(type="checkbox",checked=todo.done,# hx-post: 点击时，向指定URL发送POST请求。hx_post=f"/toggle/{todo.id}",# hx-target: 指定服务器返回的HTML应该更新哪个元素（使用CSS选择器）。# 'closest li' 表示“找到最近的父级<li>元素”。hx_target="closest li",# hx-swap: 指定如何更新目标元素。# 'outerHTML' 表示用返回的内容完整替换整个目标元素（包括<li>标签自身）。hx_swap="outerHTML",cls="mr-2"),Span(todo.task, cls=("line-through text-gray-500" if todo.done else "")),Button("❌",# hx-delete: 点击时发送 DELETE 请求。hx_delete=f"/delete/{todo.id}",hx_target="closest li",# hx-swap='delete': 一个特殊值，它会直接将目标元素从页面移除。hx_swap="delete",cls="text-red-500 ml-auto"),cls="flex items-center py-2 border-b"))# ==============================================================================
# 4. 页面路由 (Page Routes)
# ==============================================================================
@rt('/')
def get():"""定义根路由('/')的处理器，返回构成整个页面的Python对象。"""return Html(Head(Title('FastHTML ToDo App'),# 引入 Tailwind CSS。fasthtml 可以轻松集成任何CSS框架，如 DaisyUI。Script(src="https://cdn.tailwindcss.com"),# 引入 HTMX 库本身。这是实现所有 "hx-*" 魔法的基础。Script(src="https://unpkg.com/htmx.org@1.9.12"),),Body(Div(H1("我的 FastHTML 待办事项", cls="text-2xl font-bold mb-4 text-center"),Form(Input(type="text", name="task", placeholder="输入新任务...", required=True, cls="border p-2 mr-2 flex-grow"),Button("添加任务", type="submit", cls="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"),# 提交表单时，向 /add URL 发送 POST 请求。hx_post="/add",# 返回的HTML片段将被插入到 id="todo-list" 的元素中。hx_target="#todo-list",# 'beforeend' 表示在目标元素的末尾追加内容。hx_swap="beforeend",# 请求成功后清空输入框，提升用户体验。hx_on="htmx:afterRequest: this.reset()",cls="flex mb-8"),# 初始加载时，渲染所有已存在的待办事项。# 这里的列表推导式完美体现了逻辑与视图的统一。Ul([render_todo(t) for t in todos], id="todo-list"),cls="container mx-auto p-8 max-w-lg bg-white rounded-lg shadow-lg mt-10"),cls="bg-gray-100"))# ==============================================================================
# 5. API 路由 (API Routes for HTMX)
# 这些路由只返回 HTML 片段，供 HTMX 进行局部更新。
# ==============================================================================
@rt('/add')
def post(task: str):"""处理添加任务的请求。FastHTML 会自动将表单字段'task'映射到函数参数。"""global next_idnew_todo = AttrDict(id=next_id, task=task, done=False)todos.append(new_todo)next_id += 1# 仅返回新任务的HTML片段，HTMX会将其追加到列表中。return render_todo(new_todo)@rt('/toggle/{id:int}')
def post(id: int):"""根据ID切换任务的完成状态。"""todo = next((t for t in todos if t.id == id), None)if todo:todo.done = not todo.done# 返回更新后的任务HTML，HTMX会用它替换掉旧的列表项。return render_todo(todo)return ""@rt('/delete/{id:int}')
def delete(id: int):"""根据ID删除任务。"""todo_to_delete = next((t for t in todos if t.id == id), None)if todo_to_delete:todos.remove(todo_to_delete)# 对于 hx-swap="delete"，只需返回一个HTTP 200 OK的空响应即可。return ""# ==============================================================================
# 6. 启动服务 (Run the Server)
# ==============================================================================
if __name__ == "__main__":# 启动 Uvicorn 服务器来运行我们的 ASGI 应用。serve()

第三步：运行你的应用

1. 保存好 todo_app.py 文件。
2. 在终端中，确保你位于该文件所在的目录。
3. 执行命令：

   python todo_app.py
   

4. 你会看到服务器启动的提示。
5. 在浏览器中打开 http://localhost:5001 (或其他端口)，你将看到你的应用界面。

第四步：为什么选择 fasthtml

fasthtml 的优势非常明确：

• 纯粹的 Python：为 Python 开发者，尤其是后端和数据科学家，提供了一条无需深入学习前端框架（如 React, Vue）就能构建全功能 Web 应用的捷径。
• 简化但强大：它将 htmx 的强大功能无缝集成到 Python 中，通过简单的函数调用实现复杂的动态交互，极大地降低了全栈开发的门槛。
• 性能优异：基于 Starlette 和 Uvicorn，具备处理生产环境需求的异步和高性能特性。
• 快速原型验证：对于需要快速将 AI 模型等想法转化为可交互原型的场景，fasthtml 是比 Streamlit 或 Gradio 更灵活、更接近生产形态的选择。

第五步：下一步探索与部署上线

ToDo 应用现在已经在本地运行了。接下来，你可以尝试：

1. 功能扩展：添加“编辑”功能，这会涉及到 hx-get（获取编辑表单）和 hx-put（提交更新）。
2. 异步任务：尝试集成一个外部 API。或者像 AI 图片生成示例一样 ，处理耗时任务，并使用 hx-trigger='every 1s' 进行轮询。
3. 实时通信：对于需要多人协作的应用，可以研究 fasthtml 对 WebSocket 的一流支持。

部署你的应用

fasthtml 应用是标准的 ASGI 应用，可以部署到任何支持 Python 的平台

• Railway：通过 Git 自动化部署，非常适合小型项目。
• Replit：一个在线 IDE，可以在浏览器中一键开发和部署，适合学习和实验。
• HuggingFace Spaces：如果你在构建 AI 应用或模型 Demo，这是理想选择，它提供了优化的环境和免费计算资源。
• 其他：你也可以使用 Vercel、PythonAnywhere 或任何云服务器（VPS）进行传统部署。