Was ist CRUD?

CRUD ist eine Abkürzung, die die wichtigsten Operationen beschreibt, die an Daten ausgeführt werden:

• Create (Erstellen): Neue Daten hinzufügen.
• Read (Lesen): Bestehende Daten abrufen.
• Update (Aktualisieren): Bestehende Daten ändern.
• Delete (Löschen): Daten löschen.

Im Frontend-Development entsprechen diese Operationen oft den HTTP-Methoden bei der Interaktion mit dem Backend über APIs:

CRUD-Operation	HTTP-Methode	Beschreibung
Create	POST	Daten zum Erstellen senden.
Read	GET	Daten anfordern.
Update	PUT / PATCH	Daten zum Aktualisieren senden.
Delete	DELETE	Daten zum Löschen anfordern.

Beispiel für eine Implementierung im Frontend mit JavaScript zur Interaktion mit REST API:

// Angenommen, wir haben ein Objekt user und möchten es auf dem Server erstellen
fetch('/api/users', {
  method: 'POST', // Erstellen
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Neuer Nutzer', email: 'neuer.nutzer@beispiel.com' }),
})
  .then(response => response.json())
  .then(data => console.log('Benutzer erstellt:', data))
  .catch(error => console.error('Fehler beim Erstellen des Benutzers:', error));

// Beispiel zum Lesen von Daten
fetch('/api/users/1') // Für Nutzer mit ID 1
  .then(response => response.json())
  .then(data => console.log('Benutzerdaten:', data))
  .catch(error => console.error('Fehler beim Abrufen des Benutzers:', error));

// Beispiel zum Aktualisieren von Daten
fetch('/api/users/1', {
  method: 'PUT', // Aktualisieren
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Aktualisierter Nutzer' }),
})
  .then(response => response.json())
  .then(data => console.log('Benutzer aktualisiert:', data))
  .catch(error => console.error('Fehler beim Aktualisieren des Benutzers:', error));

// Beispiel zum Löschen von Daten
fetch('/api/users/1', {
  method: 'DELETE', // Löschen
})
  .then(response => {
    if (response.ok) {
      console.log('Benutzer gelöscht');
    } else {
      console.error('Fehler beim Löschen des Benutzers:', response.status);
    }
  })
  .catch(error => console.error('Fehler beim Löschen des Benutzers:', error));