Mis on CRUD?

CRUD — see on lühend, mis kirjeldab põhitegevusi, mida tehakse andmetega:

• Create (Loo): Uute andmete lisamine.
• Read (Loe): Eksisteerivate andmete saamine.
• Update (Uuenda): Eksisteerivate andmete muutmine.
• Delete (Kustuta): Andmete kustutamine.

Frontend arenduses vastavad need toimingud sageli HTTP meetoditele API kaudu backendiga suhtlemisel:

CRUD operatsioon	HTTP meetod	Kirjeldus
Create	POST	Saata andmed loomise jaoks.
Read	GET	Nõuda andmeid.
Update	PUT / PATCH	Saata andmed uuendamiseks.
Delete	DELETE	Nõuda andmete kustutamist.

Näide, kuidas rakendada JavaScripti abil REST API-ga suhtlemisel:

// Oletame, et meil on kasutaja objekt ja seda tuleb serveris luua
fetch('/api/users', {
  method: 'POST', // Create
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Uus kasutaja', email: 'uus.kasutaja@example.com' }),
})
  .then(response => response.json())
  .then(data => console.log('Kasutaja loodud:', data))
  .catch(error => console.error('Viga kasutaja loomisel:', error));

// Andmete lugemise näide
fetch('/api/users/1') // Loe (kasutaja ID-ga 1)
  .then(response => response.json())
  .then(data => console.log('Kasutaja andmed:', data))
  .catch(error => console.error('Viga andmete saamisel:', error));

// Andmete uuendamise näide
fetch('/api/users/1', {
  method: 'PUT', // Update
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Uuendatud kasutaja' }),
})
  .then(response => response.json())
  .then(data => console.log('Kasutaja uuendatud:', data))
  .catch(error => console.error('Viga uuendamisel:', error));

// Andmete kustutamise näide
fetch('/api/users/1', {
  method: 'DELETE', // Delete
})
  .then(response => {
    if (response.ok) {
      console.log('Kasutaja kustutatud');
    } else {
      console.error('Viga kustutamisel:', response.status);
    }
  })
  .catch(error => console.error('Viga kustutamisel:', error));