Comment envoyer des données JSON aux points de terminaison FastAPI sans l'interface utilisateur Swagger ?-Tutoriel Python-php.cn

Comment envoyer des données JSON aux points de terminaison FastAPI sans l'interface utilisateur Swagger ?

Patricia Arquette

Libérer： 2024-10-24 02:32:02

original

456 Les gens l'ont consulté

How to Send JSON Data to FastAPI Endpoints without Swagger UI?

Contourner l'interface utilisateur Swagger pour la publication de données JSON dans FastAPI

Bien que l'interface utilisateur Swagger (OpenAPI) offre un moyen pratique de tester les points de terminaison de l'API, il peut y avoir des scénarios dans lesquels vous avez besoin pour envoyer des données JSON directement sans leur utilisation. Cet article propose une solution pour publier des données JSON sur un point de terminaison FastAPI à l'aide d'une interface JavaScript.

Pour y parvenir, nous utiliserons l'API Fetch, qui permet d'envoyer des données au format JSON. De plus, nous utiliserons Jinja2Templates pour créer un modèle pour le frontend.

Implémentation du backend

Dans app.py, l'application FastAPI est définie avec un point de terminaison / qui accepte les requêtes POST avec un modèle Item. .

<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>

Copier après la connexion

Implémentation du frontend

Dans le modèle index.html, un formulaire HTML est fourni pour saisir les données de nom et de rôle. La fonction submitForm() utilise l'API Fetch pour envoyer les données au format JSON.

<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>

Copier après la connexion

Utilisation

Naviguez vers http://localhost:8080/ pour accéder au frontend. Saisissez les données dans le formulaire et cliquez sur le bouton "Soumettre". La réponse du point de terminaison / sera affichée dans le div "responseArea" du code HTML.

Notez que vous pouvez gérer les exceptions levées par le point de terminaison dans votre code JavaScript en utilisant la méthode .catch(), comme indiqué dans l'exemple.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment envoyer des données JSON aux points de terminaison FastAPI sans l'interface utilisateur Swagger ?

Contourner l'interface utilisateur Swagger pour la publication de données JSON dans FastAPI

Implémentation du backend

Implémentation du frontend

Utilisation