O que é CRUD?

CRUD é uma abreviatura que descreve as operações principais realizadas sobre os dados:

• Criar: Adicionar novos dados.
• Read: Obter dados existentes.
• Update: Alterar dados existentes.
• Delete: Eliminar dados.

No desenvolvimento frontend, estas operações frequentemente correspondem aos métodos HTTP ao interagir com o backend através de API:

Operação CRUD	Método HTTP	Descrição
Create	POST	Enviar dados para criar.
Read	GET	Solicitar dados.
Update	PUT / PATCH	Enviar dados para atualizar.
Delete	DELETE	Solicitar eliminação de dados.

Exemplo de implementação no frontend usando JavaScript para interagir com REST API:

// Suponha que temos um objeto user e precisamos criá-lo no servidor
fetch('/api/users', {
  method: 'POST', // Criar
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Novo Utilizador', email: 'novo.utilizador@exemplo.com' }),
})
  .then(response => response.json())
  .then(data => console.log('Utilizador criado:', data))
  .catch(error => console.error('Erro ao criar utilizador:', error));

// Exemplo de leitura de dados
fetch('/api/users/1') // Ler (para utilizador com ID 1)
  .then(response => response.json())
  .then(data => console.log('Dados do utilizador:', data))
  .catch(error => console.error('Erro ao obter utilizador:', error));

// Exemplo de atualização de dados
fetch('/api/users/1', {
  method: 'PUT', // Atualizar
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'Utilizador Atualizado' }),
})
  .then(response => response.json())
  .then(data => console.log('Utilizador atualizado:', data))
  .catch(error => console.error('Erro ao atualizar utilizador:', error));

// Exemplo de eliminação de dados
fetch('/api/users/1', {
  method: 'DELETE', // Eliminar
})
  .then(response => {
    if (response.ok) {
      console.log('Utilizador eliminado');
    } else {
      console.error('Erro ao eliminar utilizador:', response.status);
    }
  })
  .catch(error => console.error('Erro ao eliminar utilizador:', error));