Templates
官方文档地址：https://fastapi.tiangolo.com/zh/advanced/templates/?h=jinja2templates#using-jinja2templates
官方文档中html文件教程中包含css静态文件，如下这个是不含css静态文件的
# main.py
# -*- coding: UTF-8 -*-
from starlette.requests import Request
from fastapi import FastAPI
from starlette.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.get("/")
async def main(request: Request):
return templates.TemplateResponse('index.html', {'request': request, 'hello': 'HI...'})
@app.get("/{item_id}/")
async def item_id(request: Request, item_id:int):
return templates.TemplateResponse('index.html', {'request': request, "item_id": item_id})
if __name__ == '__main__':
import uvicorn
uvicorn.run(app, host="127.0.0.1", port=8000)
# templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<body>
<h1>HELLO FastAPI...</h1>
<h1>{{ hello }}</h1>
<h1>{{ item_id }}</h1>
</body>
</body>
</html>
安装依赖
pip install jinja2
Using Jinja2Templates
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("item.html", {"request": request, "id": id})
通过声明response_class=HTMLResponse，docs UI将能够知道响应将是HTML。
from starlette.templating import Jinja2Templates 等价于 from fastapi.templating import Jinja2Templates
from starlette.requests import Request 等价于 from fastapi import Request
from starlette.staticfiles import StaticFiles 等价于 from fastapi.staticfiles import StaticFiles
Writing templates
路径：templates/item.html
<html>
<head>
<title>Item Details</title>
<link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
<h1>Item ID: {{ id }}</h1>
</body>
</html>
CSS file
路径：static/styles.css
h1 {
color: green;
}
运行后访问测试
访问地址：http://127.0.0.1:8000/items/vvv
uvicorn main.py:app --reload
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）