Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Não consigo deletar o produto mesmo após seguir as instruções do curso

Mesmo após realizar as alterações indicadas pelo instrutor o seguinte erro continuas a aparecer no console:

The resource from “http://localhost:3000/static/js/remove-livro.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

A rota para função de remoção é essa:

    app.delete('/books/:id', (req, resp) => {
        const bookDao = new BookDao(db);
        const id = req.params.id
        bookDao.remove(id)
                .then(() => resp.status(200).end())
                .catch(err => console.log(err))
    });

O custom-express está da seguinte forma:

require('marko/node-require').install();
require('marko/express');

const express = require('express');
const bodyParse = require('body-parser');
const app = express();

app.use('/static', express.static('src/app/public'));

app.use(bodyParse.urlencoded({
    extended: true
}));


const routes = require('../app/routes/routes');
routes(app);

module.exports = app;

O arquivo marko da página é o seguinte:

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1> Listagem de livros </h1>

        <table>
            <tr>
                <td>ID</td>
                <td>Título</td>
                <td>Preço</td>
                <td>Editar</td>
                <td>Remover</td>
            </tr>
                <tr  for(book in data.books)>
                <td>${book.id}</td>
                <td>${book.titulo}</td>
                <td>${book.preco}</td>
                <td><a href="#">Editar</a></td>
                <td><a href="#" data-ref="${book.id}" data-type="remocao">Remover</a></td>
            </tr>
        </table> 
    <script src="/static/js/remove-livro.js"></script> 
    </body> 
</html>

Agradeço a colaboração desde já =)

5 respostas

Boa tarde, Nandes! Como vai?

Vc chegou a parar e reiniciar o servidor após as alterações? Tente fazer isso! Se não resolver, vc poderia compartilhar o seu código no github e mandar o link aqui? Dessa forma eu poderei dar uma olhada mais de perto no que está acontecendo para tentar te ajudar!

Reiniciei o servidor algumas vezes, mas não funcionou =(

Segue o link do projeto no github:

https://github.com/gabriel3007/curso-de-node-alura/tree/master

solução!

Bom dia Nandes.

Bom, fiz o download do seu projeto mas não consegui simular esse erro que você está sofrendo... No entanto, eu notei vários outros erros que fazem com que o projeto não funcione corretamente.

Vamos lá...

1º No arquivo custom-express na linha 8 está definido assim:

app.use('/static', express.static('src/app/public'));

E na sua estrutura de pastas, a pasta public está em src/. Você deve mudar para ficar assim:

app.use('/static', express.static('src/public'));

2º No arquivo remove-livro.js na linha 8 também, está definido para fazer um requisição na URL http://localhost:3000/livros/${livroId}, mas você organizou suas rotas para responder a books e não livros. Então você deve alterar seu arquivo para ficar assim:

fetch(`http://localhost:3000/books/${livroId}`, { method: 'DELETE' })
            .then(resposta => {

                let tr = elementoClicado.closest(`#livro_${livroId}`);
                tr.remove();

            })
            .catch(erro => console.log(erro));

3º No seu arquivo lista.marko você deve setar o ID na tag table ficando assim:

<table id="livros">
//resto do conteúdo
</table>

O por que desse ID? Porque no arquivo remove-livro.js é esperado um elemento com esse ID. Como mostrado logo abaixo:

Linha 1 do arquivo remove-livro.js

let tabelaLivros = document.querySelector('#livros');

Se você alterar o ID da tabela no arquivo list.marko não se esqueça de alterar no arquivo remove-livro.js

4º No arquivo list.marko ainda, aonde é criado a TR onde mostra os dados do livro na linha 16, você deve setar um ID também.

Como mostrado logo abaixo:

<tr id="livro_${book.id}"  for(book in data.books)>
    <td>${book.id}</td>
    <td>${book.titulo}</td>
    <td>${book.preco}</td>
    <td><a href="#">Editar</a></td>
    <td><a href="#" data-ref="${book.id}" data-type="remocao">Remover</a></td>
</tr>

O por que deste ID? Mesmo motivo de antes, no arquivo remove-livro.js é esperado um elemento com esse ID. Como mostrado na linha abaixo:

Linha 10 do arquivo remove-livro.js

let tr = elementoClicado.closest(`#livro_${livroId}`);

E como mencionei antes, se você alterar o formato deste ID no arquivo list.marko deve alterar no arquivo remove-livro.js também.

5º No arquivo book-dao.js no método remove você está executando cometeu um pequeno erro no SQL de deletar. Você coloco o seguinte SQL.

`DELETE * FROM livros WHERE id = ?`

Mas o correto seria:

`DELETE FROM livros WHERE id = ?`

Espero ter ajudado =).

OBS: Desculpe pela resposta grande, mas foram os erros que encontrei ao tentar remover um livro.

Bons estudos.

Muito obrigado pela ajuda, vou fazer as devidas alterações no projeto

Beleza, se surgir mais algum erro e precisar de ajuda, só gritar um help :)