Swagger UI を使用せずに JSON データを FastAPI エンドポイントに送信するにはどうすればよいですか?-Python チュートリアル-php.cn

Swagger UI を使用せずに JSON データを FastAPI エンドポイントに送信するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-10-24 02:32:02

オリジナル

557 人が閲覧しました

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 アプリケーションは、Item モデルで 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>

ログイン後にコピー