Ako sa implementuje CRUD?

CRUD znamená Create, Read, Update, Delete. Ide o základné operácie vykonávané s údajmi.

Create (Vytvorenie): Odoslanie požiadavky s metódou POST na endpoint na vytvorenie nového zdroja. Telo požiadavky zvyčajne obsahuje údaje nového objektu.

// Príklady s použitím Fetch API
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'New Item' }),
})
  .then(response => response.json())
  .then(data => console.log('Vytvorené:', data));

Read (Čítanie): Odoslanie požiadavky s metódou GET.

• Čítanie všetkých zdrojov: GET požiadavka na hlavnú endpoint kolekcie.
• Čítanie konkrétneho zdroja: GET požiadavka na endpoint s identifikátorom zdroja.

// Čítanie všetkých
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Všetky položky:', data));

// Čítanie konkrétneho
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Položka 123:', data));

Update (Aktualizácia): Odoslanie požiadavky s metódou PUT alebo PATCH na endpoint s identifikátorom zdroja.

• PUT: úplná náhrada existujúceho zdroja.
• PATCH: čiastočná aktualizácia zdroja.

// Aktualizácia (PUT)
fetch('/api/items/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Updated Item' }),
})
  .then(response => response.json())
  .then(data => console.log('Aktualizované:', data));

// Čiastočná aktualizácia (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'New Description' }),
})
  .then(response => response.json())
  .then(data => console.log('Patchované:', data));

Delete (Odstránenie): Odoslanie požiadavky s metódou DELETE na endpoint s identifikátorom zdroja.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Odstránené úspešne');
    } else {
      console.error('Odstránenie zlyhalo');
    }
  });

Väzba s REST API:

CRUD operácie sú úzko spojené s princípmi REST (Representational State Transfer), kde sa HTTP metódy používajú na vykonávanie týchto akcií nad zdrojmi:

CRUD	HTTP Metóda
Create	POST
Read	GET
Update	PUT/PATCH
Delete	DELETE

Na frontende implementácia CRUD zahŕňa odosielanie týchto HTTP požiadaviek na backendové API a spracovanie prijatých odpovedí. Často sa používajú knižnice na prácu s HTTP (napríklad Axios, Fetch API) a rámce/knižnice na správu stavu a UI (napríklad React, Vue, Angular).