Czym jest CRUD?

CRUD to skrót od angielskich słów opisujących podstawowe operacje wykonywane na danych:

• Create (Tworzenie): Dodanie nowych danych.
• Read (Odczyt): Pobranie istniejących danych.
• Update (Aktualizacja): Zmiana istniejących danych.
• Delete (Usuwanie): Usunięcie danych.

W rozwoju frontend często te operacje odpowiadają metodom HTTP podczas interakcji z backendem przez API:

Operacja CRUD	Metoda HTTP	Opis
Create	POST	Wysyłanie danych do utworzenia.
Read	GET	Żądanie danych.
Update	PUT / PATCH	Wysyłanie danych do aktualizacji.
Delete	DELETE	Żądanie usunięcia danych.

Przykład implementacji w frontendzie z użyciem JavaScript do interakcji z REST API:

// Załóżmy, że mamy obiekt user i chcemy go utworzyć na serwerze
fetch('/api/users', {
  method: 'POST', // Tworzenie
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Nowy Użytkownik', email: 'nowy.uzytkownik@przyklad.com' }),
})
  .then(response => response.json())
  .then(data => console.log('Użytkownik utworzony:', data))
  .catch(error => console.error('Błąd podczas tworzenia użytkownika:', error));

// Przykład odczytu danych
fetch('/api/users/1') // Dla użytkownika z ID 1
  .then(response => response.json())
  .then(data => console.log('Dane użytkownika:', data))
  .catch(error => console.error('Błąd podczas pobierania użytkownika:', error));

// Przykład aktualizacji danych
fetch('/api/users/1', {
  method: 'PUT', // Aktualizacja
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Zaktualizowany Użytkownik' }),
})
  .then(response => response.json())
  .then(data => console.log('Użytkownik zaktualizowany:', data))
  .catch(error => console.error('Błąd podczas aktualizacji użytkownika:', error));

// Przykład usunięcia danych
fetch('/api/users/1', {
  method: 'DELETE', // Usunięcie
})
  .then(response => {
    if (response.ok) {
      console.log('Użytkownik usunięty');
    } else {
      console.error('Błąd podczas usuwania użytkownika:', response.status);
    }
  })
  .catch(error => console.error('Błąd podczas usuwania użytkownika:', error));