Swagger UI 없이 FastAPI에 JSON 데이터를 게시하는 방법은 무엇입니까?

Swagger UI 없이 FastAPI에 JSON 데이터 게시

FastAPI로 작업할 때 Swagger UI 없이 JSON 데이터를 백엔드에 게시하는 방법을 이해하면 유용합니다. Swagger UI에 의존합니다. 이 접근 방식을 사용하면 지정된 URL을 통해 데이터를 직접 게시하고 브라우저에서 결과를 검색할 수 있습니다.

Javascript 인터페이스 사용

이를 달성하려면 JSON 형식으로 데이터를 제출할 수 있는 Fetch API와 같은 Javascript 인터페이스입니다. 다음 코드 예를 살펴보세요.

<code class="javascript">body: JSON.stringify({name: "foo", roll: 1})</code>

이 코드 조각은 전송을 위해 Javascript 개체를 JSON으로 변환합니다.

프런트엔드 구현

FastAPI 백엔드에서는 다음 방법 중 하나를 활용할 수 있습니다.

• Jinja2Templates: 이 기술에는 데이터 제출을 위한 양식이 포함된 HTML/JS 템플릿을 렌더링하는 작업이 포함됩니다. 그런 다음 양식 데이터를 JSON으로 변환할 수 있습니다.
• JSON 직접 게시: Fetch API를 사용하면 양식을 사용하지 않고도 JSON 데이터를 직접 게시할 수 있습니다.

구현 예

Python에서 다음 구현 예를 고려하세요.

app.py

<code class="python">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})</code>

template/index.html

<code class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;body&gt;
      &lt;h1&gt;Post JSON Data&lt;/h1&gt;
      &lt;form method=&quot;post&quot; id=&quot;myForm&quot;&gt;
         name : &lt;input type=&quot;text&quot; name=&quot;name&quot; value=&quot;foo&quot;&gt;
         roll : &lt;input type=&quot;number&quot; name=&quot;roll&quot; value=&quot;1&quot;&gt;
         &lt;input type=&quot;button&quot; value=&quot;Submit&quot; onclick=&quot;submitForm()&quot;&gt;
      &lt;/form&gt;
      &lt;div id=&quot;responseArea&quot;&gt;&lt;/div&gt;
      &lt;script&gt;
         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 =&gt; resp.text())  // or, resp.json(), etc.
                 .then(data =&gt; {
                   document.getElementById("responseArea").innerHTML = data;
                 })
                 .catch(error =&gt; {
                   console.error(error);
                 });
         }
      &lt;/script&gt;
   &lt;/body&gt;
&lt;/html&gt;</code>

이 단계를 따르면 Swagger UI 없이도 JSON 데이터를 FastAPI 백엔드에 효과적으로 게시할 수 있습니다. 이 접근 방식을 사용하면 지정된 URL을 통해 더 큰 유연성과 백엔드와의 직접적인 상호 작용이 가능합니다.

위 내용은 Swagger UI 없이 FastAPI에 JSON 데이터를 게시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!