9
respostas

Alerta Html e Negociação Controller

Eu uso o aplicativo Atom pros códigos, não sei se o problema é o aplicativo que eu uso. Mas é que eu já refiz todas as aulas do curso e baixei o projeto do zero, e os erros continuam no console quando vou importar negociações, tudo indica que o erro esta no index.html e no NegociacaoController.js

Index.Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">

</head>
<body class="container">

    <h1 class="text-center">Negociações</h1>

    <div id="mensagemView"></div>

    <form class="form" onsubmit="negociacaoController.adiciona(event)">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>
        </div>

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

    <div class="text-center">

        <button onclick='negociacaoController.importaNegociacoes()' class="btn btn-primary text-center" type="button">
            Importar Negociações
        </button>

        <button onclick="negociacaoController.apaga()" class="btn btn-primary text-center" type="button">
            Apagar
        </button>
    </div>
    <br>
    <br>

    <div id="negociacoesView"></div>

    <script src="js/app/models/Negociacao.js"></script>
    <script src="js/app/controllers/NegociacaoController.js"></script>
    <script src="js/app/helpers/DateHelper.js"></script>
    <script src="js/app/models/ListaNegociacoes.js"></script>
    <script src="js/app/views/View.js"></script>
    <script src="js/app/views/NegociacoesView.js"></script>
    <script src="js/app/models/Mensagem.js"></script>
    <script src="js/app/views/MensagemView.js"></script>
    <script src="js/app/services/ProxyFactory.js"></script>
    <script src="js/app/helpers/Bind.js"></script>
    <script>
        let negociacaoController = new NegociacaoController();
    </script>

</body>
</html>

O restante dos Scripts já baixei e fiz as mesmas alterações que o professor das aulas

NegociacaoController.js

class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);

        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');

        this._listaNegociacoes = new Bind(
            new ListaNegociacoes(),
            new NegociacoesView($('#negociacoesView')),
            'adiciona', 'esvazia');

        this._mensagem = new Bind(
            new Mensagem(), new MensagemView($('#mensagemView')),
            'texto');
    }

    adiciona(event) {

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._mensagem.texto = 'Negociação adicionada com sucesso';
        this._limpaFormulario();
    }

    importaNegociacoes() {

        let xhr = new XMLHttpRequest();

        xhr.open('GET', 'negociacoes/semana');

        xhr.onreadystatechange = () => {

            if(xhr.readyState == 4){

                if(xhr.status == 200){

                  JSON.parse(xhr.responseText)
                    .map(objeto => new Negociacao(new Date(objeto.data), objeto.quantidade, objeto.valor))
                    .forEach(negociacao => this._listaNegociacoes.adiciona(negociacao));
                    this._mensagemTexto = 'Negociações imnportadas com sucesso.';

                }else{
                    console.log(xhr.responseText);
                    this._mensagem.texto = 'Não foi possível obter as negociacoes da semana.';

                }
            }
        };

        xhr.send();

    }

    apaga() {

        this._listaNegociacoes.esvazia();
        this._mensagem.texto = 'Negociações apagadas com sucesso';
    }

    _criaNegociacao() {

        return new Negociacao(
            DateHelper.textoParaData(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value);
    }

    _limpaFormulario() {

        this._inputData.value = '';
        this._inputQuantidade.value = 1;
        this._inputValor.value = 0.0;
        this._inputData.focus();
    }
}
9 respostas

Oi, Gustavo, tudo bem?

Você pdoeria nos dizer quais são as mensagens de erro que aparecem no seu console? Isso nos ajudará a analizar melhor :}

Obs: Não sei o que tem de errado no código, eu já baixei as aulas e acompanhei os vídeos até este ponto refazendo tudo

ALERTA NO CONSOLE:

DevTools failed to load SourceMap: Could not load content for file:///C:/Users/Gustavo/Desktop/Treinamento%20JavaScript/aluraframe/client/css/bootstrap.css.map: System error: net::ERR_FILE_NOT_FOUND

DevTools failed to load SourceMap: Could not load content for file:///C:/Users/Gustavo/Desktop/Treinamento%20JavaScript/aluraframe/client/css/bootstrap-theme.css.map: System error: net::ERR_FILE_NOT_FOUND

MENSAGEM DE ERRO NA HORA DA IMPORTAÇÃO:

Access to XMLHttpRequest at 'file:///C:/Users/Gustavo/Desktop/Treinamento%20JavaScript/aluraframe/client/negociacoes/semana' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

NegociacaoController.js:47 NegociacaoController.js:54

GET file:///C:/Users/Gustavo/Desktop/Treinamento%20JavaScript/aluraframe/client/negociacoes/semana net::ERR_FAILED

Oi, Gustavo, tudo bem?

Você está conseguindo fazer as importações normalmente? Como você está abarindo a página de nogicações, clicando com o botão direito sobre a página index.html e abrindo no navegador? Me parece que o caminho Access to XMLHttpRequest at 'file:///C:/Users/Gustavo/Desktop/Treinamento%20JavaScript/aluraframe/client/negociacoes/semana' não é o correto. Como o acmainho deve estar errado, é bloqeuado e retornado esse erro de CORS.

Verifique se dessa forma como te indiquei ocorre esse erro. Aguardo :}

Sim Laís, eu já tentei ir na pasta e clicar com o botão direito no index.html e abrir como google chrome, mas o mesmo erro de importação e alertas ainda persistem.

Oi, Gustavo.

Sugiro que você tente abrir o arquivo por um servidor. Eu uso o VSCode e sempre abro as aplicações com um localhost, quando não tem um server dentro da aplicaçã, eu utilizo uma extensão do VSCode que é a Live Server e vi que tem uma equivalente para o Atom: https://atom.io/packages/atom-live-server. Tente abrir através dele, porque ao invés de abrir diretamente no navegador ele abre por uma porta de localhost. No vscode, geralmente, é 5501.

Entendi Laís, eu vou tentar, obrigado!

Laís Cavalcanti, poderia me informar se está correta a extensão que eu instalei do Visual Studio Code, esta é a Live Server? e como eu faço para rodar meu index por ela?

Name: Live Server Id: ritwickdey.liveserver Description: Launch a development local Server with live reload feature for static & dynamic pages Version: 5.6.1 Publisher: Ritwick Dey VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Oi, Gustavo, é essa sim. Quando você instala ele no VScode, no canto inferior difeito, terá um botão Go Live, clique na página com extensão .html, ele automaticamente irá uma página no seu navegador.

Espero ter te ajudado!

Live reload enabled.

DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:5500/aluraframe/client/css/bootstrap.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:5500/aluraframe/client/css/bootstrap-theme.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

GET http://127.0.0.1:5500/aluraframe/client/negociacoes/semana 404 (Not Found) NegociacaoController.js:54

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /aluraframe/client/negociacoes/semana</pre>
</body>
</html>

Quando eu tento rodar pela live server, dá esse erro aki, parece que de alguma forma ele não consegue localizar para abrir essa parte let xhr = new XMLHttpRequest(); xhr.open('GET', 'negociacoes/semana'); que está na classe importaNegociacoes.