Sobes.tech
Back to questions
Junior
139
questionbank

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

Answer from AI

sobes.tech AI

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).