利用 FastAPI 和 Jinja2 模板引擎快速构建 Web 应用

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，它基于标准 Python 类型提示。FastAPI 支持异步编程，使得开发高性能的 Web 应用变得简单快捷。在本文中，我们将探讨如何使用 FastAPI 结合 Jinja2 模板引擎来创建动态 Web 应用。

Jinja2 模板引擎

Jinja2 是一个非常流行的模板引擎，它可以让你用变量替代模板中的占位符，生成动态的 HTML 页面。它被广泛用于 Web 应用中，以生成用户界面。

安装依赖

在开始之前，确保你已经创建并激活了一个虚拟环境，然后安装 Jinja2：

pip install jinja2

使用 Jinja2Templates

FastAPI 允许你使用任何模板引擎，但 Jinja2 是一个常见的选择。以下是如何在 FastAPI 应用中集成 Jinja2 的步骤：

导入 Jinja2Templates：

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

创建 templates 对象：

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})

在这里，我们定义了一个路由 /items/{id}，它将返回一个使用 item.html 模板渲染的 HTML 响应。

编写模板

你可以在 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>

在这个模板中，我们使用了 url_for 函数来生成静态文件和动态链接的 URL。

模板上下文值

在模板中，你可以使用传递给 TemplateResponse 的上下文字典中的值。例如，{``{ id }} 将显示从上下文中获取的 id 值。

模板和静态文件

你可以使用 url_for 函数来引用静态文件，如 CSS、JavaScript 或图片。这使得在模板中引用这些资源变得简单。

Demo 1: 基础的 Jinja2 模板使用

在这个示例中，我们将创建一个简单的 FastAPI 应用，它使用 Jinja2 模板引擎来渲染一个欢迎页面。

步骤 1: 安装依赖

首先，确保你已经安装了 FastAPI 和 Jinja2：

pip install fastapi[jinja2]

步骤 2: 创建 FastAPI 应用

创建一个名为 main.py 的文件，并添加以下代码：

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

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
    return templates.TemplateResponse(request=request, name="welcome.html", context={"name": "World"})

步骤 3: 创建 Jinja2 模板

在项目目录中创建一个名为 templates 的文件夹，并在其中创建一个名为 welcome.html 的文件，添加以下 HTML 代码：

<html>
<head>
    <title>Welcome</title>
</head>
<body>
    <h1>Welcome, {{ name }}!</h1>
</body>
</html>

说明

这个示例中，我们定义了一个路由 /，它使用 welcome.html 模板渲染一个欢迎页面。name 变量从上下文中传递给模板，用于显示欢迎信息。

Demo 2: 使用模板和静态文件

这个示例展示了如何在 FastAPI 应用中使用 Jinja2 模板和静态文件（如 CSS）。

步骤 1: 安装依赖

确保你已经安装了 FastAPI 和 Jinja2：

pip install fastapi[jinja2]

步骤 2: 创建 FastAPI 应用

创建一个名为 main.py 的文件，并添加以下代码：

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("/", response_class=HTMLResponse)
async def read_root(request: Request):
    return templates.TemplateResponse(request=request, name="home.html", context={"title": "Home Page"})

步骤 3: 创建 Jinja2 模板

在 templates 文件夹中创建一个名为 home.html 的文件，添加以下 HTML 代码：

<html>
<head>
    <title>{{ title }}</title>
    <link href="{{ url_for('static', path='/style.css') }}" rel="stylesheet">
</head>
<body>
    <h1>{{ title }}</h1>
    <p>This is a demo page with static CSS.</p>
</body>
</html>

步骤 4: 添加静态 CSS 文件

在项目目录中创建一个名为 static 的文件夹，并在其中创建一个名为 style.css 的文件，添加以下 CSS 代码：

h1 {
    color: blue;
}

说明

在这个示例中，我们定义了一个路由 /，它使用 home.html 模板渲染一个页面，该页面引用了一个静态 CSS 文件。title 变量从上下文中传递给模板，用于设置页面标题。通过 url_for('static', path='/style.css')，我们能够正确地引用静态文件，使得页面的 h1 标签文字颜色变为蓝色。

这两个示例展示了如何在 FastAPI 应用中使用 Jinja2 模板引擎来渲染动态内容和静态资源，从而创建更加丰富和交互式的 Web 应用。