Swagger UI 없이 JSON 데이터를 FastAPI 엔드포인트로 보내는 방법은 무엇입니까?-파이썬 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-10-24 02:32:02

원래의

456명이 탐색했습니다.

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>

로그인 후 복사