Jak je implementován CRUD?

CRUD znamená Create, Read, Update, Delete. Jedná se o základní operace prováděné s daty.

Create (Vytvoření): Odeslání požadavku s metodou POST na endpoint pro vytvoření nového zdroje. Tělo požadavku obvykle obsahuje data nového objektu.

// Pří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('Vytvořeno:', data));

Read (Čtení): Odeslání požadavku s metodou GET.

• Čtení všech zdrojů: GET požadavek na hlavní endpoint kolekce.
• Čtení konkrétního zdroje: GET požadavek na endpoint s identifikátorem zdroje.

// Čtení všech
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Všechny položky:', data));

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

Update (Aktualizace): Odeslání požadavku s metodou PUT nebo PATCH na endpoint s identifikátorem zdroje.

• PUT: úplná náhrada existujícího zdroje.
• PATCH: částečná aktualizace zdroje.

// Aktualizace (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('Aktualizováno:', data));

// Částečná aktualizace (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('Patchováno:', data));

Delete (Odstranění): Odeslání požadavku s metodou DELETE na endpoint s identifikátorem zdroje.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Úspěšně odstraněno');
    } else {
      console.error('Odstranění selhalo');
    }
  });

Vztah s REST API:

CRUD operace jsou úzce spojeny s principy REST (Representational State Transfer), kde jsou HTTP metody používány k provádění těchto akcí nad zdroji:

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

Na frontendu implementace CRUD zahrnuje odesílání těchto HTTP požadavků na backendové API a zpracování obdržených odpovědí. Často se používají knihovny pro práci s HTTP (například Axios, Fetch API) a frameworky/knihovny pro správu stavu a UI (například React, Vue, Angular).