Mon parcours React : jour 19

Entraînez-vous avec les API JSON et les serveurs simulés

Travailler avec json-server est un excellent moyen de simuler un serveur backend et de pratiquer les interactions API telles que GET, POST, PUT, PATCH et DELETE.

Qu'est-ce que json-server ?

• Un outil qui vous permet de rapidement créer un serveur fictif pour travailler avec une base de données JSON.
• Idéal pour le prototypage et le test d'API sans avoir besoin d'un backend entièrement fonctionnel.

Configuration et installation

1. Prérequis : Node.js

• Assurez-vous que Node.js est installé sur votre système. Vérifiez en utilisant :

node -v
npm -v

2. Installer le serveur json

• Installer globalement à l'aide de npm :

npm install -g json-server@0.17.4

Comment utiliser le serveur JSON

1. Démarrez le serveur
Créez un fichier db.json dans votre répertoire de travail avec quelques données initiales. Exemple :

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}

• Démarrez le serveur et surveillez les modifications dans le fichier db.json :

json-server --watch db.json

• Par défaut, le serveur s'exécutera sur http://localhost:3000.

2. Explorer les points de terminaison
Le serveur crée automatiquement des points de terminaison RESTful pour chaque collection dans db.json :

• GET /posts → Récupérer tous les messages
• GET /posts/1 → Récupérer la publication avec l'ID 1
• POST /posts → Ajouter un nouveau post
• PUT /posts/1 → Remplacez le message entier par l'ID 1
• PATCH /posts/1 → Mettre à jour les champs spécifiques dans la publication avec l'ID 1
• DELETE /posts/1 → Supprimer la publication avec l'ID 1

Utiliser Facteur

Postman est un outil permettant de faire des requêtes HTTP pour tester des API. Voici comment effectuer chaque opération avec Postman :

1. GET (Récupérer des données)

• Type de demande : OBTENIR
• URL : http://localhost:3000/posts
• Récupère la liste des publications.

2. POST (Ajouter de nouvelles données)

• Type de demande : POST
• URL : http://localhost:3000/posts
• En-têtes : Content-Type : application/json
• Corps (JSON) :

{
  "id": 3,
  "title": "New Post",
  "content": "This is a new post"
}

• Ajoute un nouveau message à la collection de messages.

3. PUT (Remplacer la ressource entière)

• Type de demande : PUT
• URL : http://localhost:3000/posts/2
• En-têtes : Content-Type : application/json

• Corps (JSON) :
  {
  "title": "Titre mis à jour"
  >

• Résultat : remplace la ressource entière par les données fournies.

Avant :

{
  "id": 2,
  "title": "Second Post",
  "content": "Learning JSON-Server"
}

Après :

{
  "title": "Updated Title"
}

4. PATCH (Mettre à jour les champs spécifiques)

• Type de demande : PATCH
• URL : http://localhost:3000/posts/1
• En-têtes : Content-Type : application/json
• Corps (JSON) :

node -v
npm -v

Résultat : Met à jour uniquement le champ spécifié dans la ressource.

Avant :

npm install -g json-server@0.17.4

Après :

{
  "posts": [
    { "id": 1, "title": "First Post", "content": "Hello World!" },
    { "id": 2, "title": "Second Post", "content": "Learning JSON-Server" }
  ]
}

5. SUPPRIMER (Supprimer les données)

• Type de demande : SUPPRIMER
• URL : http://localhost:3000/posts/1
• Supprime la publication avec l'ID 1.

Différences clés entre PUT et PATCH

METTRE

• Remplace la ressource entière.
• Omet tous les champs non inclus dans le corps.

PATCH

• Mise à jour uniquement les champs spécifiés.
• Conserve les champs non mentionnés dans le corps.

Conclusion

Ce que j'ai appris :

• Json-server installé et utilisé pour créer un serveur API fictif.
• Opérations API de base pratiquées : GET, POST, PUT, PATCH, DELETE.
• Compris la différence entre PUT et PATCH.

Jour 19 Écrasé.

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!