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 调用添加的。
<li>{{ item }}</li>第 4 步：运行您的应用程序
使用 Uvicorn 运行您的应用程序：
uvicorn main:app --reload
在浏览器中访问 http://127.0.0.1:8000 以查看正在运行的应用程序。
如果您有兴趣查看所有代码，请猛戳：https://github.com/jaydev/fastapi-htmx-demo
结论
FastAPI 提供强大的后端，提供高性能且易于开发，而 HTMX 则允许以最小的努力实现动态前端交互。该技术堆栈具有简单的学习曲线，并且在各种情况下都很有用。
我知道在未来我开发应用程序的时候我会尝试这种组合。请在评论中告诉我您最喜欢的 HTMX 后端配对是什么！
854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
