fastapi H5

### FastAPI与HTML5(H5)页面的集成

FastAPI 是一个现代、快速（高性能）的Web框架，用于构建API。它允许开发者创建复杂的逻辑并返回JSON响应给客户端。然而，在某些情况下，也需要向用户提供完整的HTML页面而不是仅限于API端点。这可以通过配置FastAPI来提供静态文件和模板支持从而实现。

#### 提供静态文件和支持HTML模板渲染

为了使FastAPI能够处理H5页面请求，可以使用`Jinja2Templates`模块[^4]。此模块使得加载HTML模板变得简单，并能将数据传递到这些模板中以便动态生成内容。下面是一个简单的例子展示如何设置：

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

# 挂载静态文件目录至/static路径下
app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="templates")


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

在这个实例里，首先导入必要的类；接着初始化了一个新的FastAPI应用程序对象；再者通过调用`mount()`方法指定了一个名为`/static`的路由指向本地磁盘上的某个文件夹，该文件夹内放置了所有的CSS样式表、JavaScript脚本和其他媒体资源等静态资产；最后定义了一条GET类型的URL模式匹配规则，当访问根地址时会触发对应的处理器函数，这个函数接收到来自用户的HTTP请求后，利用`TemplateResponse`去查找位于`templates/index.html`中的HTML文档，并将其连同其他参数一起发送回浏览器显示出来。

#### 处理来自HTML5页面的数据提交

除了呈现视图外，通常还需要接受从前端传来的信息做进一步加工。假设有一个带有表单的HTML页面想要把用户输入的信息发往服务器保存起来，则可以在上述基础上增加如下代码片段以完成这一功能：

from pydantic import BaseModel


class Item(BaseModel):
    title: str
    description: str | None = None


@app.post("/submitform/")
async def submit_form(item: Item):
    # 此处可加入业务逻辑操作，比如存入数据库
    return item.dict()

这里引入了Pydantic模型验证库帮助解析POST请求体内的JSON格式字符串转换成Python字典形式的对象，方便后续的操作。同时注意要确保前端发出AJAX请求时指定正确的Content-Type头为application/json以及遵循RESTful API设计原则制定合适的URI命名空间。