Heim > Artikel > Backend-Entwicklung > Wie poste ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI?

Wie poste ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI?

Patricia ArquetteOriginal: 2024-10-24 05:26:02779Durchsuche

How to Post JSON Data to FastAPI Without Swagger UI?

JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI senden

Bei der Arbeit mit FastAPI ist es hilfreich zu verstehen, wie JSON-Daten ohne Swagger an das Backend gesendet werden Verlassen Sie sich auf die Swagger-Benutzeroberfläche. Dieser Ansatz ermöglicht die direkte Veröffentlichung von Daten über eine angegebene URL und den Abruf der Ergebnisse im Browser.

Verwendung einer Javascript-Schnittstelle

Um dies zu erreichen, können Sie a implementieren Javascript-Schnittstelle wie Fetch API, die die Übermittlung von Daten im JSON-Format ermöglicht. Betrachten Sie das folgende Codebeispiel:

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

Dieses Code-Snippet konvertiert das Javascript-Objekt zur Übertragung in JSON.

Frontend-Implementierung

Zur Interaktion Mit dem FastAPI-Backend können Sie eine der folgenden Methoden nutzen:

Jinja2Templates: Bei dieser Technik wird eine HTML/JS-Vorlage gerendert, die ein Formular zum Senden von Daten enthält. Die Formulardaten können dann in JSON konvertiert werden.
Direkte JSON-Veröffentlichung: Mithilfe der Fetch-API können Sie JSON-Daten direkt veröffentlichen, ohne ein Formular einzubinden.

Beispielimplementierung

Betrachten Sie die folgende Beispielimplementierung in 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"><!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>

Indem Sie diese Schritte befolgen, können Sie JSON-Daten effektiv in einem FastAPI-Backend veröffentlichen, ohne dass die Swagger-Benutzeroberfläche erforderlich ist. Dieser Ansatz ermöglicht eine größere Flexibilität und direkte Interaktion mit dem Backend über die angegebene URL.

Das obige ist der detaillierte Inhalt vonWie poste ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Python JavaScript json html fastapi Object for format using Interface JS this ui

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie behebe ich „pg_config“-Fehler während der psycopg2-Installation mit „pip“?Nächster Artikel：Wie behebe ich „pg_config“-Fehler während der psycopg2-Installation mit „pip“?

In Verbindung stehende Artikel

Mehr sehen