Wie wird CRUD implementiert?

CRUD steht für Create, Read, Update, Delete. Dies sind die grundlegenden Operationen, die mit Daten durchgeführt werden.

Create (Erstellen): Senden Sie eine Anfrage mit der Methode POST an den Endpunkt, um eine neue Ressource zu erstellen. Der Anfragekörper enthält in der Regel die Daten des neuen Objekts.

// Beispiele mit Fetch API
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Neues Element' }),
})
  .then(response => response.json())
  .then(data => console.log('Erstellt:', data));

Read (Lesen): Senden Sie eine Anfrage mit der Methode GET.

• Alle Ressourcen lesen: GET-Anfrage an den Haupt-Endpunkt der Sammlung.
• Eine bestimmte Ressource lesen: GET-Anfrage an den Endpunkt mit der Ressourcen-ID.

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

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

Update (Aktualisieren): Senden Sie eine Anfrage mit der Methode PUT oder PATCH an den Endpunkt mit der Ressourcen-ID.

• PUT: vollständiger Austausch der bestehenden Ressource.
• PATCH: teilweise Aktualisierung der Ressource.

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

// Teilaktualisierung (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'Neue Beschreibung' }),
})
  .then(response => response.json())
  .then(data => console.log('Geparchert:', data));

Delete (Löschen): Senden Sie eine Anfrage mit der Methode DELETE an den Endpunkt mit der Ressourcen-ID.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Erfolgreich gelöscht');
    } else {
      console.error('Löschen fehlgeschlagen');
    }
  });

Verbindung mit REST API:

CRUD-Operationen sind eng mit den Prinzipien von REST (Representational State Transfer) verbunden, bei denen HTTP-Methoden verwendet werden, um diese Aktionen an Ressourcen durchzuführen:

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

Im Frontend umfasst die Implementierung von CRUD das Senden dieser HTTP-Anfragen an die Backend-API und die Verarbeitung der erhaltenen Antworten. Es werden häufig Bibliotheken für die Arbeit mit HTTP verwendet (z.B. Axios, Fetch API) sowie Frameworks/Bibliotheken zur Zustands- und UI-Verwaltung (z.B. React, Vue, Angular).