Esse é o erro que aparece no console:
DELETE http://localhost:3000/livros/3 net::ERR_EMPTY_RESPONSE (anonymous) @ remove-livro.js:15 remove-livro.js:24 TypeError: Failed to fetch
testei com console.log a fetch e ela pega o id, mas na rota o id não é pego no req.params.id
remove-livro.js:
// função com evento de clique para deletar um livro do banco de dados
// selecionar a tabelade livros
let tabelaLivros = document.querySelector('#livros');
// adicionar na tabela um evendo de ouvinte para (click)
tabelaLivros.addEventListener('click', (evento) => {
// pegar o evendo gerado e o elemento clicado
let elementoClicado = evento.target;
// bloco if, verifica se o elemento clicado tem o data-type == remoção
if (elementoClicado.dataset.type == 'remocao') {
// se o elemento clicado tiver o data-type == remoção é pegado o seu data-ref juntamente com o id
let livroId = elementoClicado.dataset.ref;
// é feita uma requisição assincrona (AJAX) com a fetch api para a URL para (/livro/ id do livro) com o metodo DELETE
fetch(`http://localhost:3000/livros/${livroId}`, { method: 'DELETE' })
// caso tudo ocorra corretamente a fetch api devolve a resposta como uma promise
.then(resposta => {
// como resposta a promise o item com o id selecionado é removido
let tr = elementoClicado.closest(`#livro_${livroId}`);
tr.remove();
})
// caso haja algum erro o metodo cai no bloco catch e mostra o erro no consoles
.catch(erro => console.log(erro));
}
});
rota para delete:
app.delete('/livros/:id', function(req, resp) {
// constante id onde vai ficar salvo por parametro o id do livro a ser deletado, é feita uma requisição para pegar o parametro id
const id = req.params.id;
console.log(id);
// Iniciado uma instância do objeto @LivroDao com parametro do banco de dados @db
const livroDao = new LivroDao(db);
// Chamado uma função de remoção @remove do objeto @LivroDao como resposta a Promise declarada em @LivroDao com o parametro id do livro
livroDao.remove(id)
// caso tudo ocorra corretamente a resposta vai ser o status 200 (ok) do http e termirnar a promise
.then(() => resp.status(200).end())
// bloco catch para caso haja algum erro esse erro seja declarado no console
.catch(error => console.log(error));
});
configuração do middleware:
// criado middleware para pegar arquivo estatico
// delegando ao app o uso do metodo @use do @express
// primeiro parametro, caminho para a rota
app.use('/estatico',
// segundo parametro, uso do metodo @static do @express que serve para pegar aquivos estaticos
express.static('src/app/public')
);
remove do livro-dao:
/ função para remover um livro usando como parametro o id
remove(id) {
// criado a promise que irá ser usada para atualiza o livro com os parametros @resolve e @reject
return new Promise((resolve, reject) => {
// chamada ao banco de dados fazendo uso metodo @get do @sqlite para selecionar o livro pelo id
this._db.get(
// delete do livro na tabela livros
`DELETE * FROM livros WHERE id = ?`,
// array com o id do livro a ser deletado
[id],
// declarando que caso haja erros deve-se cair no bloco @error e retornar com o @reject da promise uma mensagem e parar a tansação
(error) => {
if (error) {
return reject('Não foi possível remover o livro!');
}
// declarando que caso não haja erros deve-se cair no bloco @resolve da promise e o mesmo deve resolver a promise sem retornar um resultado
return resolve();
}
);
});
}