使用 Jinja2Templates 模板引擎
安装命令：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)
版权声明：《 【FastAPI】Jinja2模板引擎 渲染前端页面 》为明妃原创文章，转载请注明出处！
最后编辑:2022-3-5 13:03:29