Finalizado esta atividade 2 (Remoção de livros) da aula 5 (Evoluindo a aplicação), quando clico no link "Remover" ao lado de qualquer um dos livros, sou redirecionado para a URL http://localhost:3000/livros# .
Achei estranho pois no meu console apresentou apenas o erro :
O recurso de “http://localhost:3000/remove-livro.js” foi bloqueado devido ao tipo MIME (“text/html”) não coincidir com (X-Content-Type-Options: nosniff).e o warning :
Falha no carregamento do <script> com a fonte “http://localhost:3000/remove-livro.js”. livros:1:1Será que ficou alguma coisa errado no meu código?
Ele está assim:
lista.marko :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1> Listagem de livros </h1>
<table id="livros">
<tr>
<td>ID</td>
<td>Título</td>
<td>Preço</td>
<td>Editar</td>
<td>Remover</td>
</tr>
<tr id="livro_${livro.id}" for (livro in data.livros)>
<td>${livro.id}</td>
<td>${livro.titulo}</td>
<td>${livro.preco}</td>
<td><a href="#">Editar</a></td>
<td><a href="#" data-ref="${livro.id}" data-type="remocao">Remover</a></td>
</tr>
</table>
<script src="./remove-livro.js">
</script>
</body>
</html>remove-livro.js :
let tabelaLivros = document.querySelector('#livros');
tabelaLivros.addEventListener('click', (evento) => {
let elementoClicado = evento.target;
if (elementoClicado.dataset.type == 'remocao') {
let livroId = elementoClicado.dataset.ref;
fetch(`http://localhost:3000/livros/${livroId}`, { method: 'DELETE' })
.then(resposta => {
let tr = elementoClicado.closest(`#livro_${livroId}`);
tr.remove();
})
.catch(erro => console.log(erro));
}
});rotas.js :
const LivroDao = require('../infra/livro-dao');
const db = require('../../config/database');
module.exports = (app) => {
app.get('/', function(req, resp) {
resp.send(
`
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1> Casa do Código </h1>
</body>
</html>
`
);
});
app.get('/livros', function(req, resp) {
const livroDao = new LivroDao(db);
livroDao.lista()
.then(livros => resp.marko(
require('../views/livros/lista/lista.marko'),
{
livros: livros
}
))
.catch(erro => console.log(erro));
});
app.get('/livros/form', function(req, resp) {
resp.marko(require('../views/livros/form/form.marko'))
});
app.post('/livros', function(req, resp) {
console.log(req.body);
const livroDao = new LivroDao(db);
livroDao.adiciona(req.body)
.then(resp.redirect('/livros'))
.catch(erro => console.log(erro));
});
app.delete('/livros/:id', function(req, resp) {
const id = req.params.id;
const livroDao = new LivroDao(db);
livroDao.remove(id)
.then(() => resp.status(200).end())
.catch(erro => console.log(erro));
});
};livro-dao.js :
class LivroDao {
constructor(db) {
this._db = db;
}
... DEMAIS MÉTODOS OMITIDOS ...
remove(id) {
return new Promise((resolve, reject) => {
this._db.get(
`
DELETE
FROM livros
WHERE id = ?
`,
[id],
(erro) => {
if (erro) {
return reject('Não foi possível remover o livro!');
}
return resolve();
}
);
});
}
}
module.exports = LivroDao; 