Come viene implementato il CRUD?

CRUD sta per Create, Read, Update, Delete. Queste sono le operazioni principali eseguite sui dati.

Create (Creazione): Inviare una richiesta con metodo POST all'endpoint per creare una nuova risorsa. Il corpo della richiesta di solito contiene i dati del nuovo oggetto.

// Esempi con Fetch API
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Nuovo elemento' }),
})
  .then(response => response.json())
  .then(data => console.log('Creato:', data));

Read (Lettura): Inviare una richiesta con metodo GET.

• Lettura di tutte le risorse: richiesta GET all'endpoint principale della collezione.
• Lettura di una risorsa specifica: richiesta GET all'endpoint con l'identificatore della risorsa.

// Lettura di tutte
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Tutti gli elementi:', data));

// Lettura di uno specifico
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Elemento 123:', data));

Update (Aggiornamento): Inviare una richiesta con metodo PUT o PATCH all'endpoint con l'identificatore della risorsa.

• PUT: sostituzione completa della risorsa esistente.
• PATCH: aggiornamento parziale della risorsa.

// Aggiornamento (PUT)
fetch('/api/items/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Elemento aggiornato' }),
})
  .then(response => response.json())
  .then(data => console.log('Aggiornato:', data));

// Aggiornamento parziale (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'Nuova descrizione' }),
})
  .then(response => response.json())
  .then(data => console.log('Parzialmente aggiornato:', data));

Delete (Eliminazione): Inviare una richiesta con metodo DELETE all'endpoint con l'identificatore della risorsa.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Eliminato con successo');
    } else {
      console.error('Eliminazione fallita');
    }
  });

Connessione con REST API:

Le operazioni CRUD sono strettamente collegate ai principi di REST (Transfer of Représentational State), dove i metodi HTTP vengono utilizzati per eseguire queste azioni sulle risorse:

CRUD	Metodo HTTP
Create	POST
Read	GET
Update	PUT/PATCH
Delete	DELETE

Sul frontend, l'implementazione del CRUD include l'invio di queste richieste HTTP all'API backend e la gestione delle risposte ricevute. Spesso si utilizzano librerie per lavorare con HTTP (ad esempio, Axios, Fetch API) e framework/librerie per la gestione dello stato e dell'interfaccia utente (ad esempio, React, Vue, Angular).