FastAPI Post 请求未呈现 jinja2 模板答案

【问题标题】：FastAPI Post request is not rendering jinja2 templateFastAPI Post 请求未呈现 jinja2 模板
【发布时间】：2022-01-26 07:54:20
【问题描述】：

我已经编好了post调用，并渲染了login_form.html的jinja2模板

main.py:

from fastapi import FastAPI, Response, status, HTTPException, Depends
import hashlib
from fastapi import APIRouter, Form
from pydantic import BaseModel
from fastapi.staticfiles import StaticFiles
from fastapi import Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()

templates = Jinja2Templates(directory="templates")


@app.post("/",response_class=HTMLResponse)
async def login_form(
    request: Request, uname: str = Form(...), passcode: str = Form(...)
):
    print(uname, passcode)
    return templates.TemplateResponse(
        "auth/login_form.html", {"request": request,"result": "res"}
    )

login_form.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Login Form</title>
    </head>
<body>
<h1>Login Form</h1>
<form method="post">
<h5>Username</h5>
<input type="text" name="uname" placeholder="username"></input>
<h5>Password</h5>
<input name="passcode" placeholder="password" type="text"></input>
<input type="submit"></input>
</form>

<p>{{result}}</p>
</body>
</html>

当我在网络浏览器上加载页面时，我得到：

{"detail":"Method Not Allowed"}

【问题讨论】：

从浏览器打开它是一个 GET 请求，而不是你声明一个 POST
@FedericoProvenziani 是的，但我已经看到 POST 请求像这样打开的 jinja2 和 fastAPI 教程，因为它在最后返回 html 页面
抱歉，看到图片并阅读了您的文字，我以为您尝试通过直接请求访问该页面，而不是提交表单
我仍然认为@FedericoProvenziani 是正确的；显示模板的 GET 端点在哪里？由于您没有对 POST 端点中的模板执行任何操作，因此这似乎是一个常规的 GET 端点？

标签： python html api jinja2 fastapi

【解决方案1】：

如果您希望它在浏览器中工作，login_form() 必须是 GET 端点。

如果您已经看到将 POST 与 FastAPI 结合使用的示例，那可能是因为那是用于构建 API 而不是 Web 应用程序（也许 Starlette 是您真正想要的）。

为了使您的解决方案在浏览器中运行（使用 FastAPI），您可以添加另一个端点（我称之为 POST /handle-form）。您还必须调整您的 login_form.html 模板（见下文）。

from fastapi import FastAPI, Form, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()

templates = Jinja2Templates(directory="templates")

@app.get("/", response_class=HTMLResponse)
async def login_form(request: Request):
    return templates.TemplateResponse(
        "auth/login_form.html", {"request": request, "result": "res"}
    )

@app.post("/handle-form")
async def handle_form(
    request: Request,
    uname: str = Form(...),
    passcode: str = Form(...),
):
    print(uname, passcode)

对login_form.html 的唯一更改是将action="handle-form" 添加到form 标记，其中handle-form 是将表单数据发布到的端点的路径：

...
<form action="handle-form" method="post">
...

呈现如下：

一旦您输入用户名和密码并按下Submit，uname 和passcode 将被发送到handle_form()。

【讨论】：