Comment le CRUD est-il implémenté?

CRUD signifie Create, Read, Update, Delete. Ce sont les opérations principales effectuées sur les données.

Create (Créer): Envoyer une requête avec la méthode POST à l'endpoint pour créer une nouvelle ressource. Le corps de la requête contient généralement les données du nouvel objet.

// Exemples avec Fetch API
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Nouvel élément' }),
})
  .then(response => response.json())
  .then(data => console.log('Créé:', data));

Read (Lire): Envoyer une requête avec la méthode GET.

• Lire toutes les ressources : requête GET à l'endpoint principal de la collection.
• Lire une ressource spécifique : requête GET à l'endpoint avec l'identifiant de la ressource.

// Lire toutes
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Tous les éléments:', data));

// Lire un spécifique
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Élément 123:', data));

Update (Mettre à jour): Envoyer une requête avec la méthode PUT ou PATCH à l'endpoint avec l'identifiant de la ressource.

• PUT : remplacement complet de la ressource existante.
• PATCH : mise à jour partielle de la ressource.

// Mise à jour (PUT)
fetch('/api/items/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Élément mis à jour' }),
})
  .then(response => response.json())
  .then(data => console.log('Mis à jour:', data));

// Mise à jour partielle (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'Nouvelle description' }),
})
  .then(response => response.json())
  .then(data => console.log('Parcheminé:', data));

Delete (Supprimer): Envoyer une requête avec la méthode DELETE à l'endpoint avec l'identifiant de la ressource.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Supprimé avec succès');
    } else {
      console.error('Échec de la suppression');
    }
  });

Lien avec REST API:

Les opérations CRUD sont étroitement liées aux principes REST (Transfer de l'État Représentatif), où les méthodes HTTP sont utilisées pour effectuer ces actions sur les ressources:

CRUD	Méthode HTTP
Create	POST
Read	GET
Update	PUT/PATCH
Delete	DELETE

Côté frontend, la mise en œuvre du CRUD consiste à envoyer ces requêtes HTTP à l'API backend et à gérer les réponses reçues. On utilise souvent des bibliothèques pour travailler avec HTTP (par exemple, Axios, Fetch API) et des frameworks/bibliothèques pour gérer l'état et l'interface utilisateur (par exemple, React, Vue, Angular).