FastAPI 和 HTML：一种现代化的全栈实现方法
在上一篇文章中，我介绍了 HTML 是什么以及在应用程序中使用它的好处。HTML 可以解决许多前端问题，那么后端呢？我喜欢 Python 和 FastAPI，而 HTML 和 FastAPI 恰好可以完美结合。这两种技术的结合，可以为你提供一个简单而强大的端到端应用程序开发技术栈。让我们来看看它们是如何集成的！
FastAPI 的优势
FastAPI 是一个现代化的、快速（高性能）的 Web 框架，用于使用 Python 3.7 及更高版本构建 API，它基于标准的 Python 类型提示。以下是它的一些主要优势：
- 性能：FastAPI 基于 Starlette 和 Pydantic 构建，速度与 NodeJS 和 Go 一样快（这要归功于 Starlette），并且是 Python 中最快的框架之一。
- 易用性：它提供直观的 API，既易于使用又功能强大。由于其简洁性，您可以期待开发速度显著提升。
- 自动生成文档：借助 FastAPI，您可以使用 Swagger UI 和 ReDoc 自动生成 API 文档，使开发人员更容易理解和使用您的 API。
- 类型安全：FastAPI 利用 Python 类型提示，帮助在开发早期发现错误，从而生成更健壮、更无错误的代码。
HTMX 的优势
HTMX 是一个 JavaScript 库，它允许您直接在 HTML 中访问 AJAX、CSS 过渡、WebSocket 和服务器发送事件，使其成为无需编写复杂 JavaScript 代码即可增强网页动态内容的强大工具。其优势包括：
- 简单易用：您可以使用 HTML 中的属性直接为网页添加动态行为，使网页更易于阅读和维护。
- 渐进增强：HTML 可以作为现有服务器渲染页面的增强功能，使您可以逐步增强 Web 应用程序的交互性。
- 无需复杂的 JavaScript 框架：借助 HTMX，您可以创建高度交互式的 Web 应用程序，而无需依赖笨重的 JavaScript 框架，从而加快加载速度并提高性能。
使用 FastAPI 和 HTMX 构建全栈应用程序
既然我们已经了解了它的好处，让我们深入创建一个简单的应用程序，该应用程序列出项目并允许用户动态地向列表中添加新项目。
步骤 1：设置您的项目
首先，创建一个新的项目目录并设置虚拟环境：
mkdir fastapi-htmx-demo
cd fastapi-htmx-demo
python3 -m venv venv
source venv/bin/activate
安装 FastAPI、Uvicorn（ASGI 服务器）和 Jinja2（用于模板引擎）：
pip install fastapi uvicorn jinja2 python-multipart
步骤 2：创建 FastAPI 应用程序
创建一个名为 `<filename>` 的文件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>
接下来，创建一个名为 `<template partial>` 的模板部分item.html。这将用于在浏览器中通过 `<HTML>` POST 调用添加新项目时，在 FastAPI 服务器中渲染新项目。
<li>{{ item }}</li>
步骤 4：运行您的应用程序
使用 Uvicorn 运行您的应用程序：
uvicorn main:app --reload
在浏览器中访问http://127.0.0.1:8000该网站，即可查看您的应用程序的实际运行效果。
如果您想在一个地方查看所有代码，请访问这里：https://github.com/jaydev/fastapi-htmx-demo
结论
FastAPI 提供强大的后端支持，兼具高性能和易开发性，而 HTML 则能以最小的努力实现动态的前端交互。这套技术栈学习曲线平缓，适用于各种场景。
我知道以后开发应用时我还会用到这种组合。欢迎在评论区告诉我你最喜欢的 HTML 后端搭配是什么！
文章来源：https://dev.to/jaydevm/fastapi-and-htmx-a-modern-approach-to-full-stack-bma