Heim >Backend-Entwicklung >Python-Tutorial >Wie poste ich JSON-Daten direkt an ein FastAPI-Backend?
Wie poste ich JSON-Daten direkt an ein FastAPI-Backend?
- Mary-Kate OlsenOriginal
- 2024-10-24 04:16:02694Durchsuche
JSON-Daten direkt im FastAPI-Backend veröffentlichen
Problembeschreibung:
Beim Arbeiten mit FastAPI Benutzer möchten möglicherweise JSON-Daten direkt im Backend veröffentlichen, ohne die Swagger-Benutzeroberfläche zur Dokumentation zu verwenden. Stattdessen zielen sie darauf ab, Daten über die angegebene URL zu übermitteln und das Ergebnis im Browser zu empfangen.
Lösung:
Um dies zu erreichen, werden JavaScript-Bibliotheken wie die Fetch-API verwendet eingesetzt werden kann. Diese Tools ermöglichen das Senden von JSON-formatierten Daten.
Für das Frontend-Rendering kann Jinja2Templates verwendet werden, um Vorlagen zurückzugeben, die HTML- und JavaScript-Code enthalten. Man kann JSON-Daten auch direkt veröffentlichen, wie in den Codebeispielen unten gezeigt.
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>
Mit diesem Ansatz können Sie JSON-Daten direkt in Ihrem FastAPI-Backend veröffentlichen, ohne auf die Swagger-Benutzeroberfläche angewiesen zu sein. Die Daten können über ein Formular im Frontend übermittelt und von Ihrer Backend-API verarbeitet werden.
Das obige ist der detaillierte Inhalt vonWie poste ich JSON-Daten direkt an ein FastAPI-Backend?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!