집 > 기사 > 백엔드 개발 > Swagger UI 없이 JSON 데이터를 FastAPI 엔드포인트로 보내는 방법은 무엇입니까?

Swagger UI 없이 JSON 데이터를 FastAPI 엔드포인트로 보내는 방법은 무엇입니까?

Patricia Arquette원래의: 2024-10-24 02:32:02448검색

How to Send JSON Data to FastAPI Endpoints without Swagger UI?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript json html fastapi for format catch using Interface function this input http ui Access

성명：

이전 기사：Swagger UI 없이 FastAPI에 JSON 데이터를 제출하는 방법은 무엇입니까?다음 기사：Swagger UI 없이 FastAPI에 JSON 데이터를 제출하는 방법은 무엇입니까?