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

Erro na remoção dos livros (configuração dos arquivos estáticos da aplicação)

Ao acessar minha página de livros recebo o erro abaixo no console:

GET http://localhost:3000/estatico/js/remove-livro.js net::ERR_ABORTED 404 (Not Found)

Já efetuei a configuração dos arquivos estáticos no custom-express.js:

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

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const methodOverride = require('method-override');

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

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

app.use(methodOverride(function (req, res) {
    if (req.body && typeof req.body === 'object' && '_method' in req.body) {
      // look in urlencoded POST bodies and delete it
      var method = req.body._method;
      delete req.body._method;
      return method;
    }
}));

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

module.exports = app;

Aqui está a declaração do script de remoção no final do arquivo 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="/livros/form/${livro.id}">Editar</a></td>
                <td><a href="#" data-ref="${livro.id}" data-type="remocao">Remover</a></td>
            </tr>
        </table>

       <script src="/estatico/js/remove-livro.js">
        </script>
    </body>
</html>

O editar está funcionando bem, a remoção não funciona pois logo ao abrir a página de listagem de livros o console informa que o script remove-livros não foi encontrado.

Alguma ideia de onde posso ter errado?

7 respostas

Complementando com a estrutura do projeto:

¬src
     ¬app
         ¬infra
         ¬public
             ¬js
                 remove-livros.js
    ¬rotas
    ¬views
        ¬livros
            ¬lista
                lista.marko
    ¬config
        custom-express.js
solução!

Oi Lucas, copie seu código e funcionou perfeitamente. Mas só uma coisa que notei. Seu arquivo se chama 'remove-livro.js' ou 'remove-livros.js'?

Boa noite, Lucas! Como vai?

Veja que no arquivo lista.marko vc faz

<script src="/estatico/js/remove-livro.js">
</script>

importando assim o arquivo remove-livro.js.

Contudo, no seu comentário onde vc mostra a estrutura do seu projeto, o arquivo aparece com nome remove-livros.js, com livros no plural!

Sendo assim, de acordo com as suas informações, o problema está na hora de importar o arquivo JS no lista.marko! O correto seria:

<script src="/estatico/js/remove-livros.js">
</script>

Uma outra solução possível seria renomear o arquivo remove-livros.js para remove-livro.js para bater com a forma como vc o importou no arquivo lista.marko.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Boa noite, pessoal.

Me parece que o problema é realmente esse, alterei o nome do arquivo e funcionou perfeitamente.

Me resta uma dúvida: como o script tinha o nome "remove-livros.js", primeiramente eu tentei somente alterar a declaração dentro do lista.marko para refletir o nome do meu arquivo:

<script src="/estatico/js/remove-livros.js">
</script>

Não funcionou.

Dai eu abri o lista.marko.js e alterei lá dentro também o trecho onde aparecia a referência ao remove-livros, ficou assim:

 out.w("</table><script src=\"/estatico/js/remove-livros.js\">\r\n        </script>");

Também não funcionou. Toda vez que eu executava a página, ele continuava a procurar o arquivo remove-livro no singular.

Seria cache?

Enfim, alterando o nome do arquivo para remove-livro e a declaração também, funcionou. Valeu pela ajuda.

Opa, Lucas!

Respondendo sua pergunta, essa situação é estranha, mas pode ser algum cache. Um detalhe importante é que vc nunca deve alterar os arquivos *.marko.js! Eles são gerados automaticamente pelo Nodemon! Então sempre que vc mexer nos arquivos *.marko novos arquivos *.marko.js serão gerados ao reiniciar o Nodemon de modo que qualquer alteração feita anteriormente será perdida!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Beleza. Eu até excluí o arquivo lista.marko.js , alterei no lista.marko e mesmo assim ele re-gerou fazendo referência ao remove-livro.js no singular. Enfim, bola pra frente.

Valeu, Gabriel!

Realmente, muito estranho! Mas é difícil dizer o que pode ser sem ter o projeto em mãos para testar.

Em todo caso, a boa notícia é que alterando o nome do arquivo já resolve!

Espero que esteja curtindo e aproveitando o conteúdo dos cursos de Node ao máximo! E, sempre que precisar de alguma ajuda é só mandar aqui no fórum da Alura!

Grande abraço e bons estudos, meu aluno!