Bagaimana untuk Menyiarkan Data JSON Terus ke Backend FastAPI?

Menyiarkan Data JSON secara langsung ke FastAPI Backend

Pernyataan Masalah:

Apabila bekerja dengan FastAPI , pengguna mungkin mahu menyiarkan data JSON terus ke bahagian belakang tanpa menggunakan UI Swagger untuk dokumentasi. Sebaliknya, mereka menyasarkan untuk menyerahkan data melalui URL yang ditetapkan dan menerima hasilnya dalam penyemak imbas.

Penyelesaian:

Untuk mencapai ini, perpustakaan JavaScript seperti API Ambil boleh diambil bekerja. Alat ini membolehkan penghantaran data berformat JSON.

Untuk pemaparan bahagian hadapan, Jinja2Templates boleh digunakan untuk mengembalikan templat yang termasuk kod HTML dan JavaScript. Seseorang juga boleh menyiarkan data JSON secara langsung, seperti yang ditunjukkan dalam contoh kod di bawah.

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>

Dengan mengikuti pendekatan ini, anda boleh menyiarkan data JSON terus ke bahagian belakang FastAPI anda, tanpa bergantung pada UI Swagger. Data boleh diserahkan melalui borang di bahagian hadapan dan diproses oleh API bahagian belakang anda.

Atas ialah kandungan terperinci Bagaimana untuk Menyiarkan Data JSON Terus ke Backend FastAPI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!