Swagger UI 없이 JSON 데이터를 FastAPI 엔드포인트로 보내는 방법은 무엇입니까?
- Patricia Arquette원래의
- 2024-10-24 02:32:02579검색
FastAPI에서 JSON 데이터 게시를 위한 Swagger UI 우회
Swagger UI(OpenAPI)는 API 엔드포인트를 테스트하는 편리한 방법을 제공하지만 필요한 시나리오가 있을 수 있습니다. JSON 데이터를 사용하지 않고 직접 전송합니다. 이 기사에서는 JavaScript 인터페이스를 사용하여 JSON 데이터를 FastAPI 엔드포인트에 게시하는 솔루션을 제공합니다.
이를 달성하기 위해 JSON 형식으로 데이터를 보낼 수 있는 Fetch API를 활용합니다. 또한 Jinja2Templates를 사용하여 프런트엔드용 템플릿을 생성할 것입니다.
백엔드 구현
app.py에서 FastAPI 애플리케이션은 항목 모델로 POST 요청을 허용하는 / 엔드포인트로 정의됩니다. .
<code class="python">from fastapi import FastAPI, Request, HTTPException
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel
class Item(BaseModel):
name: str
roll: int
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.post("/")
async def create_item(item: Item):
if item.name == "bad request":
raise HTTPException(status_code=400, detail="Bad request.")
return item
@app.get("/")
async def index(request: Request):
return templates.TemplateResponse("index.html", {"request": request})</code>
프런트엔드 구현
index.html 템플릿에는 이름 및 롤 데이터를 입력할 수 있는 HTML 형식이 제공됩니다. submitForm() 함수는 Fetch API를 사용하여 데이터를 JSON으로 보냅니다.
<code class="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())
.then(data => {
document.getElementById("responseArea").innerHTML = data;
})
.catch(error => {
console.error(error);
});
}
</script>
</body>
</html></code>
Usage
프런트엔드에 액세스하려면 http://localhost:8080/으로 이동하세요. 양식에 데이터를 입력하고 "제출" 버튼을 클릭하세요. / 엔드포인트의 응답은 HTML의 "responseArea" div에 표시됩니다.
표시된 것처럼 .catch() 메서드를 사용하여 JavaScript 코드의 엔드포인트에서 발생한 예외를 처리할 수 있습니다. 예를 들어요.
위 내용은 Swagger UI 없이 JSON 데이터를 FastAPI 엔드포인트로 보내는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.