【FastAPI】Jinja2模板引擎 渲染前端页面

使用 Jinja2Templates 模板引擎

推荐文章:【FastAPI】Static 静态文件配置

安装命令:pip3 install jinja2

路径:\routes\index.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") # js css 等静态资源存放的目录


templates = Jinja2Templates(directory="templates") # 模板 html 存放的目录


@app.get("/index", response_class=HTMLResponse)
async def read_item(request: Request):
    return templates.TemplateResponse(name='index.html', context={
        'request': request,  # 必要参数
        'data': {'title':'模板'},  # 渲染给前端的数据
 })

main.js 文件

路径 \static\main.js

console.log('加载成功')

index.html 模板

路径:\templates\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="{{ url_for('static', path='main.js') }}"></script>
    <title>Title</title>
</head>
<body>
<h1>{{ data.title }}</h1>
</body>
</html>

程序主文件

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from routes.index import application
import uvicorn

app = FastAPI()

# 注意是在 FastAPI() 实例上挂载 静态文件路径
app.mount(path='/static',  # 网页的路径
          app=StaticFiles(directory='./static'),  # 静态文件目录的路径
          name='static')

app.include_router(application, prefix='', tags=['首页'])

if __name__ == '__main__':
    uvicorn.run(app)

mark

发表评论 / Comment

用心评论~