模板¶
你可以在 FastAPI 中使用任何你想要的模板引擎。
一个常见的选择是 Jinja2,这也是 Flask 和其他工具所使用的引擎。
Starlette 提供了一些实用工具来轻松配置它,你可以直接在 FastAPI 应用中使用。
安装依赖¶
请确保创建并激活一个虚拟环境,然后安装 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}
)
Note
在 FastAPI 0.108.0 和 Starlette 0.29.0 之前,name 是第一个参数。
此外,在更早的版本中,request 对象是作为 Jinja2 上下文中的键值对的一部分传递的。
Tip
通过声明 response_class=HTMLResponse,文档界面将能够知道响应将是 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,该 CSS 文件将由你的 FastAPI 应用自动在 URL /static/styles.css 处提供。
更多详情¶
更多详细信息,包括如何测试模板,请查看 Starlette 的模板文档。