Jak realizuje się CRUD?

CRUD oznacza Create, Read, Update, Delete. Są to podstawowe operacje wykonywane na danych.

Create (Tworzenie): Wysyłanie żądania z metodą POST do punktu końcowego w celu utworzenia nowego zasobu. Ciało żądania zazwyczaj zawiera dane nowego obiektu.

// Przykłady z użyciem Fetch API
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Nowy element' }),
})
  .then(response => response.json())
  .then(data => console.log('Utworzono:', data));

Read (Odczyt): Wysyłanie żądania z metodą GET.

• Odczyt wszystkich zasobów: żądanie GET do głównego punktu końcowego kolekcji.
• Odczyt konkretnego zasobu: żądanie GET do punktu końcowego z identyfikatorem zasobu.

// Odczyt wszystkich
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Wszystkie elementy:', data));

// Odczyt konkretnego
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Element 123:', data));

Update (Aktualizacja): Wysyłanie żądania z metodą PUT lub PATCH do punktu końcowego z identyfikatorem zasobu.

• PUT: pełna zamiana istniejącego zasobu.
• PATCH: częściowa aktualizacja zasobu.

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

// Częściowa aktualizacja (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'Nowy opis' }),
})
  .then(response => response.json())
  .then(data => console.log('Częściowo zaktualizowano:', data));

Delete (Usunięcie): Wysyłanie żądania z metodą DELETE do punktu końcowego z identyfikatorem zasobu.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Usunięto pomyślnie');
    } else {
      console.error('Nieudane usunięcie');
    }
  });

Związek z REST API:

Operacje CRUD są ściśle powiązane z zasadami REST (Transfer of Représentational State), gdzie metody HTTP są używane do wykonywania tych działań na zasobach:

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

Implementacja CRUD na froncie obejmuje wysyłanie tych żądań HTTP do API backendu i obsługę otrzymanych odpowiedzi. Często używa się bibliotek do pracy z HTTP (np. Axios, Fetch API) oraz frameworków/bibliotek do zarządzania stanem i interfejsem użytkownika (np. React, Vue, Angular).