HTMX 和 FastAPI 绝佳搭配

news2024/9/23 10:19:22

FastAPI的优势

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于基于标准 Python 类型提示使用 Python 3.7+ 构建 API。以下是它的一些主要优点：

性能：FastAPI 基于 Starlette 和 Pydantic 构建，使其与 NodeJS 和 Go 一样快（感谢 Starlette），并且是最快的 Python 框架之一。
易于使用：它提供了直观的 API，使其易于使用且功能强大。由于其简单性，您可以期待显着的开发速度。
自动文档：借助 FastAPI，可以使用 Swagger UI 和 ReDoc 自动生成 API 文档，使开发人员更轻松地理解和使用您的 API。
类型安全：利用 Python 类型提示，FastAPI 有助于在开发早期捕获错误，从而生成更健壮且无错误的代码。

HTMX 的优势

HTMX 是一个 JavaScript 库，允许您直接在 HTML 中访问 AJAX、CSS 、WebSocket 和SSE，使其成为使用动态内容增强网页的强大工具，而无需编写复杂的 JavaScript。其好处包括：

简单性：您可以直接使用 HTML 中的属性向网页添加动态行为，使其更易于阅读和维护。
渐进式增强：HTMX 作为现有服务器渲染页面之上的增强功能，允许您逐步增强 Web 应用程序的交互性。
无需复杂的 JavaScript 框架：使用 HTMX，您可以创建高度交互的 Web 应用程序，而无需依赖繁重的 JavaScript 框架，从而缩短加载时间并提高性能。

使用 FastAPI 和 HTMX 构建全栈应用程序

现在我们了解了好处，让我们深入创建一个简单的应用程序，该应用程序列出项目并允许用户动态地将新项目添加到列表中。

第 1 步：设置您的项目

首先新建一个项目目录并设置虚拟环境：

mkdir fastapi-htmx-demo
cd fastapi-htmx-demo
python3 -m venv venv
venv\Scripts\activate

安装 FastAPI、Uvicorn（ASGI 服务器）和 Jinja2 用于模板化：

pip install fastapi uvicorn jinja2 python-multipart

第 2 步：创建 FastAPI 应用程序

创建一个名为 main.py 的文件并设置 FastAPI 应用程序和路由：

from fastapi import FastAPI, Request, Form
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")

# Dummy datastore
items = ["Item 1", "Item 2"]

@app.get("/", response_class=HTMLResponse)
def get_items(request: Request):
    return templates.TemplateResponse("items.html", {"request": request, "items": items})

@app.post("/add-item")
def add_item(request: Request, item: str = Form(...)):
    items.append(item)
    return templates.TemplateResponse("partials/item.html", {"request": request, "item": item})

第 3 步：设置 Jinja2 模板

创建一个 templates 目录并添加一个 items.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FastAPI + HTMX Demo</title>
    <script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
    <h1>Item List</h1>
    <ul id="item-list">
        {% for item in items %}
        <li>{{ item }}</li>
        {% endfor %}
    </ul>
    <form hx-post="/add-item" hx-target="#item-list" hx-swap="beforeend" hx-include="#item-input">
        <input type="text" id="item-input" name="item" required>
        <button type="submit">Add Item</button>
    </form>
</body>
</html>

接下来，在templates目录中创建partials子目录，在partials 目录中创建一个名为 item.html 的模板文件。这将用于在 FastAPI 服务器中呈现新项目，因为它们是通过浏览器中的 HTMX POST 调用添加的。