Hoe wordt CRUD geïmplementeerd?

CRUD staat voor Create, Read, Update, Delete. Dit zijn de belangrijkste bewerkingen die op gegevens worden uitgevoerd.

Create (Aanmaken): Verzend een verzoek met methode POST naar het endpoint om een nieuwe bron te maken. De body van het verzoek bevat meestal de gegevens van het nieuwe object.

// Voorbeelden met Fetch API
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Nieuw item' }),
})
  .then(response => response.json())
  .then(data => console.log('Gemaakt:', data));

Read (Lezen): Verzend een verzoek met methode GET.

• Alle bronnen lezen: GET-verzoek naar de hoofdendpoint van de collectie.
• Een specifieke bron lezen: GET-verzoek naar de endpoint met de bron-ID.

// Alle lezen
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Alle items:', data));

// Een specifiek lezen
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Item 123:', data));

Update (Bijwerken): Verzend een verzoek met methode PUT of PATCH naar de endpoint met de bron-ID.

• PUT: volledige vervanging van de bestaande bron.
• PATCH: gedeeltelijke update van de bron.

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

// Gedeeltelijk bijwerken (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'Nieuwe beschrijving' }),
})
  .then(response => response.json())
  .then(data => console.log('Gepatcht:', data));

Delete (Verwijderen): Verzend een verzoek met methode DELETE naar de endpoint met de bron-ID.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Verwijderd succesvol');
    } else {
      console.error('Verwijderen mislukt');
    }
  });

Relatie met REST API:

CRUD-operaties zijn nauw verbonden met de principes van REST (Representational State Transfer), waarbij HTTP-methoden worden gebruikt om deze acties uit te voeren op resources:

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

Aan de frontend omvat de implementatie van CRUD het verzenden van deze HTTP-verzoeken naar de backend-API en het verwerken van de ontvangen antwoorden. Vaak worden bibliotheken gebruikt voor HTTP-werk (bijvoorbeeld Axios, Fetch API) en frameworks/bibliotheken voor het beheer van de staat en UI (bijvoorbeeld React, Vue, Angular).