[Música] fala pessoal beleza mais uma vez uma satisfação reencontrar você aqui no canal Procópio na rede esse nosso curso aqui de programação com acesso ao banco de dados se você não é inscrito se inscreve ativa as notificações porque a cada novo conteúdo que eu postar aqui no canal o YouTube vai te recomendar E além disso deixa também seu like para que esse vídeo consiga chegar aí a quantidade maior de pessoas no vídeo passado Nós criamos o nosso primeiro projeto foi o projeto aí chamado biblioteca e essa foi a estrutura que foi gerado para o nosso projeto tem aqui essa parte da Bim que eu não tenho um arquivo www. quer de configuração do nosso projeto tá nós temos também aqui a pasta de modos do modem que a gente optou por utilizar aqui ela certo e nós também instalamos o Express tá aqui o Aliexpress tá nós temos aqui uma outra parte chamada Public ou nós vamos ter as imagens né os códigos JS da nossa aplicação e o CSS nós temos também aqui rotas quando a gente gera um projeto por meio do Express ele vai gerar duas rotas padrão que é o index e o users e também aqui duas visões a duas vias né que a europonto é JS e ainda que ponto é JS tá então nós vamos entrar aqui nessa pasta Roots Porque nessa aula nós vamos falar sobre rotas Mas antes a gente começar a falar efetivamente sobre rotas é importante lembrar de algumas coisas por exemplo que todo servidor web ele deve ser capaz de receber e responder as requisições que são enviadas para ele então a resposta desse servidor depende da url que foi digitada lá no Browser www. pacopo na rede.
com. br por exemplo cada caminho direciona o usuário para uma página específica ou alguma operação específica que vai ser executada então se eu digitar por exemplo Procópio na rede. com.
br Teoricamente iria para o site para copo na rede que não existe esse domínio tá mas se eu colocasse lá no final barra atualiza barra um determinado parâmetro aquela URL ia mandar uma instrução para o servidor para aquele executasse um determinado operação como por exemplo um update lá no banco de dados certo esses caminhos que vão levar o servidor para uma página específica ou Para uma determinada operação específica no servidor são chamados de rotas e o gerenciamento dessas rotas é chamado de roteamento para escrever uma rota é essa que você tá vendo aí o nome do roteador ponto o método de roteamento que vai ser utilizado abre parênteses o caminho da Rota vírgula e o Man ipulador da Rota e esse manipulador da Rota ele pode ser por exemplo a função de cowback certo então volta aqui no visual estudo code e vou fazer o seguinte eu vou mudar aqui a minha parte de trabalho Abrir pasta Vamos marcar aqui para ele trabalho que é o nosso projeto certo então vou clicar aqui tá aqui a estrutura do meu projeto e olha só nessa pasta Roots nesse arquivo aqui index veja que ele gerou isso aqui para mim tá vejo Foi o que ele fez aqui ele criou o objeto chamado Express tá emportou lá o módulo Express e criou esse objeto rooter aqui a partir desse dessa classe luta que está lá nesse módulo Express beleza aí aqui ó nesse nesse roteador tá ele disse que o nome do método é o GAP Lembra daquela sintaxe é o nome do roteador ponto o nome do método abre parêntese o caminho da Rota e o manipulador da Rota né então nós temos aqui o nome do roteador o método get o caminho da Rota e aqui a função de coubeck para fazer a manipulação desse dessa rota certo ela tem três parâmetros mas nós só vamos trabalhar aqui basicamente com esses dois a de requisição de resposta Então o que é que ele tá fazendo aqui a resposta tá renderizando a vir em Jaime chamada index Então se a gente vê aqui ó tem essa Vila aqui chamada index certo de que forma com esse argumento que está sendo enviado aqui ele tá passando aqui um argumento chamado Express então se eu ver aqui nessa View aqui ó veja aqui avio ela vai receber esse parâmetro título e vai pegar o que tá vindo de lá o que tá sendo enviado e vai jogar aqui no corpo da página tá dizendo aqui né eu canto alguma coisa e lá no título da página ele também tá jogando lá parâmetro que tá sendo enviado que no caso aqui né Essa essa rota aqui ele tá mandando Xpress eu vou fazer o seguinte ó vamos mandar Procópio na rede ao invés de mandar Express Tá eu vou salvar aqui e vou colocar o servidor para rodar né Vamos tentar colocar aqui de dentro do próprio visual estudo code Então vamos chamar aqui npm start servidor tá rodando e agora eu vou abrir o browser para gente ver como é que vai ficar a chamada dessa página aí dessa rota principal né tô colocando aqui apenas uma barra significa que essa daí é a rota principal quando eu chamar louca roxo dois pontos 3. 000 por padrão a rota que vai ser acessada vai ser essa rota barra que é a rota principal Então vamos lá eu já tô aqui no Browser né então louca roxo 3000 Olha só eu passei o parâmetro Procópio na reta Então ele já trouxe aqui para mim certo Então essa é a rota de fogo vamos fazer o seguinte vamos criar uma rota Nossa para gente ficar brincando com essas novas rotas aqui aqui no visual Studio code eu vou fazer o seguinte eu vou copiar isso daqui tá ele vai fazer as modificações então eu vou criar aqui a rota a rota principal essa barra aqui né vou criar uma rota chamada sobre tá E aqui não precisa desse argumento né ramento next e aqui eu não vou renderizar certo a resposta não vai ser de renderização a resposta vai ser simplesmente enviar alguma coisa para o browser tá alguma coisa para página então vou fazer o seguinte o método que eu vou mandar aqui vai ser o método tá e o que é que eu quero que ele forme lá para mim eu quero que ele Diga assim ó Sobre Rodas como isso daqui vai ser exibido lá no HTML a gente poderia fazer o seguinte ó se isso daqui que tá dentro da stream vai ser exibido lá no HTML a gente pode mandar também uma pega HTML né vou mandar aqui a tag H2 fecha H2 tá vou salvar aqui a minha rota vou parar aqui o serviço vou levantar o serviço novamente Então tá aqui certo e vou voltar lá no browser para ver como é que essa rota sobre vai funcionar veja mais uma vez que nessa rota principal aqui a resposta tá sendo renderizada nessa viu Tá mas essa rota sobre ela não está sendo renderizada ela está sendo apenas enviada essa esse sangue aqui que nós estamos colocando uma tag HTML porque vai ser exibido uma página HTML Então vamos lá aqui no Browser eu vou fazer o seguinte barra sobre então ó ele exibiu para mim aquela string sobre rotas Ok vamos voltar lá para o visual Studio code agora eu vou criar uma rota na qual eu vou chamar ela passando o parâmetro para ela na URL então eu vou fazer mais uma vez assim vou copiar isso aqui tá e essa rota ela vai chamar Olá certo E aí pessoal eu vou colocar um parâmetro aqui ó barra dois pontos nome então o parâmetro que tá sendo enviado nesta rota é o parâmetro nome certo então o que que eu quero fazer quer que eu quero exibir para o usuário eu quero exibir assim olá fulano de tal certo então se eu passar aqui como argumento Procópio para esse parâmetro não vai se vai ficar Olá como é que a gente pode fazer isso muito simples eu vou fazer isso aqui deixa eu apagar essa string aqui fazer assim ó Olá eu vou colocar treinar com isso aqui tá aí é que vai vir Olá fulano de tal onde fulano de tal é justamente tá vindo aqui nesse parâmetro nome certo eu vou acessar um cara chamado para que o nome dele é nome é justamente esse camarada aqui certo então na requisição Eu vou acessar os parâmetros e vou pegar um parâmetro chamado nome que é justamente o que Vavi aqui certo eu vou salvar esse camarada aqui e a gente vai lá para o browser para testar antes disso né vou ter que parar aqui o serviço e vou rodar novamente vou voltar lá para o browser então aqui ó o nome da ROTA é ao lado né então ó vamos dar rota é Olá barra aí eu vou dizer o parâmetro que eu vou passar para essa rota pela URL vai ser quem Procópio certo então Olá Procópio ele recebeu o parâmetro Procópio escreveu esse parâmetro aí do brother tá vamos voltar para o visual mas se eu quisesse que uma rota recebesse mais de um varanda né viessem lá dois argumentos na URL como é que eu poderia fazer isso aí eu não utilizaria esse cara eu utilizaria o quérico então eu vou criar aqui mais uma rota tá essa rota eu vou chamar de IMC certo IMC e eu vou fazer o seguinte eu vou no corpo dela eu vou programar o corpo dessa rota né eu vou programar o que eu quero que ela faça então nós vamos fazer o seguinte eu vou declarar aqui chamada peso essa variável ela vai ser preenchida por meio de que lá na requisição existe um cara chamado curry certo que eu vou dizer olha nessa quera eu quero pegar um camarada chamado peso que é justamente o argumento que tá vindo pela requisição e eu também vou declarar uma variável chamada estatura que vai vir pela requisição na Queen e o nome dela vai ser estatura certo beleza aí agora eu vou criar uma variável chamada IMC para calcular justamente o valor do IMC correspondente esses valores estão sendo enviados então IMC O que é o peso então vai ser peso dividido por quem pela estatura ao quadrado Então vou pegar aqui a biblioteca mexe ponto ou e vou pegar o que a estatura e vou elevar ao quadrado calcu lei o IMC e agora eu já posso escrever esse Mc lá na tela né poderia até fazer assim né chamada msg que é uma mensagem que eu quero que apareça assim ó H3 seu IMC é aí aqui vai aparecer o valor do IMC né só que eu queria que aparecesse por exemplo com duas casas decimais então fixe 2 e aqui eu quero compenar com o resto da minha do meu cabeçalho H3 certo aqui eu fui jogar três e por fim depois que eu mando essa variável desse jeito eu vou fazer olha 10 pontos sendo a variável msg msx tá então vou salvar esse aqui control S vou parar o serviço novamente contra você vou restartar e vou voltar lá para o browser para fazer esse teste pronto pessoal voltei aqui para o Brasil tá então agora eu vou chamar essa rota aí então o nome da ROTA é IMC barra e agora eu vou ter que dizer quais são os argumentos que eu vou mandar para essa rota aguardando dois argumentos lá né que é o peso e a estatura Então como é que eu vou fazer aqui ó vou colocar sinal de interrogação tá vou dizer qual o nome do argumento peso igual Então qual o peso da pessoa Vou colocar aqui o meu 87 tá e vou com katenar também com que com o e comercial certo e na sequência vou dizer o nome do próximo argumento que é estatura igual eu vou colocar aqui a minha estatura um ponto 82 certo Então olha só loco arroz 2. 3000 barra IMC que é o nome da Rota Só que essa rota Espero que dois parâmetros então eu começo os parâmetros sinal de interrogação o nome do primeiro parâmetro que é o peso igual ao valor correspondente esse parâmetro e o e comercial né o nome do segundo parâmetro que é estatura igual ao valor que ele tem que receber lá então vou pressionar ainda para chamar de fato essa rota então seu IMC é 26.
