¿Qué es CRUD?

CRUD es una abreviatura que describe las operaciones principales realizadas sobre los datos:

• Crear: Agregar nuevos datos.
• RLeer: Obtener datos existentes.
• Update: Modificar datos existentes.
• Delete: Eliminar datos.

En el desarrollo frontend, estas operaciones a menudo corresponden a los métodos HTTP al interactuar con el backend a través de API:

Operación CRUD	Método HTTP	Descripción
Create	POST	Enviar datos para crear.
Read	GET	Solicitar datos.
Update	PUT / PATCH	Enviar datos para actualizar.
Delete	DELETE	Solicitar eliminación de datos.

Ejemplo de implementación en frontend usando JavaScript para interactuar con REST API:

// Supongamos que tenemos un objeto user y necesitamos crearlo en el servidor
fetch('/api/users', {
  method: 'POST', // Crear
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Nuevo Usuario', email: 'nuevo.usuario@ejemplo.com' }),
})
  .then(response => response.json())
  .then(data => console.log('Usuario creado:', data))
  .catch(error => console.error('Error al crear usuario:', error));

// Ejemplo de lectura de datos
fetch('/api/users/1') // Leer (para usuario con ID 1)
  .then(response => response.json())
  .then(data => console.log('Datos del usuario:', data))
  .catch(error => console.error('Error al obtener usuario:', error));

// Ejemplo de actualización de datos
fetch('/api/users/1', {
  method: 'PUT', // Actualizar
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Usuario Actualizado' }),
})
  .then(response => response.json())
  .then(data => console.log('Usuario actualizado:', data))
  .catch(error => console.error('Error al actualizar usuario:', error));

// Ejemplo de eliminación de datos
fetch('/api/users/1', {
  method: 'DELETE', // Eliminar
})
  .then(response => {
    if (response.ok) {
      console.log('Usuario eliminado');
    } else {
      console.error('Error al eliminar usuario:', response.status);
    }
  })
  .catch(error => console.error('Error al eliminar usuario:', error));