Templates-CFANZ编程社区

官方文档地址：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