如何在不使用 Swagger UI 的情况下将 JSON 数据发布到 FastAPI 后端？

问题描述 投票：0回答：1

我正在尝试使用 FastAPI 进行简单的 

POST
操作。我使用
BaseModel
创建了一个基本结构，它只有两个属性，即
name
和
roll
。

import uvicorn
from fastapi import FastAPI
from pydantic import BaseModel

class Item(BaseModel):
    name: str
    roll: int

app = FastAPI()

@app.post("/")
async def create_item(item: Item):
    return item

if __name__ == '__main__':
    uvicorn.run(app, port=8080, host='0.0.0.0')

我想使用这个 

POST
操作发布这些数据 - 
{"name":"XYZ", "roll":51}
.

我知道 Swagger UI (OpenAPI) 提供的 

http://localhost:8080/docs
的自动文档，我们可以使用它来发布数据。但我不想使用它。我想要的是直接使用 URL 
http://localhost:8080/
发布数据，并希望在浏览器本身中看到结果，而不是在 Swaggger UI 中看到结果。

python json api post fastapi
1个回答
4
投票

您需要使用 Javascript 接口/库，例如 Fetch API，它允许您以 

JSON
格式发送数据（示例如下）。要提交 
Form
 数据，请查看this answer，而要同时发布 
Files
和 
Form
/
JSON
数据，请查看this answer。

对于前端，您可以使用 

Jinja2Templates
来呈现和返回包含您的 
TemplateResponse
/
HTML
代码等的 
JS
。您可以使用 HTML 
form
提交您的数据，然后
form-data
转换为 
JSON
，如 here 所述。否则，您可以直接发布您的
JSON
数据，如here所示——例如，
body: JSON.stringify({name: "foo", roll: 1})
.

app.py

from fastapi import FastAPI, Request
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel

app = FastAPI()
templates = Jinja2Templates(directory="templates")

class Item(BaseModel):
    name: str
    roll: int
    
@app.post("/")
async def create_item(item: Item):
    return item

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

模板/index.html

<!DOCTYPE html>
<html>
   <body>
      <h1>Post JSON Data</h1>
      <form method="post" id="myForm">
         name : <input type="text" name="name" value="foo">
         roll : <input type="number" name="roll" value="1">
         <input type="button" value="Submit" onclick="submitForm()">
      </form>
      <div id="responseArea"></div>
      <script>
         function submitForm() {
             var formElement = document.getElementById('myForm');
             var data = new FormData(formElement);
             fetch('/', {
                   method: 'POST',
                   headers: {
                     'Accept': 'application/json',
                     'Content-Type': 'application/json'
                 },
                   body: JSON.stringify(Object.fromEntries(data))
                 })
                 .then(resp => resp.text())  // or, resp.json(), etc.
                 .then(data => {
                   document.getElementById("responseArea").innerHTML = data;
                 })
                 .catch(error => {
                   console.error(error);
                 });
         }
      </script>
   </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.