如何在不使用 Swagger UI 的情况下将 JSON 数据发布到 FastAPI 后端?
- 2025-01-08 08:49:00
- admin 原创
- 130
问题描述:
我正在尝试POST
使用 FastAPI 执行一个简单的操作。我使用 创建了一个基本结构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}
。
我知道http://localhost:8080/docs
Swagger UI (OpenAPI) 提供的自动文档,我们可以使用它来发布数据。但我不想使用它。我想要的是直接使用 URL 发布数据http://localhost:8080/
,并希望在浏览器本身中看到结果,而不是在 Swaggger UI 中看到结果。
解决方案 1:
您需要使用 Javascript 接口/库(例如Fetch API),它允许您以格式发送数据JSON
(示例如下)。要提交Form
数据,请查看此答案;要发布Files
和Form
/JSON
数据,请查看此答案。
对于前端,您可以使用Jinja2Templates
来呈现并返回TemplateResponse
包含您的HTML
/JS
代码等的 。您可以使用 HTMLform
提交数据,然后将form-data
转换为JSON
,如此处所述。否则,您可以直接发布数据,如下所示— 例如 。另请参阅此答案以了解相关选项。JSON
`body: JSON.stringify({name: "foo", roll: 1})`
应用程序
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>
相关推荐
热门文章
项目管理软件有哪些?
热门标签
云禅道AD