Swagger UI を使用せずに JSON データを FastAPI に投稿するにはどうすればよいですか?

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>

templates/index.html

<code class="html">

   
      <h1 id="Post-JSON-Data">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>
   
</code>

これらの手順に従うことで、Swagger UI を必要とせずに JSON データを FastAPI バックエンドに効果的にポストできます。このアプローチにより、柔軟性が高まり、指定された URL を介してバックエンドと直接対話できるようになります。

以上がSwagger UI を使用せずに JSON データを FastAPI に投稿するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。