Cum se implementează CRUD?

CRUD reprezintă Create, Read, Update, Delete. Acestea sunt operațiunile principale efectuate asupra datelor.

Create (Creare): Trimiteți o solicitare cu metoda POST către endpoint pentru a crea o resursă nouă. Corpul solicitării conține de obicei datele obiectului nou.

// Exemple cu Fetch API
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Element nou' }),
})
  .then(response => response.json())
  .then(data => console.log('Creat:', data));

Read (Citire): Trimiteți o solicitare cu metoda GET.

• Citirea tuturor resurselor: solicitare GET la endpoint-ul principal al colecției.
• Citirea unei resurse specifice: solicitare GET la endpoint-ul cu identificatorul resursei.

// Citirea tuturor
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Toate elementele:', data));

// Citirea unui element specific
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Elementul 123:', data));

Update (Actualizare): Trimiteți o solicitare cu metoda PUT sau PATCH la endpoint-ul cu identificatorul resursei.

• PUT: înlocuirea completă a resursei existente.
• PATCH: actualizare parțială a resursei.

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

// Actualizare parțială (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'Nouă descriere' }),
})
  .then(response => response.json())
  .then(data => console.log('Parțial actualizat:', data));

Delete (Ștergere): Trimiteți o solicitare cu metoda DELETE la endpoint-ul cu identificatorul resursei.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Șters cu succes');
    } else {
      console.error('Eșec la ștergere');
    }
  });

Legătura cu REST API:

Operațiile CRUD sunt strâns legate de principiile REST (Transferul de Stare Reprezentatională), unde metodele HTTP sunt utilizate pentru a efectua aceste acțiuni asupra resurselor:

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

Implementarea CRUD pe frontend implică trimiterea acestor solicitări HTTP către API-ul backend și gestionarea răspunsurilor primite. Se folosesc frecvent biblioteci pentru lucrul cu HTTP (de exemplu, Axios, Fetch API) și framework-uri/biblioteci pentru gestionarea stării și UI (de exemplu, React, Vue, Angular).