‫Vamos começar configurando nosso mecanismo de modelagem
‫no Express, o que nos
‫permitirá renderizar sites usando modelos simples, como
‫falamos antes.
‫Como você já
‫sabe, nesta parte do curso
‫é hora de realmente enviar um site final renderizado ao cliente
‫contendo, é claro, todos os
‫dados com os quais estivemos trabalhando
‫até este ponto, como tours, usuários e comentários.
‫Agora, como realmente construímos ou renderizamos esses sites?
‫Bem, usamos o que é chamado de motor de
‫template que nos permite criar
‫um template e então preencher facilmente esse template com nossos dados.
‫E o mecanismo de template
‫que usaremos neste curso é chamado de pug.
‫Existem alguns outros motores de template
‫como guidão ou EGS para pessoas que não gostam de pug, porque
‫eu sei que existem algumas opiniões fortes sobre o
‫pug, mas eu ainda diria que o pug é
‫na verdade o motor de template mais comumente usado com o Express.
‫Então, vamos agora, neste vídeo, configurar o
‫pug e renderizar nossa primeira página da web usando-o.
‫A primeira etapa é dizer
‫ao Express qual mecanismo de
‫modelo usaremos, e fazemos isso
‫dizendo logo no
‫início do aplicativo, app. definido, então basicamente isso é
‫como uma configuração para o mecanismo de visualização e, em seguida, configuramos para pug.
‫E é isso.
‫Portanto, o Express suporta
‫automaticamente os motores mais comuns prontos para
‫uso e, claro, o pug é um deles.
‫Na verdade, nem mesmo precisamos instalar o pug, e
‫também não precisamos solicitá-lo em lugar nenhum.
‫Tudo isso acontece
‫nos bastidores internamente no Express.
‫Portanto, definimos nosso mecanismo de
‫visualização, agora também precisamos definir onde essas visualizações
‫estão realmente localizadas em nosso sistema de arquivos.
‫Portanto, nossos modelos de pug são na verdade chamados de visualizações no Express.
‫Isso porque esses modelos são, na
‫verdade, as visualizações na arquitetura do controlador de visualização
‫de modelo que temos usado neste curso até este ponto.
‫Como você sabe, já temos os controladores e
‫as pastas de modelos.
‫Vamos fechar isso.
‫E agora é hora de realmente criar a pasta de visualizações.
‫Com isso temos os três
‫componentes da arquitetura MVC.
‫Para definir agora em qual pasta nossas
‫visualizações estão realmente localizadas, tudo o que precisamos
‫fazer novamente é dizer app. definido, e desta vez
‫é a configuração de exibição, ou realmente exibições, e
‫aqui o nome do caminho.
‫Bem, aqui poderíamos simplesmente colocar algo assim,
‫então / views, mas isso não é o ideal.
‫Como você já sabe, o caminho que fornecemos
‫aqui é sempre relativo ao diretório
‫de onde iniciamos o aplicativo Note, e que geralmente
‫é a pasta raiz do projeto, mas
‫pode não ser.
‫Portanto, não devemos usar ponto
‫aqui, mas devemos usar a variável de nome de diretório.
‫Então vamos fazer isso, e junto com um
‫bom truque que podemos usar com o Note, que é usar o módulo path.
‫Path é um módulo de nota embutido, portanto, um módulo principal, que
‫é usado para manipular nomes de caminho, basicamente.
‫Portanto, requer o caminho, então é claro que não
‫precisamos instalar nada.
‫É apenas um módulo integrado nativo.
‫O que podemos fazer agora é o caminho. ingresse e,
‫em seguida, o nome do diretório e, em seguida, exibições.
‫Isso irá então, basicamente, nos bastidores,
‫criar um caminho unindo o nome / visualizações do diretório.
‫Agora pode parecer um pouco
‫exagero usar esse caminho. função join aqui,
‫mas nem sempre sabemos se um
‫caminho que recebemos de algum lugar já tem uma barra ou não.
‫Portanto, você verá que essa função aqui é usada o
‫tempo todo para evitar esse tipo de bug.
‫Pois desta forma nem precisamos pensar em
‫nenhuma barra ou não,
‫pois o Note criará automaticamente um caminho correto.
‫Na verdade, também devemos
‫usar isso aqui, onde criamos este middleware.
‫Aqui, devemos realmente usar exatamente a mesma coisa aqui.
‫Então, vamos apenas duplicar isso.
‫Então, junte-se ao caminho e publique.
‫Na verdade, vamos colocar este aqui no
‫topo, porque ele meio que pertence a estes aqui.
‫Ainda é um middleware, mas como você verá
‫em um dos próximos vídeos, ele funciona em
‫conjunto com um mecanismo de visualizações.
‫Mas agora configuramos nosso motor de pug.
‫Agora é hora de criar nosso primeiro modelo.
‫Então, aqui vamos criar nosso primeiro arquivo
‫pug chamado base. pug, e como você
‫verá, o código vs tem seu próprio ícone para este tipo de arquivo.
‫Tudo o que realmente quero fazer
‫aqui por enquanto é criar um elemento h1, então um cabeçalho
‫principal simplesmente com o nome de algum passeio,
‫e a maneira que funciona com o pug é exatamente assim.
‫Portanto, h1 e, em seguida, o conteúdo do elemento.
‫Digamos The Park Camper.
‫E é isso na verdade!
‫Isso se traduzirá aqui, h1
‫The Park Camper, e feche isso.
‫Então, em html teríamos que escrever isso, mas
‫a sintaxe do pug torna muito mais
‫fácil escrever html assim.
‫É claro que
‫também nos permitirá colocar todos os tipos de
‫variáveis aqui, para que possamos realmente injetar nossos dados nesses
‫modelos, mas, por enquanto, estou realmente
‫interessado em disponibilizar algo para o navegador.
‫Muito mais sobre como o pug realmente funciona
‫nas próximas duas palestras.
‫Por enquanto, temos nosso modelo básico aqui e mantenha
‫esse nome em mente.
‫Agora podemos criar uma nova rota a partir
‫da qual acessaremos esse modelo.
‫Então, vamos realmente fazer isso aqui, antes da rota da API.
‫Então, app. get, que para renderizar páginas em um
‫navegador geralmente é sempre aquele que
‫usamos, e por isso especifica o url aqui, então a rota,
‫que é simplesmente a raiz do nosso site.
‫Então, assim como antes, é claro que precisamos de
‫uma função de manipulador, portanto, solicitação, resposta
‫e agora para renderizar
‫nosso modelo exatamente como antes de usarmos o
‫objeto de resposta, ainda definimos o status como 200 neste caso para ok.
‫Mas então, em vez de usar json, assim,
‫como sempre usamos até agora,
‫é hora de usar o render.
‫Então render irá renderizar o
‫template com o nome
‫que passamos, e neste caso, base.
‫Nem precisamos especificar a extensão do pug porque
‫o Express saberá automaticamente que
‫este é o arquivo que
‫estamos procurando e, claro, irá procurar
‫por esse arquivo
‫dentro da pasta que foi especificada no início, então isso 1.
‫Ele irá para a pasta de
‫visualizações e, lá, procure o modelo com o nome base.
‫Em seguida, ele pegará esse modelo e o
‫renderizará, e basicamente o enviará como uma resposta ao navegador.
‫Ótimo, então vamos testar isso agora.
‫Então, nosso servidor ainda
‫está rodando na porta 3000 do host local, eu acredito.
‫E isso nos dá esse
‫erro, não é possível encontrar o módulo
‫pug e, portanto, realmente precisamos instalar o módulo pug.
‫Então, eu disse antes que
‫não, mas na verdade precisamos fazer isso.
‫O Express ainda irá carregá-lo nos bastidores automaticamente,
‫mas não vem com todos esses mecanismos
‫de modelo instalados imediatamente.
‫Então npm instale o pug.
‫E lá vamos nós, então
‫vamos tentar de novo, e agora
‫de fato pegamos o campista do parque.
‫Esse é o nosso elemento h1 que
‫acabamos de criar na base. arquivo pug, e se agora
‫o inspecionarmos, você verá que é um elemento h1 simples.
‫É claro que não
‫há nenhum estilo e nenhum CSS neste ponto,
‫mas cuidaremos
‫disso nas próximas aulas.
‫Por enquanto, o que importa aqui
‫é que conforme acessamos nossa raiz, roteamos aqui em nosso host, então ter
‫isso é de fato o mesmo que ter isso.
‫Ao acessar essa rota, agora temos
‫acesso a um site renderizado
‫dinamicamente com base em nossa base. modelo de pug, ótimo.
‫Essa é a primeira etapa de como configurar o
‫pug e, nas próximas
‫duas palestras, você aprenderá a realmente usar esse mecanismo de
‫template para construir sites incríveis e dinâmicos.