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, Requestfrom fastapi.responses import HTMLResponsefrom fastapi.staticfiles import StaticFilesfrom 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)asyncdefread_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><linkhref="{{ url_for('static', path='/styles.css') }}"rel="stylesheet"></head><body><h1><ahref="{{ 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)asyncdefread_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)asyncdefread_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><linkhref="{{ 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 应用。
版权归原作者 黑金IT 所有， 如有侵权，请联系我们删除。