Como é que o CRUD é implementado?

CRUD significa Criar, Ler, Atualizar, Eliminar. Estas são as operações principais realizadas sobre os dados.

Criar: Enviar uma requisição com método POST ao endpoint para criar um novo recurso. O corpo da requisição geralmente contém os dados do novo objeto.

// Exemplos usando Fetch API
fetch('/api/items', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Novo Item' }),
})
  .then(response => response.json())
  .then(data => console.log('Criado:', data));

Ler: Enviar uma requisição com método GET.

• Ler todos os recursos: requisição GET ao endpoint principal da coleção.
• Ler um recurso específico: requisição GET ao endpoint com o identificador do recurso.

// Ler todos
fetch('/api/items')
  .then(response => response.json())
  .then(data => console.log('Todos os itens:', data));

// Ler um específico
fetch('/api/items/123')
  .then(response => response.json())
  .then(data => console.log('Item 123:', data));

Atualizar: Enviar uma requisição com método PUT ou PATCH ao endpoint com o identificador do recurso.

• PUT: substituição completa do recurso existente.
• PATCH: atualização parcial do recurso.

// Atualizar (PUT)
fetch('/api/items/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Item atualizado' }),
})
  .then(response => response.json())
  .then(data => console.log('Atualizado:', data));

// Atualização parcial (PATCH)
fetch('/api/items/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ description: 'Nova descrição' }),
})
  .then(response => response.json())
  .then(data => console.log('Parcheado:', data));

Eliminar: Enviar uma requisição com método DELETE ao endpoint com o identificador do recurso.

fetch('/api/items/123', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      console.log('Eliminado com sucesso');
    } else {
      console.error('Falha na eliminação');
    }
  });

Ligação com REST API:

As operações CRUD estão estreitamente relacionadas com os princípios REST (Transferência de Estado Representacional), onde os métodos HTTP são utilizados para realizar estas ações sobre os recursos:

CRUD	Método HTTP
Criar	POST
Ler	GET
Atualizar	PUT/PATCH
Eliminar	DELETE

Na parte do frontend, a implementação do CRUD envolve enviar estas requisições HTTP à API backend e lidar com as respostas recebidas. Frequentemente, utilizam-se bibliotecas para trabalhar com HTTP (por exemplo, Axios, Fetch API) e frameworks/bibliotecas para gerir o estado e a interface de utilizador (por exemplo, React, Vue, Angular).