FastAPI 백엔드에 JSON 데이터를 직접 게시하는 방법은 무엇입니까?-파이썬 튜토리얼-php.cn

FastAPI 백엔드에 JSON 데이터를 직접 게시하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-10-24 04:16:02

원래의

627명이 탐색했습니다.

How to Post JSON Data Directly to a FastAPI Backend?

FastAPI 백엔드에 JSON 데이터 직접 게시

문제 설명:

FastAPI 작업 시 , 사용자는 문서화를 위해 Swagger UI를 활용하지 않고 JSON 데이터를 백엔드에 직접 게시할 수 있습니다. 대신 지정된 URL을 통해 데이터를 제출하고 브라우저에서 결과를 받는 것을 목표로 합니다.

해결 방법:

이를 달성하려면 Fetch API와 같은 JavaScript 라이브러리가 필요합니다. 채용될 수 있습니다. 이러한 도구를 사용하면 JSON 형식의 데이터를 전송할 수 있습니다.

프런트엔드 렌더링의 경우 Jinja2Templates를 사용하여 HTML 및 JavaScript 코드가 포함된 템플릿을 반환할 수 있습니다. 아래 코드 예시에서 볼 수 있듯이 JSON 데이터를 직접 게시할 수도 있습니다.

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>

로그인 후 복사

templates/index.html

<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())  // or, resp.json(), etc.
                 .then(data => {
                   document.getElementById("responseArea").innerHTML = data;
                 })
                 .catch(error => {
                   console.error(error);
                 });
         }
      </script>
   </body>
</html></code>

로그인 후 복사

이 접근 방식을 따르면 Swagger UI에 의존하지 않고 JSON 데이터를 FastAPI 백엔드에 직접 게시할 수 있습니다. 데이터는 프런트엔드의 양식을 통해 제출하고 백엔드 API로 처리할 수 있습니다.

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