模板¶

您可以使用任何您想要的模板引擎与 FastAPI 结合使用。

一个常见的选择是 Jinja2，Flask 和其他工具也使用它。

有一些实用程序可以轻松配置它，您可以在您的 FastAPI 应用程序中直接使用它们（由 Starlette 提供）。

安装依赖项¶

确保您创建了一个虚拟环境，激活它，并安装 jinja2

$ pip install jinja2

---> 100%

使用 `Jinja2Templates`¶

导入 Jinja2Templates。
创建一个 templates 对象，以便以后重复使用。
在将返回模板的路径操作中声明一个 Request 参数。
使用您创建的 templates 渲染并返回一个 TemplateResponse，传递模板的名称、请求对象和一个包含键值对的“上下文”字典，这些键值对将在 Jinja2 模板中使用。

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

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")


templates = Jinja2Templates(directory="templates")


@app.get("/items/{id}", response_class=HTMLResponse)
async def read_item(request: Request, id: str):
    return templates.TemplateResponse(
        request=request, name="item.html", context={"id": id}
    )

注意

在 FastAPI 0.108.0、Starlette 0.29.0 之前，name 是第一个参数。

此外，在此之前，在以前的版本中，request 对象作为 Jinja2 上下文中的键值对的一部分传递。

提示

通过声明 response_class=HTMLResponse，文档 UI 将能够知道响应将是 HTML。

"技术细节"

您也可以使用 from starlette.templating import Jinja2Templates。

FastAPI 提供与 fastapi.templating 相同的 starlette.templating，只是为了方便您，开发人员。但大多数可用的响应都直接来自 Starlette。Request 和 StaticFiles 也一样。

编写模板¶

然后，您可以在 templates/item.html 中编写一个模板，例如

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id) }}">Item ID: {{ id }}</a></h1>
</body>
</html>

模板上下文值¶

在包含以下内容的 HTML 中

Item ID: {{ id }}

...它将显示从您传递的“上下文”dict 中获取的 id

{"id": id}

例如，对于 ID 为 42，这将呈现为

Item ID: 42

模板 `url_for` 参数¶

您也可以在模板内部使用 url_for()，它接受作为参数的与您的路径操作函数将使用的参数相同的参数。

因此，包含以下内容的部分

<a href="{{ url_for('read_item', id=id) }}">

...将生成一个指向由路径操作函数 read_item(id=id) 处理的相同 URL 的链接。

例如，对于 ID 为 42，这将呈现为

<a href="/items/42">

模板和静态文件¶

您也可以在模板内部使用 url_for()，并将其与您使用 name="static" 挂载的 StaticFiles 一起使用，例如。

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id) }}">Item ID: {{ id }}</a></h1>
</body>
</html>

在此示例中，它将链接到 static/styles.css 中的 CSS 文件，使用

h1 {
    color: green;
}

并且由于您正在使用 StaticFiles，因此您的 FastAPI 应用程序将自动在 URL /static/styles.css 上提供该 CSS 文件。

模板¶