Heim > Artikel > Backend-Entwicklung > Wie sende ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI-Endpunkte?
Wie sende ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI-Endpunkte?
- Patricia ArquetteOriginal
- 2024-10-24 02:32:02526Durchsuche
Umgehen der Swagger-Benutzeroberfläche für die Veröffentlichung von JSON-Daten in FastAPI
Während die Swagger-Benutzeroberfläche (OpenAPI) eine bequeme Möglichkeit zum Testen von API-Endpunkten bietet, gibt es möglicherweise Szenarios, in denen Sie dies benötigen um JSON-Daten direkt ohne deren Verwendung zu senden. Dieser Artikel bietet eine Lösung zum Posten von JSON-Daten an einen FastAPI-Endpunkt mithilfe einer JavaScript-Schnittstelle.
Um dies zu erreichen, verwenden wir die Fetch-API, die das Senden von Daten im JSON-Format ermöglicht. Darüber hinaus werden wir Jinja2Templates verwenden, um eine Vorlage für das Frontend zu erstellen.
Backend-Implementierung
In app.py wird die FastAPI-Anwendung mit einem /-Endpunkt definiert, der POST-Anfragen mit einem Item-Modell akzeptiert .
<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>
Frontend-Implementierung
In der Vorlage index.html wird ein HTML-Formular zur Eingabe von Namen und Rollendaten bereitgestellt. Die Funktion „submitForm()“ verwendet die Fetch-API, um die Daten als JSON zu senden.
<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>
Verwendung
Navigieren Sie zu http://localhost:8080/, um auf das Frontend zuzugreifen. Geben Sie Daten in das Formular ein und klicken Sie auf die Schaltfläche „Senden“. Die Antwort vom Endpunkt / wird im Div „responseArea“ des HTML angezeigt.
Beachten Sie, dass Sie Ausnahmen, die vom Endpunkt in Ihrem JavaScript-Code ausgelöst werden, mithilfe der Methode .catch() behandeln können, wie gezeigt im Beispiel.
Das obige ist der detaillierte Inhalt vonWie sende ich JSON-Daten ohne Swagger-Benutzeroberfläche an FastAPI-Endpunkte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!