Qu'est-ce que CRUD?

CRUD est une abréviation décrivant les opérations principales effectuées sur les données :

• Créer : Ajouter de nouvelles données.
• Rlire : Obtenir des données existantes.
• Update : Modifier des données existantes.
• Delete : Supprimer des données.

Dans le développement frontend, ces opérations correspondent souvent aux méthodes HTTP lors de l'interaction avec le backend via une API :

Opération CRUD	Méthode HTTP	Description
Create	POST	Envoyer des données pour créer.
Read	GET	Demander des données.
Update	PUT / PATCH	Envoyer des données pour mettre à jour.
Delete	DELETE	Demander la suppression des données.

Exemple d'implémentation en frontend avec JavaScript pour interagir avec une API REST :

// Supposons que nous ayons un objet user et que nous devons le créer sur le serveur
fetch('/api/users', {
  method: 'POST', // Créer
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Nouvel Utilisateur', email: 'nouvel.utilisateur@exemple.com' }),
})
  .then(response => response.json())
  .then(data => console.log('Utilisateur créé :', data))
  .catch(error => console.error('Erreur lors de la création de l’utilisateur :', error));

// Exemple de lecture de données
fetch('/api/users/1') // Lire (pour l’utilisateur avec ID 1)
  .then(response => response.json())
  .then(data => console.log('Données de l’utilisateur :', data))
  .catch(error => console.error('Erreur lors de la récupération de l’utilisateur :', error));

// Exemple de mise à jour de données
fetch('/api/users/1', {
  method: 'PUT', // Mettre à jour
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Utilisateur Mis à Jour' }),
})
  .then(response => response.json())
  .then(data => console.log('Utilisateur mis à jour :', data))
  .catch(error => console.error('Erreur lors de la mise à jour de l’utilisateur :', error));

// Exemple de suppression de données
fetch('/api/users/1', {
  method: 'DELETE', // Supprimer
})
  .then(response => {
    if (response.ok) {
      console.log('Utilisateur supprimé');
    } else {
      console.error('Erreur lors de la suppression de l’utilisateur :', response.status);
    }
  })
  .catch(error => console.error('Erreur lors de la suppression de l’utilisateur :', error));