¿Cómo se implementa CRUD?

CRUD se refiere a Crear, Leer, Actualizar, Eliminar. Estas son las operaciones principales que se realizan sobre los datos.

Crear: Enviar una solicitud con método POST al endpoint para crear un nuevo recurso. El cuerpo de la solicitud generalmente contiene los datos del nuevo objeto.

// Ejemplos usando Fetch API
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Nuevo ítem' }),
})
  .then(response => response.json())
  .then(data => console.log('Creado:', data));

Leer: Enviar una solicitud con método GET.

• Leer todos los recursos: solicitud GET al endpoint principal de la colección.
• Leer un recurso específico: solicitud GET al endpoint con el identificador del recurso.

// Leer todos
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Todos los ítems:', data));

// Leer uno específico
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Ítem 123:', data));

Actualizar: Enviar una solicitud con método PUT o PATCH al endpoint con el identificador del recurso.

• PUT: reemplazo completo del recurso existente.
• PATCH: actualización parcial del recurso.

// Actualización (PUT)
fetch('/api/items/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Ítem actualizado' }),
})
  .then(response => response.json())
  .then(data => console.log('Actualizado:', data));

// Actualización parcial (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'Nueva descripción' }),
})
  .then(response => response.json())
  .then(data => console.log('Parcheado:', data));

Eliminar: Enviar una solicitud con método DELETE al endpoint con el identificador del recurso.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Eliminado con éxito');
    } else {
      console.error('Fallo en eliminación');
    }
  });

Relación con REST API:

Las operaciones CRUD están estrechamente relacionadas con los principios de REST (Transferencia de Estado Representacional), donde los métodos HTTP se utilizan para realizar estas acciones sobre los recursos:

CRUD	Método HTTP
Crear	POST
Leer	GET
Actualizar	PUT/PATCH
Eliminar	DELETE

En el frontend, la implementación de CRUD implica enviar estas solicitudes HTTP a la API backend y manejar las respuestas recibidas. Frecuentemente se utilizan bibliotecas para trabajar con HTTP (por ejemplo, Axios, Fetch API) y frameworks/bibliotecas para gestionar el estado y la interfaz de usuario (por ejemplo, React, Vue, Angular).