【测开能力提升-fastapi框架】fastapi模版引擎简单使用

2024-07-12 07:46:03
开发
26

1.6 通过模版引擎返回HTM页面

import uvicorn
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates

app = FastAPI()

# 初始化模版引擎存放位置
templates = Jinja2Templates(directory="templates")

@app.get("/")
async def index(request:Request):
    return templates.TemplateResponse("index.html", context={'request': request})

if __name__ == '__main__':
    uvicorn.run('main:app', port=5050, reload=True)

在这里插入图片描述
注释：
context参数里的’request’ key值是不能修改的，否则会报错

1.6.1 将参数传入html页面

main.py中

import uvicorn
from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates

app = FastAPI()

# 初始化模版引擎存放位置
templates = Jinja2Templates(directory="templates")


@app.get("/")
async def index(username, request: Request):
    return templates.TemplateResponse("index.html", context={'request': request, "name": username})


if __name__ == '__main__':
    uvicorn.run('main:app', port=5050, reload=True)

index.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>首页</h1>
    <p>Hello, FastApi</p>
    <p>New hand with test engineer</p>
    <p>用户名: {{ name }}</p>

</body>
</html>

注释：
将用户输入参数(例如：username)放入模版引擎中return(key值命名为name)，在template模版中获取name，即可完成传参

1.6.2 实操

目标：实现一个小应用，在页面上点击提交按钮之后，将数据写进列表中，并在返回到前端页面上

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>事件</h1>
    <p>Hello, FastApi</p>

    <div>
        <form action="/todo", method="post">
            <input name="todo" placeholder="请添加事件。。。">
            <input type="submit", value="添加">
        </form>

    </div>

    {% for todo in todos %}
        <p>{{ todo }}</p>
    {% endfor %}

</body>
</html>

main.py

import uvicorn
from fastapi import FastAPI, Request, Form
from fastapi.responses import RedirectResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()

# 初始化模版引擎存放位置
templates = Jinja2Templates(directory="templates")

todos = ['看书', '听歌', '玩游戏']

@app.get("/")
async def index(request: Request):
    return templates.TemplateResponse("index.html", context={'request': request, "todos": todos})

@app.post("/todo")
async def todo(todo=Form(None)):
    todos.insert(0, todo)
    return RedirectResponse('/', status_code=302)



if __name__ == '__main__':
    uvicorn.run('main:app', port=5050, reload=True)

实现结果：随机输入事件123，点击提交，结果如下：

在这里插入图片描述

原文地址:https://blog.csdn.net/qxj2422640226/article/details/140363518 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1811547531386163200.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部