‫Instrutor: Neste
‫vídeo, vamos falar sobre e
‫implementar um conceito chamado roteamento.
‫Portanto, agora, o código que
‫escrevemos não reage de forma alguma ao URL que estamos solicitando.
‫Então, digamos que temos esse URL e
‫recebemos essa resposta, mas se tivermos,
‫por exemplo, produto, bem, obteremos exatamente a mesma resposta, certo?
‫Se dermos uma olhada no
‫exemplo, o projeto final, bem aqui, por
‫exemplo, vemos Visão geral.
‫Agora temos o host, a porta e / visão geral e
‫a rota aqui é / visão geral e, em seguida, vemos
‫esta página.
‫Mas agora, dê uma olhada no que acontece.
‫Portanto, agora temos o produto.
‫E é por isso que obtemos esta página do produto.
‫E então voltamos, voltamos à visão geral,
‫e vemos novamente a página que tínhamos no início.
‫Além disso, se não tivermos
‫nada, bem, ainda veremos essa mesma página.
‫E isso é basicamente roteamento.
‫Portanto, o roteamento basicamente significa implementar ações
‫diferentes para URLs diferentes.
‫Ok, e agora não temos nada parecido com isso.
‫Como eu disse, não importa qual URL tenhamos,
‫sempre obtemos a mesma resposta.
‫E agora temos que implementar alguma lógica
‫que mude isso.
‫Ok, e novamente, isso será roteamento.
‫Agora, o roteamento pode realmente se tornar muito complicado
‫em um grande aplicativo do mundo real, então, nesse
‫caso, usamos uma ferramenta para isso como o Express, então
‫faremos isso no próximo grande projeto deste
‫curso, onde usaremos o Express para fazer tudo isso.
‫Mas, por enquanto, já que estamos apenas começando
‫a aprender o Node, queremos aprender
‫como fazer tudo do zero, sem nenhuma dessas dependências, certo?
‫Portanto, vamos implementar um roteamento muito
‫simples aqui neste servidor.
‫Agora, o primeiro passo é
‫ser capaz de realmente analisar o URL.
‫E para isso, usamos ainda outro módulo Node embutido, que é
‫chamado de URL.
‫E estou apenas duplicando
‫isso aqui e, em seguida, URL.
‫E apenas como nota, selecionei URL e,
‫para selecionar o
‫próximo, basta apertar Command + D no teclado.
‫Ok, eu sei que alguém provavelmente vai perguntar nas perguntas e respostas
‫como eu fiz
‫esse truque, e é por isso que estou respondendo a isso basicamente agora
‫e dizendo como funciona.
‫De qualquer forma, em primeiro lugar, vamos dar uma
‫olhada na solicitação. url.
‫E, claro, quero um console. log disso.
‫Portanto, pare o servidor e execute-o novamente.
‫E há uma ferramenta para fazermos isso automaticamente.
‫Tenho certeza que alguns de vocês saberão disso.
‫E, claro, vamos usar isso um
‫pouco mais tarde, mas por agora quero continuar fazendo assim.
‫Ok, vamos recarregar isso.
‫Funciona da mesma forma, e aqui obtemos o URL.
‫Ok, e na verdade temos dois deles.
‫E o que isso significa é que, na verdade, temos duas solicitações
‫e, portanto, essa função de retorno de chamada aqui
‫é executada duas vezes.
‫Portanto, um console. log tem apenas a
‫barra, e o segundo tem / favicon.
‫Portanto, quando estamos usando
‫um navegador, o navegador executa automaticamente uma
‫solicitação para o favicon do site.
‫Tudo bem, então neste caso não temos nenhum
‫favicon e simplesmente ignoramos isso, ok?
‫Então, isso realmente não importa.
‫Agora, digamos que escrevemos / apresentamos uma visão geral aqui.
‫Então, vamos ver o que temos.
‫Então, obtemos / overview e / favicon, ok.
‫Então, novamente, o que importa é a / visão geral.
‫Portanto, para URLs simples como
‫este, na verdade nem precisamos do módulo de
‫URL, mas vamos precisar dele para coisas mais complexas.
‫Então, digamos que temos,
‫por exemplo, especificar o ID 23
‫e algum outro parâmetro aqui.
‫Digamos que seja algo assim.
‫E tenho certeza que você viu esse tipo de padrão em
‫uma URL onde podemos especificar parâmetros.
‫Então, se tivermos algo assim,
‫você verá que a URL é esta.
‫E o que o módulo de URL
‫nos ajudará a fazer é basicamente analisar esses parâmetros
‫e seus valores em um objeto bem formatado, certo?
‫Portanto, por enquanto, não
‫vamos usar o módulo de URL ainda.
‫Vamos precisar disso um pouco mais tarde.
‫Então, vamos implementar o roteamento, e é
‫muito, muito simples.
‫Então, basicamente, tudo o que precisamos é de uma grande instrução if else aqui.
‫Certo, antes de mais nada, vou salvar o req. url em uma variável,
‫oh, desculpe,
‫em uma variável chamada pathName.
‫Ok, e agora, com base nesse nome
‫de caminho, tomaremos decisões.
‫Então, basicamente, envie respostas diferentes.
‫Portanto, se pathName for igual a overview, ou / overview,
‫bem, vamos enviar algo para o cliente.
‫E vamos apenas dizer, esta é a VISÃO GERAL.
‫Caso contrário, se pathName for igual a product, / product, bem,
‫então tudo o que queremos fazer é enviar
‫este é o PRODUCT.
‫Ok, agora no caso de estarmos na raiz do site.
‫Então, basicamente, assim, também queremos mostrar
‫a visão geral.
‫E então vamos adicionar isso aqui também.
‫Portanto, pathName é igual a e barra.
‫E então o ou.
‫Portanto, se o pathName for a raiz ou / visão geral, ele será
‫enviado de volta como uma VISÃO
‫GERAL, ou se for um produto, enviaremos PRODUTO de volta.
‫Coisas muito simples, e vamos testá-las agora.
‫Na verdade, podemos apenas recarregar ou, em vez disso,
‫precisamos primeiro terminar isso de novo e começar tudo de novo.
‫Então já está funcionando, esta é a VISÃO GERAL.
‫Se eu disser
‫produto agora, então este é um PRODUTO, perfeito.
‫Agora, apenas para verificar o último, a visão geral
‫nos dá novamente uma visão geral.
‫Ok, agora digamos que realmente solicitamos algo que
‫não tratamos.
‫Então, algo assim.
‫Então, o que acontece?
‫Bem, como você vê, esta roda aqui não
‫para de girar de verdade.
‫Então, ele está tentando enviar uma resposta, mas realmente não consegue.
‫Portanto, o servidor não sabe o que fazer nesta
‫situação, porque não adicionamos nenhum fallback.
‫Portanto, vamos parar esse
‫pobre rapaz aqui e, basicamente, adicionar uma instrução else aqui.
‫Portanto, se não é a raiz, nem a visão geral, nem o
‫produto, bem, queremos dizer que esta página não foi encontrada.
‫Página não encontrada.
‫Agora, muitas vezes quando no site você
‫tenta abrir uma página que
‫não foi encontrada, você vê esse erro 404, certo?
‫E isso é realmente algo chamado de código de status HTTP.
‫E como estamos enviando uma resposta, também
‫podemos adicionar o código de status à resposta.
‫E para isso, podemos usar várias maneiras de fazer isso, mas vou usar
‫uma que pode fazer mais do
‫que apenas código de status,
‫e vou mostrar o porquê em um segundo.
‫Mas, por enquanto, estou apenas
‫dizendo aqui, res. escreva a cabeça, e então 404, ok?
‫Vamos testar isso agora.
‫E então o que acontece aqui?
‫Ah, nisso não está
‫acontecendo nada, pois não reiniciei o servidor.
‫Então, página não encontrada.
‫Ótimo, agora e o código de status 404?
‫Bem, podemos clicar em Inspecionar aqui para abrir as Ferramentas de Desenvolvimento ou, em vez
‫disso, o que eu gosto de fazer é clicar em Command +
‫J, e isso abrirá as Ferramentas de Desenvolvimento também.
‫No Windows é provavelmente Alt +
‫Control + J, ou você pode simplesmente ir para
‫View, e então Developer, e Developer Tools assim, ok?
‫Em seguida, vá para a guia Rede,
‫mas na verdade você já pode vê-la como aqui.
‫Portanto, o servidor respondeu com um código de status 404 não encontrado.
‫Mas também você pode ver na rede, e apenas recarregar, e
‫então você vê 404 aqui,
‫e o texto em vermelho para mostrar que houve algum erro.
‫Ok, agora algo mais que este writeHead pode fazer
‫é enviar cabeçalhos também.
‫E para enviar cabeçalhos, precisamos especificar um objeto aqui,
‫e aí colocamos os cabeçalhos que queremos enviar.
‫Agora, o que realmente é um cabeçalho?
‫Bem, um cabeçalho HTTP é basicamente um pedaço de informação sobre
‫a resposta que estamos enviando de volta.
‫E, novamente, você aprenderá muito mais sobre
‫isso em uma seção posterior do curso, certo?
‫Por enquanto, apenas saiba que
‫existem muitos cabeçalhos padrão diferentes que podemos
‫especificar para informar o navegador ou qualquer
‫cliente que esteja recebendo uma resposta sobre a própria resposta.
‫Por exemplo, um dos cabeçalhos padrão
‫é informar ao navegador o tipo de conteúdo.
‫Portanto, podemos dizer
‫Content-Type e configurá-lo como text / html.
‫E
‫assim, o navegador agora espera algum HTML.
‫E então o que podemos
‫fazer agora, por exemplo aqui, é criar
‫um elemento h1 para basicamente enviar HTML de volta.
‫Então, assim.
‫E por causa deste
‫cabeçalho aqui, o navegador agora está realmente esperando que o HTML entre.
‫Também podemos especificar nossos próprios cabeçalhos criados.
‫Então vamos dizer meu-próprio-cabeçalho, olá-mundo,
‫algo assim, ok?
‫Agora, o que importa aqui é que
‫esses cabeçalhos e também o código de status
‫sempre precisam ser definidos antes de enviarmos a resposta.
‫Ok, então nunca podemos enviar cabeçalhos após o
‫conteúdo da resposta em si.
‫Então, vamos tentar de
‫novo ou, na verdade, devo reiniciar o servidor.
‫E então vamos tentar novamente agora.
‫E, de fato, ainda recebemos nosso erro,
‫mas agora parece diferente.
‫Portanto, agora temos um elemento h1 aqui.
‫E se também clicarmos na guia Rede nesta solicitação,
‫vamos aumentá-la um pouco aqui.
‫Não tenho certeza se
‫você pode realmente ver isso, mas quando clicamos nesta solicitação
‫aqui, também podemos ver os cabeçalhos de resposta.
‫E aqui temos o tipo de
‫conteúdo que especificamos como text / html, e então
‫o outro
‫cabeçalho, então meu próprio cabeçalho é definido como hello-world.
‫E então, novamente, podemos usar isso para enviar alguns
‫metadados sobre a resposta em si, certo?
‫Agora também existem alguns cabeçalhos de solicitação, e eles
‫foram definidos pelo navegador automaticamente, mas por enquanto
‫não se preocupe com eles.
‫O que importa é que especificamos que o conteúdo
‫que estamos enviando é HTML e também,
‫por exemplo, o código de
‫status que enviamos de volta é 404 não encontrado, certo?
‫Agora, vamos nos livrar disso.
‫Abra-o e agora você vê, temos
‫um status de 200, o que significa OK,
‫e esses outros cabeçalhos, eles realmente sumiram.
‫Ok, agora essa
‫resposta não tem esses outros dois cabeçalhos, certo?
‫E vemos o 200
‫OK agora, então sim, tudo está funcionando bem agora.
‫Implementamos o roteamento básico, portanto,
‫para nomes de
‫caminhos diferentes, agora temos ações diferentes.
‫Uma última coisa que gostaria de dizer sobre o roteamento é
‫que essas rotas que definimos aqui em nosso código e
‫as rotas que colocamos nas URLs no navegador não têm nada
‫a ver com os arquivos e pastas
‫no sistema de arquivos do nosso projeto, ok ?
‫Portanto, como um iniciante, você pode
‫pensar que se abrirmos / templates por exemplo, isso
‫abriria a pasta Templates que temos em
‫nosso sistema de arquivos.
‫Mas é claro que não é esse o caso.
‫Então, se quiséssemos ter uma rota de
‫modelos, bem, teríamos que
‫definir isso em nosso roteador, basicamente,
‫e enviar uma resposta especial apenas para essa rota.
‫Enfim, acho que isso basta para um vídeo.
‫Te vejo no próximo.