Mi az a CRUD?

CRUD egy rövidítés, amely a legfontosabb műveleteket írja le az adatokon:

• Create (Létrehozás): Új adatok hozzáadása.
• Read (Olvasás): Létező adatok lekérése.
• Update (Frissítés): Létező adatok módosítása.
• Delete (Törlés): Adatok törlése.

A frontend fejlesztésben ezeket a műveleteket gyakran az API-n keresztüli kommunikáció során a HTTP-módszerekhez társítják:

CRUD művelet	HTTP módszer	Leírás
Create	POST	Adatok küldése létrehozáshoz.
Read	GET	Adatok lekérése.
Update	PUT / PATCH	Adatok küldése frissítéshez.
Delete	DELETE	Adatok törlése.

JavaScript példák a REST API-val való kommunikációhoz frontendben:

// Tegyük fel, hogy van egy user objektumunk, és létre akarjuk hozni a szerveren
fetch('/api/users', {
  method: 'POST', // Létrehozás
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Új Felhasználó', email: 'uj.felhasznalo@pelda.com' }),
})
  .then(response => response.json())
  .then(data => console.log('Felhasználó létrehozva:', data))
  .catch(error => console.error('Hiba a felhasználó létrehozásában:', error));

// Adatok lekérése példaként
fetch('/api/users/1') // Az ID 1-es felhasználó
  .then(response => response.json())
  .then(data => console.log('Felhasználói adatok:', data))
  .catch(error => console.error('Hiba a felhasználó lekérdezésekor:', error));

// Adatok frissítése példaként
fetch('/api/users/1', {
  method: 'PUT', // Frissítés
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Frissített Felhasználó' }),
})
  .then(response => response.json())
  .then(data => console.log('Felhasználó frissítve:', data))
  .catch(error => console.error('Hiba a felhasználó frissítésekor:', error));

// Adatok törlése példaként
fetch('/api/users/1', {
  method: 'DELETE', // Törlés
})
  .then(response => {
    if (response.ok) {
      console.log('Felhasználó törölve');
    } else {
      console.error('Hiba a felhasználó törlésekor:', response.status);
    }
  })
  .catch(error => console.error('Hiba a felhasználó törlésekor:', error));