‫Instrutor: Neste vídeo,
‫vamos aprender como analisar algumas variáveis da
‫URL para poder construir a página do produto.
‫Portanto, lembre-se de como
‫logo no início importei o
‫módulo de URL,
‫este aqui, para poder analisar variáveis diretamente da URL.
‫OK. Portanto, como primeiro passo, vamos
‫realmente registrar
‫mais uma vez "req. url "para o console e,
‫em seguida, outra coisa que eu quero registrar é realmente ...
‫o resultado do uso de "url. parse "neste URL.
‫Portanto, novamente, analisar é basicamente analisar as variáveis
‫fora da URL.
‫Então, algo assim.
‫Então, o que queremos é "id = 0," certo,
‫porque agora, o "req. url "é tudo isso, então
‫toda a
‫URL e, claro, não temos nenhuma
‫rota para isso.
‫Portanto, nada neste tipo de roteador que temos aqui
‫corresponde a todo este URL.
‫É por isso que obtemos "Página não encontrada! "E é
‫também por isso que precisamos mudar algumas coisas aqui.
‫Ok, deixe-me analisar o URL aqui, para que você possa
‫dar uma olhada no resultado
‫e ver o que precisamos fazer a seguir.
‫Também preciso passar "true" aqui para esta função de análise
‫para realmente analisar a consulta em um objeto.
‫Então, com consulta, quero dizer essa parte aqui.
‫Ok, isso é chamado de string de
‫consulta, certo, e é isso que estamos analisando efetivamente, essa
‫parte da URL.
‫Reinicie-o e
‫vamos dar uma olhada nos logs que obtemos.
‫Portanto, o primeiro é o "req. url "e isso é
‫o que a gente esperava, certo, e aqui está
‫o resultado de fazer" url. parse "Então,
‫obtemos o objeto de consulta aqui,
‫e aqui, temos um bom objeto
‫que nos diz que id é 0,
‫certo, isso é lindo.
‫E então, logo abaixo disso, temos
‫a segunda peça de que
‫precisamos, que é apenas o nome do caminho, ok.
‫Então, nossa rota está usando esse nome
‫de caminho, então basta "/ produto" e então precisamos saber
‫a consulta para responder de acordo com o id 0.
‫Então nesse caso, por
‫exemplo, carregar o produto abacate, que é o primeiro.
‫Mas se fosse o
‫número dois, por exemplo, aí carregando esse brócolis, certo.
‫E então essa consulta e esse nome de caminho é
‫o que vamos usar para fazer isso.
‫Então, esse nós não precisamos mais.
‫Também não queremos registrar nada no console agora
‫porque o que queremos fazer
‫é criar duas variáveis, chamadas de consulta
‫e ...
‫pathName.
‫E podemos fazer isso usando as pilhas, a estruturação.
‫Portanto, novamente, espero que você
‫esteja familiarizado com essa sintaxe aqui, e é assim que ela realmente funciona.
‫Então, esse objeto aqui, ele tem query e pathName.
‫Então, usando essa estrutura
‫como essa, com esses nomes de propriedade
‫exatos, na verdade tem que ser assim.
‫Assim, com esses dois
‫nomes exatos de propriedade, ele criará essas
‫duas variáveis, uma chamada consulta e outra chamada
‫nome do caminho, exatamente com os valores que temos aqui.
‫Portanto, a consulta será esta,
‫e o nome do caminho será "/ produto", neste caso.
‫Excelente. Agora tudo o que
‫tenho a fazer é ir em frente e substituir este aqui por este.
‫Tudo bem.
‫Vamos deletar este
‫e, apenas para ter certeza, vamos realmente registrar a consulta
‫no console, caso estejamos na página do produto.
‫"console. log "o objeto de consulta.
‫E agora, voltamos a encontrar a página
‫e também temos que consultar com este id 0.
‫Tão perfeito. Portanto, agora
‫estamos prontos para realmente construir esta página usando nosso modelo.
‫E isso deve
‫ser muito simples, na verdade muito mais simples do que a
‫página de visão geral, porque
‫aqui não temos que fazer nenhum desses
‫loops malucos porque há um modelo simples,
‫tudo o que temos que fazer é substituir tudo.
‫Portanto, na primeira etapa, vamos descobrir qual é
‫o produto que queremos exibir.
‫Então estou criando uma variável chamada product, e
‫que vai ser igual ao objeto de dados na
‫posição "query. identificação. "Ok,
‫faz sentido?
‫Portanto, o objeto de dados é uma
‫matriz e, então, recuperaremos o elemento na posição que
‫vem da consulta. identificação.
‫Então, se for zero, então é o
‫elemento zero, se for dois, é o elemento número dois.
‫Ok, esta é a maneira
‫mais simples de recuperar um elemento com base em uma string de consulta.
‫Agora, outra coisa
‫que precisamos fazer é obter exatamente o mesmo Head aqui,
‫ok, e, finalmente, simplesmente criamos nossa saída.
‫Portanto, a saída é simplesmente replaceTemplate, e
‫o HTML que precisamos passar
‫é o tempOverview, ou na verdade o tempProduct, e
‫o que passamos é o produto.
‫E é isso!
‫Agora, apenas enviamos a saída como resultado, ou como
‫uma resposta na verdade, e é isso.
‫Então, essa parte aqui faz sentido, certo?
‫Portanto, novamente, replaceTemplate espera que incluamos um
‫modelo e um produto.
‫Portanto, um produto é um objeto com todas essas propriedades.
‫E então esse produto vem direto
‫desse objeto de dados.
‫Então, em replaceTemplate, passamos o produto do
‫modelo, este, que carregamos do arquivo
‫logo no início, e depois o produto.
‫Como mencionei, é claro, aquele que vem da matriz.
‫E então deve ser isso.
‫Portanto, se o modelo estiver correto,
‫isso deve estar funcionando agora.
‫Então, reiniciando o servidor,
‫vamos recarregá-lo
‫e, de fato, vamos lá.
‫Então, isso é ótimo, isso me
‫deixa muito feliz, quando esse
‫tipo de coisa funciona assim, lindo, tudo é perfeito.
‫Além disso, este botão Voltar, oh, isso não funciona.
‫OK. Portanto, precisamos alterar o modelo HTML aqui.
‫Onde fica isso? Tá no produto,
‫e esse link aqui, cadê isso, ah.
‫Sim, basicamente não aponta para lugar nenhum,
‫e o que queremos é voltar à visão geral, certo.
‫Reinicie o servidor, recarregue esta página
‫e agora, agora funciona.
‫Vamos experimentar sem o patch orgânico e,
‫de fato, não está aqui.
‫Antes era, e agora se foi.
‫E tudo isso aqui, é
‫claro, é dinâmico vindo desse arquivo JSON. Sim.
‫Então, tudo isso funciona. Lindo.
‫Isso é realmente ótimo.
‫E nosso projeto, podemos dizer agora, está realmente concluído.
‫Só mais uma pequena coisa que quero fazer,
‫que é apenas mostrar a vocês algo bom que podemos fazer.
‫Mas, além disso, nosso projeto está funcionando.
‫Então, parabéns, você acabou de terminar seu primeiro
‫nó de aparência muito legal. projeto js.
‫E não foi tão difícil, certo?
‫Quer dizer, algumas das
‫coisas que fizemos estão mais relacionadas à programação JavaScript em geral, e
‫não tanto sobre o nó. em si, certo?
‫Coisas assim aqui, que talvez fossem meio confusas, mas
‫no final do dia isso
‫é apenas JavaScript normal, não é?
‫Então, novamente, a funcionalidade está lá,
‫há apenas mais uma pequena coisa que
‫quero fazer no próximo vídeo, e quando você chegar lá,
‫direi o que é.