Hogyan valósul meg a CRUD?

CRUD a Create, Read, Update, Delete rövidítése. Ezek azok a fő műveletek, amelyeket az adatokon végrehajtanak.

Create (Létrehozás): Kérés küldése POST módszerrel az végpontra egy új erőforrás létrehozásához. A kérés törzse általában tartalmazza az új objektum adatait.

// Fetch API példák
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Új elem' }),
})
  .then(response => response.json())
  .then(data => console.log('Létrehozva:', data));

Read (Olvasás): GET módszerrel kérés küldése.

• Minden erőforrás olvasása: GET kérés a gyűjtemény fő végpontjára.
• Egy adott erőforrás olvasása: GET kérés az erőforrás azonosítójával ellátott végpontra.

// Minden olvasása
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Összes elem:', data));

// Egy konkrét olvasása
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Elem 123:', data));

Update (Frissítés): PUT vagy PATCH kérés küldése az erőforrás azonosítójával ellátott végpontra.

• PUT: a meglévő erőforrás teljes cseréje.
• PATCH: részleges frissítés.

// Frissítés (PUT)
fetch('/api/items/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Frissített elem' }),
})
  .then(response => response.json())
  .then(data => console.log('Frissítve:', data));

// Részleges frissítés (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'Új leírás' }),
})
  .then(response => response.json())
  .then(data => console.log('Részlegesen frissítve:', data));

Delete (Törlés): DELETE kérés küldése az erőforrás azonosítójával ellátott végpontra.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Sikeresen törölve');
    } else {
      console.error('Törlés sikertelen');
    }
  });

Kapcsolat a REST API-val:

A CRUD műveletek szorosan kapcsolódnak a REST (Representational State Transfer) elvekhez, ahol az HTTP módszerek ezeknek a műveleteknek a végrehajtására szolgálnak erőforrásokon:

CRUD	HTTP Módszer
Create	POST
Read	GET
Update	PUT/PATCH
Delete	DELETE

A frontendben a CRUD megvalósítása ezeknek a HTTP kéréseknek a küldését és a kapott válaszok kezelését jelenti. Gyakran használnak könyvtárakat HTTP műveletekhez (pl. Axios, Fetch API) és keretrendszereket vagy könyvtárakat az állapot és a UI kezelésére (pl. React, Vue, Angular).