Как се реализира CRUD?

CRUD означава създаване, четене, актуализиране, изтриване. Това са основните операции, които се изпълняват с данни.

Create (Създаване): Изпращане на заявка с метод POST към крайна точка за създаване на нов ресурс. Тялото на заявката обикновено съдържа данните на новия обект.

// Примери с използване на 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('Създадено:', data));

Read (Четене): Изпращане на заявка с метод GET.

• Четене на всички ресурси: GET заявка към основната крайна точка на колекцията.
• Четене на конкретен ресурс: GET заявка към крайна точка с идентификатор на ресурса.

// Четене на всички
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Всички елементи:', data));

// Четене на конкретен
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Елемент 123:', data));

Update (Актуализиране): Изпращане на заявка с метод PUT или PATCH към крайна точка с идентификатор на ресурса.

• PUT: пълна замяна на съществуващия ресурс.
• PATCH: частична актуализация на ресурса.

// Актуализиране (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('Актуализирано:', data));

// Частична актуализация (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('Парчево:', data));

Delete (Изтриване): Изпращане на заявка с метод DELETE към крайна точка с идентификатор на ресурса.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Успешно изтрито');
    } else {
      console.error('Неуспешно изтриване');
    }
  });

Връзка с REST API:

CRUD операциите са тясно свързани с принципите на REST (Representational State Transfer), където HTTP методите се използват за изпълнение на тези действия върху ресурсите:

CRUD	HTTP Метод
Create	POST
Read	GET
Update	PUT/PATCH
Delete	DELETE

На фронтенда реализирането на CRUD включва изпращане на тези HTTP заявки към бекенд API и обработка на получените отговори. Често се използват библиотеки за работа с HTTP (например Axios, Fetch API) и рамки/библиотеки за управление на състоянието и UI (например React, Vue, Angular).