Maison >développement back-end >Tutoriel Python >Comment publier des données JSON directement sur un backend FastAPI ?
Comment publier des données JSON directement sur un backend FastAPI ?
- Mary-Kate Olsenoriginal
- 2024-10-24 04:16:02632parcourir
Publication directe de données JSON sur le backend FastAPI
Énoncé du problème :
Lorsque vous travaillez avec FastAPI , les utilisateurs peuvent souhaiter publier des données JSON directement sur le backend sans utiliser l'interface utilisateur Swagger pour la documentation. Au lieu de cela, ils visent à soumettre des données via l'URL désignée et à recevoir le résultat dans le navigateur.
Solution :
Pour y parvenir, des bibliothèques JavaScript telles que l'API Fetch peuvent être employés. Ces outils permettent l'envoi de données au format JSON.
Pour le rendu frontend, Jinja2Templates peut être utilisé pour renvoyer des modèles qui incluent du code HTML et JavaScript. On peut également publier des données JSON directement, comme le démontrent les exemples de code ci-dessous.
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>
En suivant cette approche, vous pouvez publier directement des données JSON sur votre backend FastAPI, sans compter sur l'interface utilisateur Swagger. Les données peuvent être soumises via un formulaire sur le frontend et traitées par votre API backend.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!