Как реализуется CRUD?

CRUD расшифровывается как Create, Read, Update, Delete. Это основные операции, которые выполняются над данными.

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('Created:', data));

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

• Чтение всех ресурсов: GET запрос на основной эндпоинт коллекции.
• Чтение конкретного ресурса: GET запрос на эндпоинт с идентификатором ресурса.

// Чтение всех
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('All items:', data));

// Чтение конкретного
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Item 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('Updated:', 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('Patched:', data));

Delete (Удаление): Отправка запроса с методом DELETE на эндпоинт с идентификатором ресурса.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Deleted successfully');
    } else {
      console.error('Delete failed');
    }
  });

Связь с 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).