Что такое CRUD?

CRUD — аббревиатура, описывающая основные операции, выполняемые над данными:

• Create (Создание): Добавление новых данных.
• Read (Чтение): Получение существующих данных.
• Update (Обновление): Изменение существующих данных.
• Delete (Удаление): Удаление данных.

В Frontend-разработке эти операции часто соответствуют HTTP-методам при взаимодействии с бэкэндом через API:

Пример реализации на Frontend с использованием JavaScript для взаимодействия с REST API:

// Предположим, у нас есть объект user и его нужно создать на сервере
fetch('/api/users', {
  method: 'POST', // Create
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'New User', email: 'new.user@example.com' }),
})
  .then(response => response.json())
  .then(data => console.log('User created:', data))
  .catch(error => console.error('Error creating user:', error));

// Пример чтения данных
fetch('/api/users/1') // Read (для пользователя с ID 1)
  .then(response => response.json())
  .then(data => console.log('User data:', data))
  .catch(error => console.error('Error fetching user:', error));

// Пример обновления данных
fetch('/api/users/1', {
  method: 'PUT', // Update
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Updated User' }),
})
  .then(response => response.json())
  .then(data => console.log('User updated:', data))
  .catch(error => console.error('Error updating user:', error));

// Пример удаления данных
fetch('/api/users/1', {
  method: 'DELETE', // Delete
})
  .then(response => {
    if (response.ok) {
      console.log('User deleted');
    } else {
      console.error('Error deleting user:', response.status);
    }
  })
  .catch(error => console.error('Error deleting user:', error));