Desenvolvimento web full stack para iniciantes — Parte 4: projeto final, Node, Express e MongoDB

1. Nossas boas-vindas ao curso!: Bem-vindo ao Full Stack Web Development para iniciantes. Este curso é projetado para levá-lo de um iniciante para um desenvolvedor web capaz de construir não apenas a interface de usuário front-end, mas também para projetar e construir o backend para interagir com ele também. Quem sou eu? Meu nome é Chris e serei seu instrutor ao longo deste curso. Eu sou um desenvolvedor web e também o produtor de muitos tutoriais, ensinando milhares de alunos as habilidades que eles precisam para construir sites e aplicativos. Esta é a quarta parte da série completa, onde continuaremos a construir sobre tudo desde as três primeiras partes deste curso. Este curso é tudo sobre mudar para o backend de sites, onde você aprenderá muitas coisas incríveis. Começamos com nó e a estrutura expressa, onde configuramos um livro de viagens no aplicativo chamado Let's Travel. Construiremos este projeto ao longo de todo o curso. Tudo o que aprenderem será imediatamente posto em prática. Node e Express são realmente populares e aprender essas tecnologias deixará você em alta demanda. Depois disso, passamos para roteamento e modelagem, que nos permitirá alternar entre páginas e navegar pelo nosso aplicativo, juntamente com a configuração de modelos para exibir não apenas o conteúdo que criamos, também renderizaremos dados do nosso banco de dados também. Bancos de dados é o que a próxima seção é tudo sobre, onde vamos olhar para MongoDB e Mangusto. Você vai aprender muito incluindo modelar nossos dados, criar, ler, atualizar e excluir ações, juntamente com filtragem e agregação para obter de volta os dados exatos que precisamos. Depois disso, continuamos com o estilo e adicionando muitos recursos agradáveis ao nosso projeto, juntamente com a aprendizagem de muitas técnicas JavaScript da próxima geração do ES6 e além. Você também aprenderá como permitir que os usuários façam upload de imagens e como podemos salvar e recuperar essas imagens do nosso armazenamento em nuvem. Naturalmente, a maioria dos aplicativos hoje em dia precisa lidar com contas de usuário e autenticação. Isso é algo sobre o qual vamos aprender enquanto também aplicamos tudo isso ao nosso projeto. Você aprenderá como criar conta de usuário, entrar e sair, validar informações de novos usuários, autenticação, armazenar senhas com segurança e muito mais. Terminamos nosso aplicativo, permitindo que o usuário faça pedidos e, em seguida, salve-os no banco de dados. Em seguida, criamos uma área de conta onde o usuário pode fazer login e ver todas as reservas que ele fez. Também os usuários administradores podem ir para a seção de administração para ver listas de todos os pedidos que foram feitos. Este curso termina mostrando algumas dicas de segurança e recomendações para preparar seu aplicativo para produção. Em seguida, empurramos nosso aplicativo para um servidor ao vivo para o resto do mundo para ver, enquanto explicamos as coisas de uma maneira simples e simples de entender, que até mesmo os iniciantes entenderão, juntamente com reforçar as coisas com um divertido ainda projetos desafiadores como vamos. Espero que você esteja realmente animado para aprender sobre todas essas coisas, na parte final deste curso. 2. O que construiremos: Nesta seção e para praticamente o restante deste curso, vamos construir o aplicativo de viagem de nicho, quando o usuário pode fazer login e fazer reservas para hotéis em vários países. Esta vai ser a página inicial, que vai ser o ponto de partida onde um usuário pode procurar hotéis em diferentes países. Também podemos adicionar o número de noites e também o número de hóspedes, bem como alguns filtros, como a classificação de estrelas, e também podemos resolver o preço do hotel sábio de baixo a alto ou alto a baixo. Mais abaixo, também estamos pegando alguns hotéis aleatórios do banco de dados e restrito precisa ser o primeiro nove. O usuário pode clicar em qualquer um desses hotéis e obter mais informações. Ele terá uma visão estendida do hotel. Nós também temos uma descrição e, em seguida, na parte inferior, temos a chance de, em seguida, procurar este hotel com a disponibilidade atual e também o preço atual. Se voltarmos à página inicial mais abaixo depois dos hotéis, temos também uma lista de países onde podemos filtrar os hotéis pelos vários países. Se clicarmos em cada um destes, podemos então ver cada hotel que está disponível para esse país em particular. Junto com esses filtros, também podemos clicar em “Todos os Países” e, em seguida, ver uma lista de todos os países disponíveis para os quais temos hotéis disponíveis. Uma vez que adicionamos novos hotéis como Administrador, esses países também são atualizados automaticamente no front-end. Portanto, não precisamos nos preocupar em adicionar tudo isso, cada vez que adicionamos um novo país, bem como esses países. Se voltarmos para os hotéis, também temos um link para ver todos os hotéis disponíveis. Se quiser percorrer todos os que você tem no banco de dados em vez de filtrar para baixo pelos países usando uma Pesquisa. aplicativo de serviço será um aplicativo baseado em nós usando a estrutura expressa que vamos aprender sobre nesta seção e as próximas seções dois. Também estará usando várias tecnologias para se juntar a este projeto, como MongoDB para armazenar nossos dados. Usamos Mangusto para várias coisas, como estruturar nossos modelos ou outros dados. Junto com tudo isso, também terá a facilidade para o usuário ir em frente e login. Podemos entrar com um e-mail e senha. Então, vamos ouvir agora. Também estará usando mensagens de descarga, assim como você vê aqui, para dar ao usuário algum feedback sobre quando um login ou logout, juntamente com o administrador para poder ver quando um hotel foi adicionado com sucesso ao banco de dados. Uma vez que nos conectamos, agora temos uma seção de conta que podemos clicar. Também podemos conferir as reservas atuais que cada usuário tem disponível. Junto com isso, se o usuário é um administrador, então vamos para '” /admin”. Atualmente, o nome de usuário e a senha que inseri estão desativados como administrador. Então agora temos acesso a esta seção de administração do site, que será o back-end onde pode ter alguns privilégios de administrador, como adicionar novos hotéis ao banco de dados, o que podemos fazer com este formulário aqui. O administrador também pode editar detalhes de um hotel ou removê-los completamente do banco de dados também. Tudo o que precisamos fazer é adicionar o ID do hotel, ou podemos procurar pelo nome do hotel, se não tivermos certeza do ID. Voltar ao administrador, também podemos ver todas as reservas disponíveis que estão sendo colocadas por todos os usuários. Uma vez que estamos logados como usuário e realizar a pesquisa, vamos procurar por Jamaica, sete noites, e podemos adicionar uma data, número de convidados, a classificação de estrelas, e também os filtros de preço. Podemos clicar em “Pesquisar” e, em seguida, levamos para os resultados da pesquisa. Portanto, este é o hotel que corresponde aos nossos filtros e também temos uma seção no lado direito que calcula o total por pessoa e o custo total da reserva. Podemos então continuar até a tela de confirmação, que fornece a descrição completa do hotel, juntamente com a facilidade de fazer um pedido. Uma vez que ele é colocado e levado para nossas contagens e, em seguida, podemos ver para baixo na parte inferior que nosso pedido foi adicionado para baixo na parte inferior com uma referência de ordem única. Se você acessar o admin, ele também deve ser adicionado dentro aqui também porque nós estamos logados como um administrador também para este usuário atual. Também podemos ir para Ver reservas e, em seguida, ver as reservas colocadas na parte inferior também. Se quisermos ir em frente e sair e, em seguida, tentar esta seção de administração. Podemos ver que somos redirecionados de volta para a página inicial porque esta rota está protegida. Então, durante este projeto, vamos estar aprendendo uma variedade de coisas. Como eu mencionei antes, estaremos usando nó para o back-end, expressar como a estrutura para construir este projeto, Mangusto e MongoDB para nossos dados back-end, rota para navegar através de nossos projetos juntamente com o MVC padrão que nos permitirá adicionar alguma estrutura ao nosso projeto também. Junto com isso vai aprender muito mais incluindo autenticação, como manter os usuários conectados usando sessões, juntamente com muito mais, e vamos descobrir tudo sobre isso nas próximas seções. Então vamos começar este projeto no próximo vídeo, onde vamos dar uma olhada no nó e MPM junto com a instalação disso em nosso sistema. 3. Projeto de sk incentivar: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para marcar outra palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder e se afastar da aula e pode até mesmo dar um passo atrás depois de terminar a aula, voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Lembre-se também de compartilhar seu projeto aqui no Skillshare e só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 4. O que é Node e NPM?: Bem-vinda de volta. Se nos dirigirmos para nodejs.org, esta é a página inicial oficial do Node.js, que usaremos para construir este projeto final. Vemos no topo, há algumas informações sobre o que é Node.js. Basicamente, Node.js é um tempo de execução JavaScript, construído no motor V8 do Chrome. O que exatamente isso significa? Bem, V8 é motor que faz JavaScript trabalhar dentro do navegador Google Chrome. Quando usamos JavaScript até agora neste curso, ele está sendo executado dentro do navegador. O Chrome usa seu próprio mecanismo V8, e também outros navegadores têm a própria versão também. Historicamente, dentro do navegador é onde o JavaScript é executado, no lado do cliente. No entanto, desde que Node.js foi desenvolvido, também podemos escrever código JavaScript, que é executado no servidor também. Uma das principais coisas sobre o V8, é que ele também pode ser executado em qualquer lugar. Não apenas dentro do Chrome, tornando-o disponível para trabalhar em outros aplicativos também, que é escrito na linguagem de programação C++. Com isso, Node.js foi criado usando o mecanismo V8, que permitirá que nosso código JavaScript seja executado no sinal dois do servidor. Isso foi enorme para muitos desenvolvedores que já conheciam JavaScript, já que agora podem escrever o front-end e também o back-end de aplicativos usando a mesma linguagem. Antes disso, teríamos que aprender outra linguagem do lado do servidor, como PHP. Por que queremos executar nosso código no servidor? Isso porque permite criar páginas web dinâmicas. Isto significa que a página web é criada no servidor primeiro, e também pode incluir quaisquer dados dinâmicos, extraídos do nosso banco de dados ou de outras fontes. Além disso, ele pode verificar se o usuário está conectado, por exemplo, antes de enviar de volta qualquer informação sensível. Se você ainda não fez isso, certifique-se de que clicamos no botão de download para a versão atual do Node e siga as instruções de instalação. Isso em nosso sistema nos permitirá executar Node localmente e criar um servidor web em nosso próprio computador para desenvolvimento. Quando estamos baixando Node.js, ele também incluirá npm, que é o gerenciador de pacotes do Node. Esta é a coleção de milhares de pacotes que podemos usar com Node para construir quase qualquer tipo de projeto que queremos. Também em [inaudível] 2, se construirmos algo nós mesmos, o que achamos que pode ser útil para outra pessoa. Podemos então agrupá-lo no que é chamado de módulo e também publicar nosso próprio módulo dois no npm. À medida que passamos por este projeto, estaremos usando módulos npm para adicionar funcionalidade. Tal como um módulo chamado passaporte. Procuramos passaporte, este é um módulo Node que vamos usar para fornecer autenticação de usuário, para os usuários possam fazer login com um e-mail e senha. Também usaremos muitos outros pacotes npm, como progresso, para permitir que nossas senhas sejam criptografadas, para permitir uploads de arquivos, por segurança e muito mais, que descobrirá em breve. Este é Node e NPM e uma visão geral do que eles podem fazer. Vamos descobrir mais sobre eles à medida que passarmos por este projeto também. Se o download do Node estiver concluído, vá em frente e clique nas etapas de instalação para instalar no seu computador. Então eu vou te ver no próximo vídeo. 5. Estático versus servidor web dinâmico: Você pode estar pensando, por que estamos usando um servidor web para construir projetos? Não fomos bem até agora sem um? Bem, este é um ponto justo entre os quais vou tentar explicar neste vídeo. De uma forma geral, podemos categorizar nossos sites em estáticos ou dinâmicos. Na tela aqui temos nosso jogo de correspondência de forma aberto no index.html. Em todos os nossos projetos anteriores até agora, se abrirmos o index.html e também abrirmos dentro do navegador, temos nosso conteúdo HTML. Este HTML é todo estático, pois o conteúdo não é alterado. Sim, podemos ter algumas formas aparecendo quando o jogo começa. Tudo isso é feito no navegador usando JavaScript. Dentro do navegador, se formos para clicar com o botão direito e exibir a fonte da página, isso abrirá em uma nova guia. Este é exatamente o mesmo código exibido aqui como vemos no Visual Studio em nosso HTML. Mesmo se carregarmos este projeto para um servidor web e o fizermos ao vivo na web, todo esse conteúdo ainda é estático e recuperaremos os mesmos resultados do servidor. Basicamente, em um projeto estático como este, o servidor enviará de volta o que lhe demos, como a página de índice. Páginas web dinâmicas em t [inaudível] ele rondo pode voltar do servidor muito diferente do código que podemos ver em nosso editor de texto. Se passarmos para a versão final de nossos projetos problemáticos e também abrirmos o navegador. Então não se preocupe com [inaudível], como tudo isso parece. Aprenderemos sobre todo esse código durante as próximas seções. Eu vou para um dos modelos de hotel, que é dentro de vistas, e então se formos para hotel.pug, vamos fechá-lo. Novamente, não se preocupe com todo esse código complicado. Por enquanto, quero que se concentre em uma coisa. Este é o nome do hotel, que está em um nível três. A sintaxe pode parecer um pouco confusa por causa deste h3 mais curto. Mas este apenas um h3 elementos que já aprendemos sobre. Depois disso é hotel.hotel_name. Se formos para o navegador, podemos ver o nome real do hotel, como Hotel 11 ou Hotel 9, em vez deste nome hotel.hotel, que veremos no Visual Studio. Se formos para o navegador, podemos ver o nome real do hotel também está disponível na fonte. Se formos para o botão direito do mouse em Inspecionar e, em seguida, clique no nome do nosso hotel, vá para os elementos e bateu isso para baixo. Aqui podemos ver o nosso HTML de saída que é retornado a partir do servidor. Temos o nosso h3, que também podemos ver aqui. Ambos são dados dinâmicos agora foi substituído pelo nome do hotel. Aqui vemos que o servidor web desta vez é tomado nosso modelo de hotel do Visual Studio e preenchido os dados ausentes com dados do nosso banco de dados antes de retornar para o navegador. Isto é o que as páginas web dinâmicas são tudo sobre. Sites estáticos, assim como o que já vimos antes com o Matcher de Formas, um totalmente fino para aplicações simples. Mesmo aqueles que ainda usam dados de API também, como o nosso localizador de músicas. Mas a ciência dinâmica é perfeita quando queremos alterar os dados antes de enviá-los de volta para o navegador. Ou para tarefas relacionadas à segurança, como lidar com informações confidenciais do usuário. Como não queremos que ele seja tratado dentro do navegador. Espero que faça sentido. Em seguida, vamos começar a funcionar com o nosso projeto usando o framework Express. 6. Express.js e gerador expresso: Para este projeto, vamos estar aproveitando uma estrutura leve para Node chamada Express. Express é uma estrutura muito popular na comunidade Node, e é a plataforma ideal para iniciarmos nosso projeto. Mais na página inicial que é expressjs.com, podemos ver esta página inicial, como diz aqui, é um quadro rápido, sem opinião, e minimalista para Node.js. Isto significa que não assume como será o nosso projeto. Nós somos livres para basicamente tirar proveito do que o Express fornece sem ter que aderir a um monte de regras rígidas, que muitas outras estruturas nos impõem. É minimalista, o que significa que fornece os recursos básicos que quase certamente precisamos, como um servidor web, fim de rota para alternar entre páginas, manipulação de erros e modelagem, aumentar qualquer funcionalidade extra é até impulsionar os anúncios usando o gerenciador de pacotes de nós, que analisamos antes. Express fornece um servidor web que podemos usar para servir nossas páginas, e isso também serve para todos os navegadores com o conteúdo dinâmico como vimos no último vídeo. Mesmo instalado no Express 2, é feito como um módulo npm. Como vemos aqui em baixo, temos o código de terminal para definir o servidor como um módulo de nó, que possamos configurar as coisas manualmente, ou Express também fornece um gerador. Temos tudo o que precisamos para ir. Se formos ao menu e Introdução, mouse sobre isso e então podemos clicar no gerador Express. Precisamos instalar isso via NPM, então eu vou para o terminal para instalar. Os usuários do Windows podem abrir o programa PowerShell para o palco ou qualquer outro programa que você preferir. Vou abrir o iTerm e nos deixar um pouco maiores. Antes de continuar, precisamos ter certeza de Node e npm está instalado corretamente. Podemos fazer isso digitando dentro do terminal ou dentro de um PowerShell. Podemos verificar Node está instalado corretamente digitando nó -v. Se vermos um número de versão aqui, isso significa que o Node está instalado corretamente. Podemos fazer o mesmo com o npm -v. Novamente, se tivermos um número de versão aparecendo, isso significa que o nó e o npm estão instalados corretamente. Se você não vir o número da versão ou tiver um erro, certifique-se de ir em frente e reinstalar o Node e verifique se isso está no lugar antes de seguir em frente. Podemos então ir em frente e instalar o gerador Express usando NPM. Então digite npm instalar exepress-generator, e depois traço g no final. Os usuários do Mac também podem precisar adicionar a palavra-chave sudo antes caso você tenha ocorrido um erro. Pouco antes disso, precisamos adicionar sudo e depois “Enter”, e isso nos solicitará a senha e, em seguida, clique em “Enter”. Agora é, vamos em frente e baixar o gerador Express da NPM. A bandeira traço g que adicionamos no final daqui, irá instalar este pacote globalmente. Isso significa que ele pode ser usado em qualquer projeto, não apenas no que estamos criando. Agora precisamos navegar para onde queremos criar nossos projetos. Vou adicionar o meu à área de trabalho. No momento, eu estou no meu diretório de usuário atual, então eu vou usar cd para mudar o diretório para a área de trabalho. Pressione “Enter” e agora podemos ver que estamos dentro da área de trabalho. Claro, você pode alterá-lo para ser qualquer local que você preferir, Eu estou apenas mantendo o meu na área de trabalho para facilidade de acesso. Agora, para criar um novo projeto neste diretório, podemos executar este comando. Então, expresso seguido pelo nome do nosso projeto, eu vou chamar meu lets-travel, e, em seguida, dash dash dash view é igual a pug, aperte “Enter” e vamos em frente e criar nossos projetos, que também está usando o linguagem templando, que vamos cobrir em breve. Se rolarmos para cima dentro do terminal, podemos ver uma lista de arquivos e pastas que foram criados para nós, e também algumas instruções sobre como começar. Vou usar o terminal interno do Visual Studio a partir de agora. Eu também recomendo que você faça isso também ao longo deste curso. Se preferir, você pode continuar em um terminal separado, mas você precisará ir em frente e primeiro mudar para o diretório atual do projeto. Em seguida, você precisaria executar o npm install para obter todas as dependências e, em seguida, iniciar o aplicativo com esses comandos na parte inferior. Se você estiver acompanhando o Visual Studio Code, agora podemos fechar o terminal, o navegador, abrir o Visual Studio Code e, em seguida, arrastar para dentro da nossa pasta do projeto. Podemos abrir o Visual Studio como terminal interno, indo para Ver em um submenu e, em seguida, ir para o Terminal Integrado. Isso abrirá o terminal na parte inferior, listado estão nossos comandos de terminal. Isso também tem o benefício de ter nosso diretório configurado automaticamente para a pasta do projeto de coluna na área de trabalho. Não precisamos navegar até onde nossa pasta está localizada. Vamos dar uma olhada melhor em torno de todos esses arquivos e pastas em breve, mas por enquanto, se abrirmos o package.json e depois fecharmos a barra lateral, aqui dentro vemos algumas dependências, que dentro deste dependências objeto apenas aqui, que são necessários para este projeto. Essas dependências são módulos de nó que você pode instalar usando o npm install. Para baixo no terminal, execute o npm install, pressione “Enter” e, em seguida, dê, digamos alguns momentos para executar e puxar todos os pacotes que precisamos do npm. npm install irá pegar tudo o que precisamos listado dentro deste package.json, e depois colocá-los dentro de nossos projetos em uma pasta de módulos de nó. Além disso, quando adicionamos mais módulos mais tarde, novamente vamos usar este comando npm install, mas seguido pelo nome do módulo que queremos instalar. Ótima. Uma vez feito isso, esta deve agora ser uma pasta node_modules. Se abrirmos a barra lateral, se abrirmos isso, temos um menu suspenso, vemos listado tudo o que estamos usando para este projeto. Ele terá coisas como um módulo de depuração. Nós também temos express que é apenas aqui, e também pug, nosso motor de modelagem entre outros que também vamos usar. Agora tudo o que resta a fazer, é iniciar o nosso servidor web e abri-lo dentro do navegador. Ainda dentro deste arquivo package.json, no topo temos algo chamado start dentro de nossos scripts. Podemos usar o script start dentro do terminal, para então ir em frente e kickstart nossa aplicação para que possamos visualizá-lo no navegador. Dentro do terminal, vamos executar o npm start, aperte “Enter” e, em seguida, abrir o navegador da web, que você deseja usar. Navegue até localhost, dois pontos 3000, pressione “Enter” e agora podemos ver o nosso Express básico está agora em execução. Mas como sabemos se é a porta 3000 em que nó está sendo executado? Bem, se formos para o package.json, o comando start tem um caminho de arquivo de bin, barra, www. Se abrirmos este arquivo dentro da mesma barra, dentro deste arquivo é uma variável que está definida para a porta 3000. Aqui temos uma variável chamada porta, que é definida para ser porta 3000. Além disso, se acontecer de você usar a porta 3000 para qualquer outra coisa, você também pode alterar esse número para ser algo diferente, como 3001. Sua estrutura de arquivos e configuração é um pouco diferente do que temos usado até agora. No próximo vídeo, vamos dar uma olhada melhor no que temos aqui em nosso projeto Express Generator. 7. Estrutura do projeto expresso: A estrutura do projeto que temos aqui pode parecer um pouco intimidante se você estiver acostumado a usar sites estáticos. No entanto, não é tão ruim uma vez que você se acostumar com isso. Se abrirmos a barra lateral do lado esquerdo, vou torná-la um pouco maior. Do topo temos a pasta bin, que é usada para qualquer script de inicialização. Nós tocamos nisso no último vídeo onde vimos esses scripts de início dentro do arquivo package.json, que então aponta para esse arquivo www, que contém nossos scripts de inicialização. Este arquivo dentro daqui define o número da porta que queremos usar, e também vai em frente e configura um servidor HTTP para então servir nossos projetos. Sob este nós temos nossa pasta de módulos nó, apenas aqui em baixo. Isso contém todos os pacotes ou módulos que nossa aplicação precisa. Cada vez que instalamos um módulo do MPM, ele aparecerá dentro daqui e também será listado dentro do arquivo package.json como uma ferramenta de dependência. Uma vez que esses módulos também listados no arquivo package.json, podemos até mesmo remover ou excluir esta pasta de módulos de nó completo, e um comando de instalação MPM irá então novamente, adicionar isso de volta ao nosso projeto. Isso é útil para coisas como armazenar nosso projeto no GitHub, já que a pasta de módulos de nó muitas vezes pode ficar realmente grande e nós não queremos uma pasta enorme como esta salvando no GitHub ou em outro lugar se não precisarmos. Baixe isso, se você estiver fechando módulos de nó, nós também temos uma pasta pública. A pasta pública contém nossos arquivos estáticos, como quaisquer imagens, folhas de estilo e também quaisquer arquivos JavaScript ou bibliotecas para o front-end. Aqui podemos adicionar nossas imagens de projeto, quaisquer bibliotecas ou frameworks personalizados de terceiros , como Bootstrap CSS e arquivos JavaScript. Esta pasta não é para nenhum arquivo JavaScript ou o servidor, como nossos modelos de página ou qualquer coisa com informações confidenciais, como arquivos de configuração E. Sob a pasta pública, temos a nossa pasta de rotas. Cada pasta conterá um ou mais arquivos JavaScript, que lidam com o que fazer quando um usuário visita uma determinada URL. Como exemplo, se abrirmos este index.js, e eu fechar a barra lateral, você verá o roteador.get, que lida com a página inicial. Dentro de um router.get, primeiro vemos a rota de barra, então, quando o usuário visita o roteador doméstico ou barra, isso enfurece uma função que então vai em frente e renderiza os modelos de índice, que queremos que você use. Depois disso, temos um objeto onde passaremos o título da página simplesmente express, e mais tarde também passaremos informações diferentes como variáveis, para o nosso modelo de página também. Isso passa para a pasta views se abrirmos uma barra lateral e, em seguida, abrir nossas vistas, que é uma vista que o usuário vê. Ele contém todos os modelos de página que são criados no servidor antes, em seguida, enviar de volta para nós. Todos esses arquivos têm a extensão de arquivo.pug. Isto é porque estamos usando o motor de modelos pug, que também costumava ser conhecido como J2. Você pode encontrar algumas referências j na documentação ou uma pesquisa na web. Você pode usar outras linguagens de modelos, se preferir, como EJS. Mas isso caberá a você implementar se você quiser fazer essa mudança. Se abrirmos o modelo index.pug. Este é um modelo que está sendo chamado a partir da página do roteador que já vimos antes, então este é o índice que é renderizado quando um usuário visita sua rota inicial. Bloquear e estender, que vemos na parte superior do arquivo, veremos isso em breve. Mas é h1 e também p elementos são o que vemos quando visitamos a página inicial. Temos o título e, em seguida, o texto de boas-vindas, e depois o título. Dentro do Chrome, se abrir isto, este é o texto que vemos dentro daqui. H1 é igual a título, é o título que é passado do roteador. Novamente em index.js, este é o título que vemos logo depois de declarar qual modelo queremos usar. O texto do express é então passado para o nosso índice e é por isso que vemos o texto dentro do navegador. Abaixo disso temos um p elementos com um texto de boas-vindas e isso será expresso. Também podemos usar isso como uma variável dentro de uma string. Vamos cobrir todos esses modelos em sintaxe na próxima seção. Abaixo após as visualizações, temos o arquivo app.js. Este app.js é o ponto de partida do aplicativo e basicamente a página principal que conecta tudo. Ele carrega tudo o que precisamos para o projeto e por padrão importar quaisquer pacotes que precisamos lope no topo da pasta módulos nó. Ele também importar nossas rotas de nossa pasta de rotas, que podemos ver aqui, por esses caminhos de arquivo, e, em seguida, armazená-los dentro de uma variável que vemos como abaixo. Em seguida, ele vai em frente e inicia nossa nova instância de aplicativo expresso e atribui a uma variável chamada aplicativo. Depois disso, definimos pug view engine, que é usado aqui, que declara qual linguagem templating queremos usar. Depois disso, temos app.use em várias linhas. Isso é usado para montar qualquer middleware em nossa aplicação. Vamos procurar um middleware mais detalhadamente mais tarde. Mas basicamente middleware é uma série de ações ou funções que podemos executar nosso código através. Um exemplo pode ser quando um usuário faz login, podemos adicionar algum middleware para validar as informações do usuário antes de passar para o próximo estágio. Mas, novamente, vamos olhar mais para isso quando estamos em nosso próprio middleware para o projeto. Se rolarmos para baixo, em seguida, temos nossas rotas, que novamente é middleware e estas são as duas variáveis que tínhamos antes, que é apenas sobre o topo. Estas são as variáveis que se vinculam ao nosso caminho de arquivo para o roteador. Ele declararia um quer usar nosso roteador de índice quando o usuário visita qualquer uma das rotas home, e nós também temos uma rota de usuário padrão também que foi configurado com o Express Generator, e essas rotas são armazenadas dentro do nosso índice e arquivos uses.js. Rolando mais para baixo, também temos algum tratamento de erros, que novamente é middleware. App.use sem um caminho de arquivo, fará essas funções de manipulação de erros disponíveis para todas as rotas em nosso site. Finalmente, na parte inferior temos module.exports equals app. Isso tornará este arquivo disponível em outras partes da nossa aplicação, se necessário. Voltando à nossa barra lateral, os últimos arquivos são os arquivos.json package.json. Dentro do nosso package.json, que nós pesquisamos brevemente. Temos as informações sobre o nosso projeto, temos nossos scripts de inicialização para executar nosso servidor web. Também podemos adicionar nossos próprios scripts aqui, como um atalho para digitar este comando mais longo no terminal. Temos também o nome que definimos e também o número da versão que podemos definir também. Mais abaixo, temos as dependências que olhamos antes. Estes são os módulos de nó, projetos de arquivos intermediários e também podemos adicionar dependências de desenvolvimento também, que são os módulos que precisamos apenas para desenvolvimento, e estes serão ignorados para produção. Em breve estaremos instalando no pacote mom nó, que será uma dependência de desenvolvimento, então eu vou mostrar-lhe como fazer isso em breve. Se abrirmos a barra lateral, também temos um pacote.json. Por exemplo, dentro de nosso package.json, temos a dependência Express, que é apenas aqui. Isto diz que atualmente no momento da criação deste aplicativo expressa nossa versão 4.16.0. O ícone tilda que você vê apenas no início aqui, significa que não vamos expressar a versão quatro, mas também queremos qualquer atualização menor das versões dois. Ou seja, podemos tomar 4.17 ou 4.18 e assim por diante. Com isso em mente, se formos para este package-lock.json. E, em seguida, se fizermos uma pesquisa para o Express, mas, em seguida, levado para a seção Express deste arquivo, vemos que a versão real está bloqueada em 4.16.3. Além disso, este módulo em si também tem dependências. Se fecharmos este terminal e, em seguida, rolar para baixo você vê que temos esta seção necessária apenas aqui e express também requer um monte de módulos diferentes também, como cookie, depuração, escape HTML e também muito mais. É por isso que quando vamos para a nossa pasta de módulos nó e abrir isso, há muito mais pastas listadas aqui ou módulos Lamar do que vimos originalmente se apenas vamos para o package.js. Vamos fechá-lo. Todas as nossas dependências dentro deste package.js também tem dependências e estas estão listadas no package-lock.json. Esta é uma visão geral do que está incluído no projeto para começar, eu sei que já dissemos isso algumas vezes, mas realmente não fique sobrecarregado com tudo isso se for novo para você. Ficaremos muito mais familiarizados com a configuração das próximas seções. 8. Usando Nodemon: Agora vamos instalar um pacote de nó, o que nos economizará muito tempo durante este projeto. Se passarmos por cima das vistas dentro do menu e, em seguida, ir para index.js, views, index.js, e então você pode ir em frente e fazer uma pequena alteração no nosso texto dentro aqui. Se dissermos, bem-vindos e depois dizemos, vamos viajar. Dê um salvar e, em seguida, abra o navegador e, em seguida, recarregue. Vemos que essa mudança foi refletida dentro do navegador. Isso é bom, e este é o resultado que esperaríamos. Se agora passar para um arquivo de script, como dentro das rotas e, em seguida, vá para o index.js. Vamos agora fazer uma mudança dentro daqui. A vírgula está fora, é res.render,/. Lembre-se que esta é a linha que renderiza nossa página inicial ou nossos modelos de índice, e em vez disso, se vamos para a linha abaixo, diga res.send e, em seguida, o texto fora 'olá'. Isso simplesmente enviará uma sequência de textos para o navegador. Dê um salvar e, em seguida, recarregar e ver que nada acontece. Isso ocorre porque se fizermos alterações em um arquivo de script, precisamos reiniciar o servidor. Podemos fazer isso se formos para o terminal lembrar que isso é vista, e depois integrar o terminal, podemos fechar o terminal para baixo, Controle C, e então somos levados de volta para o nosso diretório, e então novamente usar npm iniciar, para iniciar o servidor mais uma vez. Aperte Enter, então uma vez que ele está em execução, podemos ir para o navegador e Hit Recarregar, e agora o terminal reiniciou o servidor. Veremos agora que o texto de 'Olá' foi atualizado no navegador. Embora isso funcione bem, é um pouco chato continuar reiniciando o servidor, toda vez que fazemos uma alteração dentro desses arquivos. Para facilitar as coisas, podemos usar um pacote chamado nodemon. Se formos para nodemon.io, esta é a página inicial do pacote nodemon, que vamos usar. Nodemon observará quaisquer alterações em nosso código-fonte e, em seguida, reiniciará automaticamente o servidor para nós. Podemos até instalar nodemon, como sugere, usando este comando npm install, o nome de nodemon para o pacote e também podemos usar esta bandeira -g ao instalar o gerador express, e isso significa que podemos usá-lo globalmente em qualquer projeto e não apenas no que estamos trabalhando atualmente, ou alternativamente, se quisermos apenas usá-lo em nossos projetos únicos. Isso também é simples de configurar. Podemos ir para o terminal no Visual Studio Code e, em seguida, fechar um terminal novamente com Control C e, em seguida, executar o seguinte comando contra a nossa instalação npm, e, em seguida, desta vez queremos dizer —save-dev e em o nome do nosso pacote, que é nodemon, Hit Enter e ele vai em frente e pegar o pacote do npm, save dev vamos salvar isso em nosso projeto como uma dependência de desenvolvimento. O que significa que podemos usá-lo durante o desenvolvimento, mas não é necessário quando empurramos o aplicativo para a produção. Dê-lhes um momento para instalar e, em seguida, uma vez que isso é feito, se vamos para a barra lateral e abrir o package.json. Dentro daqui ainda temos nossas dependências, que vimos anteriormente, mas mais abaixo também temos nossas DevDependencies e elas estão listadas como nosso pacote nodemon. Agora, para que isso funcione em nosso aplicativo, podemos criar um script, assim como o script de inicialização, que temos no topo aqui. Este eu vou chamar de Devstart. Adicione uma vírgula após a primeira linha, e então podemos adicionar devstart. Este é o pseudónimo que vamos dar a este comando. Adicione dois pontos, e, em seguida, dentro das aspas, vamos adicionar um comando que é nodemon e, em seguida, o mesmo caminho que temos usado aqui. /bin/www. Isso vai essencialmente executar os mesmos scripts de inicialização, mas desta vez estamos observando quaisquer alterações usando nodemon. Guarde isso e agora podemos ir em frente e iniciar nossos servidores. Desta vez, se formos para o terminal, certifique-se de que o servidor está fechado e, em seguida, desta vez pode executar npm, executar devstart. Claro que devstart é o nome do nosso script que temos aqui. Pressione enter, uma vez que está funcionando, você deve ver a linha verde de código aqui e depois para o navegador, aperte reload e agora tudo ainda deve estar funcionando. Se voltarmos para o arquivo index.js e, em seguida, fazer uma alteração. Vamos dizer “olá de novo”. Salve e assim que bater salvar, podemos ver o terminal no servidor foi reiniciado. Em seguida, recarregue o navegador e agora veremos que nosso texto foi atualizado sem que tenhamos que atualizar manualmente o servidor. Vamos agora restabelecer o nosso res.render, que possamos remover o res.send e, em seguida, comando e barra para agora descomentar esta página de índice, salvar isso e, em seguida, recarregar e atualizar o navegador irá agora mostrar estes muda sem ter que fechar o servidor e reiniciar. 9. Servindo arquivos estáticos: Para este projeto, eu forneci algumas imagens que você também pode usar, como imagens para os hotéis, os países, e também o logotipo. Você pode, naturalmente, escolher o seu próprio, se preferir. Os fornecidos estão dentro desta pasta chamada imagens, que eu tenho aqui salvo na área de trabalho. Se você abrir esta pasta, podemos ver que temos a praia, que é uma das principais imagens na página inicial. Temos o nosso logótipo e, em seguida, as imagens e hotéis do nosso país organizados em duas pastas. Vamos também abrir a pasta do projeto. Clique duas vezes em Let's Travel e, em seguida, dentro daqui, podemos ir ao público, e depois às imagens. Então, se selecionarmos os quatro itens de nossa pasta de imagens, e depois arrastá-los para a pasta de imagens dentro de nossos projetos, então isso acabou e certifique-se que eles estão dentro da pasta de imagens, em vez de apenas a seção pública. Devemos ser capazes agora de ver essas imagens, se passarmos para o código do Visual Studio. Abra isso e, em seguida, a barra lateral e, em seguida, dentro de um público, agora temos as imagens dentro da pasta de imagens. Se formos para o index.pug, que é os principais modelos da página inicial, podemos testar isso adicionando uma imagem. Debaixo do nosso texto de Bem-vindo ao Vamos viajar. Podemos adicionar nossa imagem, podemos adicionar alguns atributos dentro das citações para definir a imagem para usar igual a nossas imagens que é a pasta. Então vamos em frente e adicionar beach.jpeg, que é este aqui. Observe que não precisamos adicionar a pasta pública ao nosso caminho de arquivo e, em seguida, salvar isso, abrir o Google Chrome ou seu navegador, recarregar e essa é a nossa imagem da praia, ótimo. Agora, todas as nossas imagens e também a nossa estrutura de projeto estão agora no lugar. Na próxima seção, vamos mergulhar mais profundamente em nosso projeto olhando para roteamento e modelagem. 10. Introdução ao pug: Já falamos sobre como usaremos modelos para criar nossos projetos. Esses modelos serão uma combinação de HTML, JavaScript juntamente com quaisquer dados dinâmicos misturados, como um nome de hotel, que vimos na última seção. Sabemos que não podemos fazer tudo isso com os arquivos HTML padrão. Então precisamos usar uma linguagem de modelos que compila tudo isso em HTML. Vou usar uma linguagem templante chamada Pug para fazer isso. Pode parecer um pouco estranho para começar, mas na verdade é mais simples do que as tags HTML normais. Para ver como usar Pug, vamos para o nosso arquivo index.pug. Havia uma barra lateral para um espaço dar pequeno, e já tivemos uma olhada rápida aqui com os elementos p e também com uma imagem [inaudível]. Temos estendimentos e bloqueios no topo, que voltaremos em breve. Por enquanto, vamos nos concentrar nas características do pug. Geralmente, usar Pug é apenas a tag de abertura HTML para fazer para a sintaxe mais curta, assim como este elemento p com o texto de um elementos baseados em texto trabalhar de forma semelhante, como adicionar em um cabeçalho. Então, vamos adicionar um h1, digamos título, sobre o navegador, e então recarregar e temos um nível um cabeçalho aqui embaixo. Os atributos são adicionados da mesma forma que com as tags HTML normais. Mas em vez disso com Pug eles adicionam dentro de colchetes. Se quiséssemos adicionar um link e, em seguida, no href, fazemos isso dentro dos colchetes, e então o resto é adicionado como normal. Então, vamos adicionar um link para o Google. Então, www.google.com, também podemos adicionar nossas aulas. Então vamos adicionar uma classe de botão, e depois adicionamos nosso texto fora dos colchetes, que você deseja adicionar para o link. Então, link para o texto do Google. Salve isso e, em seguida, recarregue e agora tem nosso hiperlink na parte inferior, e se você clicar sobre isso, ele vai funcionar como HTML normal uma tag. Voltar ao nosso projeto e ao index.pug. O recuo também é muito importante quando se usa Pug. Em HTML normal, o recuo é apenas para legibilidade. Mas ao usar Pug, é necessário usá-lo para mostrar em que nível cada elemento está. Por exemplo, se adicionamos uma div para conter este título no link, assim como este, e, em seguida, se formos para o navegador e, em seguida, ir para ferramentas de desenvolvedor iria clicar com o botão direito do mouse e inspecionar, e, em seguida, selecionar esta div apenas aqui. Então esta é uma div que acabamos de adicionar, e a ferramenta de desenvolvedor mostra que o título div e também nosso hiperlink estão todos em linhas separadas. Eles efetivamente todos no mesmo nível, nós não temos o título e o link dentro deste div tags. Mas se formos em frente e recuar o h1 e o link, e depois atualizar isso. Agora vemos que a tag de abertura div e tag de fechamento agora rodeia nosso título e link. Assim, o recuo faz com que esses dois elementos agora para ser aninhado dentro da div pai. Outra coisa sobre o recuo dentro de um arquivo pug é apenas mixins, que vamos cobrir mais tarde, e também esta declaração de bloco no topo, e estende pode estar no nível superior ou seja no extremo esquerdo do arquivo. Se nos movermos sobre um elemento nav, então nosso link, por exemplo, se movermos isso para a esquerda do arquivo, salve isso e, em seguida, recarregue o navegador. Agora recebemos um erro dizendo que apenas blocos nomeados e mixins podem aparecer no nível superior de um modelo; Isto é basicamente porque este arquivo será usado dentro de um arquivo NAV. Então este recuo mantém tudo certo quando o HTML é compilado. Vamos reintegrar este link e limpar o erro. Algo que você deve ter notado está acima, nós também usamos um igual para este título. Isso ocorre porque também podemos incluir JavaScript nesses arquivos Pug também. Se você se lembrar, o título foi passado do nosso roteador, que era index.js, apenas aqui dentro deste título. Então este é JavaScript sendo passado para o nosso modelo no index.pug. Portanto, precisamos usar os iguais em vez de apenas um elemento de texto simples, assim como também nossos elementos p apenas aqui. Este título também é exibido no sub navegador também sobre o topo aqui. Use um igual também renderizará para a tela o resultado de qualquer JavaScript. Então, em vez disso, se dissermos em vez de título, adicionar algum JavaScript de 5 mais 12 sobre o navegador, temos os resultados de 17. Mas em vez disso, se formos em frente e remover os iguais, você tem que salvar e depois voltar para o navegador. Isso agora é exibido como uma string de texto de 5 mais 12 em vez de gerar a soma de 5 mais 12. Então vamos reintegrar isso de volta ao título. Então você não tem que se lembrar disso, mas eu vou colocar no resultado como este é chamado de código buffer. Ele também é código unbuffered também que não adiciona diretamente à saída; Isso pode ser qualquer JavaScript normal com um prefixo traço. Então, por exemplo, podemos adicionar um traço e, em seguida, adicionar qualquer JavaScript, como uma constante de nome , e é nosso nome ser Chris, e então isso pode ser usado onde queremos colocá-lo. Então h1, podemos colocar o nosso título com a nossa variável de nome. Uma vez que é um JavaScript, também precisaremos adicionar os iguais e testar isso, e, em seguida, na parte inferior, há nosso nome de variável de Chris. Então este código sem buffer, é basicamente declarando linha de JavaScript, e então podemos ir em frente e usá-lo em qualquer lugar que quisermos dentro dos templates. Este JavaScript pode ser praticamente qualquer coisa. Então poderíamos ter uma variedade de alimentos, queijo, ovos e frango, e agora temos essa matriz. Isso nos dá uma chance de dar uma olhada na sintaxe especial que Pug fornece para criar um loop for. Para fazer isso, eu vou adicionar isso na parte inferior, recuar este mesmo nível que o link, e então criar uma lista não ordenada para nossos alimentos. Recuado mais um nível vamos criar um loop com cada alimento em alimentos. Então alimentos é o nome da nossa matriz que é apenas aqui, e, em seguida, cada item individual na matriz vai ser armazenado dentro desta variável alimentar. Então, depois daqui, podemos definir o nosso item da lista para ser igual a alimentos. Novamente este é JavaScript, então precisamos adicionar o símbolo de igual. Então nós não produzimos isso como uma string. Diga isso, e depois teste isso. Agora temos queijo, ovos e frango no fundo. Esta saída também pode ser misturada com um eText. Então, em vez de apenas o alimento individual emitido, podemos adicionar uma série de Eu amo, e depois adicionar mais comida. Na verdade, sobre um espaço logo depois de lá e experimentar isso, e nosso texto também é agora misturado com nossa variável JavaScript; Esta é apenas uma visão geral do que Pug pode fazer, e é realmente simples o suficiente uma vez que você se acostumar com isso, vamos usar um monte de recursos Pug para este curso. No entanto, se você preferir dar uma olhada mais profunda agora, você pode ir para Pugjs.org e dar uma olhada mais profunda, no topo deste arquivo também temos este estende e também esta seção de conteúdo de bloco. Ainda não discutimos o que isso significa, mas vamos abordar isso no próximo vídeo. 11. Herança de modelo: Nós temos tanto bloco e estende palavras-chave, dentro dos arquivos pug no topo apenas aqui. Se abrirmos o nosso layout para arquivo pug, que está disponível na seção de exibição, clique no layout do pug. Este arquivo de layout não tem palavra-chave extends na parte superior. Isso ocorre porque ele atua como os principais modelos pug. Os arquivos irão então estender esse layout principal. É por isso que podemos abrir o nosso índice o pug e também o nosso erro o pug também, que está disponível na mesma pasta, e depois ver o layout estende na parte superior. Se voltarmos ao layout do arquivo pug. Há também uma seção de conteúdo de bloco aqui embaixo na parte inferior. Isto é o que parece. É basicamente um bloco de código. Qualquer um dos arquivos como o nosso índice o pug pode ir em frente e substituir esta seção chamada conteúdo. Dentro do nosso índice, o arquivo pug, vamos abrir isso. Toda esta seção aqui, basicamente tudo, desde a nossa lista desordenada até o nosso título, será substituído dentro do bloco ou dentro do espaço que especificamos dentro do layout. Também podemos ter vários blocos também, cada um com um nome diferente, como rodapé ou um bloco de barra lateral. Eles também podem ser adicionados a outro arquivo e, em seguida, referenciados pelo nome do bloco, e da mesma forma que sua seção de conteúdo. Congelamos e adicionamos qualquer coisa ao redor deste quarteirão. Por exemplo, acima do conteúdo e podemos adicionar algum texto. Acima do conteúdo, e depois abaixo dele, abaixo do conteúdo, e agora se vamos para a página de índice principal, e depois recarregar, vemos no topo que temos o texto acima do conteúdo. e, em seguida, na parte inferior, temos o texto abaixo do conteúdo, e, em seguida, tudo no meio, direto do título para baixo para toda lista não ordenada não é fornecido por esta seção de conteúdo de bloco, que é um substituído pelo conteúdo do nosso índice o pug. Uma vez que você entenda isso, agora podemos criar seções de nosso código dentro de um layout, e então podemos terceirizar o conteúdo para um arquivo separado, ignorar todo o código, mais organizado , mais sustentável, e também podemos reutilizar essas seções de conteúdo também em vários arquivos. Agora vamos para os layouts, e excluir esses dois elementos p que criamos, e então dar que salvar. Este layout é útil para qualquer coisa que queremos exibir em todas as nossas páginas em nosso site, como adicionar um cabeçalho e rodapé. Podemos então substituir o conteúdo principal aqui ou uma nova seção adicionando mais blocos. Agora sabemos como nossos modelos são definidos. Em seguida, você terá a chance de obter alguma prática criando a seção de cabeçalho. 12. Hora da prática: criando cabeçalho: Quando lidamos com algo novo, assim como Prog, começamos a melhorar quando praticamos sozinhos. Sem apenas seguir adiante. Aqui podemos ver a versão final dos projetos, que eu gostaria que você fosse em frente e criar esta seção de cabeçalho a partir da navegação superior, que inclui o logotipo e também os links no topo, até o principal imagem de praia apenas aqui. Se você se sentir confiante, você também pode adicionar o formulário de pesquisa dois, que está no meio. Apenas como um guia para onde você está indo. Neste, vamos precisar ir para dentro do arquivo Prog de layout automático, dentro da seção do corpo. Então, logo acima deste conteúdo de bloco. Então está no topo da página. Vou repassar tudo isso no próximo vídeo. Então não se preocupe em estragar tudo. É tudo um bom treino. Então eu recomendo que você pausar o vídeo agora nesta versão final e, em seguida, dar este uma chance. 13. Solução: criando cabeçalho: Espero que você conseguiu dar uma chance e espero ter algum conteúdo de cabeçalho. Agora na tela, eu vou ir em frente e criar minha versão deste cabeçalho. Se o seu é diferente do meu, você pode alterá-lo para ser o mesmo que os criados neste vídeo ou manter o seu como você gostaria. De qualquer forma, está tudo bem. Eu talvez recomendaria manter os mesmos nomes de classe que usamos neste vídeo para que o CSS corresponda mais tarde. Vamos começar de novo qualquer arquivo docktype de layout. Entre a seção do corpo e o conteúdo do bloco. Eu vou começar criando a seção de cabeçalho assim como nós normalmente faria com HTML. Aninhado dentro deste elemento nav. Este logotipo pode ser um link. Isto é para que o usuário possa clicar sobre ele e, em seguida, ser levado de volta para a página de índice. Nosso a para o nosso link, que pode incluir o href dentro dos colchetes que simplesmente links para barra, que é a página inicial. Em seguida, um nível a partir do nosso link. Se formos em frente e adicionar a nossa imagem, este será então clicável e também link para esta página inicial que é barra direta. Dentro dos colchetes que adicionamos nossa fonte, assim SRC e a sequência ser imagens de barra para frente. Este é logo.png. Podemos adicionar uma classe ou um ID para o nosso elemento. Ao adicionar isso dentro dos colchetes como atributos ou podemos adicioná-lo logo após o nome do elemento. Adicionar imagem e o áspero e logotipo. Isso dará o ID do logotipo para esta imagem. Então, logo depois disso, podemos ir em frente e criar nossa outra lista que será para os nossos links de inscrição e login. Isso precisa estar no mesmo nível que o nosso link circundante acima, então ul seguido por nossos itens da lista. Se quisermos fazer esses links, precisamos recuar a tag a mais o href. Ainda não temos esses modelos ou essas rotas configuradas, mas ainda podemos ir em frente e vinculá-los para se inscrever. Com um texto de inscrição e, em seguida, faça o mesmo abaixo, adicione o nosso próximo item de lista no mesmo nível que o acima. Transforme isso em um link. Desta vez, este vai ser para login, que é as rotas de login barra direta e o texto de login para. Se você criou isso e você não adicionou o href em, eu recomendaria que você mantenha o seu consistente com meu para que ele não tenha problemas mais abaixo da linha. Eu adicionei o login barra e também o cadastro de barra para frente. Isso nos dá o nome de salvar para o navegador. Há um logotipo e, em seguida, nossos dois links no topo também. A próxima coisa a fazer é criar nossa entrada de formulário para nossa pesquisa. Que é onde podemos digitar o destino, a duração, as datas de partida e também o número de convidados que queremos procurar, então fazemos isso apenas com um simples formulário HTML. Este formulário vai estar em uma div circundante. Esta div precisa estar no mesmo nível que o nosso elemento nav. Desça para o elemento nav e, em seguida, comece isso no mesmo nível. Ao criar uma div com a classe, podemos até mesmo criar o elemento assim e, em seguida, adicionar o nome da classe como um atributo ou em vez disso, podemos ter uma abreviação que é simplesmente ponto e o nome da nossa classe. Se quiséssemos uma div com a classe de navegação de pesquisa, faríamos isso simplesmente assim. Isto será então emitido como uma div com esta classe. Então dentro podemos aninhar a nossa forma. Este formulário vai ser composto de uma série de entrada de formulário e cada um vai ter uma div envolvente de wrapper sublinhado de entrada. Isso fará com que cada nível de bloco de entrada apareça em sua própria linha. Então precisamos rotular para o nosso primeiro que vai ser o destino. Nós adicionamos o atributo para ou destino e, em seguida, um texto de destino. Em seguida, podemos adicionar nossa entrada, o tipo de texto, a idéia de destino que irá coincidir com este rótulo apenas aqui. O nome do destino também. Vou apenas mudar o estilo para que seja um pouco mais legível e, em seguida, o atributo necessário no final. Salve isso e, em seguida, vamos ver como ele está olhando no navegador e agora temos a nossa entrada de formulário de destino. Agora isso está funcionando, podemos ir em frente e copiar este input_wrapper e, em seguida , colar isso e certifique-se que este está no mesmo nível como acima. Este vai ser por toda a duração. Mude o rótulo para duração, o texto e então podemos adicionar noites aqui dentro porque vamos ser assinar a duração por noite. O tipo de entrada de texto é bom, o ID precisa coincidir com a alteração e o nome da duração também. Este campo também é obrigatório para que possamos deixar isso também. O próximo vai ser para a data de partida para que o texto rótulo. Desta vez, a entrada vai ter o tipo de data para que ele cai para baixo como um seletor de data. O ID da data de partida também e, em seguida, o nome, data de partida. Isto vai ser CamelCase. Este campo também é obrigatório assim como os outros. Eu vou fazer isso da mesma vez que este vai ser um campo numérico. O tipo de entrada de número porque isso vai ser para o número de convidados, então número-convidados. O nome do número de convidados e , em seguida, o ID que deve corresponder a esta etiqueta do número de convidados. Eu tenho um erro de digitação, então mude isso. Então, finalmente, o nome, novamente em CamelCase de número de convidados. Vamos verificar isso no navegador. Óptimo, são as nossas quatro entradas. Podemos ver se clicamos na data, agora temos um seletor de data drop-down. Deve ser um número de tipo de entrada que está em nossos dois campos de texto na parte superior. Voltando ao nosso layout, após estas quatro primeiras entradas vamos agora mudar isso. Precisamos de mais alguns e um será para a classificação de estrelas. Esta vai ser uma entrada seleto com diferentes opções através de um a cinco. Nós vamos então ter uma entrada com um seleto novamente, que vai ser para classificar o preço de baixo para alto ou alto para baixo. Então, finalmente, o botão Enviar no final vai usar o mesmo wrapper de entrada, so.input_wrapper. Este é um seleto com um nome igual a estrelas. Lembre-se de anteriormente que a entrada de seleção precisa ter uma opção para selecionar. Adicione nossa primeira opção aqui dentro com um valor para depois passar para o servidor uma vez selecionado. Vai ser simplesmente um número para o número de estrelas e o texto de min uma estrela. Podemos ir em frente e copiar isso e colar em mais quatro vezes. O segundo é para duas estrelas, 3, 4 e 5 e também o mesmo para o texto também. A última entrada, novamente estes têm o mesmo input_wrapper para manter o estilo consistente. Isso também será um seleto e isso é para a classificação de preço de baixo para alto ou alto para baixo. Podemos adicionar o nome da seleção para ser classificada. Cole na opção com um valor de um. Isso vai para o preço definido de baixo para alto. Nós também vamos colar no mesmo, mas esta opção de tempo pode ter um valor de negativo. Isso ocorre porque estes são os valores que você exigiu ao pesquisar banco de dados Mongo para, em seguida, classificar as consultas de retorno de alta para baixa ou baixa para alta. Veremos isso com mais detalhes mais tarde. Isso também pode ser mudança. Desta vez vamos ver o preço de alto para baixo. A última entrada também precisa do wrapper de entrada e este é o botão Enviar. Botão com o tipo de enviar e, em seguida, o texto de pesquisa.Isso deve levar-nos agora a formar. Vamos verificar se há erros. A classificação de estrelas de um a cinco. Temos o preço de baixo para alto e alto para baixo. Então eu vou enviar botão na parte inferior. Nós também queremos que esta imagem de praia seja parte do cabeçalho também. Dentro desta seção de cabeçalho, logo após o formulário, precisamos ter certeza de que esta imagem está recuada no mesmo nível que a nossa navegação. Se nós rolar para cima e, em seguida, ir para o nosso navegador de pesquisa e manter um olho sobre esta linha que vemos no editor de texto. Agora podemos começar nossa imagem, então img. A fonte assim como antes, vai ser igual a encaminhar imagens de barra que está dentro da pasta pública, a praia d.JPEG. Então vamos trazer o conteúdo do bloco. Salve e recarregue o navegador. Agora, temos a imagem dentro do cabeçalho. Nós também temos alguns trabalhos de limpeza para fazer logo abaixo e isso é apenas o consentimento do index.pugfile. Vá para index.pug. Em seguida, podemos remover nossos exemplos de anteriormente. Podemos mover outra lista, nossos links e array. Não precisamos da imagem. Não precisamos do texto ou do título. Vamos apenas deixar no lugar os layouts estendidos e o conteúdo do bloco e fora para o navegador. Agora, nós só temos o conteúdo do cabeçalho do nosso arquivo de layout. Lá vamos nós. Há o nosso conteúdo de cabeçalho agora em vigor. Em seguida, vamos continuar olhando para o uso de mix-ins, que são uma ótima maneira de reutilizar o mesmo código em vários templates. 14. Mixins: Uma das coisas que normalmente queremos evitar ao codificar é a repetição. Se reutilizarmos o mesmo código mais de uma vez, muitas vezes faz sentido fazer as coisas de forma um pouco diferente. Felizmente, Vue nos dá a oportunidade de usar o que é chamado de mixins. Se olharmos para a versão final aqui. Veja os nossos hotéis aqui na página inicial, por exemplo. A mesma estrutura de hotel que você vê aqui. Além disso, o layout é usado se executarmos uma ferramenta de pesquisa. Aqui temos os nossos hotéis listados que seguem um mesmo padrão. Se você fizer uma pesquisa e preencher todos os campos apenas aqui, clique em pesquisar. Onde você vê nossos resultados de pesquisa siga um layout e padrão semelhantes aos nossos hotéis na página inicial. Este é um bom caso de uso para um mixins mesmo que os dados do hotel são diferentes, como a descrição e também o título, podemos fazer partes dos mixins dinâmicos. É realmente flexível de usar. No arquivo index dot pug dentro do Visual Studio Code, vamos começar adicionando as informações do hotel que precisamos para começar. Começando com os invólucros e, em seguida, ligar para todos os hotéis. Basta ter conteúdo de bloco, certifique-se de que você tem isso pretendido. Então podemos adicionar nossa div externa. Invólucro de sublinhado externo. Aqui dentro também queremos ter um segundo invólucro para cada hotel individual. Empacotador de sublinhado do hotel. Em seguida, o h2 de hotéis. Este título de nível dois também vai ter um link. Logo depois disso, vamos adicionar o nosso link, que vai ligar para todos os hotéis que estão disponíveis. Adicione um href, que está indo para link para a frente barra todos. Em seguida, entre colchetes um texto de “ver tudo” você vai salvar isso e, em seguida, ir para o navegador na página inicial e, em seguida, atualizar. Na parte inferior temos o nosso título de hotéis e, em seguida, teremos um link que iremos conectá-lo mais tarde para ver todos os hotéis disponíveis no banco de dados. A razão pela qual temos este link para ver todos os hotéis, é porque os hotéis que serão exibidos na página inicial só serão restritos a nove hotéis aleatórios puxados do banco de dados. Isto é para que a página inicial não fique muito lotada quando temos muitos hotéis dentro do nosso banco de dados. Agora vá em frente e adicione um hotel fictício. Você pode ver como isso está parecendo. Após os nossos links e no mesmo nível que o nosso h2, podemos adicionar um invólucro de hotel, então ponto hotel ninho. Aqui dentro vamos ter um par de seções diferentes. O primeiro será para a imagem do hotel. Hotel IMG. Esta vai ser a seção que vai aparecer no lado esquerdo e vai ter uma imagem do hotel que vamos então ligar para a descrição completa do hotel. Precisamos de uma ligação com o REF. Podemos deixar isso vazio por enquanto, porque esses dados serão dinâmicos e serão vinculados ao hotel atual que estamos vendo. Depois daqui vamos adicionar uma imagem que é a imagem principal do hotel e poderíamos apenas adicionar uma imagem fictícia agora. Imagens de barra para frente barra hotéis. Em seguida, podemos selecionar qualquer hotel que queremos da nossa pasta pública. Vamos soltar hotéis para baixo e você pode escolher qualquer uma dessas imagens de lá. Eu só vou para o hotel um ponto JPEG, e assim como este link acima, também será dinâmico também e as informações serão puxadas para dentro do banco de dados e, em seguida, podemos pegar a imagem correta. Depois desta seção de imagem do hotel, vamos adicionar uma nova seção cercada por uma div chamada informação de sublinhado do hotel. Isto irá conter informações sobre o hotel, tais como o nome do hotel, a classificação de estrelas, o país e também o preço por noite. O nome do hotel também será um link como esta imagem, que também irá ligar para a vista completa do hotel, que irá mostrar uma descrição alargada. Adicione o nosso link circundante com um href vazio por enquanto. Nosso título do hotel vai entrar em um elemento h3. Podemos adicionar um texto fictício do hotel um. Em seguida, uma regra horizontal separa o título do resto das informações. Agora é apenas um caso de adicionar alguns elementos p. O primeiro é para a classificação de estrelas. Podemos definir para ser o que quisermos, por enquanto. Vamos para quatro. O país: Jamaica. Então, finalmente, o custo por noite. Lembre-se que isso é apenas alguns dados fictícios para que possamos ver a estrutura. Então vamos ver como isso está parecendo. Há a nossa secção de imagens acima e, em seguida, as informações do hotel com o nome, classificação de estrelas, o país e também o preço. Ótima. Agora temos um hotel na página inicial. Também precisamos criar uma visão para vincular a você quando o usuário clica neste link de todos os hotéis. Vamos para o Visual Studio, abrir a barra lateral e, dentro das vistas, podemos criar a nossa nova vista chamada todos os hotéis sublinhados dot pug. Dentro deste modelo, também precisamos estender o layout. Também precisamos adicionar conteúdo de bloco. Agora, como você vai compartilhar uma vista semelhante ao hotel a partir da página inicial. Se formos para o índice de pontos pug e ele irá copiar todo o caminho do custo por noite até o hotel. Esta é a div individual do hotel. Vá para todos os hotéis e, em seguida, podemos adicionar o nosso invólucro. Então dot hotel sublinhado wrapper, recuá-lo em um nível e, em seguida, podemos colar no código do último vídeo. Certifique-se de que este é apenas recuado em um nível e certifique-se de que todos os nossos hotéis dot pug arquivo está salvo. Se formos para a nossa página inicial, agora não poderemos ver a vista na parte inferior. É porque ainda não configurou o roteamento para lidar com esta barra direta todos. Mas você já pode ver que repetimos o mesmo código de hotel, tanto dentro do modelo de todos os hotéis quanto dentro do índice de pontos pug. Agora é a nossa oportunidade de reduzir o nosso código movendo este hotel para um mixin dentro da pasta views, dentro da barra lateral. Vamos criar uma nova pasta chamada mixins. Dentro da nossa pasta mixins, eu vou criar um novo arquivo que é chamado sublinhado hotel dot pug e este vai ser o arquivo para o nosso mixin. Eu sei que gostaríamos de começar um nome de mixin com um sublinhado, mas isso é totalmente com você. Começamos usando a palavra-chave mixin seguido por um nome que queremos dar a este mixin. Hotel Mixin então podemos ir e copiar o código do hotel. Nós já temos em nosso índice de ponto pug. Nós temos este hotel todo o caminho até a nossa classificação de estrelas e custo por noite. Copie isto. Então, se formos para o nosso mixin que é sublinhado hotel. Cole isso e certifique-se de que está recuado corretamente. Uma camada de nível e, em seguida, um nível adicional para a nossa imagem e informações. Salve este arquivo e isso é tudo o que precisamos fazer para criar nosso mixin. Agora, index dot pug file, então precisamos incluir este arquivo mixin, que acabamos de criar. Depois estende layout. Também podemos incluir o nosso mixin adicionando o caminho do arquivo. Mixins, que é o nome da pasta, barra de sublinhado hotel. Não precisamos adicionar a extensão de ponto pug. Então precisamos remover o código do hotel e substituí-lo pelo nome que demos ao mixin. Corte ou exclua esta seção do hotel a partir do fundo e, em seguida, adicionamos o nosso mixin com mais hotel. Este nome do hotel é o nome que demos ao mixin dentro do arquivo. Sublinhe hotel dot pug. Este é um nome que você define bem no topo. Se agora salvarmos isso e depois para a página de índice clicando no logotipo e eu rolar para baixo, você pode ver que temos um problema com os recuo. Vamos verificar isso e este é um índice de ponto pug, sobre o nosso índice de ponto pug, e parece que isso não está completamente alinhado com esta linha. Esses pequenos erros são coisas que precisamos ter cuidado com o recuo. Certifique-se de que tudo funciona corretamente. Vamos tentar recarregar isto. Lá está o nosso hotel de volta na página inicial. Mas desta vez puxado de um mixin. Agora podemos fazer o mesmo com a página de todos os hotéis dentro do arquivo de todos os hotéis dot pug. Também podemos incluir o mixin da mesma forma que o índice. Após a nossa declaração estende, podemos incluir o nosso mixin, que novamente é o caminho do arquivo de mixins, barra direta sublinhado hotel. Agora podemos substituir este código de hotel de ponto hotel até o custo por noite. Em seguida, substitua isso pelo mixin usando plus hotel. Agora nós substituímos uma seção de código de dois arquivos e adicionamos em um mixin. Voltaremos para mixin em breve, passando também dados para eles sobre cada hotel no banco de dados. Junto com também criar mais mixins para você, como vamos. Nosso código agora é um pouco mais curto agora, incluindo isso e ele será usado mais algumas vezes neste projeto também. Em seguida, vamos passar para o roteamento e como podemos usá-lo para alternar entre páginas em nosso aplicativo. 15. Roteamento básico: Se formos para o Visual Studio Code, e no momento, se você entrar na pasta de rotas e, em seguida, clicar no index.js, temos apenas uma rota configurada no momento, e isso é para a página inicial. Agora vamos ver como adicionar mais rotas também e se o roteamento nos permitirá lidar com o que acontece quando uma URL é visitada. Primeiro, não vou usar o arquivo users.js, que foi incluído com o gerador express. Então, podemos ir para baixo e excluir users.js, para que possamos excluir isso do nosso projeto. Em seguida, dentro do app.js, clique no arquivo principal aqui. Também temos duas referências ao arquivo deste usuário, que também podemos excluir. Primeiro de tudo, podemos remover essa variável, que aponta para as rotas do usuário. Então exclua isso, deixando apenas nosso arquivo de índice principal. Em seguida, um pouco mais para baixo, teremos um app.use que define queremos usar o roteador deste usuário no caminho do arquivo do usuário apenas aqui nós. Assim, também podemos remover isso. Agora volte para o nosso roteador index.js arquivo. Vamos fechar algumas destas abas. No topo deste arquivo temos duas variáveis. Temos uma variável Express e também uma variável de rota aqui. Temos estes para que possamos usar a funcionalidade Router que vem com Express. Primeiro de tudo, exigimos Express, que é um pacote de nó e isso está dentro da pasta de módulos de nó. Se necessitarmos de quaisquer pacotes de dentro dos módulos de nó, que é apenas aqui, nós só precisamos referenciá-lo pelo nome do módulo. Se estamos exigindo qualquer um do arquivo que não está dentro da pasta módulos nó, vamos precisar adicionar o caminho do arquivo completo antes do nome. Depois de definir nossa variável Express, definimos para abrir a instância do roteador Express e armazená-la em uma variável de roteador. Esta variável de roteador também é usada aqui, e também quaisquer rotas futuras também. Em seguida, usam.get aqui porque estamos lidando com um pedido get. Lembre-se quando um usuário visita qualquer página no navegador, esta é uma solicitação get. No último vídeo, adicionamos um link para encaminhar barra todos. Adicionamos isso em nosso modelo index.pug, apenas aqui. Isto foi para fornecer um link para todos os hotéis. Mas ainda não tratamos da rota. Passamos para a página de índice e selecionamos este link. Vemos que tomamos para avançar barra todos, mas na parte inferior temos uma mensagem de Not_Found. Nós vemos todo o conteúdo do cabeçalho apenas um pouco ainda porque este conteúdo foi adicionado ao arquivo de layout principal. Então agora podemos ir em frente e escrever nossa própria rota para lidar com a barra direta todas as rotas de hotéis. Então, de volta no index.js, onde vamos estar lidando com todas as nossas rotas, podemos começar como acima com o roteador e esta é uma solicitação get então usaremos .get. Dentro daqui, queremos que isso se aplique à barra dianteira todas as rotas, e outras funções como o segundo parâmetro. Então função que leva na solicitação, e também os objetos de resposta. Estes dois nomes de variáveis podem ser qualquer coisa que você preferir. Em seguida, abra as chaves e adicione um ponto-e-vírgula no final. Solicitação é um objeto que contém todas as informações da solicitação HTTP. Como exemplo, usaremos isso em breve para acessar dados de dentro de um formulário, que é transmitido junto com a solicitação. A resposta, por outro lado, é o que queremos enviar de volta quando recebemos um pedido. Então solicitação é os dados que entram no servidor, e, em seguida, a resposta é uma resposta do servidor. Se você dar uma olhada acima rotas out-of-home, Temos res.render um modelo de página como uma resposta do servidor. Nós também olhamos para res.send mais cedo também. Aqui também podemos renderizar o nosso modelo de todos os hotéis que criamos apenas aqui. Então dentro de router.gets/all que podemos dizer, res.render, passar em nossos modelos de all_hotels. Então, como um objeto, podemos passar em nosso título de todos os hotéis. O ponto-e-vírgula no final aqui. Agora podemos testar isso indo para o navegador, clique em “Salvar” e, em seguida, atualizar. Certifique-se de que você só avança/todas as rotas e, em seguida, role para baixo até a parte inferior. Agora podemos ver este hotel, que adicionamos como uma mistura no último vídeo. Vamos também testar isso mais uma vez indo para a página inicial, clicando no “Logotipo”, clicando em “Ver tudo”, e mais uma vez podemos ver que isso ainda está funcionando. Então agora temos duas rotas no lugar. Um para todos os hotéis e outro para a página inicial. Esta é uma introdução básica ao manuseio de rotas com Express. No próximo vídeo vamos olhar para a passagem de dados para o URL, quando nós encoberto rotas parâmetros. 16. Parâmetros da rota: Uma das coisas que temos que lidar ao rotear é que nem sempre sabemos qual será a URL exata. O que quero dizer é que se imaginarmos a rota de um usuário, cada usuário tem um ID de usuário exclusivo. Isso pode ser algo como nosso localhost ou nosso URL do site, usuários de barra direta. Em seguida, barra um nome de usuário, que pode ser praticamente qualquer coisa. Esta seção de usuário que temos aqui, provavelmente não será conhecida antecipadamente para o desenvolvedor. Esta seção é algo que precisamos lidar com antecedência. Para isso, podemos usar parâmetros de rota para criar um segmentos dinâmicos na URL. Se formos para o index.js, que lida com todas as nossas rotas, vamos começar duplicando nossa barra direta todas as rotas no último vídeo. Copie esta seção e adicione-a logo abaixo. Podemos então dizer roteador expresso quais partes da URL queremos ser dinâmicos. Após barra todos, podemos então ir em frente e adicionar barra e , em seguida, criar um segmentos dinâmicos usando dois pontos. Então um nome que queremos dar a esta seção. Este nome pode ser qualquer coisa de nossa escolha. Em seguida, dentro de nossa função logo abaixo, podemos então acessar os dados de nome de nossa URL. Usamos o objeto de solicitação. Lembre-se que dissemos que isso contém informações das solicitações HTTP. Primeiro de tudo, podemos acessar os objetos de solicitação, então.params para acessar os dados nos parâmetros de URL, seguido por essa variável de nome foram adicionados após os dois pontos. Então solicest.params.name. Então, se vimos isso dentro de uma constância, então o nome const é igual aos nossos parâmetros. Esses dados também podem ser passados para os modelos a serem usados junto com o título da página. Após o título de todos os hotéis, adicione uma vírgula. Então também podemos passar esses dados de nome. Estes dados de nome são passados para todos os modelos de hotéis juntamente com este nome. Então clique em nosso arquivo hotels.pug. Em seguida, esta variável pode ser facilmente acessada no modelo apenas fazendo referência ao nome. Na parte inferior do arquivo, p é igual a nossa variável de nome. Depois, para o navegador. Agora, se formos para os usuários de barra e, em seguida, para a frente barra, podemos adicionar qualquer nome para aqui, pressione enter. Na verdade, isso foi tudo um aumento e hit enter. Lá no fundo vemos agora que eu chamaria Chris, que nós passamos. Podemos tentar novamente com qualquer coisa que quisermos acrescentar. Esses dados são então capturados do nosso URL, armazenados dentro dos objetos request.params. Em seguida, podemos passar é agora para baixo para o nosso modelo para usar de qualquer forma que escolhermos. Também podemos adicionar quantos segmentos dinâmicos precisarmos na URL. Em vez de apenas ter um em index.js, assim como este. Também podemos adicionar este segmento dinâmico em qualquer seção que quiséssemos. Também podemos pegar a idade e armazená-la em uma variável de idade. Mas tudo isso depende do tipo de site que você está criando. Outra coisa que também podemos fazer se não quisermos pegar os dados dentro das rotas, podemos também adicionar uma estrela. Assim como este, nós poderíamos adicionar uma estrela e, em seguida, esta rota, apenas aqui, toda esta função será então executado cada vez que uma rota segue esta barra direta todos, e então para frente barra quaisquer dados depois disso. Esta estrela pode ser colocada em qualquer seção do URL que você quiser. Isso será útil para lidar com nossos nomes de usuário, mesmo que não quiséssemos pegar os dados reais e armazená-los em uma variável. Agora vou remover este código do vídeo. Dentro de todas as rotas, vamos remover a seção roteador.get, pois não precisamos disso para este projeto. Então todos os hotels.pug, tudo que precisamos remover é p igual ao nome, e restaurar esta caixa como era. Mas voltaremos aos parâmetros de rota um pouco mais tarde neste projeto, onde passaremos todos os IDs de hotel junto com informações de reserva. 17. Padrão MVC: Vamos estruturar este projeto usando o que é conhecido como o padrão MVC. MVC significa Model View Controller e é basicamente uma maneira de separar nossa lógica em diferentes partes. No topo do diagrama aqui vemos o modelo, o modelo define como nossos dados devem ser estruturados. Como exemplo, as informações do nosso hotel terão um modelo e este modelo permanecerá em que cada hotel precisa ter um nome. Seu nome deve estar presente, e também uma corda que já não se referia ao Islã casaco. Também o nosso modelo de hotel deve ter uma descrição, uma imagem, um preço, e assim por diante. Em seguida, e provavelmente o mais fácil de entender é a vista. A visão, que como soa é basicamente a interface do usuário. Já abordamos isso na seção em que criamos modelos de página, então isso deve ser bastante simples. Depois há o controlador. Este controlador pode atualizar a exibição ou enviar dados para o modelo. Um uso típico para um controlador em nosso projeto será pesquisar nosso modelo de hotel para partidas com base em um país, então seus dados podem ser passados para o modelo ou para a vista. Na verdade, já fizemos algo semelhante no último vídeo, onde analisamos os parâmetros da rota. Em vez do índice de rotas ou arquivo js, usamos um controlador para obter o nome da URL, em seguida, passamos este nome para a vista para mostrar na página inicial. Também usaremos o controlador para fazer outras coisas, como validação de formulário quando um usuário se inscreve antes de enviar esses dados para o modelo de usuários. Este é um padrão que seguirá para o resto desses projetos. Está se mantendo bem estruturado e organizado. Pode parecer um pouco confuso para começar, mas vamos ter muita prática e em breve ficará claro. No próximo vídeo, vamos começar esse processo de separação criando nossos controladores. 18. Usando controladores: No momento, estamos lidando com a lógica geral dentro deste arquivo de roteadores index.js. Navegamos para uma determinada rota e, em seguida, toda a lógica é tratada dentro desta função e também esta que está abaixo. Isso funciona bem para aplicações pequenas, mas em breve superaremos esse tipo de configuração. Vou separar essa lógica dentro e criar uma pasta de controladores na raiz de todos os projetos. Vamos até a barra lateral e criar uma nova pasta chamada controladores. Verifique se isso está no mesmo nível de todas as pastas de nível, como o bin e os módulos de nó. Dentro daqui podemos adicionar um novo arquivo JavaScript para cada controlador que você deseja criar. Vamos clicar em controladores e, em seguida, criar um novo arquivo. Vou criar um controlador separado para a lógica relacionada ao hotel. Em seguida, um mais tarde para os usuários manterem as coisas organizadas. Vamos começar criando o hotel controller.js. Controlador com C maiúsculo e, em seguida, aperte “Enter”. Este arquivo será uma série de funções e nós basicamente estaremos terceirizando esta seção de funções do nosso roteador. Vamos pegar essa lógica, colocá-lo em nosso controlador, e então ele faz referência dentro de nosso roteador. Vamos começar em nosso hotel controller.js e começar com exportações A. Isso permitirá que este código esteja disponível em outras partes do nosso aplicativo. Em seguida, damos a esta função exportada um nome de nossa escolha. Tente mantê-lo descritivo, porém, para que saibamos o que cada um estará fazendo. Vamos chamar isso de página inicial e, em seguida, definir isso para uma função. Esta é uma função que leva os objetos de solicitação e resposta. Vamos adicioná-los, para que tenhamos acesso total a eles dentro de nossa função. Então, se passarmos para o nosso index.js, podemos então cortar o res.render de nossas rotas domésticas e, em seguida, adicioná-lo ao nosso controlador e agora também seria um bom momento para alterar o título da página. Vamos definir isto para “Vamos viajar”. Agora temos nossa lógica separada, então agora podemos passar para o nosso arquivo de roteadores index.js. Podemos remover esta função deixando em apenas as rotas iniciais e, em seguida, precisamos fazer referência ao nosso controller.homepage célula host. Vamos adicionar hotel controller.homepage e, em seguida, dar um salvamento. Se agora formos para o navegador e, em seguida, clicar em “Recarregar” e ir para a página inicial, veremos agora uma mensagem dizendo que o site não pode ser acessado. Se formos ao Visual Studio e, em seguida, abrir o terminal, podemos ver que o aplicativo esmagou. Isso é porque precisamos exigir este arquivo controlador do hotel antes que possamos acessá-lo. Atualmente, estamos tentando acessar o controlador do hotel, mas ainda não importamos esse arquivo. Para fazer isso, vamos para o topo do nosso arquivo e, em seguida, podemos adicionar um comentário. Então exigem controladores e, em seguida, configurar uma constante, controlador de hotel assim const, que corresponde a este nome apenas aqui e, em seguida, podemos exigir o arquivo. Precisamos adicionar o caminho do arquivo porque isso não está dentro da pasta módulos nó. Isso está dentro da pasta de controladores. Controladores, controle de hotel e clique em “Salvar”. Agora devemos ver o aplicativo foi recarregado. Temos agora o texto verde. Para o navegador, e o aplicativo agora está funcionando mais uma vez. Então podemos fazer o mesmo com a rota de todos os hotéis também. Primeiro, vamos ao controlador do hotel e criar isto. Assim como antes, podemos dizer exports.listallhotels. Exceto a função E que leva na solicitação, a resposta e, em seguida, sobre para um roteador. Podemos pegar o res.render a partir destes, barra todos. Cole isso em, e, em seguida, referências função dentro do nosso roteador. Então remova a função de antes. Mais uma vez, queremos o arquivo do controlador do hotel. Mas desta vez queremos listar todos os hotéis. Agora, vamos tentar este roteador no navegador. Então, a rota para a frente barra tudo, role para baixo e isso ainda funciona para. Então, no momento, não ganhamos muito por termos controladores separados. Mas esses controladores logo se tornarão mais complexos. Especialmente quando começamos a lidar com bancos de dados e obter os pontos de vista, juntamente com a verificação de quaisquer dados do usuário para validação. Faz sentido começar a separar as coisas desde o início, que as coisas não fiquem muito confusas à medida que nosso projeto cresce. 19. Usando middleware: Middleware é um conceito realmente importante para aprender, e é usado bastante na construção de aplicativos Express. Enquanto usaremos middleware para seus projetos, eu só queria lhe dar uma introdução rápida primeiro, então pelo menos entendemos o básico. Se formos para o Visual Studio, em seguida, abrir nosso controlador de hotel, temos os objetos de solicitação e resposta para cada roteador. Solicitação é os dados que entram e resposta são os dados que são retornados a partir do servidor. Podemos usar middleware intermediário para basicamente alterar nossos dados ou fazer algo com ele. Basicamente, um middleware age como uma série de funções pelas quais passamos. Um exemplo de seu uso em nosso projeto, será quando um usuário se inscrever. Dentro deste arquivo hotelController.js, quero mostrar-lhe um exemplo rápido e esses exemplos são apenas para fins de demonstração. Você não precisa seguir adiante se não quiser. Vamos criar mais espaço e eu vou criar mais duas funções. Exporta, cadastre-se, passando os objetos de solicitação e resposta. A seção de inscrição vai lidar com a validação de dados. Isso irá validar qualquer informação do usuário como ele vem em , então este segundo vai ser a funcionalidade de login. Exports.login, passando o seu pedido e resposta e isso vai lidar com o login. Digamos que queremos ter a funcionalidade para primeiro registrar o usuário. A seção de inscrição também valida os detalhes do usuário, em seguida, segue por login, o usuário em. Esta é geralmente a funcionalidade que queremos. Quando nos inscrevemos em novos sites, muitas vezes queremos estar logados imediatamente. Todo o código para lidar com ambas as seções pode ser feito dentro de um único controlador. Mas para este caso, faz sentido dividir as coisas em ações separadas. Isso ocorre porque não só queremos nos cadastrar e, em seguida, fazer login imediatamente, como também queremos que a funcionalidade para este login seja separada. Apenas quando um usuário retornou e, em seguida, apenas quer fazer login. Vamos evitar repetir o mesmo código de login mais de uma vez. Como é que o Express sabe que queremos executar a função de inscrição e, em seguida, o login? Primeiro de tudo, precisamos passar em um terceiro argumento para nossa função. Nós geralmente chamamos essa variável próxima, com suas necessidades chamar próximo dentro de nosso corpo de função, quando estamos prontos para passar para o próximo pedaço de middleware, então nós chamamos próximo dentro aqui. Quando queremos que ele mova para baixo a cadeia para o próximo pedaço de middleware. Ainda há mais uma coisa a fazer. Embora chamemos próximo dentro desta função, ele não sabe automaticamente qual é o próximo pedaço de middleware. Tudo o que sabemos que queremos passar para login, Express não sabe isso por padrão. Fazemos isso declarando a ordem do middleware dentro do arquivo do roteador para o roteador index.js. Podemos então configurar um novo exemplo de rotas, temos router.gets. Vamos criar um rotas de inscrição com a barra dianteira e, em seguida, podemos adicionar nossos controladores. O HotelController.sign-up. Se você só queria usar esta seção de inscrição, nós apenas usaríamos um como este. Podemos adicionar mais de um. Podemos então acompanhar com HotelController.Login, e podemos passar como muitos destes como você deseja usar e, em seguida, estes executados em sequência, cada um exigindo a próxima chamada dentro da função. Primeiro de tudo, vamos usar a função de inscrição, em seguida, vamos passá-la para a função de login e como estas são agora funções separadas, isso faz sentido quando queremos criar uma rota apenas para entrar. Se tivermos, router.gets, quando chegarmos a este estágio, também queremos um login rotas e, em seguida, podemos reutilizar HotelController.login. Agora estamos usando a mesma funcionalidade de login sem repetir o mesmo código em várias funções. Podemos ver que isso está funcionando adicionando alguns logs de console para todos os middleware sobre o controlador, pouco antes da próxima podemos fazer um log de console, e, em seguida, uma simples mensagem de middleware de inscrição, c minúscula, em seguida, copiar este em seguida, adicione isso em nosso login. Mudanças para ser middleware de login, salvar nossos arquivos e mais para os projetos. Temos de ir para as nossas rotas, que estabelecemos aqui. Avançar barra de inscrição, neste final, em seguida, pressione enter. Agora, apenas se cadastrar direciona para o console e crie mais espaço. Agora vemos dentro do console na parte inferior temos middleware de inscrição chamado primeiro, que você esperaria porque isso é chamado primeiro e o controlador, em seguida, temos o middleware de login logo depois. Isso significa que o roteador agora está passando por ambas as partes do nosso middleware na sequência correta. Se formos em frente, porém, e comentários som é a próxima função, salve o arquivo, em seguida, recarregue o navegador nas rotas de inscrição. Mais em um terminal agora vemos que apenas o middleware de inscrição foi executado. O código chegou a esta seção apenas aqui, então ele não foi passado para o próximo pedaço de middleware porque nós não chamamos a seguir. Esta é uma introdução básica de como o middleware funciona. Vou remover essas duas funções, pois não precisamos delas em nossos projetos. Eles apenas para demonstração e também as duas novas rotas para configurar no index.js e, em seguida, verificar isso funcionando bem. Vá para as rotas de casa e agora estamos de volta ao normal. Podemos carregar essas rotas mais tarde quando voltarmos a esta parte do aplicativo. Finalmente, também podemos definir um middleware para usar em todo o site, vez de apenas uma rota específica no app.js, que é o arquivo principal. Clique sobre isso e role para baixo até a seção com app.use, que é apenas aqui. Aqui você pode ver app.use, e é aqui que podemos configurar qualquer middleware, como analisador de cookies para usar para todas as rotas. Abaixo podemos ver que temos a configuração do roteador de índice aqui também. Tanto para isso como para todo o middleware, podemos primeiro adicionar uma rota como o primeiro argumento para restringir o middleware para aplicar somente a essas rotas específicas. Há também muitos dos usos para middleware também, tais como plugins de terceiros e vamos olhar para estes mais ao longo deste projeto. 20. Atualização importante: mLab agora parte do Mongo: À medida que avançamos através do seguinte projeto, usamos um banco de dados hospedado em um serviço chamado mLab. mLab é um serviço totalmente gerenciado de banco de dados Cloud que usamos para hospedar nosso banco de dados Mongo. Como podemos ver na página inicial aqui, mLab foi adquirido pela própria Mongo. Portanto, agora precisamos usar esse serviço em seu lugar. O serviço é chamado Mongo Atlas e é uma troca bastante simples, já que acabamos de configurar um banco de dados de forma semelhante e, em seguida, usar a cadeia de conexão fornecida em nossos projetos. Mongo Atlas também é gratuito para se inscrever e tem um nível gratuito para desenvolvimento também. Então vamos começar indo para mongodb.com/cloud/atlas. Se você já usou o Atlas antes e já tem uma conta, você pode ir em frente e fazer login. Caso contrário, você precisará se registrar primeiro antes de criarmos nosso primeiro cluster de banco de dados. Então, se você precisa ir em frente e se inscrever, mas eu vou descer e fazer login no Atlas agora. Então, uma vez que você está configurado e registrado, precisamos ir em frente e criar um novo cluster. Criar um novo cluster pode aparecer como parte do processo de registro. Então vamos em frente e construir um novo cluster que nos permitirá selecionar nossa região ou nosso plano. Existem algumas opções pré-configuradas e você pode deixar os padrões como estão ou mudar para a região mais próxima. Então eu vou selecionar as regiões mais próximas eu. Além disso, fique atento ao rótulo de nível gratuito, que não está em cada um deles. Tudo o resto, vou manter-nos como padrão. Apenas certifique-se de ver o custo baixo na parte inferior para ser livre. Em seguida, podemos ir em frente e criar nosso cluster clicando no botão verde. Um novo cluster pode levar alguns minutos para ser configurado. Então eu vou embora agora e volto assim que tudo isso acabar. Então este é o meu cluster tudo agora configurado e o próximo passo é criar um novo usuário. Se formos para a guia de segurança e, em seguida, ir para adicionar novo usuário, este usuário vai ser para nós mesmos. Então, podemos selecionar o atlas Admin, que é uma das opções sobre os privilégios. É claro que você pode adicionar mais usuários com permissões diferentes em uma data posterior, se necessário. Em seguida, adicione um nome de usuário e senha de sua escolha. Eu vou adicionar um nome de usuário e uma senha e depois ir em frente e adicionar nosso usuário. O próximo passo é adicionar o endereço IP dos nossos próprios computadores à lista branca do Mongo. Esse é um recurso de segurança, portanto, somente nossa máquina tem permissão para acessar nosso cluster. Talvez seja necessário ter isso em mente em um estágio posterior ao implantar o aplicativo em outros serviços. Então, vamos para a guia Segurança e clique em 'Lista branca de IP'. Adicionar endereço IP. Recebemos um pop-up e podemos confirmar que queremos usar nosso endereço IP atual clicando neste botão aqui. Em seguida, vamos obter o endereço IP adicionado e este campo segue. Então podemos ir em frente e confirmar. Você pode precisar dar isso alguns momentos para obter a configuração se você vir este spinner pendente apenas aqui. Se você não usou o Mongo Atlas antes, podemos verificar o conteúdo do nosso banco de dados clicando no botão de coleções. O botão de coleções está na guia de visão geral e, em seguida, coleções. Isso nos dá acesso a todas as coleções que nosso banco de dados possui e podemos interagir com nossos dados. Adicione novos campos, adicione novas coleções e veja todas as informações que estão armazenadas em nosso banco de dados. É claro que ainda não temos dados, mas é aqui que você pode acessar todas as informações de nosso banco de dados, como hotéis e usuários, que vamos continuar e salvar de nosso projeto. Finalmente, precisamos de uma cadeia de conexão. Se formos para a visão geral e, em seguida, clique em 'Conectar'. A opção que queremos usar é conectar seu aplicativo. Há também opções aqui para usar MongoDB Compass e também se conectar com o Mongo Shell. Ambos conectar seu aplicativo é o que precisamos para agora. Também precisamos alterar a versão do driver para ser a versão dois. Em seguida, vemos a nossa cadeia de conexão é exibida apenas aqui e nós também podemos copiar isso para a área de transferência. Esta cadeia de conexão é a que vamos usar em nosso projeto no lugar da fornecida pelo mLab. Isso é feito para esta atualização. Basta manter isso aberto no navegador e você pode usá-lo no próximo vídeo quando nos conectarmos ao nosso banco de dados. Além disso, basta ter em mente ao passar pelo curso, você precisará passar por essas pesquisas do Mongo Atlas para ver seus dados em vez de mLab, como eu ocasionalmente faço na classe. Tudo o que você precisa fazer para ver isso é clicar no botão coleções nós olhamos antes. 21. Primeiros passos com Mongo: Neste projeto, vamos estar lidando com um pouco de informação. Teremos informações sobre como os hotéis que temos e usamos quaisquer pedidos que você fez e também quaisquer dados de sessão que entraremos em mais tarde. Claro, então precisamos de um lugar para armazenar todos esses dados, e eu vou estar usando um banco de dados MongoDB, neste curso, que é realmente popular banco de dados para aplicativos Node, juntamente com muitos disso também. MongoDB nos permite armazenar nossos dados em um formato semelhante a JSON. Isso torna muito fácil trabalhar com, especialmente quando usamos para aplicações de tipo JavaScript. Nós já trabalhamos com dados JSON, então isso deve ser bastante familiar. Também facilita a aprendizagem das coisas. Há também muitas consultas úteis que ele disponibiliza. A consulta é uma pesquisa em nosso banco de dados, e Mongo torna isso muito fácil. Temos muitas maneiras diferentes de realizar pesquisas para obter apenas os dados exatos que precisamos. Por exemplo, uma das consultas que vamos usar é pesquisar o banco de dados usando um termo de pesquisa que eles usam Enter e, em seguida, também filtrado pela classificação de estrelas e disponibilidade, e, finalmente, procurou os resultados na ordem de preço. Vamos também olhar para muitas consultas seção unidade também. MongoDB também é livre e open source também. Também usarei uma versão hospedada neste curso, que também é gratuita. A versão hospedada vai ser sobre mLab, que você pode encontrar nosso MLAB.com. Esta solução hospedada também é conhecida como um banco de dados, como um serviço. Basicamente nos permite ir rapidamente com o MongoDB. Nosso banco de dados é então hospedado nas fotos da nuvem. Você também pode configurar Mongo localmente, temos em nosso banco de dados já hospedado é realmente útil para mais tarde, quando empurrar nosso aplicativo para ser servidor ao vivo. Ele também salva a configuração. A primeira coisa que precisamos fazer é se inscrever para uma conta de usuário, então, se você ainda não tem uma conta no mLab, eu sugiro que você vá em frente e pause o vídeo e, em seguida, inscreva-se agora. Eu já tenho uma conta no mLab, então eu vou fazer o login, então adicione os detalhes de login. Uma vez que estamos logados, agora podemos ir em frente e criar uma nova implantação do MongoDB. Vá para o topo, e clique em criar novo, então temos algumas opções para selecionar, eu vou usar a Amazon para o provedor, então clique sobre isso e, em seguida, o plano sandbox gratuito, que é bom para desenvolvimento e aprendizagem. Selecione esta opção e selecione uma região. A Amazon está hospedada em vários locais em todo o mundo, temos apenas algumas opções para o plano de sandbox, então a AWS ficará bem. Podemos continuar, e podemos selecionar um destes. Em seguida, continuar novamente e, em seguida, podemos adicionar o nosso nome de banco de dados. Vou ligar para o meu, vamos viajar. Continuar. Podemos revisar tudo isso e clicar em Enviar pedido, e lá vamos nós que é o nosso banco de dados vamos viajar em nossa configuração. Nosso banco de dados está vazio, então ele não tem nenhuma coleção. Só fica, se clicarmos nisso, podemos dar uma olhada lá dentro. Sob a aba Coleção vemos que não temos nenhum no momento, e a coleção é apenas uma forma de agrupar nossos documentos, que armazenamos, como exemplo, temos uma coleção de hotel para armazenar nossos registros de hotel, uma coleção de usuário, para loja atribuídos abusos e assim por diante. No topo, também temos um URI que podemos usar em nosso projeto para se conectar a este banco de dados. Há um espaço neste URI para o nosso usuário e também uma senha, então precisamos ir em frente e configurá-lo sob a guia do usuário. Clique nisso e, em seguida, vá para Adicionar usuário do banco de dados. Podemos adicionar um nome de usuário e senha, então eu vou apenas chamar minha viagem como nome de usuário, e viajou como a senha. Crie nosso usuário, ótimo. Agora tenha o nome de usuário e a senha para preencher esses espaços em branco. Mas primeiro há mais uma coisa que precisa ser configurada, e isso é mangusto. JS. Nós somos livres para usar Mongo diretamente se você quiser, mas eu vou estar usando um pacote de nariz chamado Mangusto em vez disso. Mangusto basicamente nos permite dar aos nossos dados alguma estrutura em que é chamado de esquema. Se escrevermos diretamente para Mongo, você pode cometer um erro muito facilmente. Se não configurarmos como nossos dados devem ser, Mangusto nos permitirá definir como nossos dados seriam. Por exemplo, terá um esquema de hotel, e isso terá campos como um nome e descrição. Agora podemos responder ao tipo de dados, cada campo deve ser, como uma string, e também restringir os caracteres mínimo e máximo que deve ser, e também se o campo é necessário e assim por diante. Basicamente, ele nos impede de fazer coisas como entrada e uma string de texto em um campo de preço, que deve ser um número. Este pacote também nos permitirá criar nosso modelo, que é o modelo que falamos quando olhamos para o padrão MVC, dado nossos dados alguma consistência. Vamos em frente e instalar Mangusto em nossa aplicação. Vamos fechar o terminal com o Controle C. Então digite NPM i mangusto. Observe que desta vez usando o comando i mais curto, esta é apenas uma abreviação para instalação e se funciona bem. Pressione “Enter” e dê algum momento para puxar do mpm. Estou verificando se isso está tudo bem abrindo nosso pacote.json, e nas dependências agora veremos que temos Mangusto listado aqui. Ao longo de um em nosso app.js, agora podemos configurar nossa conexão. Mais uma vez na barra lateral, podemos abrir app.js. Então feche isso, então a primeira coisa que precisamos fazer é configurar nossa conexão. Precisamos primeiro do pacote Mangusto, que acabamos de importar. Logo após a nossa importação, eu vou usar uma constante, e não importa se você usar uma constante ou uma variável, mas eu vou usar as constantes de agora em diante, então const Mangusto iguais exigem Mangusto, e lembre-se se estamos exigindo um pacote da pasta de módulos de nó, nós simplesmente referenciá-lo pelo nome do pacote em vez de adicionar um caminho de arquivo que leva a ele. Em seguida, podemos configurar nossa conexão usando o método de conexão, modo que é o primeiro acesso Mangusto. Role para baixo no app.set. Vamos configurar a nossa conexão Mongoose, então Mongoose variable.connect e, em seguida, abrir os suportes. Dentro da conexão, podemos passar em nossa conexão URI de mLab, então volte para mLab, copie o URI completo, e como uma string, abra as cotações e, em seguida, cole isso em. Em vez disso, precisamos alterar nosso nome de usuário e senha, então remova o usuário e nosso nome de usuário foi viagem ea senha foi viajar em. Claro, ao lidar com bancos de dados, você quer uma senha mais segura, mas isso é apenas para demonstração. Também ter a NSURI aqui não é a melhor maneira de fazer isso, mas vamos mudar isso para um lugar mais adequado mais tarde. Na próxima linha do Mangusto. Conecte-se, precisamos definir Mangusto. Promessa, P, isso vai ser igual ao global.Promessa, P novamente. Uma vez que começamos a consultar nosso banco de dados, precisamos lidar com a informação que é devolvida para nós. Nas versões anteriores do Mangusto, usamos uma configuração baseada em callback, mas agora podemos fazer uso de promessas que são muito mais simples e fáceis de manter. Podemos definir Mongo para usar a biblioteca Promise como blueband, se quisermos, que podemos obter como um módulo NPM, ou eu vou defini-lo para ser o global. Promessa que você tem aqui, o que nos permite fazer uso das Promises nativas disponíveis no ES6 em vez de instalar outro módulo de nó. Em seguida, sob isso, podemos verificar se há erros de conexão. Nós primeiro verificar, temos uma conexão Mangusto, e depois uma vez que fazemos, podemos chamar.on, .on é um método de nó que adiciona um ouvinte de evento. No nosso caso, queremos listar agora para quaisquer erros, então erro de composição como o primeiro parâmetro e, em seguida, como um segundo argumento, passando uma função de retorno de chamada para exibir esse erro. Vamos criar uma função onde estamos passando erro, que está indo para a saída de quaisquer mensagens de erro para o console da web. Fazemos isso console.error onda, e pode passar esse erro.mensagem. Passe nossa mensagem para o console, então vamos dar isso um cofre e um ponto-e-vírgula nas extremidades e, em seguida, para o navegador ou para o nosso índice e, em seguida, recarregar, e na verdade, precisamos reiniciar nosso terminal após instalar Mangusto, então vamos para o terminal e, em seguida, executar npm run devstart, acená-lo para chutar dentro e, em seguida, recarregar o navegador e verificar tudo que ele ainda funciona bem. Se você não vir nenhuma mensagem de erro dentro do terminal do Visual Studio isso deve ser tudo agora configurado. Se você tiver um erro, verifique se há erros de digitação e também verifique se o URI do banco de dados corresponde ao do mLab, juntamente com o usuário e senha corretos, e uma vez que isso esteja funcionando e você esteja no palco, agora você vai começar a criar nosso modelo Mangusto. 22. Modelos Mongoose: Nós já conversamos um pouco sobre quais modelos, vamos usar um Mangusto configura nossos modelos, e isso manterá nossos dados estruturados, então há menos chance de estragar tudo. Estes modelos são responsáveis por criar dados antes de enviar para o banco de dados juntamente com documentos escritos do banco de dados também. No nosso projeto, podemos começar criando uma pasta de modelos para manter nosso código organizado. Abra a barra lateral e, em seguida, a raiz do projeto, crie Nova pasta chamada Modelos. Agora temos modelos e nossos pontos de vista, e nossas pastas de controladores e este é o padrão MVC que falamos anteriormente. Este modelo que estamos criando será para os nossos hotéis. Isso terá a estrutura para o nome do nosso hotel, descrição do hotel, classificação de estrelas, e assim por diante. Dentro de sua pasta de modelos, crie um novo arquivo, chame-o de hotel.js. Uma vez que usamos mangusto para o nosso esquema, precisamos exigir o módulo de mangusto. Vamos fechar esses arquivos para baixo e concentra-se em hotel.js. Dentro aqui criamos a nossa constante de mangusto e exigem o pacote de mangusto, ponto e vírgula e, em seguida, podemos criar o nosso esquema de hotel, assim const HotelSchema, e isso é igual a um novo mongoose.Schema com um capital S. O esquema irá mapear ou coincidir com os dados dentro do nosso banco de dados, portanto, o que não estamos aqui vai moldar como nossos dados de banco de dados serão construídos. O esquema leva em um objeto dentro dos colchetes, onde podemos começar a construir como cada hotel ficaria. Precisamos de um nome de hotel, então vamos adicionar nosso primeiro fonema de hotel_name. Agora podemos configurar isso como um objeto, queremos que o nome do hotel seja do tipo. Isto vai ser uma string separada por vírgulas. Também podemos adicionar mais algumas restrições a esses dados, também podemos definir se isso é necessário, isso pode ser um valor booleano de true ou false. Se o campo deve estar presente ou em vez disso, podemos simplesmente adicionar uma string com uma mensagem se este campo estiver faltando, como nome do hotel é obrigatório. Eu venho até o fim. Em seguida, podemos definir o número máximo de caracteres para ser 32. Então, finalmente, vamos definir o corte para ser um valor booleano de true. Vamos remover todos os espaços largos do campo desde o início e o fim, deixando apenas os caracteres que respondem. Este é o esquema para o nome do nosso hotel, e podemos ir em frente e adicionar uma configuração semelhante para a nossa descrição. Separado por uma vírgula, podemos pedir o hotel_description. A descrição novamente deve ser o tipo de string necessária. Novamente, podemos definir isso como verdadeiro ou, em vez disso, podemos passar em uma string que será retornado se o campo estiver faltando, então a descrição do hotel é necessária. Nós também podemos cortar qualquer espaço amplo, definir isso para ser verdade. Agora temos o nome do hotel e a descrição, separamos isto com uma vírgula, agora temos um campo para a imagem. A imagem vai ser um nome, então vai ser uma string por enquanto, vamos voltar a essa imagem mais tarde no curso porque é uma ou duas coisas que precisamos lidar para fazer isso funcionar corretamente. Em seguida, temos a classificação de estrelas, a classificação de estrelas vai ser um tipo de número. Também queremos que isso seja exigido como todos os outros campos. Podemos dizer que a classificação de estrelas do hotel é necessária, adicione um comum nas extremidades. Em seguida, definimos o valor máximo para cinco, porque só queremos que a classificação estelar entre um e cinco. Após a classificação de estrelas, é o país, o país é um tipo de string. Isso também é necessário, o texto do país é obrigatório, a vírgula após necessário. Nós também queremos terminar, então este é um valor booleano de true. É tudo o que precisamos no momento para o nosso país. Depois do país, queremos definir o custo por noite. Custo por noite vai ser o tipo de número, pois este será um preço, e também quer que isso seja necessário. Com uma cadeia de custo por noite, é necessário. A última informação que queremos armazenar em nosso modelo de hotel está disponível. Este é o conciso não tripulado se este Hotel está atualmente disponível para venda e este será um valor booleano de verdadeiro ou falso. Vamos definir o tipo como booleano e o único outro campo que precisamos é obrigatório, então a disponibilidade é necessária. Uma vez que você foi em frente e digitou tudo isso, bem no fundo. A última coisa que queremos fazer é exportar nosso modelo para que possamos usá-lo em outros arquivos. Para baixo na parte inferior deve criar um comentário do modelo de exportação. Fazemos isso com exportações de pontos de módulo, responda isso a mongulose.model, o primeiro volume que queremos adicionar é hotel. Hotel é um nome que eu vou dar a este modelo e separado por uma vírgula, nós também passar no esquema do hotel, que acabamos de criar. Bom, agora é assim que o nosso hotel seria construído. Agora configuramos nosso modelo. Significa que ninguém pode simplesmente ir em frente e adicionar campos como quiser. Temos agora um rigoroso conjunto de regras que cada hotel deve respeitar. Mais tarde adicionaremos outro modelo para o nosso usuário também e também para quaisquer pedidos. Nós também podemos moldar como eles vão olhar também. Por agora, porém, vamos ficar com os hotéis. O próximo vídeo é sobre como usar este modelo para criar nosso novo telefone de hotel, para que possamos adicionar novos hotéis ao nosso banco de dados. 23. Criando nosso formulário de upload do hotel: Antes que possamos empurrar novos hotéis para o banco de dados, precisamos criar um formulário HTML, que possamos adicionar os detalhes que queremos inserir. Estas partes formais da nossa seção de administração. Então, vamos adicionar esta rota admin primeiro no index.js. Abra a barra lateral, nas rotas e, em seguida, index.js. Vou descer até o fim do nosso roteador só para a exportação. Vamos fazer um comentário, e eu vou dizer “Admin Routes”. O primeiro que vamos usar é router.get, já que esta é uma solicitação GET. Queremos que isso seja para as rotas de administração de barra direta. Então queremos executar nosso HotelController, eu vou chamá-lo de AdminPage, ponto-e-vírgula no final. Como podemos ver com a área vermelha na parte inferior, ainda não temos este AdminPage no controle, então este deve ser o próximo. Abra a barra lateral e vá para o nosso arquivo hotelController.js, e então podemos adicionar isso à direita na parte inferior. Exporta para AdminPage, será igual à nossa função, que leva os objetos de solicitação e resposta. Então, dentro do corpo da função, o que vamos fazer é um res.render, isso vai renderizar um modelo de administração, e então tomar em um objeto de opções onde vamos passar no título como fizemos anteriormente. O título pode simplesmente ser Admin e, em seguida, adicionar um ponto-e-vírgula no final. Agora, para que o arquivo admin.book exiba isso. Vamos criar este modelo de administração, abrir a barra lateral, em nossa pasta de visualizações, criar um novo arquivo chamado admin com a extensão dot pug. Esta rota de administração vai ser bastante simples. No momento, tudo o que vamos fazer é passar o título e depois criar uma lista desordenada. Isso vai ter alguns links para o administrador usar, como os links para o nosso novo hotel, para editar ou remover hotéis, e para ver quaisquer reservas que foram feitas. Vamos estender nosso layout. Estende o layout na parte superior e, em seguida, substitua o bloco de conteúdo. Recuar um nível que podemos passar em nosso h2, que é o título. Em seguida, quer separar este título com os links com a linha horizontal. Esses três links serão uma lista desordenada. O primeiro item da lista, aninhado dentro, podemos adicionar um a para um link com o href igual para forward barra admin e, em seguida, barra adicionar. Esta vai ser a rota que vai lidar com a adição em novos hotéis para o banco de dados. Os textos de Adicionar novo hotel. Então faremos isso mais duas vezes. Nosso segundo item da lista também é um link. Este href vai para a frente barra admin e, em seguida, para a frente barra editar traço remover. O texto da barra Editar Remover Hotel. Voltaremos a este mais tarde quando olharmos para editar e remover hotéis. O terceiro novamente vai ser para mais tarde também e este vai ser um link que vai ligar para uma rota que é forward barra admin forward slash ordens. O texto de Ver reservas e dar que um salvar. Você pode testar se ele está funcionando indo para o navegador e, em seguida, verificando as rotas de administração de barra direta e, em seguida, pressione e digite. Se rolarmos para baixo, temos o nosso título de Admin, que é passado para os modelos e, em seguida, nossos três links que acabamos de criar. Se formos em frente e clicar em “Adicionar novo hotel” na parte superior, somos levados a encaminhar barra admin forward slash add, que foi configurado apenas aqui. Isso resulta em um erro na parte inferior, porque também precisamos configurar essa rota também, juntamente com um modelo de página. Voltar para o nosso arquivo de roteador, que é index.js. Vamos configurar isso com roteador.get. Este roteador foi forward slash admin, forward slash add, para adicionar um novo hotel e, em seguida, configurar nosso HotelController, e o nome da função CreateHotelGet com um ponto-e-vírgula no final. Você pode estar se perguntando por que chamamos este CreateHotelGet, em vez de simplesmente criar hotel. Eu adicionei Get to the end porque este é um pedido GET. Mais tarde também criará uma solicitação POST para esta rota de criação do hotel. Fica mais claro quando chegarmos àquele estágio. Esta é agora a nossa rota. Agora podemos passar para o controlador para renderizar nossa visão. Vamos clicar em “hotelController.js” na parte inferior. Vamos preparar isto. Foi exports.createHotelget configura nossa função com os objetos de solicitação e resposta. Isso vai simplesmente renderizar uma exibição. Fazemos isso com res.render, assim como fizemos com o AdminPage. O modelo que vamos criar vai ser adicionar hotel sublinhado, e depois passar os objetos, que envia o título de Adicionar novo hotel e um ponto-e-vírgula no final. Assim como nós este administrador dois ainda não criamos esta página adicionar hotel. Vá para a barra lateral, vá para as exibições, e crie um novo arquivo, chamado add underscore hotel com a extensão plug ponto. Agora é um caso de fazer deste um formulário, que será usado para enviar o hotel ao nosso banco de dados. Isso precisa estender nosso layout, selecionar todos os arquivos e, em seguida, bloquear o conteúdo. Pouco antes de começarmos a adicionar o nosso formulário, vou adicionar um link no topo da página. Este link vai ligar de volta para a seção de administração, que possamos alternar rapidamente entre o adicionar novo hotel e, em seguida, voltar para os nossos três links principais. O link com o href é igual a admin de barra direta. Isto vai ser um botão. Podemos adicionar um tipo de botão. Então digite é igual ao botão. Em seguida, vamos também adicionar uma classe que vamos estar usando mais tarde quando adicionamos alguns CSS ou botão sublinhado pequeno. O texto volta para admin, pois este é o lugar onde este está sendo vinculado. Então, na parte inferior, passamos no título da nossa página. Para manter isso consistente, vamos adicionar isso em um h2. Então h2 é igual ao título. Dê um salvamento e verifique se ele está funcionando. Atualizar barra de administrador, barra de adicionar. baixo da camada para que agora possamos ver nosso botão de voltar para o admin, clique sobre isso e, em seguida, somos levados de volta para nossos três links. Agora podemos voltar para adicionar um novo hotel. Precisamos criar o nosso formulário agora que vai ter todos os campos que precisamos para o nosso hotel. Esses campos precisam muito dos dados dentro do nosso modelo. Vamos em frente e criar nosso formulário embaixo do h2. O formulário e, em seguida, os atributos dentro dos colchetes, a ação. Isto vai ligar para a mesma página, que possamos manter as rotas com uma string vazia. O método, este vai ser um pedido post. Em seguida, recuar em um nível. Eu vou criar uma div que vai ter a classe de entrada sublinhado formulário. Cada um desses grupos de formulário vai ter a mesma classe. Podemos manter o estilo consistente quando chegarmos ao CSS mais tarde. O primeiro será rotulado e este será para o nome do hotel. Então o nome sublinhado do hotel, e depois o texto do nome do hotel. Depois que o rótulo, em seguida, adicionar a nossa entrada. Esta entrada vai ter o tipo de texto, o nome do hotel_name. Como eu mencionei antes, esses campos precisam coincidir com os dados em nosso modelo. Se formos para o nosso hotel.js e começaremos logo no topo com o nome do hotel. Isso precisa de muito nome, que demos isso em nosso esquema. Hotel_name. Então faremos o mesmo para a descrição e também para o resto dos campos aqui dentro. De volta à nossa forma. O nome do hotel e este campo também são obrigatórios. O próximo será para a descrição. A div circundante da entrada do formulário, o rótulo. Este vai ser para descrição do hotel. Então é a descrição do hotel X-Naught. Desta vez, em vez de uma entrada, esta vai ser uma área de texto. Fazemos essa entrada, assim como o resto dos elementos. Podemos adicionar o nome da área de textos e, em seguida, adicionar os colchetes ou os atributos. O nome do hotel_description. O ID, que também é hotel_description e vamos fazer isso menor para que tudo se encaixe em uma linha com a área de texto. Você também pode definir o número padrão de colunas e também linhas. Então eu vou definir as colunas para ser 13 e também as linhas para ser dez. Isso também é necessário, como todos os outros campos. Abaixo desta coisa, o próximo será para a imagem do hotel. Então eu vou para ir em frente e adicionar o wrapper que é entradas de formulário, o rótulo para a imagem, a imagem de foto têxtil. Desta vez vai ser uma entrada para o arquivo. Assim, as entradas com o tipo de arquivo, já que estaremos usando imagens carregadas da máquina do usuário. Então, o tipo de arquivo, o nome vai ser imagem junto com o ID. Vamos copiar o nome do hotel. Depois que a imagem entrar, esta será para a classificação de estrelas. Assim, o rótulo terá o nome de star_rating e esta será uma classificação de estrelas de um a cinco. Classificação de estrelas para o nome é tipo de entrada vai ser de número. Para restringir isso de um a cinco com o nome de star_rating. Isso também é necessário. Vamos manter isto entre um e cinco. Também podemos adicionar os atributos min de um e também os atributos máximos de cinco. Vá para sob a classificação de estrelas, podemos adicionar isso novamente, certifique-se de que o recuo está correto. Este depois da classificação de estrelas será para o país. Então o nome do país, o mesmo para o texto. O tipo de entrada também vai ser texto também. Então nós podemos nomear este o nome do país e também vamos dar a este um ID do país também. Isso também é necessário. O mesmo depois do país. Este vai ser pelo custo por noite. Então o rótulo vai ser para cost_per_night. Texto de custo por noite para, as entradas vai ser para o preço. Então podemos definir isso para ser um número. O nome também pode corresponder a isso, então podemos copiar isso e colar isso para as entradas. Então nós temos o tipo, o nome, e nós também precisamos do ID do custo por noite também. Então adicione isso e o próximo depois disso, se formos direto para o fundo, vai ser para a disponibilidade. Então vamos adicionar alguns botões de rádio. Que podemos selecionar se o hotel está disponível ou indisponível. Então, o wrapper de entradas de formulário vai ter dois botões de opção. O primeiro pode ter um rótulo e este está disponível, o texto também está disponível. Então nossa entrada, que é o tipo de rádio. Após o tipo, podemos adicionar o ID e este vai ser o mesmo. Isso também precisa de um nome. Este é o tempo de disponível. Estes são os dados que enviamos para o servidor. O valor vai ser igual a true e vamos definir o próximo para ser igual a false. Então, se este estiver marcado, obteremos o disponível igual a true, e o próximo estará disponível igual a false. Por padrão, queremos que este verdadeiro seja verificado. Então, também podemos adicionar o atributo verificado dentro de lá. Então nós só precisamos fazer o mesmo para indisponíveis para que possamos copiar essas duas linhas e, em seguida, adicioná-los abaixo. Isso não está disponível, assim como o texto e, em seguida, a entrada. Podemos adicionar, salvar o nome, o valor de false. Também podemos remover este atributo marcado porque queremos apenas um verificado de uma vez. Então, agora a última coisa que precisamos fazer é um botão que vai em frente e enviar este formulário. Isso pode ter o mesmo wrapper de entrada de formulário. Ignore o estilo consistente. Desta vez, este é um botão com o tipo de enviar, a classe, a classe que já usamos antes de button_small. Isso manterá o CSS mais consistente e , em seguida, no capital, também vamos adicionar o texto do botão Confirmar. Agora podemos salvar isso e, em seguida, passar para o nosso administrador. Certifique-se de que estamos em forward/admin, forward /ads. Agora devemos ver o novo formulário de hotel no fundo. Se você viu seu formulário sem erros, parabéns. Se você vir algum erro, certifique-se de verificar o código em busca de erros de digitação. Antes de passar para o próximo vídeo, vamos finalmente obter um hotel push para o nosso banco de dados 24. Enviando para o banco de dados: Estamos todos prontos para começar a trabalhar empurrando os dados do hotel para o nosso banco de dados Mongo. No último vídeo, criamos um modelo chamado Art_hotel. Este formulário é configurado para fazer uma solicitação de postagem. Se você ir para o topo, podemos ver o método está definido para postar. Isso publicará nossos dados de formulário para que possamos ir em frente e usá-los em nosso controlador. Além disso, a ação é definida como uma string vazia, que podemos ver apenas aqui. Isso publicará os dados do formulário para as rotas atuais, que são encaminhamento/admin, encaminhar/adicionar. Se passarmos para as nossas rotas e entrarmos no index.js, já temos um pedido get neste encaminhamento/adicionar rota apenas aqui para exibir o nosso no novo formulário de hotel. Então vamos duplicar esta linha para criar uma solicitação de postagem. Então copie isso e cole isso abaixo. Precisamos que este seja um pedido de postagem, pois estamos lidando com um pedido de postagem do nosso formulário. Então router.post, novamente podemos manter este como forward/admin, forward/add porque este é o caminho do arquivo que vamos ser postando para, uma vez que não definimos nossos y's em nossa ação. Então, uma vez que este é um pedido de post, podemos alterar criar post hotel, e este criar hotel post middle-ware vai lidar com o que fazer quando fazemos um pedido de post para esta rota, ou seja, quando enviamos o formulário. Vamos configurar isso no hotel controller.js em CreateHotelGet. Podemos fazer o mesmo para CreateHotelPost. Então CreateHotelPost configura nossa função com o pedido e resposta. A primeira coisa que vou fazer aqui dentro é ver com que dados estamos trabalhando. Podemos ver quais dados estão sendo enviados pelo formulário usando res.json, então eu vou colocar os dados como JSON, em seguida, passar na solicitação um corpo, e é aqui que os dados são armazenados em nossos objetos de missão. Então, dentro de nossa função em res.json e os dados do formulário são armazenados no corpo dos objetos de solicitação para passar em request.body nos dá um salvamento e depois para o navegador, obter essa recarga. Agora podemos preencher alguns dados do formulário para enviar. Isso é só adicionar um teste. Isso é um teste de dados, escolha uma imagem, em nosso projeto Travel, e depois a pasta pública, imagens, e podemos escolher qualquer imagem de hotel. Então eu vou selecionar Hotel 1, uma classificação de estrelas de três, país, Portugal e qualquer preço é bom. Confirmamos, assim que pressionamos Confirmar, fazemos uma solicitação de postagem a partir deste formulário. Esta solicitação de postagem vai para Encaminhar/Admin, encaminhar/adicionar. Nós configuramos isso dentro de nosso index.js para lidar com esta solicitação de post para esta rota. Isto é, em seguida, acionar o nosso controlador de hotel, que está, em seguida, devolvendo o nosso JSON uma vez que estamos fazendo res.json e, em seguida, passado no request.body, que armazena os dados que estão sendo enviados pelo formulário. Então agora podemos ver a versão JSON do nosso hotel que acabamos de adicionar. Podemos ver que esses dados estão configurados no mesmo formato que o nosso modelo. Isso nos dá uma idéia melhor dos dados com os quais estamos trabalhando agora. Este formulário foi configurado para ser o mesmo que o nosso modelo para que os dados estejam no formato correto. Agora sabemos que temos um objeto para o nosso hotel armazenado em request.body. Vamos usar esses dados em nosso modelo para enviar para o banco de dados? Então precisamos exigir nosso modelo de hotel primeiro, o arquivo de nível superior. Então, de volta ao controlador do hotel, e no topo, podemos configurar uma constante chamada Hotel com H maiúsculo, e isso exigirá os modelos. Então, como uma string quando ele está passando o caminho do arquivo, então vamos até a pasta do nosso modelo, e então o nome do modelo era Hotel. Podemos então usar este modelo Hotel para baixo em CreateHotelPost. Então vamos configurar um novo Hotel, passar os dados de request.body, que vimos é o objeto que contém todos os campos do nosso formulário. Eles instalam está dentro de uma variável ou uma constante. Então const hotel é igual ao nosso novo hotel. Então agora temos o nosso hotel e podemos ir em frente e chamar o seguro. Mas uma coisa primeiro, vou marcar esta função como assíncrona. Logo após os iguais, podemos marcar esta função como uma função assíncrona. Isso é algo que é novo no ES 2017 chamado de assíncrono aguarde. Isso realmente torna nossas vidas muito mais fáceis quando se trabalha com código assíncrono. O que basicamente nos permite fazer é pausar uma função até que uma linha de código tenha terminado a execução. Primeiro de tudo, marcamos a função assíncrona, assim como fizemos lá, e então a próxima tarefa que nossa função tem, é chamar salvar para dizer isso ao nosso banco de dados. Fazemos isso com o nosso hotel constante e, em seguida, chamam.save. Com o salvamento, no entanto, queremos ter certeza de que o hotel terminou economizar antes de podermos começar a fazer as coisas com ele. Para fazer isso, podemos adicionar uma espera antes do nosso hotel.save, adicionando uma espera antes desta linha. Vamos certificar-nos de que este código é interrompido e, em seguida, esperar que isto termine antes de passar para a próxima linha. A razão pela qual queremos ter certeza de que aguardamos a economia do hotel antes de seguir em frente é porque vamos assumir novos dados deste hotel imediatamente após o salvamento. Portanto, queremos ter certeza de que o salvamento foi concluído, ele está disponível antes de chamar mais quaisquer linhas de código que precisam desses dados do hotel. Então, se dermos isso para salvar e depois para o navegador, dá isso uma recarga e reenviar o formulário, e depois voltar para mLab e fazer login no banco de dados. Então, vamos adicionar nossos detalhes de usuário. Uma vez que nosso banco de dados carrega, agora podemos ver em coleções Java que temos a coleção de hotéis, que agora tem um documento. Se clicarmos em próximo para expandir, somos levados ao nosso teste, que são os dados que acabamos de enviar. Este é um grande passo porque agora guardamos o nosso hotel na base de dados. Mas e se houver um erro ao salvar o hotel? Precisamos adicionar algo dentro do nosso controlador para lidar com quaisquer erros. Primeiro, podemos embrulhar o código dentro do bloco try. Então, de volta para CreateHotelPost, podemos adicionar tente e, em seguida, mover essas duas linhas dentro deste bloco try. Isso tentará executar o código dentro e testar quaisquer erros. Se houver quaisquer erros, podemos lidar com eles com um declarações catch. Fazemos isso no final, pegamos, passamos o erro e, em seguida, dentro daqui, chamamos o próximo, que também leva o erro. Chamando a seguir, estou passando na era, passará o erro ao longo da cadeia middle-ware até atingir um manipulador de erros que pode lidar com ele corretamente. Lembre-se, já temos manipuladores de erros configurados com o framework express dentro do nosso app.js, que está na parte inferior aqui. Então, de volta ao nosso controlador para que este próximo funcione corretamente, também precisamos passar em seguida após os objetos de solicitação e resposta. Passando por aqui, já que agora estamos usando dentro de nossa função. Se formos para o mLab, dentro do navegador, podemos olhar para o nosso hotel. Se clicarmos neste canto e, em seguida, arrastá-lo para baixo. Se notarmos, dentro deste hotel que acabamos de adicionar, houve um ID único adicionado com o campo de ID de sublinhado, que é apenas aqui. Lembre-se de antes, dissemos que queria usar esperar para esperar no hotel salvar este banco de dados antes de seguir em frente. Garantir que o hotel foi salvo com sucesso significa que agora temos este ID disponível antes de passar para a próxima linha de código. Isso só porque eu agora quero redirecionar para o hotel uma vez que ele foi salvo. Podemos fazer isso dentro do nosso controlador com res.redirect. Em seguida, passando o caminho do arquivo que queremos ir para, eu vou usar os ticks traseiros desde que vamos adicionar alguns dados dinâmicos. Então, encaminhe/todos e, em seguida, encaminhar/. Podemos passar o símbolo $ e nossas chaves. Isso é algo que analisamos no início da seção JavaScript. Então aqui dentro podemos passar em uma variável. Então, podemos acessar nosso objeto de hotel, que é apenas aqui, e então o campo que é sublinhado ID, e esta é a idéia que tinha sido adicionado dentro de nosso banco de dados apenas aqui. Adicione um ponto-e-vírgula no final. Agora vamos verificar se isso está funcionando bem adicionando um novo hotel. Então vamos para Forward/Admin forward/add, recarregue a página. Digamos que teste 2. Teste 2 para a descrição, qualquer imagem é cinco aqui. Depois clique em Confirmar. Agora somos redirecionados para a nossa rota, que definimos aqui, que será para a frente e para todos, e depois para a identificação do hotel. Agora podemos ver isso na barra de URL na parte superior. Temos nosso ID exclusivo, que agora é retirado do banco de dados porque esperamos que este hotel seja criado primeiro antes de passar para o redirecionamento. Se rolarmos para baixo, veremos um erro de Not Found. Isso é bom porque sabemos que ainda não criamos essa rota, mas o principal é que temos essa ID única agora qualquer na URL. Voltaremos a isso mais tarde quando criarmos um modelo para exibir todos os detalhes do hotel. Este é um grande passo em frente agora, nós salvamos no banco de dados. Então, parabéns, se você tem isso funcionando agora. Caso contrário, verifique seu código e dê uma olhada no código finalizado fornecido ou pergunte nas seções de P e R antes de passar para o próximo vídeo. 25. Consultando o banco de dados: Antes de olhar para como obter nossos dados do banco de dados ou de uma consulta, primeiro precisamos adicionar mais alguns dados para voltar. Se você passar para o mLab e se você tiver algum desses dados de teste no lugar, podemos removê-lo com o ícone de compartimento no lado direito. Quero limpar todos os registros em nosso banco de dados e ter certeza que eles sumiram. Vamos em frente e criar cinco novos hotéis para trabalhar. Podemos fazer isso se formos para admin, então vote/admin/vote/add e, em seguida, descer para [inaudível] na parte inferior. O primeiro que eu quero chamar este Hotel 1 e, claro, com um nome mais criativo, se você preferir. Vou pegar alguns textos [inaudíveis] Ipsum para adicionar para a descrição. Vamos descer e criar dois parágrafos. Ele gera, Copie o texto de amostra e Colá-lo em nossa área de texto. A imagem do hotel para Hotel 1, em seguida, selecione esta. A classificação de estrelas pode ser de quatro, país Jamaica. Custo por noite, agora podemos deixar isso disponível. Agora vamos redirecioná-lo para o hotel. Precisamos voltar ao nosso administrador/adicionar. Criar Hotel 2. Cole na descrição da imagem para Hotel 2. Em seguida, uma classificação de estrelas irá para cinco, país da República Dominicana. Custos por noite, adicione algo lá e confirme. Devem ser dois hotéis agora na nossa base de dados se chegarmos ao Recarregar, e lá estamos nós. Vamos adicionar mais três. Novamente, /admin/adds. Podemos adicionar o número de hotel três, adiciona a descrição hotel3.jpg. Uma classificação de estrelas vamos para três desta vez e Holanda. Custo por noite, digamos 45 e depois confirme. Em seguida, podemos adicionar Hotel 4, admin acrescenta. Em seguida, até a parte inferior Hotel 4 Colar na descrição da imagem. A classificação de estrelas vai para cinco desta vez e o país das Maldivas. Custo por noite, vamos para 89. Deixe-me como tornar isso indisponível. Parece que tivemos um pequeno problema lá, na verdade, temos ambos verificados. Vamos para o nosso formulário, adicionar hotel e descer para as caixas de seleção ou os botões de rádio. Desculpe. Essas necessidades têm o mesmo nome, elas demais no mesmo grupo, vamos tentar recarregar. No entanto, agora podemos apenas selecionar um destes. Vamos ao banco de dados. Agora, temos tudo isso disponível como verdadeiro. Eu só vou entrar em qualquer um desses e clicar no botão de edição. Vamos definir a disponibilidade desta vez para ser falsa. É Save e volte. Porque agora eu tenho o hotel número três para ser definido como falso. Vamos adicionar mais um que é o Hotel 5. A descrição Hotel 5 imagem. A classificação de estrelas deixou ir para dois desta vez. O país da Grécia, custo por noite e podemos manter este como disponível. Agora, no MLab, devemos agora ter cinco registros com um desses indisponível, que dizem ser o hotel número três. Adicionaremos o resto do hotel mais tarde. Mas agora temos alguns dados para trabalhar. Vou mostrar-lhe como obtê-lo em nosso aplicativo dentro do hotelController.js. Vamos selecionar isso e, em seguida, podemos voltar para a nossa lista todos os hotéis função. Se nós rolar para cima, nós temos a lista de todos os hotéis apenas aqui. Retornando todos os dados em nosso banco de dados é bastante fácil usando Mongos método encontrar. Antes de renderizar todos os hotéis, vamos criar uma constante chamada todos os hotéis e eu vou definir isso para ser aguarde porque queremos que esses dados sejam puxados antes de renderizar modelo. Queremos selecionar o nosso modelo de hotel e, em seguida, usar o método de busca de ponto e vírgula no final. O método de busca irá encontrar todos os documentos em nossa coleção de hotéis e também pesquisar a coleção de hotéis porque estamos usando o modelo de hotel apenas aqui. Aqui, uma vez que estamos usando aguarde mais uma vez, também precisamos marcar esta função como uma sincronização para que ela funcione. Adicionar sincronização pouco antes de nossos parâmetros de função, nós também queremos lidar com quaisquer erros novamente dois para que possamos envolver este código em um bloco try. Vamos cortar todas essas duas linhas de código, adicionar um bloco try, colar isso de volta, seguido de um bloco catch para lidar com quaisquer erros. Este bloco catch também leva os erros como um argumento e, em seguida, também podemos passá-los para o próximo. Como agora chamamos a seguir, também precisamos passar isso para a função. Nosso próximo como o terceiro argumento e antes de seguir em frente devemos verificar se isso está funcionando. Podemos comentar este res.render que temos acima e, em vez disso, substituí-lo por um res.json. Isso irá adicionar os dados à tela no formato JSON. Os dados querem produzir é todos os hotéis, que é esta constante apenas aqui. Então guarde isso. Então precisamos ir para o navegador, e depois ir para /all hit, “Enter” e agora vemos todos os nossos hotéis em formato JSON. Estes são todos os dados que agora extraímos do banco de dados. Parece que todo o nosso hotel está sendo devolvido. Podemos ver todos os nossos campos, incluindo o ID gerado. Agora, sabemos que isso está funcionando, então podemos passar esses dados para o nosso modelo de página para ir em frente e renderizar. Volte para o controle. Vamos comentar o res.json e descomentar este método de renderização. Junto com renderizá-lo, todos os modelos de hotéis e passando ao longo do título, nós também queremos passar neste hotel dados de todos os hotéis. Separados por uma vírgula, também podemos passar em todos os hotéis e isso agora estará disponível para uso nos modelos. Se você der este um salvar e, em seguida, passar para o todos os modelos de hotéis, que está em vistas. Vamos abrir isto. Vamos testar este trabalho selecionando elementos p e enviar isso para o valor de todos os hotéis. Dê um salvamento a isso. Depois, para o navegador, podemos recarregar as rotas /all. Ok e role para baixo. Vemos um objeto gigante na tela agora. Estes são todos os dados que agora são extraídos do banco de dados. Podemos ver se olhamos de perto, temos o hotel um, e então se formos mais adiante, temos o hotel dois aqui, e depois o hotel três mais abaixo. Esta é toda a informação da nossa coleção de hotéis. Também podemos filtrar isso se quisermos apenas o primeiro hotel, por exemplo. Poderíamos selecioná-lo pelo número do índice. Todos os hotéis, o número de índice zero, recarregar. São todos os dados do nosso primeiro hotel. Ainda mais, podemos limitar isto ao nome do hotel. Lembre-se, o nome do hotel é armazenado no nome do sublinhado do hotel, então podemos acessá-lo usando a notação de pontos, então o nome do hotel. Lá vamos nós. Aqui está o nome do nosso hotel. Agora temos acesso a todos esses dados do hotel. Precisamos viver em todos os hotéis e exibir cada um neste hotel mix-in. Já temos a mix-in do hotel aqui. Uma vez que você criar um loop que exibe este mix-in com todas as informações do hotel. Exclua este elemento p daqui. Podemos adicionar nosso título de nível dois, que é o título. Então, depois disso, queremos criar nosso loop, e vamos fazer isso com cada hotel em todos os hotéis, e, em seguida, recuar ambas as linhas em. Todos os hotéis são os dados que serão passados para o modelo com todas as informações do hotel um a cinco. Cada hotel individual será armazenado nesta variável do hotel. Agora, se salvarmos isso e recarregar a barra dianteira todas as rotas e, em seguida, rolar para baixo, vemos que temos o hotel número um. Se continuarmos a descer, devemos ter um hotel para cada um dos itens do nosso banco de dados. Isso agora é repetido o mesmo hotel em nosso mix-in para cada item. Este é um passo na direção certa porque agora temos cinco itens na tela, mas queremos que cada hotel seja diferente. Para fazer isso, precisamos de uma maneira de passar os dados exclusivos do hotel para o mix-in. Lembre-se que dissemos, antes que esta variável de hotel aqui contém as informações individuais do hotel, então esta é a informação que precisamos passar para o mix-in. Podemos fazer isso com o nosso mix-in aqui e passar no hotel. Isso funciona porque mix-ins são compilados para funções que podem levar em argumentos. Se guardarmos isto e, em seguida, passarmos para os nossos dados de hotel no nosso mix-in, para baixo para mix-ins, em seguida, sublinhar hotel até o nosso nome de mix-in na parte superior. Nós também podemos receber esses dados do hotel, por isso passando hotel como um argumento, e agora temos os dados individuais do hotel dentro deste mix-in. É aqui que a parte boa começa a acontecer. Vamos começar exibindo o nome do hotel. Role para baixo até o nosso título de nível três. Aqui temos algum texto codificado porque esta é uma variável que adicionamos aos iguais, acessar o hotel e, em seguida, ponto hotel sublinhado nome. Se guardarmos isto e depois recarregarmos o navegador, de volta ao topo, temos o hotel um, hotel dois, o hotel três, o quatro e o cinco. Agora vemos que todos os nomes dos hotéis são únicos. Agora podemos continuar com o resto dos detalhes tornando-os dinâmicos. Em seguida, podemos adicionar os dados dos dois links. O href apenas aqui em cima, vamos mudar isso para voltar ticks porque isso será dinâmico. Isto vai ligar para a vista completa do hotel, que vai ser a nossa barra de frente. Então podemos adicionar nossa seção dinâmica, que é hotel. _id. Lidaremos com esta rota mais tarde. Também faremos o mesmo para o link abaixo. Copie isso e cole-o para o segundo link. Ter esses dois links significa que tanto a imagem o nome do hotel serão vinculados à vista completa do hotel quando o usuário clicar em qualquer um deles. Então podemos lidar com o caminho do arquivo para a imagem. No momento, temos o hotel de imagem um codificado aqui dentro. Vamos mudar isso para voltar ticks para frente imagens barra, a pasta do hotel dentro das imagens, e então barra para frente podemos abrir as chaves e, em seguida, adicionar imagem de ponto do hotel. Dentro do nosso banco de dados para a imagem, essas imagens são salvas. Se dermos uma olhada, por exemplo, imagem aqui é salva como hotel2.jpg. Se formos para o Visual Studio e, em seguida, para o público e, em seguida, imagens dentro dos hotéis, este nome irá coincidir com o nome das imagens que teremos aqui. Agora, se salvarmos isso e, em seguida, recarregar o navegador, devemos agora ver a imagem única para cada hotel. Voltaremos às imagens mais tarde porque usaremos o Cloud Storage para uploads de imagens em vez de armazenarmos em nosso próprio projeto. Agora vamos voltar e terminar o resto desses dados dinâmicos. Os elementos p são o fundo, mas também agora vai ser dinâmico. Temos de cercar isto nos carrapatos, mudar a estrela. Em vez de ter o valor codificado de quatro, podemos passar novamente em nossos dados dinâmicos. Hotel e, em seguida, o nome do campo, que é classificação de sublinhado por estrelas. O mesmo para o nosso país. Podemos cercar isso em carrapatos, substituir o país codificado por país do ponto do hotel. O custo por noite. Em primeiro lugar, podemos adicionar um símbolo de moeda e, em seguida, um espaço para criar nossos dados dinâmicos. Hotel.cost_per_night. Vamos até o navegador e ver como isso parece. Atualize todas as nossas rotas de hotéis e verifique todas essas diferenças. Temos quatro, Jamaica, e 67. Então temos o Dominicano, Holanda, e também as Maldivas com diferentes classificações de estrelas e preços também. Excelente. Agora você deve ver todos os seus dados do hotel no banco de dados. Você também pode estar se perguntando onde temos a descrição do hotel, bem vamos adicionar isso de volta mais tarde porque isso é apenas para ser exibido na vista detalhada do hotel, onde temos mais espaço disponível. Mas há um pequeno problema aqui. O problema é que também podemos ver o hotel três. Se descermos até o hotel três aqui, lembre-se que definimos este hotel três para não estar disponível quando o criamos pela primeira vez. Isto é muito fácil de resolver. Tudo o que precisamos fazer em vez de apenas usar o método find, também podemos passar em uma consulta. Volte para o controlador do hotel e liste todos os hotéis. Dentro deste método de busca que temos aqui, podemos começar passando em um objeto, e então podemos selecionar os campos disponíveis do nosso banco de dados. Agora só queremos encontrar hotéis que tenham este campo definido como verdadeiro. Podemos fazer isso com o $ símbolo eq e definir isso como true. $ sinal eq é um operador de consulta MongoDB que verifica a igualdade. Basicamente, apenas hotéis com o campo de disponíveis serão devolvidos. Agora, se guardarmos isto e depois recarregarmos, agora o hotel quatro, e então salta para o hotel dois. Parece que agora o hotel três não está sendo puxado do banco de dados porque não corresponde à nossa consulta. Bom. Isto agora está tudo a funcionar. Vamos continuar a extrair dados da nossa base de dados no próximo vídeo onde iremos obter os nossos hotéis baseados no país. 26. Valores distintos: Se nos dirigirmos para mongodb.com, que é uma página inicial do nosso banco de dados. No topo, podemos ver um link para a documentação. Esta documentação vai nos dar todas as informações que precisamos para consultar nosso banco de dados. No lado esquerdo, se clicarmos em começar. Aqui, podemos encontrar uma referência completa para todos os comandos de banco de dados, que estamos usando neste curso, juntamente com muitos outros. Lá em baixo, temos uma seção de referência. Clique neste e, em seguida, vá para os comandos do banco de dados. Isso nos dará uma lista de diferentes métodos que temos disponíveis. Vamos rolar para baixo até os comandos de uso. Aqui embaixo temos um método de busca. Se deslocarmos para baixo até os comandos de operação de consulta e gravação, você tem este método fino que usamos no último vídeo para obter todos os nossos hotéis. O próximo que irá cobrir neste curso é distinto e este comando está perto do topo. Temos isto aqui mesmo. Para este projeto, precisamos obter uma lista de países disponíveis que têm hotéis localizados em. Podemos ter vários hotéis com a mesma lei de consulta. Por exemplo, poderíamos ter seis hotéis localizados no México e não queremos que a palavra México a um aparecer seis vezes na lista do nosso país. Distinto nos permitirá retornar uma série de apenas os países distintos, o significa que o único México aparecerá uma vez do nosso exemplo. Vamos começar criando os modelos de todos os países para esta página. Abra a barra lateral, vamos fechar alguns desses. Eu fecho isto. Se formos para as vistas, podemos criar um novo arquivo dentro daqui chamado, all_countries com a extensão.pug. Vamos em frente e adicionar o nosso código básico; estende layout e, em seguida, o conteúdo do bloco, o h2 de título. Em seguida, próxima parada, podemos adicionar a rota para o índice do arquivo JS. Vá para o nosso índice dentro da pasta de rotas, abra isso e depois da rota "/all”, vamos adicionar router.get. Isso você tem que lidar com as rotas /countries, o hotelcontroller, e desta vez vamos configurar uma função chamada listAllCountries, adicionar o ponto-e-vírgula no final. Ainda não criamos listas de todos os países. Então, vá até o arquivo do controlador do hotel e então podemos adicioná-lo. Vamos abrir isto. Depois de uma lista de todos os hotéis vamos adicionar exports.listAllCountries. Configurar a nossa função. Vou marcar isto como assíncrono, porque vamos precisar de uma espera aqui dentro. Podemos passar em nosso pedido, nossa resposta, e também em seguida. Em seguida, adicione o nosso bloco try, tente executar o código, seguido de nossa captura, que vai tomar em quaisquer erros e, em seguida, passá-los para o próximo. Faça meu erro com nenhum s. O código dentro do bloco try será bastante semelhante a todos os hotéis acima. Começamos criando uma constante para armazenar nossos dados. Vou chamar isso de constante todos os países. Desta vez, agora selecionamos o nosso modelo de hotel, então defina este igual a capital do hotel H. Em vez do método de busca que usamos antes, desta vez usamos .distinct, em seguida, para retornar uma variedade de países distintos, podemos passar no campo do país como um string e, em seguida, sob isso, podemos renderizar nossos modelos com res.render. O modelo que queremos adicionar é aquele que acabamos de criar de todos os países sublinhados. Separados por vírgula, podemos passar em nosso título. Caminho para o texto de, navegar por país, eu faço este pouco menor, então podemos passar em nossos dados de todos os países, que nós configuramos aqui. Certifique-se de que isso está disponível para uso dentro de nosso template. Uma vez feito isso, clique em Salvar e, em seguida, ir para o navegador, abrir nossos projetos, então podemos ir para /countries, e, em seguida, rolar para baixo, e veremos o título da página de navegação por país. Nós só vemos este título da página, porque isso é tudo o que temos atualmente configurado no modelo. Vamos para todos os países.pug, e corrigir isso adicionando os dados de todos os países. Que agora passamos para o modelo. Vou começar com um embrulho se, assim como fizemos com os hotéis. Isso será chamado de wrapper de país, em seguida, crie uma lista não ordenada para exibir a lista de todos os países. Para obter todos esses países, precisamos fazer um loop através de todos os dados de países, que passarão para este modelo. Podemos fazer isso com um loop, então cada país em todos os países, crie um item de lista, que também será um link. Passe o href. Isto vai ser igual ao nosso backtakes, e então /countries/, então nós podemos adicionar o nosso nome dinâmico do país. Então, este é o país dentro daqui, que é essa variável individual que nós percorremos. Podemos então emitir o nome do nosso país. E podemos fazer essa dinâmica usando o # e, em seguida, o {}, e, em seguida, saída do país. Se nenhum país estiver disponível dentro do banco de dados, podemos então acompanhar com um outro bloco. Apenas no mesmo nível que cada um, podemos adicionar mais, que eu vou colocar um item de lista com o texto de, não há países. Agora, se salvarmos este arquivo e depois para nossos projetos e depois recarregar nossas rotas de encaminhamento/países. Em seguida, role para baixo. Nós não vemos bem a informação que estamos esperando. Esperávamos uma lista de países. vez, um monte de código de aparência estranha lá em baixo. A razão pela qual isso está acontecendo é porque não estamos aguardando nossos dados para voltar antes de tentarmos renderizar isso para a tela. Este é um dos problemas que mencionamos antes, porque estamos usando um único peso, precisamos esperar que nossos dados voltem do banco de dados antes de tentar usá-lo em nosso aplicativo. Se voltarmos para o controlador do hotel e a lista de todos os países, temos esta função marcada como uma pia, mas não estamos aguardando o valor hotel.distinct para ser devolvido de volta do banco de dados antes de passá-lo para os nossos modelos. Esperemos que agora se salvarmos isso e, em seguida, recarregar, agora temos lista de países que estão sendo exibidos. Se clicarmos em um desses, somos então levados para a nossa rota de países, barra dianteira e depois Jamaica. Temos um erro abaixo porque ainda não estamos lidando com essa rota. Vamos tentar outro para a Holanda. Todos parecem estar funcionando. Também ficaria bom também, juntamente com este nome de país se também pudéssemos colocar em uma imagem relacionada a este país. Já temos as imagens do país, que são armazenadas dentro da nossa pasta Imagens. Imagens públicas. Então temos alguns países com imagens abaixo. Vamos em frente e fazer uso dessas imagens em nossos templates. Então, logo abaixo do nosso link, vá para a próxima linha. Em seguida, podemos definir uma identidade de imagem em um nível. Isso também tem links para a mesma rota acima. Se a imagem precisa de uma fonte, será igual a o ticks retrocedidos, a pasta de encaminhamento/imagens, a pasta do país. Em seguida, podemos adicionar no nome do país, que é simplesmente país. Então precisamos adicionar a extensão the.jpg no final. Se agora guardarmos isto e depois passarmos para as nossas rotas de avanço/países, recarregue. Parece que estamos digitando erros. Então vamos dar uma olhada nisso. É só porque adicionamos um ponto-e-vírgula em nossos templates, que não usamos em pug. Refresque. Há as imagens do nosso país ao lado do nome. No momento, parece que eles estão trabalhando agora , mas no momento, embora não possamos ter certeza. Isso porque temos apenas um hotel em cada um desses países. Então não sabemos se ele está mostrando um valor distinto ainda. Podemos testar isso adicionando pequenos hotéis ao nosso banco de dados. Eu sei que é um pouco repetitivo, mas vamos agora ir em frente e adicionar o restante de nossos hotéis. Então podemos usar isso para o resto do projeto. Vamos para encaminhamento/administrador, encaminhamento/adicionar, até o fundo, vou adicionar o hotel número 6 e depois cortar o Lorem Ipsum. Vá para lipsum.com, vou criar dois parágrafos e depois apertar “Gerar”. Copie isso e cole em nossa descrição. Hotel 6 tem a imagem, as taxas de estrelas neste tempo de quatro, o país, Sri Lanka, os custos, 57. Este cone também pode estar disponível. Admin/Add, Hotel 7. Adicione a descrição e a imagem. A classificação de cinco estrelas, o país dos EUA, 78. Mantenha isso disponível. Voltar às nossas rotas de administração. Criar hotel 8. Eu vou subir para o hotel 12 para muito todas as imagens que foram fornecidos com o curso. Então adicione isso no hotel 8, a classificação de estrelas, o país das Maldivas e a disponibilidade como verdadeira. Agora podemos ver que já temos mais de um hotel nas Maldivas. Voltar para encaminhamento/admin, encaminhar/adicionar. Hotel 9. Baseado em uma descrição. Este pode ser uma classificação de quatro estrelas. O país do México. Custo por noite. Confirme. Precisamos dele agora, vamos para o administrador acrescenta e cria o número 10. Quatro, hotel número 10, a descrição e também a imagem que é o número 10 também. Abra isso, a classificação estelar de três. Vamos de novo para o México. Tenha um preço e clique em “Confirmar”. Admin acrescenta, hotel 11. A classificação de estrelas, vamos para quatro, o país da Tailândia, custo por noite, 39. Confirme. Finalmente, podemos adicionar o número 12 do hotel, que é o último. Soa no fundo. Hotel 12. A classificação de três estrelas, República Dominicana, 56 e hit “Confirmar”. Ótima. Agora, mais de dois mLab, agora podemos atualizar. Eu sei que isso é um pouco chato e repetitivo. Mas agora temos todos os 12 hotéis no banco de dados. Portanto, temos muitas informações para trabalhar agora em nossos projetos. Então eu forneci 12 imagens. Você pode, naturalmente, adicionar mais hotéis, se você preferir. Há agora mais de um hotel localizado nas Maldivas, México, e também na República Dominicana. Agora, se formos para avançar/países e, em seguida, clicar em “Enter”, role para baixo. Agora podemos ver todos os países extras que adicionamos. Há apenas um de cada volume. Portanto, há apenas um México, uma República Dominicana, e também uma Maldivas, o que significa que com valores distintos estão agora puxando corretamente. Agora vamos passar a olhar para os pipelines de agregação. 27. O pipeline de agregação: O pipeline de agregação é uma característica interessante do MongoDB. Basicamente, ele nos permite processar dados um estágio de cada vez. Atualmente, apenas a documentação Mongo de antes. Se formos ao menu à esquerda, podemos ir até a seção de agregação, clique nisso. Se rolarmos para baixo, vemos um diagrama que tem um exemplo de como podemos usar o pipeline de agregação em nossos projetos. Este exemplo usa uma coleção chamada ordens, que podemos ver aqui. comparável à nossa seleção de hotéis, que temos em nosso banco de dados. Esta imagem mostra estágios livres do pipeline, o que resulta nos dados que eventualmente queremos sobre no lado direito. Cada etapa da operação poderia fazer coisas como filtrar, agrupar ou classificar documentos até acabarmos com os dados corretos. A primeira etapa deste exemplo aqui mostra quatro registros dentro de nossa coleção. Em seguida, definimos um estágio correspondente, então declaramos que só queremos combinar quaisquer documentos com o código de estrelas de A. No lado esquerdo, vemos a única liberdade deste código A, e o último tem D. Portanto, apenas três desses quatro documentos podem corresponder, então esses três passam para o próximo estágio, que está no meio deste diagrama. Os estágios são agrupados pelo ID do cliente, que definimos aqui com o estágio de grupo, onde estamos agrupando com um campo ID. Estes dois têm a mesma ID de cliente. Portanto, estes são agrupados nos mesmos resultados. Então o terceiro também é único. Agora filtramos até dois resultados. A segunda parte deste estágio é agrupar o valor total desses dois pedidos que o mesmo cliente fez. Isto é o que vemos no total da fase final. Para saber mais sobre o que podemos fazer para cada uma dessas etapas, podemos clicar na barra lateral e ir até a referência de agregação, depois referência rápida do pipeline de agregação e rolar para baixo. Aqui, vemos uma lista de todas as etapas que podemos usar. Já vimos alguns desses exemplos antes, como a fase de grupos. Temos grupo apenas aqui, e também rolando mais para baixo. Esta é a fase de jogo que também vimos. Você pode clicar em qualquer uma dessas etapas listadas e descobrir o que cada uma delas faz. Ou eu vou ver alguns desses exemplos agora, dentro de nossos projetos. Se formos para o arquivo controller.js do hotel, temos funções para obter todos os hotéis e todos os países no banco de dados. Qual destes dois aqui, mas e se quisermos ser um pouco mais específicos sobre os dados que temos de volta na página inicial? Eu também quero mostrar que esses hotéis limitam os resultados a apenas nove para que não tenhamos uma homepage superlotada. Uma vez que nosso banco de dados armazena muito mais registros diferentes. Também o mesmo para os países. Para isso, podemos usar o pipeline de agregação para filtrar esses resultados para a página inicial. Vamos criar alguns filtros para filtrar esses valores. Exports.home, vou chamar esta função de filtros de página inicial. Nós configuramos isso como uma função assíncrona para que possamos usar aguarde, passar na solicitação, a resposta e também a próxima. Em seguida, um bloco try-catch para lidar com quaisquer erros, passando o erro. Em seguida, ligue para o próximo com este erro. Vamos primeiro lidar com a filtragem dos hotéis dentro do bloco de testes no topo. Podemos usar o método de agregação. Primeiro de tudo, vamos criar uma constante para manter esses hotéis. Const hotéis iguais aguarda o nosso modelo de hotel. Em seguida, chamamos um método em nosso modelo de hotel, assim como fizemos acima com distinto e também para o método de busca. Mas desta vez agora usamos hotel.aggregates com um ponto-e-vírgula no final. Isso leva em uma matriz das várias etapas. Adicione uma matriz vazia aqui dentro. A primeira etapa que vou usar é a fase do jogo. Abra as chaves, $ símbolo corresponde. Então queremos combinar os hotéis que estão disponíveis. Defina os campos disponíveis para serem verdadeiros e, em seguida, adicione uma vírgula no final. Próximo passo, para que a página inicial não fique muito lotada. O estágio de amostra de sinal $. Selecionará aleatoriamente o número de documentos que especificamos. $ sign sample, podemos definir esse tamanho amostral para retornar apenas nove documentos. É claro que você pode mudar isso para ser qualquer valor que você preferir. Esta agregação que configuramos retornará para nove hotéis aleatórios, que têm sua disponibilidade definida para dois. Podemos agora fazer algo semelhante com os países. Também queremos mostrar nove países aleatórios na página inicial. Assim como antes, quando estávamos lidando com países, isso precisa novamente, apenas retornar cada país uma vez. Mesmo que haja mais de um hotel por país. Para fazer isso, temos a fase de grupos. Vamos criar uma constante numérica desta vez chamada países, definir isto para ser hotel. agregado, passando nossa matriz. O primeiro vai ser a fase de grupos, $ símbolo grupo. Quando estamos usando o estágio de grupo, também precisamos passar em um ID com -id é igual a saída de nossos documentos com um campo ID que contém o grupo distinto por uma chave. Este campo é obrigatório e vamos agrupar isso por um nome de chave de $ símbolo país. Isso irá agrupar todos os nossos hotéis por seu país e, em seguida, separados por uma vírgula. Podemos novamente configurar nossa amostra, a amostra, assim como os hotéis vão retornar o tamanho amostral de nove países. A fase de grupos levará em todos os países como uma entrada, então eu vou colocar um valor distinto. Por exemplo, se houver dois hotéis nos EUA, só obtemos o valor dos EUA dentro de nossa matriz. Agora criamos nossos filtros. Queremos que esses dados sejam exibidos na página inicial. Vamos começar isso de novo no index.js. Sim. Podemos mudar o controle no topo. Então, para a rota para a frente barra casa, em vez de usar o controlador do hotel para a página inicial. Podemos mudar isso para ser os filtros da página inicial, que vamos configurar, de volta no controlador do hotel. Se agora rolarmos para cima e encontrarmos esta export.homepage, não precisamos mais disso, então podemos comentar isso. Finalmente para baixo em nossos filtros, para baixo na parte inferior, o estágio final deste bloco try é fazer um res.render. Queremos renderizar nossa página de índice, que é a página inicial. Então aqui dentro vamos passar em nossos dois valores, que são os hotéis e os países. Podemos percorrer estes na página inicial, analisando os países e, em seguida, agora hotéis e, na verdade, também precisamos esperar por países também. Então, como nota lateral, aguardando promessas como esta, usar esperar aqui e também esperar aqui não é uma boa idéia. Isso é algo que voltaremos para você e consertaremos mais tarde. Por enquanto, no nosso arquivo de índice ou poke, podemos lidar com esses países e também com os hotéis. Por enquanto, embora em nosso arquivo index.pug, agora podemos lidar com esses dados de países e hotéis. Então vá para exibições e, em seguida, index.pug. Vamos fechar a barra lateral. No momento, se formos para a nossa rota de casa. Então, clique no logotipo na parte superior. Nesta página inicial, temos um erro porque ainda não estamos analisando nenhum detalhe de país para este hotel mix in. Vamos agora ir em frente e loop através de todos os dados que serão agora no passado e, em seguida, podemos exibir este mix-in hotel para cada um. Após o nosso texto de CO, criar em outra lista, podemos então percorrer todos os hotéis com cada hotel em hotéis. Lembre-se hotéis são os dados que foram passados para este modelo apenas aqui. Então, cada hotel em hotéis. Para cada um no banco de dados, também queremos exibir essa mistura e, além de exibir isso, também precisamos passar os dados individuais do hotel, então isso está disponível no mix in. Vamos salvar isso e depois recarregar para a página inicial. Agora podemos ver alguns hotéis agora listados na tela. Vamos apenas verificar. Temos nove. Temos 1, 2, 3, 4, 5, 6, 7, 8, 9. Parece que tudo está funcionando bem. De volta ao índice. Temos agora de fazer uma coisa semelhante para os países. Por baixo aqui podemos adicionar um invólucro. Verifique se isso está no mesmo nível que o wrapper do hotel acima em.country_wrapper, para o CSS mais tarde. O texto h2 de países, um link, e isso é exatamente como o link de cima aqui, que vai metade do href para avançar países barra e, em seguida, dentro dos parênteses o texto de ver todos. Temos estes dois links aqui para os países e também para os hotéis. Porque lembre-se que limitamos o tamanho amostral e a página inicial para mostrar apenas nove hotéis em nove países. Portanto, link para uma nova página para todos os hotéis e também todos os países permitirá que o usuário veja tudo o que está em nosso banco de dados. Mas voltaremos a isso mais tarde. Então eu vou desordenar lista para exibir os países, vai fazer o mesmo que acima. Vamos dizer cada país em países e, em seguida, criar um item de lista para cada um. Com um link aninhado dentro. O href está com dinâmica, então abra a parte traseira leva para ir para ligar para os países de barra para a frente. Aqui dentro queremos passar pelo campo. _id. Precisamos usar o país. porque se você se lembrar de antes no método de agregação, se voltarmos ao nosso controlador, definimos o ID exclusivo na fase de grupos para ser o país. Agora, dentro do nosso índice, este campo ID é onde o nome do nosso país está agora armazenado. Então podemos exibir o mesmo valor. Então, o áspero, as chaves e, em seguida, país._ id para exibir isso como texto ao lado do link. A última coisa para este modelo é também adicionar a imagem, a fonte da imagem. Novamente, isso usa as tomadas traseiras. Então barra direta esta é a pasta de imagens, pasta do país para pegar a imagem do país e, em seguida, assim como acima, podemos passar no nome do país, que é o valor do país. _id com o. Extensão JPG. Então, só para que este ID de sublinhado seja um pouco mais claro, se formos para o controlador do hotel em vez de renderizar esta página de índice, vamos apenas fazer uma rápida res.json e então podemos exibir os dados dos países. Salve isso e recarregue a página inicial. Agora, vemos que este campo de ID obrigatório está sendo definido para o país individual. É por isso que estamos usando o ID de sublinhado em nosso modelo para acessar os valores do país e, em seguida, exibi-los na tela. Agora, se reintegrarmos o controlador do hotel, remova todos os res.json e adicione o res.render de volta, salve isso e recarregue nossa página inicial. Deveríamos agora também ver nove países. Vamos até o fundo, 1, 2, 3, 4, 5, 6, 7, 8, 9. Para hotéis, também dizemos nove, que contamos antes e se percorrer, não devemos ver qualquer referência ao hotel 3 porque este é dito estar indisponível. Então, tudo parece bem e cada vez que atualizamos, devemos vê-los em uma ordem diferente porque estamos usando uma seleção aleatória de nossos hotéis. Esta é uma introdução ao pipeline de agregação. Voltaremos a isso mais tarde quando começarmos a trabalhar com o recurso de pesquisa que adicionamos no cabeçalho. No próximo vídeo, porém, continuaremos a trabalhar com Mongo observando como atualizar os dados em nosso banco de dados. 28. Editar e remover formulário: Se você vai para o nosso aplicativo e, em seguida, ir para a seção de administração, então /admin e, em seguida, ir para baixo, nós já usamos este link adicionar novo hotel, que você vê aqui em baixo. Mas agora vamos seguir em frente e trabalhar com o link Editar/Remover Hotel. Ele irá vincular a um formulário onde o administrador pode procurar um hotel usando o ID do hotel ou o nome do hotel. Em seguida, uma vez que este formulário é enviado, ele irá retornar o jogo no hotel e nos permitirá passar para atualizar ou excluir o hotel. O primeiro passo é criar um modelo de página com um formulário. Vamos para a barra lateral e, em seguida, para nossas visualizações, criar um novo arquivo chamado edit_remove.pug. Dentro daqui podemos estender os layouts para estender layouts e, em seguida, bloquear o conteúdo e certificar-se de que está escrito corretamente. Vou pegar um formulário simples onde você pode procurar o ID do hotel ou o nome do hotel. Para começar, eu só vou adicionar um título de nível 3 para o título que vamos passar mais tarde, o formulário, a ação pode ser igual a uma string vazia porque nós vamos adicionar uma solicitação de post para a rota atual em que estamos. O método vai ser POST e, em seguida, aninhado dentro aqui eu vou adicionar um div com a classe de form_input. Vamos começar adicionando um rótulo para o primeiro que vai ser o id do hotel, então rótulo para hotel_id e, em seguida, o texto de ID do Hotel. A entrada, ele vai ter o tipo de texto, o nome de hotel_id, e então um id que corresponde ao seu rótulo. Lembre-se antes que dissemos que podemos procurar este hotel que quer atualizar ou excluir usando este hotel id, ou podemos procurar o nome do hotel, se preferir. Vamos adicionar um p elementos com o texto de ou assim o usuário sabe que eles podem ou usa seu id ou o nome. Eu estou indo para copiar este formulário entradas e, em seguida, colar isso em baixo. Certifique-se de que está tudo bem alinhado e, em seguida, este vai ser para o nome do hotel. Mude id para ser o nome, o nome também, e também o id. Isto também tem o tipo de entrada de texto também e a coisa final que precisamos fazer é adicionar uma nova entrada de formulário. Isto vai ser para o botão para enviar que vai ser tipo de enviar, e também a classe para coincidir com alguns dos outros botões que criamos anteriormente de button_small. Os textos de confirmação. Guarde isso e então estamos prontos para ir. Este é um formulário que vai procurar o hotel que você deseja atualizar ou excluir. Se agora passarmos para o nosso arquivo admin e.pug, este é o link do meio que olhou para antes. Isso agora vincula a /admin/edit-remove então eu vou copiar isso e então nós podemos ir em frente e lidar com a rota que isso está vinculando. Fazemos isso como sempre dentro do arquivo index.js. Vou adicionar isso dentro desta seção de administração. Router, e esta é uma solicitação get, colando o caminho do arquivo de editar remover. Isso vai executar o HotelController e eu vou criar uma função chamada EditRemoveGet. Agora podemos criar este EditRemoveGet dentro do HotelController, assim, na parte inferior, exports.EditRemoveGet e configurar isso para ser uma função que leva em uma solicitação e resposta objetos. Tudo o que precisamos fazer dentro aqui é prender ou renderizar para todos os modelos de página que é criado. O modelo de página foi chamado edits_remove separado por vírgula. Podemos então passar em nosso título para a nossa página de Pesquisar por hotel para editar ou remover. Adicione um ponto-e-vírgula no final. Salve isso e vá para o navegador e, em seguida, clique em Editar/Remover Hotel. Esperemos que devêssemos obter o nosso formulário no fundo. Agora temos o nosso formulário uma vez que o administrador aperta o botão de confirmação depois de adicionar um id ou um nome. Isso, em seguida, enviará uma solicitação post, portanto, precisamos resolver esta solicitação post novamente no index.js. Em seguida, duplique o código de antes, cole isso em. Vamos usar a mesma rota, mas desta vez criar uma solicitação de postagem. router.post e em vez de EditRemoveGet, ele vai ser EditRemovePost. Em seguida, configure isso dentro do nosso controlador, também controller.js, então exports.EditRemovePost. Isso vai ser lidar com o banco de dados para que possamos marcar isso como assíncrono para que possamos usar uma espera dentro da função, passar em uma solicitação, resposta, e também em seguida. Configure o nosso bloqueio try e também o catch para quaisquer erros que passariam para o próximo. A primeira coisa que vamos fazer no lado deste bloco de tentativa é pegar os dados que estão sendo enviados para nós. Dentro do nosso formulário, vamos receber um ID de hotel ou o nome do hotel, então vamos ter algumas constantes para armazenar esses valores. O primeiro do HotelID. Este hotelID será armazenado dentro do request.body. Como estamos fazendo uma solicitação de postagem, podemos acessar esses dados se formos ao nosso formulário em Editar/Remover. Agora podemos acessar isso com o nome que demos aqui dentro de hotel_id. Usamos isso aqui dentro, então hotel_id, e eu vou usar o operador de dois tubos para dizer tudo ou nulo. A razão pela qual estamos fazendo isso é porque apenas o ID do hotel ou o nome do hotel estarão presentes. Portanto, o geral será nulo. Portanto, precisamos lidar com o que acontecerá se obtivermos um valor nulo. Podemos fazer o mesmo logo abaixo. Constante para HotelName é igual a req.body, e este é.hotel_name, então teremos o nome do hotel ou será nulo. Assim como anteriormente, agora também vamos procurar ou modelar usando o método. find. Vamos ter as constantes chamadas hotelData igual a aguardar hotel.find. Vamos fazer algo um pouco diferente desta vez porque não sabemos se estamos procurando o ID do hotel ou o nome do hotel. Porque não podemos ter certeza de quais dados estão sendo passados para nós, Mongo nos fornece com o operador de todos e, em seguida, podemos fornecer uma matriz desses dois valores para procurar um ou outro. Passando nossos objetos e, em seguida, usar o $or. Isto vai levar em uma matriz e dentro desta matriz podemos passar em nossos dois valores que queremos procurar. Abra as chaves. O primeiro é o nosso id hotel. Se recebermos o id do hotel a partir do formulário, queremos procurar pelo id. O id Mongo é _id para que possamos verificar se este é igual ao id do hotel que é a nossa constante apenas aqui. Se isso não estiver presente, separado por vírgula, podemos adicionar uma segunda verificação. O segundo caso é para se recebermos o nome do hotel em vez do id. Portanto, queremos verificar o campo chamado hotel_name do nosso banco de dados. Em seguida, queremos verificar se isso é igual à nossa variável hotelName, que temos apenas aqui. Adicione o nome do hotel- Espero que isso faça sentido. Estamos fazendo um método de busca, e estamos usando o operador o para verificar se um desses campos é uma correspondência. Depois de usar o nosso método de busca de pontos, vamos agora especificar um agrupamento para procurar. Se apenas removermos o ponto-e-vírgula no final por enquanto, e então encadear no fim.collation, abra os colchetes e, em seguida, passe em um objeto. agrupamento nos permite fazer correspondências específicas de linguagem, então eu só vou digitar a si mesmo e agora. A localidade vai ser enviada para en, adicionar uma vírgula, e então a força como um valor de dois, então vamos adicionar um ponto-e-vírgula no final. Usando o agrupamento, como temos aqui, agrupamento nos permite fazer correspondências específicas de linguagem. Aqui estamos declarando que estamos usando textos em inglês, e a força é um valor opcional. Definir o valor de dois é um nível secundário de comparação, que significa que não diferencia maiúsculas de minúsculas. Isso é bom porque significa que podemos, por exemplo, apenas digitar a palavra hotel dentro do nosso formulário aqui embaixo, assim, sem usar um h maiúsculo, e você ainda encontrará o hotel no banco de dados. Há também números diferentes que você pode usar aqui também, e estes estão todos listados na documentação se você tiver uma necessidade para eles. Em seguida, vamos adicionar um if else declarações para lidar com o resultado do que fazer se um resultado foi encontrado no banco de dados. De volta ao nosso código. Depois disso, cria uma instrução if. Se o hotelData que é esta constante apenas aqui, .length é maior que zero. Aqui estamos basicamente verificando se este método fino armazenou quaisquer valores dentro do HotelData. Se isso acontecer, o valor será maior do que zero, então podemos ir em frente e fazer um res.json, e saída nosso HotelData. É claro que voltaremos a isso depois de fazer do HotelData nosso modelo, mas por enquanto podemos deixar isso como um res.json, então adicionamos à palavra-chave return depois, então não passamos para a declaração l se a seção for Verdadeiro. Se for falso, criamos uma instrução else e, em seguida, poderíamos fazer res.redirect para redirecionar o usuário para /admin/edit-remove. Basicamente, se nenhum dado for encontrado no banco de dados ou não houver correspondências, vamos apenas ser redirecionado para a página atual, então fora para o navegador podemos dar uma chance. Então vamos testar para o hotel 7, ele confirma, e então nós recebemos nossa res.json com o HotelData devolvido. Os dados do hotel correspondem ao hotel 7, o que é bom, e também usamos o minúsculo para esta pesquisa 2. Vamos tentar também com a identificação do hotel. Vamos pegar uma dessas identidades de hotel do MLab, hotel 6, adicione isso, confirme. Agora recuperamos o valor do hotel 6. O que eu quero fazer agora, em vez de fazer um res, json apenas aqui, Eu vou criar um novo modelo de página chamado hotel no detalhe de rolagem. Esta será basicamente a vista estendida do hotel com a descrição completa. Vamos começar removendo nosso res.json, e em vez disso fazer em res.render, passar em nosso modelo que vamos criar de hotel_detail. O título da página de Adicionar/Remover Hotel e, em seguida, passar em nosso HotelData, em seguida, abrir a barra lateral. Agora podemos criar esses modelos de detalhes do hotel. Dentro das visualizações, crie um novo arquivo de hotel_detail. Eu vou colocar. Estes modelos também serão reutilizados mais tarde, também precisaremos quando clicarmos em qualquer um dos hotéis individuais da nossa lista para serem levados para a vista de descrição estendida, então vamos começar a trabalhar nos detalhes do nosso hotel, , portanto, estende nossos layouts. Esta página também será usada para substituir este res.json, assim que tivermos um hotel correspondente, vamos então exibir este hotel na tela. Nós também precisamos importar o nosso hotel Mixin para que possamos reutilizar o mesmo código e exibir isso no lugar deste res.json. Em nosso modelo, podemos incluir mixins/_hotel, conteúdo de bloco. Indented m estamos agora indo para loop através de cada hotel em HotelData. HotelData, lembre-se, foi passado para este modelo apenas aqui, volta aos nossos modelos, podemos criar o nosso loop, cada hotel em HotelData. Podemos usar o div de.hotel, tanto quanto o resto do CSS mais tarde, e então outra vontade de mistura vontade mais hotel passando no hotel individual que temos aqui no loop. Agora, se salvarmos isso e, em seguida, sobre o nosso código, recarregue o navegador e, em seguida, role para baixo. Agora, em vez de este res.json, agora estamos tornando nosso hotel usando este hotel detail.profile. Nós também passar em seu hotel para o nosso hotel Mixin para reutilizar o código, que exibe o nosso hotel. Estamos quase acabados para este vídeo, a última coisa que eu quero fazer no topo deste hotel é adicionar dois botões. Um vai ser um botão que vai em frente atualizar este hotel que nós selecionamos, e então o segundo vai ser para excluir este hotel. No detalhe do hotel acima do nosso Mixin, vamos adicionar um link para o nosso botão. O REF vai sair, preciso dos abatics, o símbolo do hotel. Hotel._ id/atualização. Aqui estamos criando uma rota do ID do hotel, seguido por /update. Isto é o que usamos no próximo vídeo para lidar com a atualização, aninhado dentro aqui, adicionar o nosso botão com a classe de botão pequeno, e, em seguida, o texto de atualização hotel. Agora, basta copiar essas duas linhas, e adicionar isso mais uma vez logo abaixo. Estes também podem ser para nossas rotas de exclusão, então a mudança é excluir. Então este pode ser Delete Hotel. Dê esse salvamento e recarregue o navegador, confirme o envio do formulário, e há nossos botões de atualização e exclusão na parte superior. Mais tarde, também ocultaremos esses botões para que somente o administrador possa vê-los. Agora, dentro de nossa seção de administração, criamos um botão na parte inferior que tem links para a visualização de edição remover hotel. Aqui dentro podemos agora procurar por um hotel usando o ID ou o nome do nosso hotel exatamente como este. Podemos então clicar em confirmar, foram levados para o hotel que foi selecionado, e então temos a opção de atualizar ou excluir este hotel, e esta funcionalidade de atualização do hotel é o que vamos estar movendo no próximo vídeo. 29. Atualizando registros: Nós agora pesquisamos com sucesso o banco de dados para o hotel e mostramos em nossa visão. No último vídeo, também adicionamos esses dois botões para atualizar e também excluir o hotel. Se clicarmos no botão “Atualizar Hotel”, passaremos agora o ID do hotel na URL como um parâmetro, pouco antes de encaminhar atualizações de barra. Isso é porque nós configuramos isso no hotel detail.profile. Nós configuramos isso aqui dentro do nosso link. Ter este ID de hotel exclusivo é como vamos selecionar o hotel a partir do banco de dados que queremos atualizar ou excluir. Primeiro, podemos lidar com a rota no arquivo index.js. Em nossa seção de administração sobre a remoção de edição, vamos adicionar router.get. Neste vídeo, vamos lidar com as atualizações. A rota é barra direta admin barra direta. Queremos que esta seção seja dinâmica, então usamos dois pontos e damos a este ID um nome de ID do hotel. Então atualize. Queremos executar o controlador do hotel. Em seguida, crie uma função chamada Atualizar hotel get. Isto irá então exibir um formulário em uma tela que nos permitirá alterar os detalhes do hotel antes de criar um pedido de post para realmente enviá-los para o banco de dados. Mais no controlador de hotel, criamos esta atualização hotel recebe. Vamos para o hotel controller.js. Na parte inferior, exporta para atualizações. O hotel fica, que vai ser uma pia. Disfunção inteligente com a palavra-chave de sincronização, passando novo pedido, a resposta e também próximo. Podemos adicionar um bloco de tentativa. Em seguida, adicione uma constante de hotel. Isso vai adicionar peso sobre os dados quando vamos para o banco de dados e encontrar um registro. O único registro que queremos encontrar é o hotel que é passado como o parâmetro no topo aqui. Dentro do objeto de solicitação usaríamos need.params. Aguarda o hotel. Vamos encontrar um que retorne um registro que corresponda. Podemos combinar isso com o campo _ID. O ID que queremos corresponder é armazenado dentro do request.params. Nós nomeamos isso se formos para index.js ID do hotel. Identificação do hotel request.params. Depois disso, queremos adicionar nosso bloco de cache logo depois. Para armazenar em cache quaisquer erros passar isso para o próximo para o nosso middware, então o próximo erro. Para verificar que tudo isso está funcionando bem depois da nossa constante aqui. Vou fazer res.json para ver quais dados são devolvidos para nós. Podemos então passar neste hotel que estamos procurando e, em seguida, passar para o nosso projeto e, em seguida, bater recarregar. Agora, podemos ver que obtemos os detalhes de volta do hotel cheio que é o ID que é passado como um parâmetro na URL. Se voltarmos ao nosso administrador e procurarmos um hotel diferente no número 6. Vou actualizar. Temos o valor do hotel 6 devolvido para nós. Agora sabemos que estamos recebendo as informações corretas em vez deste res.json agora queremos renderizar modelos de página. O modelo que vou reutilizar é a adição de modelos de hotel. Esta é basicamente a forma que tem todos os campos que precisamos para o nosso hotel. Podemos ir em frente e modificar qualquer um destes e, em seguida, atualizar. Em vez das alterações res.json para ser res.render. Passando em nossos modelos de adicionar hotel. O título da página do hotel de atualização. Então, finalmente, também podemos passar os dados armazenados em nossas constantes de hotel. Passa para os nossos modelos e dar-lhes um cofre. Agora, vamos para o navegador e, em seguida, ele Recarregar em vez do JSON devemos agora ver a nossa página agora tem um formulário está na parte inferior. Este formulário será usado para atualizar o hotel. Dentro deste formulário, algo que idealmente queremos fazer é ter os dados passados para todos esses campos já. Por exemplo, deve dizer hotel 6. Podemos entrar e apenas modificar os dados que estão lá. Podemos usar esses valores diretamente antes de fazermos isso, vou colocar essa forma em um mixin para manter as coisas organizadas. Sobre a barra lateral e, em seguida, lado as Exibições e Mixins, criar um novo arquivo chamado formulário sublinhado hotel. Com a extensão.org, crie nosso nome de mixin no topo, como fizemos antes. Formulário de hotel que vai receber os dados do hotel como um argumento. Em seguida, Hotel.org na barra lateral. Este é o formulário que agora será renderizado para as atualizações e também para a seção Adicionar Hotel. Então podemos colocar isso do nosso formulário até o fundo. Nossa seção de formulário completo e salve o arquivo. Agora volte para uma mixin de forma de hotel e podemos colar isso. Se voltarmos para o topo e, em seguida, recuado corretamente, salve esse arquivo. Com mixin agora setup podemos agora voltar para adicionar hotel.pug. Em seguida, inclua o mixin na parte superior do arquivo. Inclua os mixins que é uma pasta e o nome do hotel sublinhado, forma sublinhado. Lembre-se que não precisamos da extensão PAG. Podemos incluir este mixin em qualquer lugar em nosso arquivo. Vou adicionar o meu back-end na parte inferior. Nós mais formulário de hotel. Pessoa nos dados do hotel. Se guardarmos isso e testarmos, está funcionando bem. Eu recarrego, ainda vemos que o formulário está agora na tela, mas nós terceirizamos isso para um mixin. Voltando a fazer esses campos de formulário, ter os dados do hotel já preenchidos. Isso pode ser adicionado dentro do mixin que acabamos de criar para o formulário do hotel. Vamos para um dos nossos campos, para começar. Vamos começar com o nome do hotel. A maneira como podemos fazer isso para definir o volume. Dentro das entradas podemos definir o valor igual a um hotel que recebemos como argumento aqui. Em seguida, o nome que queremos é.hotel_name. Na verdade, isto é uma corda. Não queremos usar as citações. Agora, se salvarmos isto e depois recarregar o nosso formulário. Agora vemos o valor do hotel 6 que agora está sendo passado em nossa forma. Podemos fazer o mesmo com os outros campos também. A descrição. Vá para a nossa área de texto porque dizemos área de texto. Precisamos fazer isso um pouco diferente. Precisamos definir o texto para ser igual a hotel.hotel_description. Em vez de usar os atributos de volume como fazemos em outras entradas, podemos descer para a classificação de estrelas. Fizemos a imagem para não precisarmos disso por enquanto. A classificação por estrelas leva você a voltar ao valor de hotel.star_rating. O país. Hotel, país, o custo por noite. Novamente após o valor necessário vai ser igual ao custo do ponto do hotel por noite usando sublinhados. Salve isso e confira isso no navegador. Recarregar. Ótimo, isso agora torna a atualização das informações de um hotel muito mais fácil. Em seguida, precisamos configurar a solicitação de post para realmente lidar com as atualizações quando clicamos no botão Confirmar. Passe para o roteador, que está dentro do ponto de índice js. Vamos fechar estes para baixo, abrir o índice de pontos js duplicatas sobre obter a solicitação de atualizações. Mas desta vez, mudanças para ser postado e , em seguida, o controlador do hotel vai ser atualização post hotel. Em seguida, crie isto no controlador do hotel. Exportações ponto atualizações hotel post. Isso vai ser em uma função de sincronização com o pedido e os objetos de resposta todo o caminho ao lado para o middleware. Configurar a nossa função. Podemos começar com o tratamento de erros. Tente e também um bloco catch, verificando os erros. Em seguida, passa para um middleware com o próximo. Lá vamos nós. Dentro do nosso bloco de testes, a primeira coisa que quero fazer é resolver por constante. Isto vai ser para guardar o ID do hotel que nos foi passado. Este número de identificação do hotel está disponível como um parâmetro que temos apenas aqui. Vamos configurar isso agora, const hotel Id é igual a solicitar dot params dot hotel Id capital I. Em seguida, uma segunda constante de hotel, que vai ser igual a esperar hotel, que é o nosso modelo. Desta vez, vamos estar usando um método chamado find by Id e update ou um caso comum ou find by Id e update. Este é um método Mongo que podemos usar para, em seguida, passar no hotel Id, que temos estrela apenas aqui. Podemos, então, obter o registro dentro de Mongo e, em seguida, voltar para os novos detalhes. Primeiro de tudo, os primeiros argumentos que vamos adicionar, esta é variável de hotel Id. Este primeiro argumento é a idéia do registro, que queremos encontrar dentro de nosso banco de dados, separado por uma vírgula. O segundo parâmetro são os dados que queremos usar para atualizá-lo com. Estes dados podem ser encontrados dentro da solicitação, o corpo. Nós também usamos corpo solicitante quando originalmente criado o hotel, que é um pouco acima. Se vai subir para criar post hotel, que foi uma função que originalmente usado para configurar um novo hotel. Lembre-se aqui dentro nós criamos um novo hotel usando informações do objeto de solicitação armazenado dentro do corpo. Estes são os dados que são transmitidos a partir do formulário. Vamos usar os mesmos dados abaixo. Mas desta vez, em vez de criar um hotel, vamos usá-lo para atualizar. O terceiro parâmetro. Finalmente, eu vou adicionar um objetos de opções, então separados por vírgula em um objeto e podemos definir novo para ser verdadeiro. Por padrão, após a atualização, ainda teremos o registro original retornado para nós. Se formos em frente e definir novo para ser verdade é que vamos ter certeza de voltar a versão modificada ou atualizada para mostrar em nosso aplicativo. Depois, para o navegador. Agora podemos fazer uma mudança. Vamos chamar isso de hotel 66, confirme. Não vemos nada na tela porque não estamos configurando o que está fazendo a seguir. Mas em vez disso, se formos para o mLab e depois atualizarmos. Agora podemos ver que temos o hotel 66 dentro de nossos registros. De volta ao nosso projeto. Podemos ver que ainda está girando no canto. Navegação Ravenous pendurou e nós vamos fazer um descanso ou redirecionar para então redirecionar isso para a rota, que não vai lidar com isso. Depois da nossa constante de hotel, vamos fazer um redirecionamento de ponto de descanso. Dentro dos carrapatos traseiros podemos adicionar todos barra todos e, em seguida, cortar a ID do hotel. Temos isso armazenado dentro desta variável aqui. Podemos colar isso, salvar isso e recarregar. Nossos pedidos de postagem agora é atualizado banco de dados e também nos redirecionou para encaminhar barra todos e, em seguida, barra a ID do hotel. Na parte inferior, vemos que ainda não configuramos esta rota e é por isso que vemos um erro. Mas o hotel ainda está atualizando dentro do MLab. Vamos lidar com esta rota mais tarde. Esta mesma rota também é necessária quando clicamos em Hotel. Se você ir para a página inicial clicando no logotipo e, em seguida, clique em qualquer um desses hotéis. Veja todos os detalhes. Isso nos leva para a mesma rota que é para a frente barra todos e, em seguida, o hotel Id e, claro, temos a mensagem de não encontrado porque ainda não estamos criados este no navegador. Antes de deixarmos este vídeo lá, vamos tentar mais uma atualização em um hotel diferente para ter certeza de que tudo está funcionando bem. Voltar para o Admin, então encaminhar barra admin, Edições e Remover. Podemos ir para o hotel número 12, confirme. Há o hotel 12, clique no botão Atualizar e muda para ser o hotel 122, Confirme com o mLab. Vamos rolar para cima e para baixo para que você possa ver esses relatórios, nossos hotéis normais lá. Vá para a próxima página. Ali está o nosso nome atualizado do hotel. Vou rapidamente reintegrar estes de volta a como eram. Hotel 12, confirme isto. Em seguida, podemos voltar para Admin, basta encaminhar barra admin dentro da URL. Podemos ir também para o hotel 66, que é o primeiro que editamos. Podemos ver que não adicionamos uma imagem para isso. Vamos atualizar as mudanças de volta para o hotel 6 na imagem do hotel 6. Em seguida, atualize isso no banco de dados. Estas são todas as nossas atualizações agora funcionando bem. Antes de seguirmos em frente agora esta pequena coisa que precisamos corrigir apenas se formos para o administrador. Em seguida, se formos para Editar e Remover, procure um hotel, clique em Confirmar e, em seguida, para Atualizar. Atualmente temos todos os campos dentro aqui ou repovoados e isso funciona muito bem ao atualizar o hotel. No entanto, a pessoa nesses dados criará um problema quando adicionarmos um novo hotel. Vamos adicionar rapidamente a imagem do hotel 12 de volta e, em seguida, Confirmar. Em seguida, se vamos para Admin e, em seguida, encaminhar barra adicionar. Lembre-se, a barra adiciona usa os mesmos modelos do mesmo formulário que usamos para atualizar o hotel. Mas podemos ver dentro do modelo que temos um erro. Estes erros são causados porque dentro do formulário que acessamos nos dados do hotel. Vá a um mixin e aqui estamos acessando o hotel, que é passado em uma pilha de opções aqui. Basicamente, este formulário espera receber os dados do hotel. No entanto, se formos para o controlador do hotel e, em seguida, se formos para atualizar hotel obter. Aqui, apresentamos os dados do hotel que ele precisa. Mas se você rolar até onde criamos o hotel, que está em criar hotel chegar apenas aqui. Isso também está usando o mesmo formulário de adicionar hotel. No entanto, nós não passamos em nenhuma informação do hotel, e na verdade não temos nenhuma razão para isso. Uma maneira de contornar isso é sobre o hotel forma mixin. Sublinhado hotel, forma sublinhado, podemos ir em frente e inicialmente definir hotel para ser um objeto vazio. Hotel é igual a um objeto vazio e, em seguida, salve isso e recarregue. Agora podemos ver quando adicionamos um novo hotel, agora temos este formulário de volta na tela. Adicionar hotel para estar em um objeto vazio desta forma fará com o modelo ciente do nome do hotel e você saberá se há um erro. Mas como é um objeto vazio, não vai interferir com nossos campos. Ótimo, o principal objetivo neste vídeo foi atualizar com sucesso os hotéis em nossa base de dados e agora temos isso funcionando. Em seguida, estaremos cobrindo outra tarefa importante também e isso é ser capaz de excluir registros de nosso banco de dados. 30. Excluindo registros: A grande ação final que queremos realizar é poder excluir itens do nosso banco de dados. Muitas vezes, você ouvirá a sigla CRUD, ao lidar com bancos de dados. Que é abreviação para as quatro ações principais que são criar, ler, atualizar e excluir. Nós já criamos dados, também podemos ler dados também e, em seguida, no último vídeo, atualizamos nossos dados. Agora é hora de examinar a exclusão de registros também. Vamos em frente e criar um hotel de teste para trabalhar com mais de um administrador dobra/adicionar. Esse é o nosso teste, teste, e podemos escolher qualquer imagem, qualquer classificação de estrelas é bom e o país e, em seguida, confirmar. Após este redirecionamento, agora redirecionamos para formal/todos e, em seguida, o ID do país que criamos. Pegue este novo ID de hotéis copiando esta seção aqui. Em seguida, verifique se isso está armazenado em um banco de dados sobre um mlab, então pressione reload. Basta verificar duas vezes, temos nosso teste, então vá para a primeira seção, e lá estamos nós. Há o nosso hotel de teste dentro do banco de dados. Se voltarmos para nossos projetos e, em seguida, ir para admin para encaminhamento/administrador, podemos selecionar, editar e remover hotel. Assim como fizemos no último vídeo, podemos colar no ID do hotel, que foi criado para testes, confirmar, e então somos levados para a vista completa e teremos os botões do último vídeo onde podemos atualizar e excluir o hotel. Clique no botão excluir desta vez e, em seguida, encaminhado para encaminhamento/administrador, encaminhamento/nosso ID do hotel, forwad/delete. Isto é porque nós dissemos isso anteriormente nos modelos detalhados do hotel. Abra a barra lateral e, em seguida, vá para hotel_detail. Este é o link que dissemos usar dentro daqui, e isso é o que vamos seguir em frente e lidar com o arquivo de índice de roteadores [inaudível]. Feche-o e depois no index.js, desta vez vamos definir router.get para ser cena de inverno string do admin forward/nossos segmentos dinâmicos, que é o capital de ID do hotel I e, em seguida, encaminhar/excluir. Isso segue o mesmo padrão que a seção de atualização logo acima, mas desta vez usando excluir. Nós vamos então criar o nosso controlador de hotel.delete hotel get. Em seguida, para o controlador do hotel podemos agora criar esta função. Hotel controller.js e, em seguida, para baixo, então este é exportação.delete hóspedes do hotel. Esta será uma função de sincronização, então marque isso como uma sincronização. Como em nossos objetos ou solicitação de resposta e no próximo outono ou configuração de ware do meio todas as funções então isso vai ser bastante semelhante a um estande. Também precisamos retirar a identificação do hotel, então colem isto. Disposto a não dizer uma constante de hotel poder, então const hotel e isso vai ser igual a esperar, esperar de um modelo de hotel e, em seguida, usar o método chamado encontrar um. Isso vai encontrar um registro dentro do nosso banco de dados e queremos encontrá-lo pelo ID do hotel, que armazenamos aqui. Como um objeto, adicione isso em. Queremos encontrar um registro pelo campo ID de sublinhado e o ID que queremos corresponder é o ID do hotel, que é esta variável apenas aqui. Então podemos ir em frente e fazer um descanso ou renderizar para exibir o conteúdo de nossos modelos, que, como antes, quando atualizamos, vamos renderizar os mesmos modelos de hotel de anúncios. Para este tempo, clique e confirme na parte inferior do nosso formulário. Em seguida, vamos em frente e excluir nosso hotel em vez de atualizar. ADD_hotel como em nosso objeto, o título de excluir hotel, e, em seguida, passar a nossa variável de hotel. A razão pela qual estamos usando este modelo de adicionar hotel mais uma vez é para que você possa ver todos os detalhes do hotel influencables para garantir que este é o que queremos excluir. Também passamos por este hotel, que vamos apagar. Mais uma vez, você pode preencher todos os campos dentro do nosso formulário. Agora, se dissermos que isso faz você nas mesmas rotas de antes, que é admin, nosso ID do hotel e, em seguida, exclua. Agora podemos recarregar e agora temos o formulário de adicionar hotel. Agora, o que isso significa? Agora temos esta solicitação get toda a configuração. Precisamos agora lidar com a forma como apagamos o hotel. Para fazer isso, podemos criar uma solicitação de postagem para a mesma rota. Sobre o index.js, vamos duplicar esta linha aqui, colar isso em, desta vez este é um pedido de post e excluir post de hotel sobre o controlador do hotel e isso é exportação.delete hotel post. Esta é também uma função de sincronização, já que estamos lidando com dados do nosso banco de dados, passando solicitação, resposta e próxima. A próxima coisa a fazer é adicionar nosso tratamento de erros que tentamos pegar. Acabei de notar acima, nós também precisamos adicionar isso a isso também. Apenas por momentos vai pedir o erro e, em seguida, passar o nosso erro para próximo e, em seguida, podemos adicionar isso para excluir hotel get também então tente. Podemos adicionar essas três linhas até um bloco try e, em seguida, adicionar catch e ênfase ao próximo com o nosso erro. Bom, então de volta aos nossos pedidos de postagem abaixo dentro da seção tente. Novamente, queremos pegar o ID dos parâmetros para que possamos copiar esta linha aqui. Isso em um ativo do nosso hotel tão const hotel aguarda, nosso modelo de hotel e para remover um item de [inaudível], podemos usar um método chamado encontrar por ID e remover, que é bastante semelhante ao que usamos acima, mas este um foi encontrado por ID e atualização. Até a nossa solicitação de postagem, podemos encontrar novamente por ID e remover. Então aqui dentro tudo o que precisamos fazer é passar na identificação do hotel que queremos remover. ID, o campo que queremos segmentar, e então corresponde ao nosso ID do hotel, que é esta constante aqui, então ponto-e-vírgula no final. Assim que excluirmos este hotel do banco de dados, então vamos querer fazer um redirecionamento. Descanse ou redirecione e para onde você quer ir também? Bem, antes quando estamos olhando para atualizar hotéis, fazia sentido redirecionar para o hotel atual com as informações atualizadas. No entanto, não podemos fazer o mesmo quando excluir em um hotel porque este hotel não existe mais. Em vez disso, eu só vou redirecionar para a rota de casa, nos dá um salvamento e depois para o navegador. Se recarregarmos, então agora estamos no nosso hotel de teste e agora clique “confirmado” cria uma solicitação de postagem. Este é um bom sinal de que estavam sendo redirecionados para a página inicial. Agora vamos atualizar o MLAB. Agora temos 12 registros, então temos o hotel 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Na próxima página temos 11 e 12, então parece que nosso hotel foi excluído com sucesso. Se o seu foi excluído, parabéns, você executou ações de criação, leitura, atualização e exclusão em seu banco de dados. Este é um grande passo para a nossa aplicação e fizemos muitos progressos. Na próxima seção deste curso, vamos continuar com nossos projetos adicionando, estilizando, mais modelos e recursos e, em geral, fazendo melhorias. Estou ansioso para vê-lo na próxima seção e adeus por agora. 31. Visão detalhada do hotel: Nesta seção, vamos continuar com nossos projetos e fazer algum trabalho geral, incluindo estilo e melhorias. Vou começar as coisas trabalhando com os modelos detalhados do hotel que criamos para exibir o hotel que procuramos antes de editar ou excluir. Vamos reutilizar esses modelos novamente em alguns lugares. Primeiro de tudo, se formos até a página inicial ou as rotas iniciais e, em seguida, clique em qualquer um dos nossos hotéis, desça até a parte inferior dos nossos modelos, vemos uma mensagem de erro de não encontrado. Isso é porque precisamos lidar com essas rotas que você tem no topo da barra de frente todos, em seguida, barra a ID do hotel. Com estes poucos, podemos reutilizar o hotel em modelos detalhados que criamos e também adicionar estas rotas irá corrigir outras áreas também. Por exemplo, se voltarmos para a página inicial e, em seguida, você clicar em, ver tudo, clicando em qualquer um desses hotéis é novamente levado para a mesma rota. Então clique no hotel um e temos as mesmas rotas de foward barra todos e, em seguida, o nosso ID do hotel, juntamente com o erro na parte inferior. Isso irá reparar esses dois problemas, e também novamente, se formos para o hotelController.js e formos criar post de hotel. Role para cima, assim você criar hotel post aqui e este res.redirect, também redirecionar para estas mesmas rotas aqui. Isto é depois de criarmos um novo hotel, irá então redirecionar esta página de detalhes do hotel. Este é um bom para começar a trabalhar agora. Vamos começar com a rota sobre qualquer ponto de índice js. Se nós rolar para cima, nós já deve ter a rota ou o get para a barra dianteira toda rota. Vamos manter estes em sequência e adicionar isso abaixo. Então router.get ao redor desta vez, como sabemos, é a barra de todos, e, em seguida, o ID do hotel, que você pode adicionar como um segmento dinâmico. Vou chamar esta variável de hotel. Isso também vai usar o controlador do hotel e, em seguida, usar uma função chamada detalhe do hotel, ponto-e-vírgula nas extremidades. Então podemos ir em frente e criar detalhes do hotel no controlador. Podemos adicionar isso em qualquer lugar, vamos até o fundo. Começamos como sempre com exportações, e, em seguida, o nome do detalhe do hotel, e, em seguida, definir isso para uma função de sincronização, passar no pedido, a resposta e também em seguida, adicionar o corpo da nossa função. Então vou tentar pegar o bloco. Então tente e, em seguida, pegar o que leva no erro e, em seguida, passar o erro para o próximo. Ok, bom. Vamos começar criando um par de constantes. A primeira constante vai pegar o parâmetro, que é o ID do hotel. Vamos usar os segmentos dinâmicos do hotel, que está na URL. Vamos primeiro dizer que isso está em constante. Então const, hotelparam é igual ao pedido dot params e, em seguida, dot hotel, que é o nome que lhe demos. Uma segunda constante, que é para os dados do hotel. Vamos usar isso para pesquisar nosso banco de dados usando este parâmetro do hotel e, em seguida, encontrar o hotel único que precisamos. Vamos usar o Aguarde novamente, para esperar que os estados estão voltando antes de seguir em frente. Precisamos procurar o modelo do hotel, maiúsculo H, usar o método de busca. Então precisamos passar no campo que queremos encontrar. Queremos usar os campos de ID de sublinhado e verificar se há quaisquer IDs que correspondam à nossa variável param do hotel. Passe no param do hotel, adicione um ponto-e-vírgula no final. Em seguida, para terminar isso, vamos fazer um res.render para renderizar modelos para a tela. O modelo que vamos usar é o detalhe do sublinhado do hotel. Passe o título de vamos viajar e, em seguida, passar ao longo da nossa variável de dados do hotel, que é esta variável aqui, que armazena o hotel único a partir do banco de dados. Agora, uma vez que já temos hotel sublinhado detalhe dentro da nossa barra lateral e, em seguida, nas vistas. Temos esta vista aqui em baixo. Nós só temos essa configuração e isso também está recebendo o mesmo nome de variável dos dados do hotel. Agora, se dermos a este um cofre, diga que o controlador e, em seguida, voltar para o nosso navegador e agora recarregar. Nós agora pegamos o ID do hotel do URL pessoalmente para o nosso controlador, que é então obter as informações de volta do nosso banco de dados e, em seguida, enviar isso para o nosso modelo de detalhes do hotel. Também devemos ver isso está funcionando se vamos para a página inicial e clicar em qualquer um desses hotéis, para ser levado para a página de detalhes do hotel. Vamos também testar as rotas, que são todos os hotéis. Clique em ver todos, e novamente, qualquer um desses hotéis, e este está funcionando bem também. Finalmente podemos ir para adicionar novo hotel. Vá para o nosso administrador barra em e vamos criar um hotel de teste. Qualquer informação aqui está boa. Em seguida, confirme, role para baixo e lá está o nosso hotel de teste, que acabamos de criar e como vimos antes de obter um redirecionamento de pontos res, que passa pela frente barra todos e, em seguida, este ID de hotel. Embora esta vista detalhada do hotel no momento, parece o mesmo que todos os hotéis, haverá algumas diferenças em breve. Quando vamos em frente e adicionar algum estilo, vários hotéis vão caber na mesma página, assim como nesta página inicial aqui. Mas se você clicar sobre isso e olhar para a vista detalhada do hotel, esta será uma única vista para apenas um hotel. Isso também nos dará espaço para adicionar mais detalhes, como uma descrição de hotel perto do fundo, e isso é o que faremos no próximo vídeo quando olharmos para renderização condicional. 32. Locais e renderização condicional: Vamos cobrir algumas coisas diferentes neste vídeo. Comece com moradores locais, todas as variáveis locais. Isso é algo que já cobrimos realmente ao modelar, mas também vamos olhar para como torná-los disponíveis para todos os modelos também. Atualmente mais no HotelController. Vamos clicar no hotelController.js e descer até os detalhes do hotel. Apenas aqui, nós já passamos uma variável local para nossos templates, assim como fizemos muitas vezes. Os dados que passamos para este modelo, se adicionarmos isso à sua própria linha para torná-lo um pouco mais claro, este é um objeto que atualmente temos o título, que é um par de valor de nome, e, em seguida, também um dados de hotel que é uma variável, que criamos logo acima. Aqui estamos passando o título e os dados do hotel que retiramos do banco de dados. Estamos livres para usar esses locais para passar qualquer coisa que queremos usar neste modelo. Por exemplo, vamos em frente e adicionar o nome de Chris e depois em sua vista de detalhes do hotel. Nós já vimos que podemos usar esses apenas como variáveis JavaScript normais, assim como fizemos aqui, usando hotel e, em seguida, acessando o ID do objeto. Aqui estamos usando as variáveis locais com ticks invertidos, para que você possa misturá-las com algum texto. Nós já produzimos essas variáveis com o símbolo de igual. Então sabemos como fazer isso. É p igual, e neste nome, recarrega e lá vamos nós, essa é a nossa variável local como os templates, e também como podemos produzir uma variável quando usada com texto simples usando um hash. Vamos remover isto. Se ele se mistura com algum texto simples, como aqui, podemos usar o hash, as chaves, e, em seguida, também passar em nossa variável nome, salvar e, em seguida, recarregar. Lá vamos nós. Aqui está o nosso hotel de atualização e o nosso nome de Chris misturado com o texto do botão. Vamos remover esses exemplos. Se formos para qualquer um dos modelos, por exemplo, se formos para todos os hotéis, vamos tentar fazer o mesmo. Vamos tentar produzir nossa variável name. Então p é igual ao nome, e sair para todas as rotas de hotéis. Clique em ver tudo. Agora, se rolarmos para baixo, não vemos nenhuma referência ao nome. Isso ocorre porque os locais, como eles soam, eles são variáveis locais com escopo apenas para um único modelo, para o qual vamos passá-los, então vamos remover isso, p é igual ao nome. Também no controlador do hotel, vamos remover o nosso nome daqui também. Mas também frequentemente casos em que queremos passar certas variáveis para todos os nossos templates para usar em vez de criar uma variável em cada uma dessas funções e, em seguida, passar os mesmos dados. Se você se lembrar desde o início nos projetos mais no app.js. Vamos para app.js. Falamos um pouco sobre o middleware app.use, que terá apenas aqui. Este middleware, quando não definimos rotas como o primeiro parâmetro, é uma ação que é usada para cada solicitação para a nossa aplicação. Ele basicamente adiciona uma camada que passamos por cada solicitação. Podemos fazer uso de app.use para criar algum middleware para todas as solicitações, que então irá em frente e tornar nossas variáveis disponíveis em todos os modelos. Então vamos criar isso dentro app.use. Vamos até o nosso app.set e, em seguida, adicionar em nosso middleware app.use. Isso vai levar em uma função que tem acesso à solicitação, a resposta, e também a próxima. Vamos configurar isso como uma função normal. Ao usar app.use, esta função, que é chamada, também terá acesso aos objetos de solicitação e resposta também. Lembre-se, porém, se queremos apenas que esta função seja executada em uma solicitação para uma rota específica, podemos adicionar o roteamento primeiro antes disso. Assim, como o primeiro parâmetro, podemos adicionar a string, um admin barra, por exemplo, separado por uma vírgula, e, em seguida, nossa função como o segundo valor. Agora, qualquer coisa que rodarmos dentro daqui só funcionará nesta rota de administração. Mas queremos que isso seja executado em todos os modelos em nosso aplicativo. Então eu vou deixar o primeiro parâmetro vazio. Veja, há uma ação que podemos adicionar um log do console dentro do corpo da função, adicionar log do console e, em seguida, simplesmente adicionar alguns textos de saudação. Dê isso um salvamento e depois para o navegador. Agora, se clicarmos no nosso logotipo para fazer uma solicitação para o nosso site, sobre o Visual Studio Code e agora podemos ver na parte inferior temos os textos de saudação, tentativas mais algumas vezes. Então continue clicando sobre isso para fazer um pedido. Vemos para cada solicitação que recebemos o registro do console de Olá. Dentro do navegador, porém, se dermos uma olhada no ícone giratório na parte superior, vemos nosso aplicativo começa a travar. É porque middleware é destinado a ser passado através e aqui nós não adicionamos na próxima chamada para passar para o próximo pedaço de middleware na cadeia. Então, está basicamente preso em sua rota. Vamos passar para o nosso app.use, e, em seguida, dentro da nossa função, eu vou bater em seguida, dar-lhe um salvamento. Agora, se recarregarmos, podemos ver que podemos recarregar essa rota quantas vezes quisermos e ainda está funcionando. Então, mais adiante, o objeto de solicitação que temos aqui, temos acesso a uma propriedade chamada caminho. Isto irá retornar o nome do caminho da solicitação atual ou basicamente a URL atual. Vamos dar uma olhada nisso. Digamos que o caminho atual é, e, em seguida, adicionar ao final a solicitação, que é este objeto apenas aqui ponto caminho. Agora guarde e vá para qualquer rota. Por exemplo, vamos avançar para a barra de inscrição, pressione Enter. Agora, no Visual Studio Code, vamos levantar essas terminologias aqui, e podemos ver aqui nosso caminho atual é a inscrição de barra direta. Este é o registro do console que definimos aqui. Agora vou disponibilizar este URL para uso como uma variável que terá acesso a qualquer template. Portanto, podemos fazer alguma renderização condicional mais tarde, o que nos permitirá exibir apenas certas informações com base na rota atual. Primeiro de tudo, vamos reduzi-los para criar um pouco mais de espaço e excluir nosso log do console, deixando em apenas o caminho do ponto de solicitação. Agora este caminho de ponto de solicitação pode então ser atribuído a res locais de ponto. Assim, os locais de pontos res equivalem ao caminho do ponto da solicitação. Isso irá então atribuir nosso caminho de ponto de solicitação para o objeto local, que está na resposta. Também podemos dar a esta variável local ou local um nome de nossa escolha. Para mantê-lo descritivo, eu vou chamar este ponto URL. Portanto, podemos acessar essa variável ou esse caminho em nossos modelos por seu nome local de URL. O que isso significa agora para os nossos projetos? Bem, isso agora significa que podemos acessar este URL local em qualquer um de nossos templates dentro do projeto, porque é middleware, que nós configuramos apenas aqui, é sempre passado por cada solicitação. Nós também estaremos adicionando mais moradores como este à medida que vamos para este projeto. Por exemplo, para tornar as mensagens flash disponíveis em todos os modelos também, mas esta variável URL, agora podemos usá-lo para renderização condicional. renderização condicional nos permite exibir determinados dados dependendo de uma condição. Assim como quando usamos uma declaração if. Será realmente útil para nós neste projeto. Como estamos reutilizando modelos, agora só podemos mostrar certas partes dos modelos, por exemplo, em determinadas rotas ou podemos mostrar ou ocultar certas partes desse modelo, dependendo se um usuário estiver conectado. A primeira coisa que eu quero fazer é remover os botões de atualização e excluir para determinadas rotas. Então, se formos para a nossa página inicial e clicar em qualquer um desses hotéis, e eu rolar para baixo, vemos que temos este botão Atualizar e Excluir Hotel, que está mostrando nesta rota aqui. Isso é algo que só queremos mostrar nas rotas de administração. Para ocultá-los, podemos fazer uso de renderização condicional para mostrar somente se o URL ou o caminho começa com barra Admin. Então, para o hotel_detail.pug. Salve nosso app.js. Vamos primeiro começar criando uma declaração if usando nossa variável URL. Logo após o dot hotel div, recuá-los em um nível if url, que é o nome da variável local, que agora passará para todos os templates e, em seguida, usar dot startsWith. Adicione os colchetes depois. StartsWith é um método JavaScript regular que será verdadeiro se passarmos em uma string dentro dos colchetes, que corresponde ao início da URL. Então, para verificar se a URL começa com a barra admin, podemos adicionar isso em como uma string. Agora, se recuarmos estas quatro linhas aqui, quais são os nossos botões. Agora, se a nossa URL começa com a barra direta admin, tudo o que está aninhado dentro desta instrução if, ou seja, nossos botões agora serão processados condicionalmente caso contrário, qualquer outra coisa que não esteja aninhada dentro, como nosso mixin hotel, ainda será exibido independentemente da rota. Então, vá para o navegador e vamos dar uma chance. Se ele recarrega e, em seguida, role para baixo, podemos ver esses botões agora estão faltando na parte superior de nossos modelos. Vamos tentar um pouco mais, abrir a página inicial, ver tudo, clicar em qualquer um desses, e os botões ainda estão faltando. Vamos tentar a rota de administração e verificar o botão se eles estão lá. Então encaminhar barra admin e, em seguida, ir para baixo para Editar, remover hotel. Vamos procurar qualquer nome de hotel. Então, o hotel 7, agora exibe o hotel 7, e ainda temos as atualizações e os botões de exclusão. Porque a nossa URL começa com a barra de administrador. Bom, essa renderização condicional agora está funcionando com nossa variável URL. Outro uso para esta variável será mais em nosso hotel.pug mixin. Então vamos abrir a barra lateral. Mixins e depois hotel.pug. Podemos finalmente fazer uso da descrição do hotel que temos disponível, mas apenas exibir isso na vista necessária do hotel. Então, logo após o nome do hotel, mantenha qualquer linha horizontal. Vamos criar outra instrução if usando nossa URL. Então ponto StartsWith, desta vez podemos passar em uma string que é barra para frente todos e, em seguida, barra para frente. Aninhado dentro aqui podemos definir um elemento p que é igual ao hotel. Então é hotel_description como uma nova linha horizontal logo abaixo para separar isso da classificação de estrelas, o país e o preço. Salve isso e depois em nosso navegador. Vamos tentar com a página inicial. Agora vemos que o nosso hotel está listado sem descrição. No entanto, se você clicar em um de nossos links para ir até a página de detalhes do hotel. Agora vemos descrição agora é adicionado em nossos modelos, mas porque nós apenas encaminhar barra todas as rotas. Se passarmos para a nossa página inicial e, em seguida, também clique em ver todos. Aqui também vemos todos os nossos hotéis, mas sem descrição. Mas esta rota também começa com barra de todos. Isso pode parecer um pouco confuso porque não estamos vendo a descrição nesta página dois. Se olharmos um pouco mais de perto e passar para o nosso modelo, vemos a barra final depois de tudo. Se passarmos para as nossas rotas em nosso index.js, tendo barra para a frente todos, e depois barra para a direita no final só corresponde a esta segunda rota aqui, que torna o nosso detalhe do hotel. Uma vez que usamos uma barra adicional e também nossa rota de todos os hotéis aqui é apenas barra direta tudo com nada no final, é por isso que esta descrição só funciona na página de detalhes do hotel e não na rota de todos os hotéis, que Temos aqui. Vamos fazer mais uso desta variável de URL para o curso, mas em seguida vamos estar lidando com a exibição em nossos hotéis com base em um determinado país. 33. Hotéis por país: Se nos dirigirmos para a página inicial de nossos projetos e, em seguida, rolar para baixo abaixo estão hotéis, e descermos para outros países, que temos apenas aqui. Temos uma lista de países que têm hotéis localizados no interior. Se clicarmos em qualquer link de hotel individual, como este, isso nos levará a uma rota de /countries e, em seguida, /nome do país. Atualmente obtemos um 404 porque sua rota ainda não foi tratada, como vemos aqui, estaremos corrigindo estes neste vídeo exibindo um modelo, que exibirá todos os hotéis no banco de dados que estão localizados neste país em particular. Como de costume, vamos começar a trabalhar em nosso index.js. Vamos limpar algumas dessas guias por enquanto. Index.js. Vamos descer para os nossos /países e depois adicionar uma nova rota que está abaixo desta. Uma vez que estamos apenas recebendo um modelo, podemos usar um pedido get, então roteado ou recebe, e então podemos usar /countries, assim como vemos lá. Em seguida, adicione o nome dinâmico do país como um parâmetro. Esse é o cólon, e vamos chamar isso de país. Isso também vai usar o controlador do hotel e, em seguida, podemos criar hotéis por país. Se os roteiros tiverem segmentos dinâmicos para capturar o país a partir da URL. Vamos para o controlador do hotel. Criar hotéis por função país, e então podemos pegar esta seção dinâmica a partir do URL. Controlador do hotel para baixo na parte inferior, vamos configurar isso como normal, exportação começa. Hotel por país marcará isso como uma sincronização, passando no pedido, a resposta, e também em seguida. Vamos adicionar nossa seção de experimentos. Pegar quaisquer erros e, em seguida, como de costume, passaremos isso para o próximo. Vamos começar por capturar o país a partir dos parâmetros gerais, e isso é exatamente como fizemos antes com o hotel. Vamos definir obedecer constantes chamadas CountryParam, e este é o pedido.. params.country. Então podemos configurar nosso método de busca para pesquisar nosso banco de dados pelo país. Colunas, vamos chamar isso de listas de países, porque ele vai estar armazenando uma lista de países que correspondem ao nosso parâmetro, vamos esperar hotel.Find, e, em seguida, para retornar apenas nossos países, podemos passar em nossos objetos passando o campo País ao qual você deseja corresponder e, em seguida, corresponder à nossa variável CountryParam. Antes de passarmos esses dados para nossos templates, vamos primeiro fazer um res.json para ver quais dados estão sendo retornados do banco de dados. res.json, e depois passar em nossa lista de países, que deve armazenar uma lista de países. Ele nos dá o salvamento e depois recarrega e certifique-se de que você ainda está nas mesmas rotas de antes, que é/países e, em seguida, um determinado país logo depois. Como estamos nesta rota para os EUA, só vemos países disponíveis nos EUA. O hotel de teste foram criados antes, foi o país EUA, e este hotel sete é os EUA também. Você pode ter apenas um por país, dependendo do país em que você clicou. Também podemos alterar isso no URL. Mude o México, e aqui vamos nós. Teremos o hotel nove e também o hotel 10, que fica no país do México. Isto parece bom. Agora temos os dados do hotel que precisamos passar para os nossos modelos. Agora podemos substituir o nosso res.json por um res.render. Vamos criar um modelo chamado hotéis por país. Usando os sublinhados separados por vírgula, podemos adicionar nossos objetos que se tornam conter o título ou navegar por país, e então também dentro aqui podemos adicionar uma seção dinâmica, que vai ser o nome do país que estamos olhando. Estamos nisso com o símbolo, as chaves, e, em seguida, dentro aqui podemos adicionar no CountryParam, e como agora estamos usando alguns dados dinâmicos em nossa string, também precisamos alterar essas citações para serem ticks de volta. Altere estes são o ponto-e-vírgula no final e bem como seu título. Nós também podemos adicionar uma vírgula e também possivelmente em nossa lista de países, que são os dados e vamos estar precisando dentro dos templates. CountryList e dar-nos salvar. O estágio final, como você já sabe, é criar esses hotéis por país.pug Arquivo, e certifique-se de soletrar corretamente. Abriu a barra lateral dentro da pasta de todas as visualizações, crie um novo arquivo chamado hotéis por país.pug. Este modelo como todos os outros vai estender nosso layout e vamos substituir o bloco chamado conteúdo. Uma vez que seus modelos também estarão exibindo a lista de hotéis, também precisamos incluir nossos mixins. Incluir Mixins/_hotel, ou hotelmixin. Nós também podemos passar em nosso título, h2 é igual a título. Agora precisamos fazer um loop através de todos os dados em nosso controlador do hotel. Quem viu neste país os dados são armazenados em uma variável chamada CountryList. Vamos criar um loop. Cada hotel em CountryList, cria um wrapper de.hotel_wrapper e impulso em nossa mistura com o símbolo mais, mais hotel, e também passando os dados individuais do hotel do nosso loop. Também podemos adicionar um bloco mais aqui no caso de nenhuma correspondência for encontrada para este país, exibir isso em um item de lista. Não há hotéis, e uma vez que você tem um modelo que se parece com este, vamos dar a este um salvar e, em seguida, recarregar. Agora eu vou res.json é substituído por nossos modelos. Tenha um erro, vamos procurar os hotéis de vista por país. Vamos ver o que está acontecendo. Temos um erro de ortografia, então hotel, e isso é hotéis, então basta mudar o nome do arquivo dentro de nossas visões. Renomeie, eu só adiciono um S no final disso. Recarregue o navegador. Há o nosso rumo dinâmico nível dois ou navegar por país, quando impulso no nome do país, e há um hotel nove e também o hotel 10, que vimos antes dentro do JSON. Vamos testar mais alguns países e ver se tudo está funcionando. Vamos voltar para a página inicial. Até o fundo. Vamos tentar a Jamaica. Temos o título dinâmico, e este país está na Jamaica. Para a Holanda como o nosso título, e o nosso hotel gratuito, que está dentro da Holanda. Excelente, este é mais um passo em nosso projeto, que já concluímos. Acho que agora temos muito disso funcionando. Agora devemos fazer uma pausa da adição de novos recursos e ir em frente e adicionar um pouco de estilo CSS para torná-lo um pouco mais agradável. 34. Estilizando cabeçalho — tela pequena: Agora é a hora de fazer nosso projeto parecer um pouco mais agradável com alguns CSS. Vou começar desenhando a seção de cabeçalho para a exibição de tela pequena. Vamos começar diminuindo o navegador. Então encolher isso e, em seguida, no Visual Studio, também podemos fazer isso menor também, abrir a barra lateral dentro de nosso arquivo público ou pasta pública. Vamos clicar sobre isso e, em seguida, temos uma pasta de folhas de estilo com o nosso style.css e, em seguida, feche a barra lateral. Dentro daqui temos alguns padrões, estilo, que é fornecido com o gerador expresso. Então eu vou selecionar tudo e remover. Para começar, eu vou adicionar algum estilo geral para o HTML em seções de corpo. Então, como o seletor HTML e, em seguida, declarar que queremos que o plano de fundo seja branco. Em seguida, até uma seção do corpo e, claro, sinta-se livre para fazer quaisquer alterações para tornar este aplicativo mais pessoal ou acompanhar comigo se você preferir o mesmo estilo. Então o fundo para a seção óssea, eu vou dar a isso um valor com o hash de eee, o centro isso dentro do navegador e podemos usar a margem zero também definir o peso máximo do corpo para ser 1500 pixels. Isso garantirá que em monitores realmente grandes, o conteúdo não é muito esticado e, finalmente, algum preenchimento no limite de zero na parte superior e inferior e avise M à esquerda e à direita. Então salvamos isso e recarregamos. Não devemos ver muita diferença por enquanto, mas podemos apenas ver a cor de fundo cinza, IPO descentralizada e também um pouco sobre ele. Do topo vou começar com os links de navegação, que são estes aqui e estes têm um invólucro de navegação aqui dentro. Vou mudar o tipo de exibição para fazer uso da caixa flexível. Então exibir flex, e então podemos definir a direção flex para a coluna. Isso irá definir os itens flexíveis de cima para baixo. Também a propriedade align items para o centro e também declarou a cor de fundo. Tanto o logotipo. Então defina o plano de fundo para um volume usando o hash para os valores hexadecimais de 4dc2ca Recarregar isso. Lá vamos nós. Agora, nossos itens estão centralizados no meio da página e também têm a mesma cor de fundo que um logotipo. Parece que há também alguns padrões, margens e planícies aqui. Vamos começar a trabalhar com a nossa lista desordenada. Primeiro de tudo, remova qualquer padrão colocado em um URL e, em seguida, usa apenas sobre a esquerda. Os itens de lista individuais. Podemos torná-los um pouco maiores definindo o tamanho da fonte para ser 1.2 em. A exibição para ser inline-block e, em seguida, também a margem de zero na parte superior e inferior e dez pixels à esquerda e à direita. Recarregar. Ok, bom. Então agora os nossos itens de lista são bloco inline, então eles exibidos em toda a página em formatos on-line e também eles ainda estão abaixo do logotipo porque dissemos que a direção de fluxo da coluna nos elementos nav, que inclui o logotipo e também o nosso listar itens. Então, para baixo para a nossa lista de itens aqui. Podemos, então, direcionar os links também. Então, primeiro de tudo, se definirmos a decoração do texto para não salvar recarga, e isso removerá os padrões na linha de nossos links. Também podemos remover essa cor padrão definindo o valor da cor, eu quero usar uma cor RGB. Então o primeiro é o valor vermelho de 43, 40 e 40. A atualização verde e azul, que nos dará essa cor cinza mais escura. Se passarmos para o nosso arquivo de saída de layout. Então, abra a barra lateral nas exibições e layout que se conectam a um formulário na parte superior. Nós adicionamos um wrapper classof.search nav, que é o wrapper principal para todos esses itens de formulário dentro de nosso cabeçalho e também cada entrada individual também tinha um wrapper de entrada de pontos rápido também. Então, vamos voltar para o nosso style.css e começar a trabalhar com o nosso formulário dentro do cabeçalho. Primeiro de tudo, o wrapper principal que foi navegação de pesquisa. Então search_nav. Os fundos. Vou definir isso para um valor hexadecimal de, c1e6e9. , em seguida, certifique-se de que está escrito corretamente. Guarde isso e agora teremos a cor azul mais clara 404. Um pouco de estofamento aqui dentro também, basta adicionar algum espaçamento de 0,5 em. Então, em seguida, eu vou passar para todos esses itens em uma espécie de formulário, definindo o tipo de exibição para ser flexível. Nós também podemos dar a estes uma direção flexível da coluna para a visão móvel. Mais tarde, nós também vamos alterá-los para voltar para a linha padrão, que irá então exibi-los em toda a página quando tivermos mais espaço disponível. Então vamos direcionar estes no CSS. Temos search_nav e só podemos selecionar o formulário que está dentro desta classe aqui. O que significa que os estilos que estão aqui dentro só serão exibidos para esta forma particular e nenhuma outra forma em todos os lados. Então tipo de exibição ou flex. A direção flexível da coluna. Então este é um fato e algum retriever e então podemos ir em frente e mirar as entradas individuais. Assim, as entradas individuais para o menor verde, não precisaremos ser a largura total da página. Defina a largura como 100 por cento. Podemos declarar as alturas de 20 pixels. Salve isso e recarregue. Ok, bom. Vamos também adicionar algumas margens e padrões para lhe dar algum espaço. O estofamento. Então 0,5 em na parte superior e inferior e zero na esquerda e direita. Largura total inclinada fácil. Então também alguma margem no topo, espaço fora dos acima e todos nós precisamos de um pouco de margem de 0,3 em. Salve e recarregue. Eu também vou remover essa borda padrão em torno das entradas. Então vamos definir a borda para ser um valor de zero. Recarregar, e agora temos esta linha cinza removida de cada uma das entradas. No momento, na visualização móvel, se digitarmos um desses destinos, a linha de texto está no lado esquerdo. Eu vou mudar isso para estar no sensor usando a propriedade align de texto do centro e também adicionar algum raio de borda. Então, cada uma dessas entradas de cinco pixels. Salve, em seguida, recarregue isso e agora podemos ver como o texto está agora centrado, e temos um pouco de raio em cada uma das entradas. Em seguida, para baixo para a entrada referir-se, que envolve cada um de nosso rótulo em combinações de entrada. Apenas para adicionar alguma margem na parte superior e inferior para fora algum espaçamento de espuma e também alinhar este texto dentro do sensor para o rótulo. Assim, direciona a entrada em um wrapper de escala, a margem, os valores superior e inferior de 0,5 em e, em seguida, zero à esquerda e à direita. Podemos alinhar nossos rótulos com uma linha de texto do centro. Salve e recarregue. Os códigos agora ficam muito mais bonitos dentro da visualização móvel. Agora podemos adicionar alguns toques finais para as entradas selecionadas e também o botão está para baixo na parte inferior. Podemos selecioná-los pelo nome do elemento. Então selecione e botão. Vamos declarar as alturas de 36 pixels. A largura na tela pequena de 100 por cento. Tanto do resto das entradas e também remover a borda padrão definindo para ser nenhum. Salve e atualize. Ok, bom. Então precisávamos de uma forma alfa. A última coisa que eu quero fazer é direcionar apenas os botões para dar a isso uma cor de fundo de azul cadete e também nos dar um raio de borda de cinco pixels. Tanto o resto das entradas. Certo, recarregue. Bom. Nossa seção de cabeçalho em nosso formulário agora está olhando muito mais agradável na visão pequena. Se nós rolar para baixo o toque final que eu vou fazer neste vídeo é definir estes imagem praia cabeçalho e também quaisquer outras imagens no site para ser 100 por cento para beneficiar o recipiente em vez de transbordar como vemos se nós rolar para a direita. Então, abaixo do botão, selecione todos os elementos da imagem. Defina a largura como 100 por cento. Atualize, e instantaneamente parece muito melhor agora. Bom. Nosso cabeçalho está agora olhando melhor na visualização de tela pequena na próxima semana clique em para continuar nós estaremos styling para tamanhos móveis ambos aplicar estes para um hotel e países. 35. Estilizando conteúdo — tela pequena: Com o estilo do cabeçalho agora completo para nossa visão móvel, agora podemos passar para um estilo na área de conteúdo, que tem os hotéis e também os países. Se formos para o nosso índice de pontos pug. Abra a barra lateral para as vistas e, em seguida, o nosso índice de pontos pug. Aqui no lado temos um invólucro exterior, que é este aqui. Em seguida, aninhado dentro temos um invólucro de hotel que vai para baixo a seção de hotel, e, em seguida, um invólucro de país, ou a seção de país para baixo na parte inferior da nossa página de índice. Vamos para o nosso estilo dot css e começar a trabalhar com o wrapper externo. Faça um comentário. Esta é a seção de conteúdo. Hotéis e países, vista. Ok, então vamos começar com o invólucro externo de ponto, com a pontuação abaixo. Este é um invólucro para basicamente todos os hotéis e países que vemos na página inicial aqui. Vamos usá-lo para alinhar o texto ao centro e também definir o tamanho da fonte. A propriedade text-align, de center e um tamanho de fonte de um em. Defina isso e recarregue. Agora podemos ver o nosso título e também todas as informações do hotel estão agora alinhadas ao centro. Agora vamos para o Dot Hotel Div. Este era o invólucro que usamos dentro de cada hotel. Se formos para os mixins e, em seguida, hotel dot pug, demos a cada hotel um invólucro de ponto hotel então vamos usá-lo agora no css. Abaixo do invólucro exterior, aponte para o hotel. Ok, então nós vamos dar a cada hotel individual uma cor de fundo de branco, então ele se destaca contra o fundo cinza. Fundo de branco e também alguma margem de zero no topo, zero à direita, um em na parte inferior e zero à esquerda. Se agora salvar isso e, em seguida, atualizar, agora vemos a cor de fundo branco e também a margem na parte inferior separa cada hotel. Também dentro deste mixin, temos os campos de texto dentro de uma div chamada informação do hotel. Voltando ao nosso ponto hotel dot dot pug, temos esta seção de informações do hotel que contém o nome do hotel, e também no detalhe do hotel, temos a descrição e também a classificação de estrelas, o país e o preço. São basicamente todos esses textos que vemos em cada hotel. No momento, se você clicar em qualquer hotel individual e, em seguida, rolar para baixo, foram então levados para a vista de detalhes do hotel. Todo o texto aqui dentro está perto da borda. Podemos consertar isso com um pouco de enchimento. Estilo dot css, as informações de sublinhado do hotel. Tudo o que precisamos fazer aqui para corrigir isso, é adicionar um pouco de preenchimento de um em e depois recarregar. Agora tem algum espaçamento em torno do título, a descrição, e também as informações na parte inferior. Em seguida, vou passar para os nossos formulários. Se formos ao nosso administrador, devemos fazer isso um pouco maior para que possamos ver o URL. Admin e, em seguida, barra de encaminhar adicionar. Role para baixo até nosso formulário, e atualmente nosso formulário não parece muito grande. Vamos começar a trabalhar nisso agora. Reduza o navegador novamente. Nós já adicionamos certos nomes de classe dentro de nossas visualizações. Vamos adicionar hotel, fechar isso. Temos este formulário de hotel que é renderizado como um mixin. Se passarmos para isso, temos cada grupo de formulário individual com o rótulo uma entrada rodeada por este invólucro de entrada formulário. Isso pode ser usado no style.css. Primeiro de tudo, entrada de sublinhado de formulário. Podemos adicionar alguma margem. Se adicionarmos um em e, em seguida, zero, isso irá adicionar um em de margem para a parte superior e inferior. Dê algum espaço entre cada entrada. Então podemos ir em frente e direcionar a entrada individual e também a área de texto. Porque queremos que este rótulo apareça à esquerda de cada entrada. Para começar, se definirmos cada entrada para ser a largura de 70 por cento, para torná-la um pouco mais estreita, isso nos dará espaço para adicionar um rótulo à esquerda. Nós segmentamos a entrada de formulário, e, em seguida, cada entrada individual e, em seguida, também precisamos segmentar a área de texto também. Defina a largura para 70 por cento. Também a linha de texto a ser à esquerda. Salve e atualize. Ok, assim é melhor. Agora vamos à nossa gravadora. Novamente, a entrada do formulário. Mas desta vez vamos ter como alvo o rótulo. Defina a exibição para ser inline-block. Em seguida, dê a isso uma largura de 20 por cento para garantir que isso se encaixa na mesma linha que a entrada. Se recarregarmos, agora temos cada rótulo à esquerda da entrada. Nesta área de texto, removemos a borda de todas as outras entradas e damos a elas um raio de borda de cinco pixels. Vamos também aplicar isso à área de texto para que ele corresponda. A borda de nenhum e, em seguida, o raio da borda de cinco pixels, ponto-e-vírgula e, em seguida, recarregue. Agora o exterior corresponde ao resto das entradas. Então, finalmente, na parte inferior, temos este grande botão confirmado dentro do formulário do hotel. Se descermos para o botão na parte inferior, demos a isso uma classe de botão pequeno. Vamos copiar isso e mais no estilo dot css adicionar o ponto e colar isso em. Vamos fazer isso menor adicionando a largura de 100 pixels, e também alguma margem de 0,5 ems para dar algum espaçamento, abaixo do navegador. Lá vamos nós. Agora a volta para o botão admin e também nosso botão de confirmação na parte inferior está agora usando este botão pequena classe. Agora isso parece muito mais agradável para nossas telas pequenas. Voltar para a página inicial e rolar para baixo e tudo parece praticamente como deveria ser. No entanto, se esticarmos o navegador, tornarmos isso realmente amplo, as coisas começam a parecer um pouco esticadas demais. Isso é algo para o qual passaremos no próximo vídeo, onde começaremos a modelar a exibição maior adicionando uma consulta de mídia. 36. Estilizando tela grande: Se fizermos do nosso projeto a largura total dentro do navegador, ele agora parece um pouco esticado, porque até agora temos focado nos tamanhos de tela pequena. Vamos agora adicionar alguns CSS dentro de uma consulta de mídia para corrigir isso. Até o nosso style.css, bem na parte inferior do arquivo, adicionamos a consulta de mídia com uma mídia. Quero ter como alvo a largura mínima do navegador de 1.000 pixels. Abra as corridas de código. Você pode ter uma brincadeira com o tamanho que funciona melhor para você, mas eu vou para um ponto de quebra de 1.000 pixels e, em seguida, começar no topo com a navegação. Selecione os elementos nav e verifique se isso está dentro dessas chaves de consulta de mídia. Agora estamos no maior verde. No topo, temos a seção de cabeçalho superior definida para ser uma direção flexível da coluna, significa que o logotipo e também os links de navegação são insalváveis. Agora eu vou mudar a direção flex para estar de volta para ser linha, o que significa que o logotipo estaria no lado esquerdo, e então os links estarão à direita. Fazemos isso com direção flexível e satisfazemos a linha, recarregue. Dentro da nossa seção de navegação, temos o nav, que é um link para o nosso logotipo, e também temos a outra lista para os nossos dois links aqui. Eu quero começar o valor flex para o logotipo para ser um valor de um, e então a outra lista para ser um valor de dois, que significa que ele iria ocupar o dobro do espaço disponível sobre o lado direito. Podemos então alinhar os textos para a direita para ter certeza de que isso é sobre o lado direito do cabeçalho. Vamos começar com o nav a. Se ele vai para o layout dentro de um aqui nós temos nav e, em seguida, o um ninho dentro, e isso é para o nosso logotipo imagem. Então a outra lista que não é o mesmo nível, então este vai ser um valor de fluxo de um, e este será o valor flexível de dois, tornando-o duas vezes o espaço disponível. Dentro do nosso nav a, isso vai ocupar o valor flexível de um. Então nosso nav ul será o valor flexível de dois. Salve isso e recarregue. Não vemos muita diferença, mas se entrarmos nas ferramentas do desenvolvedor passar o mouse sobre nosso navegador, veremos o contorno azul para uma parte. Então, se formos para a outra lista, podemos ver que este é o dobro da largura disponível. De volta ao estilo. Após o flex, podemos adicionar o alinhamento de texto para estar no lado direito, empurrando para a borda da div. Mas isso é provavelmente um pouco perto demais da borda, então um pouco de margem direita irá corrigir este de um m. Recarregar. Agora teremos uma barra de navegação mais adequada para uma tela maior. Bom. Agora movendo-se para baixo para o formulário de pesquisa abaixo. Agora temos muitas colunas de configuração como esta é melhor para a visualização móvel. Na tela maior como esta, queremos mudar a direção flexível mais uma vez para ser linha, então é mais adequado para o espaço mais disponível. Sob o nosso nav ul, vamos apontar a busca no navegador de pontuação. Se formos para o layout.pug e depois para baixo para formar, este é o invólucro externo para todo o formulário. Depois de style.css abrir as chaves e , em seguida, podemos definir a direção flexível para mais uma vez ser linha. Não há mudança. Na verdade, nós só precisamos também apontar o formulário aqui dentro e tentar isso, e lá vamos nós. Vamos continuar com este estilo flexível. Justifique o conteúdo para estar no centro. Isso nos dará espaçamento igual no lado esquerdo e direito. Então, depois disso, o wrap flexível, vamos definir isso para um valor de wrap para que ele possa fluir para linhas adicionais. Então, finalmente, vamos alinhar os itens para ser extremidade flexível. Isto irá alinhar todas as entradas verticalmente. Agora, se guardarmos este eu vou empurrar estas entradas para estar agora em linha com o resto destes. Isso nos dá a forma horizontal que queremos, mas ainda está um pouco esmagado. Somente ao criar este formulário que cercou cada entrada com um div, com a classe de entrada Rapa. Se formos ao nosso layout de pug, dentro da nossa forma, podemos ver isto aqui. Este é redondo e cada um dos nossos grupos de etiquetas e entradas. Sobre o style.css e novamente, ainda dentro desta consulta de mídia, agora podemos segmentar essas classes que era dot input_wrapper. Vamos definir a margem para ser zero para remover quaisquer padrões. O Padian para ser 0.5ems. Salve isso e recarregue. Lá vamos nós. Agora podemos ver o padrão adicionou algum espaço entre cada uma dessas entradas. Também restrinja isso para ter um peso máximo de 170 pixels, então não se estique muito. Em seguida, defina também o alinhamento de texto para voltar à esquerda. Aguarde a recarga e agora teremos algum espaçamento adicional em torno de cada uma dessas entradas. Rolando para baixo até os hotéis e países, o texto para os títulos que você vê aqui e também para os hotéis, ele ainda está herdando os alinhamentos centrais na visualização móvel. Eu queria é mirando o invólucro externo div. Lembre-se mais cedo dissemos que o invólucro exterior savvy.exterior classe wrapper. Se nós rolar para cima este foi apenas um aqui que envolve todos os hotéis e países na página inicial. Role para baixo, podemos substituir os alinhamentos de texto dentro do ponto de consulta de mídia outer_wrapper, podemos restabelecer o alinhamento de texto para estar à esquerda. Refresque. Agora, em cada hotel individual. Vou usar a caixa flexível para cada um desses hotéis. Vamos definir o tipo de exibição no CSS. Após o invólucro externo, selecione o hotel ponto, que é a div, que está ao redor de cada hotel no mixin. O tipo de exibição flexível. Então recarregue. É assim que os nossos hotéis parecem agora por padrão. Ele ainda precisa de um pouco de trabalho para ficar bem embora. Se formos para o nosso hotel mixin, que é sublinhado hotel.pug. Torne isso um pouco maior. Nós adicionamos classes para a seção de imagem, que é imagem do hotel apenas aqui, e também para a seção de entrada. Agora podemos usá-los no CSS para tornar o nosso hotel mais bonito. Voltar ao style.css. Vamos primeiro para o hotel IMG. Dê-nos um valor flexível de um, e também alguma margem de um m para dar algum espaçamento. Salve e recarregue. Podemos ver a margem do lado de fora da imagem. Agora para a informação do hotel, que é o texto do lado direito. SO.hotel_info. Nós também podemos nos dar um valor flexível de um para tornar isso igual à imagem. Em seguida, alguns padrões, adicionar algum espaçamento zero na parte superior e inferior. Em seguida, um m na mão esquerda direita. Salve isso e recarregue. Ir para a página inicial agora parece muito melhor. No entanto, se clicarmos em um hotel e ir até a vista do hotel e rolar para baixo. O CSS que adicionamos também se aplica a este detalhe completo do hotel também. Só quero que esta imagem e o hotel fiquem lado a lado. Quando listamos todos os hotéis na página inicial e também na vista de todos os hotéis. Primeiro, podemos restringir o CSS para aplicar apenas a todos os hotéis vista em todos os hotels.pug. Vamos dar uma olhada para esses modelos. Todos os hotéis. Pug, vamos abrir isso. Cercamos o hotel aqui dentro com um invólucro de um hotel. O que significa que podemos usar isso para ser mais específico sobre onde estamos aplicando nosso estilo. Isso pode ser feito adicionando esta classe wrapper antes da classe hotel no CSS. Volte para o style.css, vamos copiar isso. Então, pouco antes do hotel, vamos adicionar o wrapper do hotel, dando-nos um seletor CSS mais específico. Salve isso e, em seguida, ele recarrega. Ainda na página de detalhes do hotel. Agora removemos a flexbox dessa exibição, o que significa que agora temos o conteúdo empilhado em uma imagem de tamanho real. Vamos checar na página inicial. Ainda parece bem. Obrigado clique em todos os hotéis, ea habilidade flexbox tem efeito nesta vista também. Para terminar as coisas, e eu quero exibir os países como uma grade. Se formos até a página inicial e, em seguida, rolar para baixo até a parte inferior. Temos os países em baixo aqui, mas os não parecem muito bons. Há dois lugares onde mostramos os países. Ele na página inicial e também se você clicar em ver tudo, neste link aqui. Esta é praticamente a mesma vista da página inicial. Ambos os modelos têm uma div com a classe de wrapper país. O primeiro acabou no index.pug. Abra isso no índice de visualizações. Pug. Temos contorno de cima para baixo aqui, em torno de nossos países, e também nos modelos de todos os países temos a mesma div apenas aqui para manter as coisas consistentes. Também esses países são outputted como uma outra lista, que podemos ver aqui.. Podemos usar isso no CSS. Voltar para o style.css e, em seguida, para baixo na informação do hotel. Vamos selecionar o nosso invólucro de país. Outra lista. Podemos definir o tipo de exibição para ser grade. Temos três colunas porque como as colunas de modelo de grade para repetir. Em seguida, dentro dos colchetes queremos repetir estes três vezes usando a unidade de um fr para torná-los iguais. Para espaçá-los, também podemos adicionar a lacuna da grade, que olhou no início do curso de 20 pixels. Em seguida, alinhe também o texto para estar no centro. Salve isso e, em seguida, vamos verificar isso no navegador. Recarga, e esta é a rota dos países, que parece ter algum texto em negrito da NASA vai dar uma olhada nisso. Então, se formos para a página inicial e direto para a parte inferior, também temos a grade para a página inicial. Deixar você conferir esse texto em negrito. Vamos clicar em ver tudo. Podemos ver que está aqui. Vamos ao arquivo “All Countries.pug”. Acho que é só um problema de indentação. Temos um nível dois indo para aqui, e então dentro do H2 temos tudo aninhado dentro. Vamos mover tudo isso para ser o mesmo nível que o h2 em vez de aninhado dentro e recarregar. Isso é muito melhor. Clique em um país. Em seguida, somos levados para a visão do país, onde vemos nossos dois hotéis disponíveis República Dominicana dentro de nossa lista. Mais uma vez, podemos ver como é fácil usar a grade CSS. Nós alinhamos muito bem um layout de grade com apenas algumas linhas de código. Voltaremos ao CSS mais tarde e adicionaremos mais algumas mudanças à medida que avançarmos. Uma coisa que você deve ter notado aqui é ao lidar com os países na página de índice e também nos modelos de todos os países, se vamos passar para o nosso template aqui, estamos reutilizando o mesmo fluxo de código para diferentes modelos. Vamos corrigir isso no próximo vídeo movendo nossos países para um mixin reutilizável. 37. Países misturados: Quando repetimos o código em vários templates, muitas vezes é melhor colocar isso em uma mistura separada, e isso é o que faremos agora com a lista do nosso país. Em ambos o index.pug. Lá em baixo temos um item da lista que eu vou colocar o nosso país. Também nos modelos de todos os países.put, terá o mesmo item da lista, exibindo nosso link e nossa imagem do país. Em ambos os modelos, vamos percorrer esses países e exibir a imagem e o nome como uma lista. Nós já sabemos como usar mixins. Vamos em frente e criar um novo arquivo na pasta mixins para exibir essas listas de países. Abra a barra lateral. Dentro da pasta mixins, vamos criar um novo arquivo. Sublinhado país, lista de sublinhado com a extensão.pug. Vamos dar um nome a esta mixin. Então lista de países mixin está misturando movendo passado um país para a saída. Então, nós também podemos adicionar esta variável em. Em seguida, salve este arquivo. Em seguida, no arquivo de todos os países.pug, podemos cortar o item da lista, o link, e também a imagem. Pegue essas três linhas apenas aqui codificar isso e então nós podemos ir em frente e adicioná-los ao nosso país misturando, colá-los, e certificar-se de que o recuo está correto. Vamos mover o item da lista também, para que não esteja no nível real. Então esta é a nossa mistura agora parecendo bem. Podemos salvar isso, e depois voltar para todos os países.pug e, em seguida, no topo, podemos incluir o arquivo mixin. Após os layouts estendidos, inclua os mixins, barra e sublinhe a lista de sublinhados do país. Lembre-se que você não precisa da extensão Pug. Em seguida, podemos adicionar a mistura pelo seu nome no lugar do item da lista, que colocamos para fora recuado em um nível. Dentro do nosso circuito, chamamos isso de lista de países. Esta lista de países também vai tomar no país, que é passado do nosso controlador. Agora podemos salvar esse arquivo e depois ir para todos os países, que estamos no momento. Recarregue isto. Vemos que os países estão agora no lugar, mas desta vez estão sendo puxados de um mixin. Agora tudo o que precisamos fazer é repetir isso para o index.pug que é este arquivo apenas aqui. Em primeiro lugar, podemos incluir o segundo mixin. Então inclua mixins/. Também temos o hotel mixin, mas desta vez é a lista de sublinhados do país. Então podemos descer e adicionar esta mistura no lugar do nosso item da lista. Primeiro de tudo, lembre-se neste arquivo que acessamos o nome do país com o ID de sublinhado e o link e também a imagem. Isso ocorre porque dentro do nosso hotel controller.js, se for para os filtros da página inicial, agruparemos os países distintos com este grupo em palco com a chave de ID de sublinhado. Principalmente, vamos processar ID no mixin para que ele funcione. Então, vamos remover as linhas livres do fundo. Podemos substituir isso sem mistura de lista de países, e nós também colocar em nosso país. _ID. Se você salvar, agora isso é para a página inicial. Vá para o índice e, em seguida, role para baixo abaixo dos hotéis, agora temos nossa lista completa de países na página inicial também, bem como a lista de todos os países. O que significa que a nossa mistura está a funcionar e reduzimos o nosso código duplicado. 38. Promise.all e desestruturação de array: Dentro do controlador do hotel, criamos os filtros da página inicial no início do curso. Você deve se lembrar que a outra vez que dissemos que estamos usando várias chamadas de espera, assim como fizemos aqui, nem sempre é uma boa idéia. Fazer isso é perfeitamente bom, no entanto, se a segunda chamada de espera depender da primeira terminar antes que esta seja executada. Por exemplo, se o primeiro esperar no topo aqui, salvar o hotel e, em seguida, a segunda chamada de espera necessária para acessar o ID do hotel, então faria sentido mantê-los ambos dessa maneira para garantir que temos o ID do hotel pronto para o segundo um quando necessário. Mas aqui, estamos bloqueando, pegando os países do banco de dados até que esta primeira seção de espera tenha terminado, e isso não faz sentido. O que realmente queremos fazer é chutar os dois ao mesmo tempo. Para isso, temos algo chamado promessa a todos. Promessa a todos é um método que basicamente é uma promessa gigante que envolve todas as outras promessas dentro. Talvez você esteja pensando: “O que promessas tem a ver com assíncrono aguardam?” Bem, o assíncrono aguarda também retorna uma promessa, então vamos dar uma olhada nisso em ação. Primeiro, vamos remover os dois aguarda palavras-chave, já que não precisamos mais deles. Agora, vamos olhar para algumas novas técnicas que serão introduzidas no ES6 ou ES2015. Primeiro é o que é chamado de desestruturação. Mais especificamente, para este exemplo, vamos estar olhando para a destruição de array. Podemos usar isso para basicamente criar uma matriz de nomes constantes, em seguida, atribuí-los a uma matriz de valores que descompactamos. Parece complicado, mas é bem simples quando vemos tudo digitado. Primeiro, vamos criar uma constante para começar. Depois dos nossos países, aqui em baixo, vamos criar espaço, criar uma constante. Desta vez, isto vai ser uma matriz de valores. Passando dois valores, o primeiro, vou chamar FilteredCountries, e depois o segundo, FilteredHotels. Eu nomeei esses países e variáveis de hotel filtradas porque esses resultados são filtrados usando o pipeline de agregação, em seguida, usamos promessa para todos os que também é novo no ES6. Isto é igual a, agora, vamos esperar, prometer com um P maiúsculo, .all. Como dissemos antes, promise.All leva em várias promessas, para que possa passar em nossos países e também em nossas variáveis de hotel aqui dentro. Primeiro de tudo, vamos passar nos países e isso precisa ser uma matriz, e também nossos hotéis. Agora, esta promessa. Tudo, que temos aqui, será resolvido uma vez que ambos os países e também as promessas do hotel tenham sido resolvidos com sucesso. Considerando que antes, usando esperar individualmente, em vez de apenas uma vez aqui, isso fez com que ambos funcionassem em ordem. Agora, podemos definir ambos ao mesmo tempo, resultando em um desempenho mais rápido. Quanto à destruição da matriz, estes países e também as promessas de hotéis, serão então basicamente descompactados, e instalados nos nomes constantes que estabelecemos aqui na mesma ordem. Os países serão então descompactados, instalados em países filtrados. Uma vez resolvido, também os hotéis serão armazenados dentro das constantes FilteredCountries. Vamos dar uma olhada em mais um exemplo para colocar nossa cabeça em torno de tudo isso. Podemos deixar este código porque é isso que precisamos para o curso. Mas este vai ser apenas um exemplo simples, então você não precisa digitar junto se você não quiser. Uma consoante de comida. Vamos definir isso para uma matriz e adicionar alguns valores alimentares de queijo, peixe e também arroz. Então uma constante de a, b e c. Agora, se quisermos destruir todos os valores desta matriz e instalá-los dentro de todos os três valores aqui, mas em ordem, então a se tornará queijo, b será peixe, e c será igual a arroz. Tudo o que precisamos fazer é definir esses valores iguais à nossa matriz alimentar. Em seguida, uma série com um res.send. Vamos enviar o valor de a. Verifique se isso está funcionando e comente nosso res.render. Guarde isso e também estaremos na página inicial. Vamos para localhost: 3000. Há o valor do queijo. Vamos tentar b e também c, que deve ser arroz. Recarregar. Agora, temos o valor do arroz também, significa que a nossa matriz de alimentos foi agora desembalada e armazenada em todas as três constantes aqui. Esta é praticamente a mesma coisa que estamos fazendo acima com nossas variáveis filtradas. Então, estamos definindo esses dados para nossos países e promessas de hotéis assim que os dados forem resolvidos. Agora, vamos deixar este exemplo e [inaudível] nossa res.render. Bom. Agora, temos nossos dois nomes constantes, nossos Países Filtrados e FilteredHotels. Nós também precisamos passar estes para o nosso modelo no lugar de nossas constantes antigas aqui. Este é FilteredCountries e este é FilteredHotels. Além disso, uma vez que esses nomes de variáveis agora são alterados, também precisamos alterá-los no modelo para corresponder. O modelo é o index.code. Vamos entrar aqui. Para o hotel, em vez de looping através de hotéis, precisamos fazer loop através FilteredHotels. Então faça o mesmo com os países. Desta vez, vamos usar é FilteredCountries. Então salve. Agora, tudo o que resta a fazer é experimentar isto no navegador. Na página inicial, pressione Atualizar. Ainda podemos ver nossos hotéis sendo retirados do banco de dados, e também os países abaixo também. Isso significa que tanto o nosso método de desestruturação e também o nosso promise.All agora está funcionando com sucesso. Quantos hotéis temos dentro da nossa base de dados, alterando ambas as nossas promessas de correr de uma vez em vez de uma após a outra, provavelmente não ganhou muito desempenho, mas é uma melhoria útil, no entanto, e algum conhecimento extra que é útil ter. Este tipo de código é algo que será mais perceptível em um aplicativo maior. 39. Variáveis do ambiente: Neste vídeo, vamos usar o que é chamado de variáveis de ambiente. Este será basicamente um arquivo de configuração separado dentro de nossos projetos. Que lista todos os nomes de nossas contas de usuário, senhas e detalhes de autenticação, tudo em um só lugar. Isso tem certos benefícios. Por exemplo, ele mantém nossas informações secretas em um só lugar, que significa que é mais fácil ignorar esse arquivo ao compartilhar nossos projetos, todos eles são enviados para um serviço como o GitHub. O que significa que o nosso código está de uma forma muito mais segura para a segurança. Quando atingidos até a produção, muitos provedores de hospedagem também detectam essas variáveis de ambiente, tornando a configuração de nossa hospedagem ainda mais fácil e isso é algo que veremos mais tarde quando enviarmos nosso aplicativo para Heroku. Além disso, se uma reutilização de qualquer uma dessas variáveis, tais como formação de passaporte em vários arquivos, alterar ou leasing um arquivo de configuração é muito mais fácil. Para isso, eu vou estar usando um pacote de nariz chamado d.env. Isso nos permitirá basicamente criar um novo arquivo com extensão.env e isso será usado para armazenar nossas variáveis dentro. No momento, a única informação sensível que temos é armazenada dentro de nosso app.js. Vamos abrir isto. app.js, são essas informações aqui, que é nossa conexão de banco de dados, mas adicionaremos informações mais confidenciais nos próximos vídeos quando nos conectarmos ao Cloud Storage para imagens. Primeiro de tudo, podemos importar o pacote como de costume dentro do terminal. Na parte inferior, usamos uma instalação npm, fechamos o servidor e executamos npm-i, então.env. Dê-nos um momento para puxar um pacote da MPM. Vamos reiniciar o servidor. Será que o NPM executaria suas coisas? Então, agora, se abrirmos nossa barra lateral, podemos ir em frente e criar o arquivo Config, que vamos usar para armazenar todas as nossas variáveis dentro. Feche isso. Então, na raiz do projeto, crie um novo arquivo, que é simply.env e certifique-se de que isso esteja na raiz ao lado do app.js. Em seguida, adicionamos nossas variáveis usando nome, valor pugs e também usando as letras maiúsculas também. Eu vou usar DB, que é para o nosso banco de dados, e, em seguida, satisfazer variável DB para ser igual a um banco de dados, URI. Isso é mais no app.js, abra isso, então podemos citar nosso banco de dados URI e a conexão, tirar isso com as cotações e, em seguida, colar isso em como nossa variável DB. Nos bastidores this.env módulo, vamos tomar todas as variáveis que criamos dentro deste arquivo e adicioná-los ao que é chamado de objetos process.env, que é fornecido com nó. Este objeto contém informações sobre o ambiente do usuário, como nosso nome de usuário e também o diretório do usuário. As variáveis foram adicionadas dentro deste arquivo, também será adicionado a este objeto também e é assim que nós acessá-los dentro de arquivos antigos. Para entender isso melhor, podemos produzir esses objetos process.env e ver o que ele inclui. Se formos para o HotelController e, em seguida, ir para os filtros da página inicial, que são antes. Vamos fazer qualquer log do console e ver o que está incluído. No topo da seção de nossos clientes, vamos adicionar um log de console, em seguida, ele é registrado no console, o process.env e, em seguida, ir for.User, que é maiúsculas.. USER é uma das propriedades nesses objetos e ele contém o nome atual usa. Se salvarmos isso, puxe o terminal e vá para o navegador, vá para nossa página inicial, ele recarrega e depois para o Visual Studio Code. Se nós rolar para cima até o topo, agora vemos o nome de usuário de Chrisdixon, que é armazenado dentro deste uso de variável. Junto com muitas outras coisas que também estão sobre esses objetos. Também podemos acessar o atual diretório de trabalho com.pwd, salvar isso e, em seguida, recarregar o navegador do terminal. Se rolarmos para baixo após as duas linhas verdes onde o servidor foi reiniciado, podemos ver o caminho atual para o diretório de trabalho atual. Finalmente, você também pode tentar nossa própria variável de banco de dados que acabamos de criar. Altere PWD para ser DB. Recarregue o navegador, Role para baixo e vemos o valor de indefinido para baixo na parte inferior aqui. Isso é porque precisamos exigi-lo primeiro dentro de nosso projeto se ele funcionar e dentro do app.js é onde vamos adicionar isso para que ele esteja disponível o mais cedo possível dentro de nossos projetos. Então app.js, vamos até o topo, acima de todas essas variáveis e, em seguida, exigir dentro dos colchetes, o pacote.env. Nós não precisamos parar isso dentro de uma constante como nós não precisamos acessá-lo novamente dentro do arquivo, mas em vez disso, nós dissemos .config com o ponto-e-vírgula nas extremidades, que passa o conteúdo do arquivo env e o atribui ao process.env objetos, que olhamos antes, então podemos tentar novamente recarregar o navegador. Salve este arquivo, recarregue nossos projetos. Agora vemos um problema dentro do navegador. Se formos para o Visual Studio Code, agora podemos ver algumas mensagens de erro aqui dentro. Isso ocorre porque agora tentamos configurar nossa conexão Mangusto, mas temos uma conexão vazia apenas aqui. Então, em vez disso, agora podemos passar em nossa variável de banco de dados, que você criá-la antes. Podemos adicionar o mesmo assim como fizemos dentro do log console com process.env.db para a nossa variável. Salve isso e agora se recarregarmos o navegador, tudo isso está funcionando novamente e, em seguida, role para baixo até a parte inferior do terminal. Agora podemos ver que estamos colocando nossa variável de banco de dados, que ainda temos no log do console apenas aqui. Agora vamos remover é log do console como não precisamos mais disso e certifique-se de que isso ainda está funcionando no navegador. Bom. Se você ainda vê as informações do banco de dados, como nossos hotéis e também os países abaixo, tudo ainda está funcionando, mas usando variáveis de ambiente. Adicionaremos mais variáveis no próximo vídeo, onde veremos o uso do armazenamento em nuvem com o Cloudinary. 40. Tratando uploads de arquivos: Em momentos, nossas imagens para os hotéis armazenados dentro de nossa pasta de projeto, salvamos no banco de dados, um nome de arquivo, que se refere à imagem em nossa pasta pública. Isso é bom para testes, mas também queremos um lugar para armazenar nossas imagens, especialmente quando nosso aplicativo é enviado para produção. Não queremos que um administrador acesse nossos arquivos de projeto. Para fazer isso, vou usar um serviço chamado Cloudinary. Cloudinary é uma plataforma de armazenamento em nuvem que permite fazer upload de imagens e também vídeos. Você pode encontrar isso em cloudinary.com. Vou usar o serviço para fazer upload de nossas imagens da seção de administração ao criar um novo hotel. Podemos então recuperar esta imagem ao exibir nossa imagem em nosso site. Cloudinary também tem muitos recursos adicionais também. Embora não vamos entrar em nenhum dos recursos avançados do Cloudinary, há muito que você pode fazer, então basta cortar, dimensionar e aprimorar nossas imagens antes da entrega, além de adicionar diferentes efeitos. Mas durante este curso vamos mantê-lo o mais simples possível simplesmente empurrando e recuperando imagens do Cloudinary. Primeiro de tudo, precisamos ir para cloudinary.com e criar uma conta gratuita. Clique no botão “Cadastre-se” e, em seguida, adicione nosso nome aqui dentro, o endereço de e-mail, a senha, e tudo isso é opcional. Imagem em gerenciamento de vídeo e criar uma conta. Eu quero clicar em “Desenvolvedor”, “NodeJS” e também vai para outro clique em “Avançar”, e ele fecha, e então somos levados diretamente para o painel Cloudinary. Você verá que há alguns limites de upload gratuitos generosos e tamanho mais do que suficiente para o nosso projeto. Aqui podemos ver quantos bytes usamos em nosso armazenamento atual. No lado direito, podemos ver que podemos obter um armazenamento extra de arquivos ao compartilhar nas mídias sociais. Mas temos mais do que o suficiente para começar. Na parte superior da página, temos os detalhes da nossa conta que precisaremos conectar ao Cloudinary, incluindo nossa chave de API e nossos segredos. Podemos copiar esses detalhes e colocá-los em nosso arquivo ENV ponto, que criamos no último vídeo. Primeiro de tudo, vamos copiar o nome Cloudinary. Clique nisto e depois em “Copiar”. Em seguida, em nosso arquivo ENV dot, vamos começar uma nova linha e isso pode ser o nosso Cloudinary_name, e definir isso igual ao nosso nome que descobrimos. Também precisamos de uma chave CloudInary_API. Podemos definir isso igual à nossa chave API, que está aqui. Copie e cole isto. O terceiro que também precisamos é o segredo da API. Isso também é fornecido no painel de controle para Cloudinary API segredo. Podemos ir ao painel. O segredo da API está oculto por padrão, então clique em revelar, copie isso, adicione isso e dê um salvamento. Então precisamos instalar o pacote Cloudinary NPM em nosso projeto. Para fazer isso no terminal, feche nosso servidor, controle e C. Então nós o comando NPM, I, nublado. Lembre-se, eu sou apenas o atalho para instalar e dar alguns momentos para puxá-lo para dentro do NPM. Parece que temos um erro de ortografia. [ inaudível]. Vamos ir para o ponto do pacote JSON e verificar se isso está instalado. Você tem o Cloudinary como dependência. Agora podemos ir para o controlador do hotel, então feche isso, vá para o controlador do hotel na pasta controladores. Nós estaremos acessando Cloudinary usando nosso controlador de hotel, então precisamos exigi-lo neste arquivo JavaScript. Lá em cima, configura uma constante de Cloudinary. Isso é igual a exigir, e este é um pacote sem então nós simplesmente referenciamos isso pelo seu nome, ponto-e-vírgula no final. Em seguida, podemos configurar o nosso objeto de configuração Cloudinary, que irá armazenar todos os detalhes do conflito que temos colocado em nosso arquivo ENV pontos. Apenas aqui, acessamos nossa configuração de ponto variável Cloudinary. Este é um objeto que você passa. Primeiro de tudo, precisamos definir o cloud_name, isso é igual ao nosso Cloudinary_name que salvamos no arquivo ENV ponto. Lembre-se que podemos acessar essas variáveis com process.env. Em seguida, vêm as letras ou o nome de Cloudinary. Vamos lá e o nome. O próximo que precisamos, que é separado por uma vírgula, é o nosso API_key. Novamente, a maior parte disso para a nossa variável de ambiente assim process.env CloudInary_API_Key, eo último que precisamos é o segredo API. Este é o process.env no último foi o CloudInary_API_Secret. Ao fazer upload de imagens, não é fácil lidar com outras partes de nossos dados de formulário, como os campos de texto para o nome e descrição. Se formos para o hotel_form, que é um mixin. Abra a pasta de mixins. Abra hotel_form. Atualmente, ao salvar nosso hotel, usamos a codificação padrão, que lida com todas as nossas entradas baseadas em texto, que você não tem aqui. Atualmente temos um arquivo entradas para a imagem. Temos as entradas com o tipo de arquivo, mas presente não estamos realmente salvando uma imagem. Tudo o que estamos fazendo é salvar um nome de arquivo, que corresponde a um arquivo dentro de nossa pasta pública. Ao salvar imagens em um formulário usando uma solicitação de postagem, que estamos aqui, precisamos alterar a codificação do formulário para ser o que é chamado de dados multi-part/formulário. Logo após o nosso método, podemos adicionar o tipo de tinta e “multi-part/form-data”. Isso permitirá que nosso arquivo de imagem também seja incluído com nossa solicitação de postagem. No entanto, agora precisamos adicionar algum middleware à nossa aplicação expressa, que sabe como lidar com essas multi-part/form-data. Para isso, usarei um pacote chamado Multer. O Multer vai basicamente tirar as nossas imagens que enviamos e depois permitir-nos fazer algo com elas. Ele pode salvar as imagens para inserir no local do arquivo ou até mesmo alguma memória, que é o que estaremos fazendo neste projeto. Podemos então enviar essas imagens para o Cloudinary. A primeira coisa que precisamos fazer é instalar o pacote NPM no terminal. NPM, eu e depois Multer, que é M-U-L-T-E-R. Também usaremos isso no controlador do hotel, então volte a isso, clique neste arquivo. Também podemos exigir isso no topo. Vem multer iguais exigem vírgula multer no final e como dissemos antes, multer nos dá controle total sobre onde armazenamos essas imagens. Podemos ir em frente e preparar isso agora. Só a nossa configuração. Dizemos constantes de armazenamento e definimos isso igual ao armazenamento de disco multer dot. Em seguida, passando objetos AMC. Dentro do armazenamento em disco, podemos definir um objeto de opções para configurar uma pasta ou destino onde você deseja salvar essas imagens. Não vou fazer isto porque vou guardar estas imagens para o Cloudinary. Portanto, não precisamos configurar uma pasta de armazenamento neste caso, se apenas deixarmos essas opções objeto vazio, como vemos aqui, o diretório padrão do computador para salvar arquivos temporários é usado em vez disso. Em seguida, o próprio multer também leva em opções objeto dois. Dentro daqui vamos passar em nossa variável de armazenamento, que foi criada. Vamos transformar um multer onde nossos arquivos serão armazenados. Nós já temos isso coberto com a variável de armazenamento apenas aqui. Também podemos passar filtros de arquivos para restringir os tipos de arquivos aceitos e também quaisquer limites de upload também. Mas vou continuar assim para manter as coisas agradáveis e simples. Podemos então salvar isso dentro de uma constante, para que possamos acessar isso em breve. Vou chamar essa constante de upload e definir esse nosso objeto multer. A próxima etapa depois disso é dizer ao Multer que só queremos aceitar arquivos individuais. Fazemos isso acessando nossa variável de upload, que foi criada, e depois dot single, então isso diz multer, nós só queremos fazer upload de uma única imagem de cada vez. Multer também tem opções para lidar com uma matriz de arquivos. Você pode ir até lá e verificar a documentação. Se isso é algo que lhe interessa. Dentro de um único, passamos em um nome que eu vou chamar imagem dentro das citações como passando imagem dentro daqui. A imagem única estará disponível para nós desde multer irá adicioná-lo ao objeto de arquivo de ponto de solicitação. Este nome de imagem que você passa em apenas aqui, é um nome de campo usado ao passar a imagem para solicitar arquivo ponto. Manipulação desta imagem será um processo de estágio livre ou estágios livres de middleware. A primeira etapa que é carregar a imagem e salvar para a memória que acabamos de lidar acima. Para adicionar isso ao nosso middleware, primeiro precisamos exportá-lo. Apenas para o nosso upload podemos agora exportar upload de pontos. Defina isto para o nosso único ponto de upload. Em seguida, adicione isso ao nosso roteador na cadeia de middleware. Vamos para o ponto índice JS dentro de nossas rotas. Vamos localizar as rotas de administração que temos aqui. Queremos adicionar isso ao adicionar um novo hotel. Precisamos ir para a solicitação de postagem para admin/add. Aqui temos atualmente um pedaço de middleware chamado criar hotel post. Este é o estágio final, que é salvá-lo no banco de dados. Mas primeiro podemos passar em um uploader de arquivos e assim adicionar isso em uma linha separada. Então basta seguir isto, podemos acessar o upload de pontos do controlador do hotel separados por uma vírgula. Agora este é o nosso primeiro e último passo na nossa criação. No próximo vídeo, vamos terminar as coisas criando um novo middleware para salvar nossas imagens no Cloudinary antes de empurrar nosso hotel para o banco de dados. 41. Salvando imagens na nuvem: Fizemos alguns bons progressos no último vídeo, configuramos nosso arquivo de configuração nary cloud, tratamos os dados de formulário de barra de várias partes do nosso formulário e também configuramos o middleware molto para lidar com salvar a imagem. Neste vídeo, vamos lidar com o próximo estágio, que é pegar esse arquivo de imagem que carregamos e empurrá-lo para a nuvem nary. Também lidar com quaisquer erros ao longo do caminho. Isso também será configurado como um pedaço de middleware. Então, para o arquivo index.js. Isso precisa ser colocado entre o upload da imagem, que eu fiz no último vídeo e, em seguida, o estágio final no banco de dados. Certifique-se como uma vírgula apenas no final aqui e, em seguida, podemos adicionar o controlador do hotel. Em seguida, o próximo estágio, que é empurrar para Cloudinary adicionar uma vírgula no final. Este pedido post quando adicionamos um novo hotel, passará por estes middleware três peças em ordem. Em primeiro lugar, fazer upload da imagem, depois salvar no cloudinary e, em seguida, passar para salvar o hotel no banco de dados. Sobre os controladores do hotel dot js, podemos criar push para Cloudinary. Logo abaixo do nosso upload de pontos de exportações, podemos adicionar exportações para push o Cloudinary equivale a nossas solicitações respondem. Em seguida, configurar o nosso corpo de função. A primeira coisa que precisamos fazer é verificar se há uma imagem dentro de qualquer declaração. Se solicitar o arquivo ponto. Multiplicar diz que este arquivo nos objetos de solicitação sob o nome do arquivo. Aqui nós verificamos se este arquivo existe porque nós só queremos enviar o arquivo para o Cloudinary, se a imagem está realmente lá. Há um caso em que a imagem não está lá. Um bom ao atualizar um hotel. O administrador majors quer ser obtido na descrição ou em uma das entradas baseadas em texto. Em seguida, ele deixa o upload do arquivo vazio. Então, depois disso, podemos adicionar um L declarações. Isso vai passar isso para o próximo, que então passará para o próximo pedaço de middleware se nenhum arquivo existir. Este próximo pedaço de middleware é o post de criação do hotel, como dissemos no arquivo de índice de roteadores. Dentro do bloco if, acessamos o carregador do Cloudinary. Em seguida, use o método Cloudinary dot upload. Este método de upload, vamos fazer o upload de uma imagem que passamos. Podemos acessar este uso precisa solicitar ponto ponto caminho ponto arquivo. Em seguida, podemos usar um prometido uma alça o que acontece quando o upload é bem sucedido. Logo depois disso, podemos remover o ponto-e-vírgula. Podemos então acorrentar em um ponto, então. Certifica-te que isto está escrito bem. Dot, então, para criar a nossa promessa. Então aqui dentro vamos criar uma função que leva os resultados. Em seguida, configurar nossa função aqui dentro. Esta variável de resultado que temos aqui irá parar na imagem que obtemos de volta do Cloudinary, que também inclui um ID público, que Cloudinary adiciona à imagem. Em seguida, usaremos este ID público para referenciar a imagem em nossos projetos, definindo seu valor para solicitar imagem de ponto corpo ponto. Pedido ponto corpo ponto imagem é igual aos nossos resultados, que temos de volta. Em seguida, é ID de sublinhado público, que é retornado de Cloudinary. Esta imagem de ponto corpo ponto pedido é impulso para criar post hotel, que é a próxima etapa no middleware. Este ID de imagem não é salvo quando salvamos o hotel em nosso banco de dados Mongo. Para mover isso para o nosso post de criação do hotel, precisamos ligar em seguida. Adicione isso logo depois. Isso vai passar para criar post hotel, que é a última etapa em nosso middleware, que você acabou de chegar aqui. Como já sabemos, precisamos terminar uma promessa adicionando instruções catch para lidar com quaisquer erros e redirecionar para a mesma página que somos. Logo após o ponto, então podemos treinar no final do dia ponto pegar. Esta é também uma função onde podemos adicionar um redirecionamento de pontos res. Isso vai redirecionar para a página atual, então a barra admin barra add dá-nos salvar. Agora podemos ir para o navegador e adicionar um novo hotel. baixo em alguns sem querer executar NPM ou DEF começa. Parece que temos um erro, então vamos puxar isso para cima. É armazenamento de disco multi ponto. Eu tenho um armazenamento constante igual multer que corresponde é apenas aqui e armazenamento de disco e que só precisa V8K então salve isso e, em seguida, crescer verde novamente, ir para o nosso projeto no navegador, ele recarrega. Agora estamos prontos para ir de novo. Mais para o nosso administrador, forward barra admin, soa que Boltzmann, podemos adicionar um novo hotel e ao nosso formulário. Vamos apenas adicionar um teste. Vamos dizer imagem de teste. Quem me dera ter alguma descrição lá dentro. Clique em qualquer hotel. Classificação de estrelas não importa. Em seguida, clique em confirmar para salvar este hotel. Este é um bom sinal de que agora vamos redirecioná-lo para o hotel que acabamos de criar. Mas vemos que nenhuma imagem está sendo exibida no topo. Vamos entrar nas ferramentas do desenvolvedor e ver o que está acontecendo. Clique com o botão direito do mouse inspeções, role para baixo, clique em nossa imagem. Este nome de imagem agora é o ID público, que eu mencionei antes. Isso ocorre porque nós definimos a imagem de ponto de corpo de ponto de solicitação apenas aqui para ser igual ao nosso ID público, que é retornado do Cloudinary. Vamos apenas conectar isso de volta fora do Cloudinary embora, nós devemos agora ver a imagem que você acabou de adicionar. Feche isso para Cloudinary e recarregue. Clique na Biblioteca de Mídia. Além de exemplos de vídeos e imagens que você forneceu, também vemos o nosso hotel uma imagem agora está sendo carregada para o Cloudinary. Excelente, então espero que isso não esteja funcionando para você. No próximo vídeo, também configuramos nossos hotéis para extrair as imagens do Cloudinary e depois exibi-las em nossos projetos. 42. Recuperando imagens da nuvem: Estamos em boa fase agora como podemos salvar nossos hotéis e também a imagem é salva para Cloudinary. Também definimos o nome da imagem para ser igual ao id exclusivo, que é definido pelo Cloudinary quando carregamos uma imagem. Portanto, precisamos mudar nossa fonte de imagem Tantalus para que eles sejam exibidos corretamente do Cloudinary e não apenas usando as imagens da pasta pública. Então podemos ir para o nosso projeto, ir para inspecionar, clicar em nossa imagem apenas aqui. Este é o caminho do arquivo que precisamos alterar. Então, isso pode ser exibido com sucesso em nosso projeto. Este é um efeito muito fácil. Primeiro podemos pegar o URL do nosso painel Cloudinary. Então vá para o nosso painel apenas aqui, clique no link. Em seguida, para pegar nosso URL, precisamos clicar no link Mais apenas aqui, e temos um URL de entrega base. Então, clique no menu suspenso, e aqui temos duas amostras diferentes, então vamos copiar o URL, que inclui nosso nome de nuvem no meio aqui. Isso vincula às nossas contas, depois ao nosso hotel.pug, que é o mixin. Vou para o hotel, vamos abrir isso. Podemos conectar esta linha para fora e mantê-lo para referência, mas precisamos criar uma nova imagem elementos. Desta vez leva na fonte, e podemos adicioná-los como backticks, para que possamos usar uma variável. Em seguida, cole em nossa URL. O último passo é substituir este sample.jpg no final pelo nosso nome de imagem exclusivo, que é armazenado como hotel.image. Então, podemos ver os literais do modelo, abrir as chaves e, em seguida, hotel.image, fora das chaves. Também precisamos adicionar a extensão the.jpg. Se isso salvar, agora se passarmos para o nosso projeto, clique na “Home Page” e, em seguida, clique em “Ver tudo”. Se deslocarmos para baixo, como esperado, apenas o nosso teste de hotel funciona por enquanto. Uma vez que o uso da imagem para isso foi carregado para o Cloudinary, mas agora o resto da imagem está quebrado porque eles são salvos como o nome do hotel. Agora vamos excluir todos os hotéis de teste que possamos ter no banco de dados e então precisamos passar pelo resto dos hotéis e atualizar cada imagem. Isso é tão simples quanto sair para a seção de atualização do hotel do administrador, recarregando a mesma imagem. Isso irá então empurrá-lo para Cloudinary e obter um ID único, mas há uma coisa que precisamos fazer primeiro. Você pode pensar o que isso pode ser? Ao criar um novo hotel, passamos pelo upload e empurramos o middleware Cloudinary primeiro, que é openindex.js. Nós passamos por esses dois estágios antes de salvá-los no banco de dados. Nós também precisamos executar através desses mesmos dois estágios quando atualizações em. Então copie o upload, pushToCloudInary, e depois vá para admin, atualização HotelID que é a solicitação de post apenas aqui, uma vez que está em uma nova linha. Então, logo acima, podemos passar pelos dois primeiros pedaços de middleware ao atualizar dois, já que isso também está lidando com o mesmo uploader de imagem, então vamos testar isso, então mais no admin. Na verdade, podemos remover nossos hotéis de teste, então atualize o mLab e cante. Vamos percorrer qualquer um desses, e este é o teste aqui. Clique no ícone “Excluir” lá. Também temos imagem de teste. Isso deve ser capaz agora até 12 imagens. De volta ao projeto, vamos para a seção de administração. Também precisamos ir para as Atualizações, então Editar, Remover e, em seguida, role para baixo. O primeiro é o Hotel1, então vamos fazer uma busca por isso. Clique em “Atualizar Hotel” e, em seguida, tudo o que precisamos fazer é clicar na “Imagem”, selecionar “Hotel1" e, em seguida, Confirmar. Agora podemos ver que agora redirecionado para a vista de detalhes do hotel, que agora tem a imagem. Se formos a /all, devemos ver que o resto das imagens ainda não exibidas porque precisamos passar por cada uma delas e recarregar a imagem. Agora vou deixar vocês com esta tarefa de percorrer o resto dos hotéis e atualizar imagens, depois voltar no próximo vídeo, onde vamos começar a trabalhar em nosso formulário de busca de hotel. 43. Formulário de pesquisa do hotel — parte 1: No topo do nosso projeto, criamos um formulário de pesquisa de hotéis há algum tempo. Vamos fazer isso funcionar para permitir que os usuários sejam mais específicos sobre sua reserva. Não implementaremos um sistema de reservas ao vivo, mas ainda usaremos as datas para adicionar ao pedido dos clientes. Este formulário está localizado dentro do nosso arquivo de layout dot pug. Se você abrir a barra lateral, o layout dot pug, e então nós temos nosso formulário dentro do wrapper de navegação de pesquisa apenas aqui. No momento temos o nosso elemento de forma apenas aqui, mas não tem atributos de ação ou método. Vamos em frente e adicionar estes agora. Abra os colchetes e na ação que vai ser igual aos resultados de barra e, em seguida, o método e que pode ser uma solicitação POST. Quando enviarmos o formulário, vamos enviar esses dois resultados de barra. Agora precisamos lidar com esta rota dentro do arquivo index dot js. A pasta de rotas chamada index.js. Vamos fechar isto. Vamos adicionar isso. Vamos colocar isso logo após os países. Na próxima linha aqui, roteador, minúsculas e esta é uma solicitação POST. [ inaudível] enviar os dados do formulário. Dentro aqui precisamos adicionar o roteador de resultados barra. Combina no formulário. O ponto controlador do hotel e esta função vai ser chamado resultados de pesquisa ponto-e-vírgula no final. Vamos até o controlador do hotel e criar os resultados de busca aqui dentro. Na parte inferior, exporta os resultados da pesquisa com pontos. Esta vai ser uma função de sincronização, objeto de solicitação, a resposta, e também em seguida, criar nosso corpo de função. Aqui dentro vamos começar com o nosso familiar tentar pegar o bloqueio. Catch pass na era calibra-se e capacidades dinâmicas para o próximo. Também foi tirada na época. Precisamos capturar o conteúdo do nosso pedido de post e, em seguida, instalá-lo dentro de constantes para que possamos usar isso dentro da função. Dentro do bloco try, cria as constantes, e eu vou chamar meu a consulta de pesquisa e isso é igual ao corpo do ponto de solicitação. Pedido corpo ponto armazena as informações transmitidas ou post pedido ou seja apenas informações que está dentro do formulário. A pesquisa será executada através do pipeline de agregação. Cada passo levará nossos dados de pesquisa e, em seguida, reduzirá os resultados. Vamos começar configurando nossa agregação e armazenar isso dentro de uma constante chamada dados de pesquisa. O conjunto D maiúsculo deve esperar. Nosso modelo hotel.Pensamentos, agregados, exatamente como já usamos antes. Em seguida, dentro dos colchetes podemos passar nestes colchetes como uma matriz para que possamos passar em nossos vários estágios do pipeline de agregação. O estágio de agregação inicial será o estágio de correspondência dentro das chaves. $ símbolo match, assim como usamos antes e, em seguida, vamos usar algo que ainda não vimos isso, que é $ símbolos textos e ele vai ser usado para criar uma pesquisa de texto em nossos campos de hotel. Dentro daqui, abra as chaves novamente, $ símbolo de pesquisa. Queremos muito [inaudível] registros para o texto inserido pelo usuário. Isso pode ser alcançado usando este $ símbolo texto, que executa uma pesquisa tecnológica. Aqui estamos passando na busca, que vai ser uma string, que Mongo usa para consultar nosso banco de dados. Aumenta qual string queremos usar. Bem, este é o destino de todas as formas. Se voltarmos para o nosso arquivo de layout dot pug, o destino é a primeira entrada apenas aqui, que tem este nome de destino e isso também é passado com a solicitação de post para que ele possa acessá-lo com destino de ponto de consulta de pesquisa. Vamos adicionar isso agora, então pesquisa consulta, que é a nossa constante apenas aqui, ponto destino. Antes de irmos mais longe, vamos ver quais dados são devolvidos para nós. Podemos fazer isso se sairmos da nossa agregação, foi a próxima linha e fazer um res.json passando em nossos dados de pesquisa. Estes são os dados que devem voltar do MongoDB e é armazenado dentro desta variável apenas aqui. Basta salvar e depois passar para a página inicial. Podemos criar uma busca. Eu não fiz nenhum detalhe aqui dentro realmente não importa. Convidados e e clique em Pesquisar. Agora vemos se rolar para baixo até a parte inferior há um erro de índice de texto é necessário. Isso significa que precisamos indexar quais campos queremos pesquisar. Eu vou fazer o nome do hotel e também o campo do país pesquisável por este formulário de entrada. Um usuário pode pesquisar o destino, apenas ouvir muito nome do hotel [inaudível] ou adicionando um país. Nós indexamos campos em nosso modelo hoteleiro. Vamos para a barra lateral. Dentro de nossos modelos vamos abrir o hotel dot js. e bem no fundo, fora de nossos objetos, começamos acessando nosso esquema de hotel, que é o nome da constante. apenas no topo aqui. De volta ao fundo. índice de pontos anunciará o índice os campos que queremos pesquisar a partir do nosso modelo. Passe em um objeto que leva nos campos. O primeiro campo que queremos procurar, já que estamos à procura de hotéis. Se formos para o MLab, aqui dentro, queremos procurar os nomes dos hotéis. Temos o campo nome do hotel e também queremos pesquisar por país também. Podemos usar o campo de país além disso. Dentro do nosso esquema, podemos adicionar nestes dois campos. O primeiro é o nome sublinhado do hotel e isso vai ser definido como uma string de texto. Então poderíamos fazer o mesmo com o país, cidades para enviar mensagens também, bater no cofre. Também podemos adicionar qualquer um dos campos aqui, como a descrição. Unsearch também olharia em seu campo também. Se nós também cabeça para mLab mais uma vez, ele recarregar. Quando seu login vamos assinar sem detalhes. Clique no nome do nosso banco de dados na parte superior. Se rolarmos para baixo, bem como a nossa coleção de hotéis que temos aqui dentro, agora podemos ver índices de pontos do sistema, que tem dois documentos diferentes. Se abrirmos isso, pode parecer um pouco confuso no início, mas logo expandimos isso vemos uma referência a um nome de hotel e também ao nosso país para que esses campos sejam configurados para serem incluídos em nossa busca. Agora, se formos para o projeto e, em seguida, recarregar o navegador, e vamos fazer uma nova pesquisa. Adicione o nosso país, a nossa duração e a data está bem. Ele procura. Mas agora ele recebe nossos dados JSON de volta, que correspondem aos nossos dois hotéis no país que adicionamos dentro do formulário. Há um pequeno problema agora, no momento, se voltarmos e fizermos algo como uma busca pelo hotel um, hotel um aqui dentro. Lembre-se, indexando estes dois campos, também procuramos no nome do hotel, bem como no país. Isto deve funcionar. Se pesquisarmos, você verá uma lista completa de todos os hotéis dentro do nosso banco de dados, em vez de apenas nos informar um. Este resultado é porque não estamos procurando o hotel completo como uma frase. Em vez disso, o que acontece por padrão é que ele irá retornar uma correspondência para uma palavra individual, então vamos ver todos os resultados para a palavra hotel e também qualquer coisa que corresponda ao número um também porque todos os nossos hotéis têm a palavra hotel nele. É por isso que vemos todos estes hotéis de uma base de dados devolvidos. Para corrigir isso, podemos executar uma correspondência na frase completa. Apenas um hotel seria devolvido para pesquisa usando o que é chamado escapes aspas duplas, que se parece com isso. Vá para o nosso controlador. A primeira coisa que precisamos fazer é cercar estes dentro dos colchetes porque vamos estar usando dados dinâmicos. Em seguida, podemos usar o símbolo $ e cercar isso nas chaves como fizemos anteriormente. A próxima coisa que precisamos fazer é adicionar nossas escapes aspas duplas. Logo após o primeiro colchete, usamos uma barra invertida e, em seguida, aspas duplas e, em seguida, fazemos o mesmo e logo após esta chave encaracolada aqui com a barra invertida e, em seguida, as aspas duplas. As aspas duplas tratarão isso como uma string. Todas as palavras dentro de nossa consulta de pesquisa serão pesquisadas como uma frase completa em vez de palavras individuais que já vimos antes. Também precisamos escapar dessas aspas usando as barras invertidas. Essas aspas também são renderizadas para com o texto da variável O. Deixe Mongo saber que a frase completa deve ser procurada em vez das palavras individuais. Se agora salvarmos isso e, em seguida, atualizar o navegador, continue para a página inicial. Agora você pode procurar por hotel um. Clique na pesquisa. Agora, dentro do ele veria o hotel 10, 12, 11 e um. Agora só vemos os hotéis que correspondem à frase do hotel um. Vemos o hotel número 10 porque começa com o hotel um, economiza o hotel 12. Isto corresponde à primeira parte da frase número 11, e também ao nosso hotel um. Todo esse comportamento pode não parecer muito certo, já que nomeamos nossos hotéis usando números. Este tipo de pesquisa seria mais eficaz quando esses hotéis têm nomes mais realistas. O que significa que o usuário não precisaria digitar o nome completo do hotel. Eles podem se lembrar apenas de parte do nome do hotel, mas ainda assim obterão os resultados necessários. Vamos voltar e tentar o país, cercado no hotel um. Vamos digitar no México. Clique em pesquisa e agora veja o México aqui e também apenas para chegar. Ainda bem que este primeiro campo não está funcionando. Para os próximos. Em seguida, é também uma fase muito grande no pipeline de agregação onde filtramos nossos hotéis indisponíveis. Adicione uma vírgula logo após a primeira partida. Podemos configurar o nosso segundo jogo assim como fizemos acima com tala símbolo match. Abra as chaves. Então aqui dentro podemos verificar se os campos disponíveis estão definidos como um valor booleano de true. Agora vamos ao mLab e definir um desses hotéis para não estar disponível. Vamos para o hotel número três, clique em editar. A disponibilidade para ser falsa. Na parte inferior, disponível igual a false. Salve e volte. Agora, é claro, o projeto aperta o botão Voltar e, em seguida, mudar nosso destino para ser simplesmente hotel it search. Agora temos o hotel número três, assentamento disponível. Agora, se descermos, devemos ver todos os hotéis, exceto o número três. Continue indo até o fundo. Ótima. Não vemos nenhum hotel três devolvido com os nossos resultados. 44. Formulário de pesquisa do hotel — parte 2: Em seguida, vou adicionar um filtro para apenas devolver o hotel é maior do que a classificação de estrelas que procuramos. Em primeiro lugar, se você fizer uma pesquisa, mais uma vez para o México, clique em “Pesquisar”. Estes hotéis têm diferentes classificações de estrelas. Podemos verificar se nosso filtro está funcionando. Dentro da fase do jogo. Podemos adicionar mais de um filtro. Vamos passar para um controlador de hotel, e logo após disponível de verdade, também podemos adicionar um segundo estágio de partida, e desta vez queremos procurar a classificação de estrelas. É star_rating como o nome do campo os dois-pontos e, em seguida, abrir as chaves. Dentro aqui uma vez que você vê o operador maior que, que é $ símbolo GTE. Estamos verificando se a classificação de estrelas é maior que as estrelas de pontos de consulta de pesquisa. Agora só devemos obter resultados de volta para nós de Mongo, qualquer que seja a classificação de estrelas, maior do que o que foi inserido pelo usuário. Agora, se salvarmos isso e depois passar para o navegador, aperte o “Botão Voltar” e, em seguida, mudá-lo para um mínimo de quatro. Aperte “Pesquisar”. Devemos ver apenas um hotel retorna, mas em vez disso parece que estamos recebendo um erro. Vamos dar um passo atrás e descobrir o que está acontecendo aqui. Primeiro de tudo, se voltarmos para o nosso controlador e, em seguida, dentro aqui, podemos alterar o res.json para ser as constantes de consulta de pesquisa, portanto, podemos ver quais dados estão vindo do nosso telefone. Alterações para ser consulta de pesquisa, clique em “Salvar” e, em seguida, recarregar. Obviamente aqui estão os dados do formulário que estão sendo enviados a partir do pedido de correio. Se olhar um pouco mais de perto, é aqui que reside o problema. Todos esses valores JSON estão entre aspas, assim como as estrelas, e também a ordem de classificação, o significa que estes serão tratados como uma string. Mas a classificação de estrelas em nosso banco de dados, se formos para “mLab” rolar para baixo, isso é armazenado como um número sem qualquer cotação, e é por isso que não obtemos os resultados esperados. Podemos confirmar isso, vamos primeiro restabelecer os dados de busca. Em nosso res.json, satisfaz nossas paredes, comente esta linha para fora, e então podemos fazer res.send, e queremos enviar é o tipo de consulta de pesquisa, estrelas de ponto vírgula no final. Isso então retornará para o tipo de dados das estrelas de pontos de consulta de pesquisa. Salve isso e recarregue os projetos. Clique em “Continuar” e agora vamos ver que temos um tipo de dados de string. Embora esperávamos um valor de um número para o número de estrelas. Isso ocorre porque ao enviar dados para um de um servidor, eles são enviados como texto simples. Portanto, o cliente está interpretando isso como uma seqüência de caracteres. Isso significa que primeiro precisamos converter esse tipo de dados para que ele funcione, e temos um método Javascript chamado parse Int. Para fazer isso, se formos para o topo do bloco try logo após a nossa consulta de pesquisa, vamos criar uma nova constante chamada estrelas analisadas e definir isso para o nosso método Javascript de análise Int. Dentro dos colchetes, podemos passar na string que quer passar, e queremos passar as estrelas de pontos de consulta de pesquisa. Copie isto e cole isto. Isso irá emprestar-lhes passar a string como um número usando o método Int de análise, e, em seguida, armazená-lo dentro desta constante apenas aqui. Podemos então usar essa constante dentro do nosso pipeline de agregação. Copie estrelas analisadas e, em seguida, em vez de usar a estrela de ponto de consulta de pesquisa de antes, que agora sabemos que é uma string. Agora podemos colar isso em, clique em “Salvar”. Em seguida, podemos fazer o nosso res.json descomentando esta linha e, em seguida, excluir nosso res.send hit “Salvar”, recarregar o navegador, e então podemos voltar para trás para todos os formulários. Agora procure um mínimo de três estrelas. “Pesquisar” vamos com dois hotéis no México de antes, ir para trás e, em seguida, clique em “Quatro estrelas” desta vez, Hit “Pesquisar”. Agora só temos o retorno de um hotel, que é a classificação de quatro estrelas. O último passo neste pipeline é fazer com que esta caixa de seleção trabalhe aqui para resolver o preço de alto para baixo ou baixo para alto. Isso podemos adicionar um estágio de origem do pipeline de agregação. Vamos voltar para o nosso controlador. Após o estágio de correspondência, podemos adicionar uma vírgula, e logo abaixo disso, vamos criar nosso estágio de classificação com um símbolo $ e depois classificar, então podemos adicionar no nome do campo de custo por noite. Não precisamos ser classificados pelo campo de custo por noite, que detém o prêmio para o hotel. Isso precisa, em seguida, tomar o campo de classificação do formulário que é armazenado na classificação de pontos de consulta de pesquisa, mas você pode já ter antecipado um problema com isso. Assim como a classificação de estrelas, este também é o número dois. Vamos precisar usar o método de análise Int novamente neste campo. O campo de classificação é um número porque se passarmos para o bug de ponto de layout e, em seguida, rolar para baixo até um Select, que é apenas aqui. Temos um valor de um ou negativo. O valor de um retornará os documentos em ordem crescente, e o negativo retornará em ordem decrescente. Vamos começar analisando nosso número. Para o controlador do hotel, logo após as estrelas analisadas, podemos adicionar um ponto-e-vírgula, configurar uma constante, desta vez chamada de classificação analisada. Isso é igual ao nosso método de análise Int passando neste tempo a consulta de pesquisa e, em seguida, classificar ponto, adicionar um ponto e vírgula no final, e agora podemos usar essas constantes de classificação analisadas no lugar da consulta de pesquisa dócil de antes, dê isso um salvamento, sobre o navegador. Vamos baixar a classificação de estrelas para ser o número um. Recebemos nossos dois devoluções de hotel no México e depois mudamos para ser alto para baixo. Aperte “Pesquisar”. Agora tem um aviso aqui então vamos voltar, e ele só quer ser um I maiúsculo, aperte “Salvar” e depois “Recarregar”. Há os nossos dois hotéis no México. O custo é 67, depois 56. Tão alto para baixo, mas eu vou voltar e mudar de baixo para alto, aperte “Pesquisar” e agora tenho 56 seguido por 67. Isso parece estar funcionando bem se voltarmos e mudarmos para um destino diferente. A República Dominicana também tem vários hotéis. Clique em “Pesquisar”, vemos o nosso país. O custo está em ordem, volte e altere-o de alto para baixo. Agora estes também classificados em ordem numérica. Agora temos os dados de volta que precisamos do banco de dados, em seguida, vamos passar para a criação um modelo de resultados de pesquisa para exibir esses hotéis dentro de nossos projetos. 45. Modelo de resultados de pesquisa: Agora temos os dados JSON corretos, agora retornar do banco de dados. Precisamos agora criar um modelo para exibir esses dados para o usuário. Primeiro, se passarmos para o nosso editor de texto, podemos criar um novo modelo de página chamado search_results. Então abra a Barra Lateral e, em seguida, vá até nossas Exibições, Novo arquivo, então este é o search_results.pug. Em seguida, podemos substituir o res.json do controlador para renderizar este modelo de página. Então vamos para o nosso controlador, que é o hotel controller.js, vá para a função de resultados de pesquisa e em vez de ter este res.json, vamos comentar isso, double res.render. Podemos renderizar nossos novos modelos de página de resultados de pesquisa, vírgula e, em seguida, objeto de opções pessoais com o título dos resultados da pesquisa. Vamos adicionar um ponto-e-vírgula no final. Então precisamos passar para o modelo duas coisas. Primeiro é a consulta de pesquisa, que contém a nossa data de partida e também o número de noites. Isso é armazenado dentro do req.body, que são os dados enviados do formulário. Então adicione uma vírgula; e, em seguida, adicione nossa consulta de pesquisa; e, em seguida, adicionar uma vírgula, e, em seguida, também podemos adicionar nossos dados de pesquisa, que são os dados do banco de dados após nossos filtros de agregação que você vê aqui. Agora podemos passar para o nosso modelo de resultados de pesquisa. Então salve este arquivo, vá para o search_results.pug. Isso vai estender layouts. Podemos incluir nossos mixins. Então mixins/_hotel, porque vamos reutilizar este mixin para exibir todos os hotéis como uma lista de nossos resultados de pesquisa. Depois disso, adicionaremos nosso conteúdo de bloco, nosso h2 para o título, e então precisamos percorrer cada um dos hotéis nos dados de busca, que está sendo passado para nós. Então vamos fazer um loop onde cada chamada para este hotel individual, o hotel. Então, em dados de pesquisa, podemos adicionar um hotel_wrapper ou o CSS, adicionar todos mixin, então mais hotel. Primeiro, vamos passar para o hotel. Claro que precisamos passar os dados do hotel, que é este aqui, mas também podemos passar na consulta de pesquisa completa também. Lembre-se que também enviamos consulta de pesquisa para este modelo no controlador, que é apenas aqui e isso vai conter todas as informações do nosso formulário, como as datas de partida e o número de noites. Esta é toda a informação também pode ser incluída nos resultados da pesquisa. Então vamos testar isso. Se formos para o navegador, e então vamos voltar e criar uma nova pesquisa ou, na verdade, podemos apenas clicar no botão de pesquisa aqui, e usar os dados existentes, e rolar para baixo. Ok, bom. Então agora temos nossos resultados de pesquisa aqui e agora, em vez do formato JSON, agora temos nossos dois hotéis que parecem muito mais bonitos. Isso é bom, mas há mais alguns detalhes para adicionar a este hotel. Antes de agrupar o hotel mixin os dados de consulta de pesquisa, que continham as datas de partida e o número de noites da pesquisa do usuário. Isso parece bom, mas há mais alguns detalhes para adicionar a este hotel. Queremos também incluir no lado direito as datas de partida e também o número de noites, como algumas informações adicionais. Então passamos isso para o mixin do hotel com os dados de busca. Vamos ao nosso mixin. Os resultados da busca, vamos pegar esses dados daqui. Então agora estamos passando dois argumentos diferentes, precisamos também incluir isso dentro do nosso mixin. Então, _hotel, podemos passar isso como nosso segundo argumento apenas aqui em cima e, em seguida, para exibir os dados de consulta de pesquisa dentro de todos os hotéis, podemos fazer isso com alguma renderização condicional. Vamos rolar para baixo. Abaixo do custo por noite, crie uma nova seção. Se recuarmos este nível de volta, então está nivelado com as informações do hotel. Criar um if instruções, então se url === '/results', então podemos adicionar em outros detalhes. Vamos adicionar uma nova div envolvente do CSS, dos detalhes da ordem do hotel ou com sublinhados. Então poderíamos apenas configurar alguns elementos p, para exibir esses dados. Usamos os ticks traseiros, então misture os dados dinâmicos com o texto. Número de noites, dois pontos, em seguida, a capacidade em nossos dados dinâmicos de searchQuery.Duration. Um segundo conjunto de elementos p, novamente com ticks traseiros. Isto é para as datas de partida, com dois pontos e desta vez esta é a consulta de pesquisa. data de partida. Isto é tudo caso de camelo. Em seguida, precisamos adicionar os totais. Primeiro de tudo, se guardarmos isto e verificarmos que isto está a funcionar. Se recarregarmos o navegador, reenvie o formulário. Temos agora uma nova div no lado direito, que tem os nossos dados, que foram passados para o hotel a partir do nosso formulário de pesquisa. Agora precisamos também adicionar mais dois pedaços de informação. O primeiro é o preço por pessoa, e o segundo na parte inferior, também vamos incluir um custo total para todas as pessoas juntas. Para fazer isso, a maneira como vamos calcular o custo por pessoa é multiplicar o número de noites pelo custo por noite. Então também precisamos criar um segundo cálculo, que é esse custo por pessoa multiplicado pelo número de convidados. Para tornar isso mais simples, vamos passar para nossos templates. Agora podemos adicionar algum JavaScript. Vamos adicionar a constante para o CosteAch isso vai ser igual searchQuery.Duration. Então temos que multiplicar a duração pelo hotel.cost por noite. Então este foi cost_per_night, eu vou fazer este pequeno para que ele se encaixa em uma linha. Então lembre-se, temos a duração armazenada na consulta de pesquisa, que está passando o formulário. Mas o custo por noite é armazenado no hotel, que estamos recebendo a partir deste disponível apenas aqui. Agora vamos criar uma segunda constante. Isso vai ser para o custo total para a reserva, então o custo total. Então este vai ser igual ao nosso custo por pessoa, que é custo cada um e então quando precisamos multiplicar isso pela nossa pesquisa.NumberofConvidados. Agora podemos usar essas duas constantes e eu vou colocá-las dentro de nossos elementos p. Abra os carrapatos da marca. O primeiro será total por pessoa e vamos adicionar um símbolo de moeda. Em seguida, podemos fazer nossos dados dinâmicos dentro dos literais modelo. Custa cada um em uma regra horizontal, para que possamos ter o custo total na parte inferior, dentro de um h3. Os ticks de volta para o custo total novamente, o símbolo de moeda, em seguida, nossos dados dinâmicos, que é a variável de custo total. Dê que o salvar e, em seguida, vamos tentar isso, nós reenviamos o formulário. Ok, bom. Temos o número de noites, as datas de partida, o total para uma pessoa e, em seguida, o custo total que é este multiplicado pelo número de convidados. Vamos checar novamente, se voltarmos aqui, tivemos dois convidados diferentes dizendo que o total é o dobro do custo por pessoa. Nós também classificamos o preço de alto para baixo. Vamos procurar de novo. Temos um preço mais alto aqui do que vemos na parte inferior. Vamos voltar e mudar isso para ser baixo para alto. Nós também podemos mudar o convidado antes, e também mudar isso. Clique em “Pesquisar”, desça até a parte inferior. Ok, ótimo. Agora todos os nossos detalhes foram atualizados. Temos um novo custo total, que é multiplicado por quatro. Temos um novo número de noites e também o preço é agora de baixo para alto. Se formos até a página inicial, clique no botão “Logotipo” para baixo até todos os hotéis. Nós não vemos nenhum desses detalhes do hotel no lado direito por causa desta renderização condicional. Vamos tentar ver tudo, ainda não vemos nada aqui. Tudo isso parece bom agora. Lembre-se que cercamos esta nova seção dentro de um div, chamado detalhes do pedido do hotel. Vamos copiar isso, e então podemos estilizar isso dentro do CSS. Vamos para a barra lateral na pasta Pública, Folhas de estilo; e, em seguida, o Style.css. Em seguida, role para baixo até a parte inferior, fora de uma consulta de mídia. Vamos trabalhar com a tela pequena primeiro, base nos detalhes do pedido do hotel. Vamos começar adicionando uma cor de fundo. Mantenha div um pouco separado do resto. Depois de usar um valor hexadecimal de eed, defina a marcação de texto na visualização móvel para estar no centro. Em seguida, um pouco de estofamento mantê-lo longe da borda de 1em. Agora salvamos isso e, em seguida, ele recarrega o navegador na tela menor, adicione uma consulta de pesquisa. Qualquer detalhe está bom. Vamos procurar. Agora role para baixo. Agora vemos os resultados da pesquisa para este país em particular. Esta é a nova div que foi adicionada com a cor de fundo diferente. Podemos ver que o texto está centrado nesta nova div, mas não está centrado na seção de informações do hotel acima nesta página de dobras/resultados em particular. Vamos em frente e consertar isso agora. Novamente, fora da consulta de mídia, esta é a seção de informações do hotel. Role para cima, então vamos adicionar a linha de texto para ser sensor. Dá-nos uma recarga, e lá vamos nós para que pareça muito melhor. Vamos verificar rapidamente se isso não bagunça nenhuma das áreas de nossos sites. Se formos para a página inicial e também em Ver Tudo, precisaremos restabelecer isso na consulta de mídia. Vamos apenas copiar esta seção de informações do hotel, rolar para baixo até a consulta de mídia, e aqui vamos nós. Na verdade, podemos apenas mudar a linha de texto para voltar para a esquerda, recarregar e isso está parecendo muito melhor agora. Voltar à nossa consulta de pesquisa, você pode adicionar mais alguns estilos para a exibição maior. Vamos adicionar a mesma consulta de pesquisa, clique em “Pesquisar”. Agora, na tela maior, ainda temos esse texto no lado direito para ser centralizado. Isso é bom para a exibição de tela pequena, mas para a visão maior, queremos alinhar esse texto de volta à esquerda. Dentro da consulta de mídia mais uma vez, vamos descer, e podemos adicionar isso logo após as informações do hotel. O div circundante novamente foi hotel_order_details e tudo o que precisamos fazer é adicionar a linha de texto para estar à esquerda. Salve isso e, em seguida, recarregue, confirme o formulário, e lá vamos nós. Isso parece muito melhor na tela maior. Eu deveria encolher isso e verificar se tudo ainda está bem. Excelente, os resultados da pesquisa agora estão funcionando como esperado e também adicionamos um pouco de estilo. Em seguida, vamos manter o assunto do formulário de pesquisa, incluindo também mais na página de detalhes do hotel. 46. Pesquisa detalhada do hotel: Agora temos um formulário de pesquisa de trabalho na seção de cabeçalho. Agora vou adicionar um semelhante à vista de detalhes do hotel. Você pode estar se perguntando por que precisamos fazer isso. Vamos dar uma olhada rápida. Se formos para a página inicial e, em seguida, ir para a vista de detalhes do hotel para qualquer um desses hotéis. Clique no título a ser então levado para a exibição completa. Imagine que éramos um usuário visitando este site, e então gostaríamos de olhar para este hotel e, em seguida, clicou nele. No momento, não há como personalizar esta reserva adicionando nossos dados que têm a data de partida, o número de hóspedes e também a duração. Se estivéssemos visitando este hotel e queríamos fazer uma reserva, a única maneira de fazer isso seria ir até a navegação superior e criar uma nova pesquisa. Este pode não ser um grande problema no momento porque não temos muitos hotéis, mas em um projeto maior com milhares de hotéis, isso pode se tornar um problema para o usuário. O que vamos fazer neste vídeo é criar um formulário de pesquisa semelhante ao que está dentro do cabeçalho. Vamos então colocá-lo no fundo, mas isso só vai ter certas informações. Só precisamos da duração, da data de partida e também do número de convidados. Nós também vamos remover a classificação de estrelas e o preço porque nós não precisamos deles, já que nós já temos o hotel selecionado, o que nós queremos. Vamos para o nosso layout.pug e se rolarmos para baixo, este é o formulário de pesquisa da navegação superior. Se copiarmos esta seção da seção de div, todo o caminho até o nosso botão enviar, vamos copiar isso e, em seguida, ir para o nosso hotel sublinhado, que é o mixin. Vou adicionar este formulário em pouco menos do custo por noite. Depois daqui, podemos adicionar alguma renderização condicional para exibir isso apenas nas rotas atuais, que começa com uma barra para frente todos, e então barra para frente. Se url.startswith, em seguida, adicione outra string que é barra para a frente todos e, em seguida, barra para a frente no final. Depois disso, podemos então colar em nosso formulário de pesquisa de antes. Se deslocarmos para fora, certifique-se de que está tudo recuado corretamente, caso contrário, teremos alguns problemas. A busca agora podemos recuar a seção tudo em um nível. Desloque-se para baixo até o botão, recue isto em. Em um nível dentro das declarações, Eu também vou separar esta seção com uma linha horizontal com os elementos hr e, em seguida, também adicionar um título h3 de pesquisa para este hotel. Bom. Já sabemos qual hotel queremos procurar. Podemos acrescentar o valor. Se formos ao destino. Apenas aqui, podemos remover necessário. Podemos definir o valor para ser igual ao hotel, que é a informação passada para o mixin, hotel e, em seguida, ponto hotel sublinhado nome. Agora, o valor deste campo será preenchido com o nome do hotel. Portanto, o usuário não precisa fazer uma pesquisa específica para este hotel. Também precisamos da duração, da data de partida, do número de convidados. Não precisamos da classificação de estrelas, já que já temos o hotel. Também podemos remover a ordem de classificação e deixar a busca. Agora, se nós salvarmos isso e depois ir para o navegador, recarregar nesta vista de detalhes do hotel, rolar para o fundo, e agora temos nosso formulário de pesquisa aqui em baixo. Podemos ver que já temos o hotel sete já dentro, que temos adicionando o valor como um atributo dentro daqui. Este hotel também é muito o atual em que estamos. Vamos voltar para a página inicial e selecionar uma diferente e verificar se isso ainda está funcionando. Desloque-se para o fundo, e agora o hotel quatro está dentro das nossas entradas. Agora selecionamos o hotel que queremos. Vamos tentar personalizar isso para que possamos fazer um pedido. Adicione uma duração, uma data de partida, número de convidados, clique na pesquisa. Lembre-se que este formulário já está configurado para ir para os resultados da barra, que é a mesma rota que o formulário dentro do nosso cabeçalho. Um monte disso já deve ser tratado segue. Vamos encaminhar os resultados da barra. Então vemos um erro na parte inferior dizendo que a ordem deve ser ascendente ou descendente. A razão pela qual estamos recebendo esse erro é porque se nós rastreá-lo de volta, estamos indo atualmente para encaminhar resultados de barra, então os resultados de barra para a frente dentro de nossos layouts, dentro de nossas rotas ir para o ponto de índice JS barra direta resultados vai para este controlador hotel de resultados de pesquisa. Se rastrearmos isso de volta, controlador do hotel, e depois vamos para os resultados da pesquisa. Ainda estamos tentando enviar uma consulta para o nosso banco de dados. Inclua também em uma classificação de estrelas, e classifique-os por ordem crescente ou decrescente. Ainda precisamos adicionar algumas informações para garantir que isso seja ignorado nesta página. A maneira como podemos fazer isso é apenas sobre o topo aqui. Temos nossas duas constantes que armazenam nesses dados. Vou usar o operador para adicionar um valor se um for enviado. Os dois tubos para todo o valor de um, e depois o mesmo abaixo ou um. Basicamente, se usarmos na forma de cabeçalho no topo, vamos receber o número de estrelas e também um valor para a ordem de classificação. Se nenhum destes é recebido, então vamos apenas adicionar um valor de um, a cada um deles. Portanto, isso não deve causar problemas ao pesquisar nosso banco de dados. Agora, se salvarmos isso e recarregarmos, agora obteremos resultados da pesquisa como esperado. Desta vez, porém, apenas devolvendo o hotel atual que o usuário selecionou, mas também passando os detalhes no lado direito. Vamos tentar mais uma. Se formos a todos os hotéis. Vamos rolar para baixo, se você for para o hotel dois, temos um formulário no fundo, com um valor de hotel dois. Vamos tentar cinco, adicionar qualquer data aqui dentro, dois convidados e rolar para baixo, e tudo isso agora está funcionando corretamente. Agora vamos passar para a próxima seção onde vamos melhorar um pouco as coisas, e você vai aprender tudo sobre como adicionar contas de usuário e autenticação. 47. Criando o modelo de usuário: Bem-vindo de volta a esta nova seção. Aqui você aprenderá tudo sobre contas de usuário, login, registro de novos usuários, autenticação e muito mais. Para começar, assim como quando começamos a criar hotéis, precisamos usar o Mangusto para criar um modelo, mas desta vez para o usuário. Vamos para o Visual Studio, abrir a barra lateral e, em seguida, dentro de nossa pasta de modelos, podemos ir em frente e criar um novo arquivo, este é chamado user.js, e depois fechar isso. Temos de construir o nosso modelo tal como fizemos com o hotel. Em primeiro lugar, precisamos adicionar uma constante de mangusto e depois exigir o pacote de mangusto, deixar um ponto e vírgula no final. Se você se lembra do hotel, dentro do hotel.js, criamos nosso esquema de hotel, o definimos para um novo esquema de mangusto e, em seguida, construímos todos os nossos campos e, em seguida, adicionamos os tipos de dados e o várias coisas dentro de cada um. Nós vamos obter o mesmo com este user.js. Vamos começar criando nossas constantes, desta vez esta é chamada de UserSchema. Isto é igual novamente a um novo esquema de ponto mangusto, S. maiúsculo Dentro daqui vamos passar em nosso objeto. Então, nosso usuário vai ser bem direto. Ele vai ter um primeiro nome, sobrenome, um e-mail, uma senha e, em seguida, um campo adicional no final col é admin. Chegará a isso mais tarde, porém, o primeiro é para o primeiro nome. Então primeiro sublinhado nome e, em seguida, configurar nossa estrutura dentro das chaves. O nome vai ser o tipo de string separado por uma vírgula. Também precisamos tornar este campo obrigatório, então o texto neste campo está faltando, que é, o primeiro nome é obrigatório, adicione uma vírgula. Podemos cortar qualquer espaço em branco, definindo trim como true, e um número máximo de caracteres a serem separados por uma vírgula. Podemos fazer o mesmo com o sobrenome, então vamos adicionar sobrenome. Esse é o nosso segundo campo. Abra as chaves. Ele ainda vai ser praticamente o mesmo, então este será o tipo de string. Os campos obrigatórios. É como desta vez é, sobrenome é necessário, aparar novamente para ser igual a true, e também um número máximo de caracteres para ser 30. Então, há o nosso primeiro nome, nosso sobrenome, em seguida, abri-lo para também capturar o endereço de e-mail. O endereço de e-mail também será o tipo de string. Isso será necessário também com o texto do endereço de e-mail é necessário, adicione uma vírgula. Nós também podemos cortar isso, então aparar para ser verdade. Também podemos definir este campo para ser único. Ao definir exclusivo para ser verdadeiro, isso irá garantir que nós só temos o mesmo endereço de e-mail armazenado uma vez dentro de nosso banco de dados. Também podemos ter certeza de que isso é armazenado em minúsculas, definindo minúsculas para ser verdadeiro. Adicione uma vírgula após o e-mail, e esta é a senha. A senha precisa ser o tipo de string dois. Também é necessário, portanto a senha é necessária. Também adicionaremos uma nova opção em breve quando voltarmos a criptografar nossas senhas, mas por enquanto podemos deixar esses dados como estão, e depois passar para o final que é admin. Abra isso. Então, administrador, este vai ser um campo booleano. O tipo de booleano, e também por padrão queremos definir isso como falso. Este campo será usado para adicionar um usuário admin ao nosso banco de dados. No momento, vamos configurar qualquer novo usuário para não ser um administrador. Portanto, definimos precisa de valor padrão para ser falso, e a única maneira de adicionar isso é indo dentro do banco de dados e alterando isso para ser verdadeiro. Podemos, então, exportar nosso modelo para baixo na parte inferior, adicionar um ponto-e-vírgula e, em seguida, exportação de ponto do módulo é igual ao modelo do ponto Mangusto, o nome do usuário, e depois passar em nosso UserSchema, que declaramos no topo apenas aqui. Nós apenas adicionamos com um ponto-e-vírgula nas extremidades. Dê-lhes um salvamento. Agora, este é o nosso esquema concluído por enquanto. Como já sabemos, este modelo não faz nada por si só, então no próximo vídeo é sobre a criação de um formulário de inscrição para que o usuário não possa se registrar. 48. Formulário de inscrição: Agora temos o nosso modelo de uso. Sobre a criação de um formulário de inscrição para registrar um usuário. No início do projeto, se formos para o layout.pug, até o topo na seção de cabeçalho, adicionamos um link de inscrição, que vincula a /sign-up. Agora podemos lidar com essa rota no arquivo index.js. Vamos até aqui. Rota, index.js. Feche isso. Se rolarmos para a direita até a parte inferior, então logo acima do module.exports, podemos criar um comentário das rotas do usuário. Primeiro de tudo, podemos adicionar router.get, vez que esta é uma solicitação get, podemos adicionar a rota de /sign-up. Então vamos criar um UserController em apenas um momento. Em seguida, o nome da função SignUpGet, ponto e vírgula no final. Estamos usando este UserController desta vez em vez do HotelController, que usamos até agora neste curso. Isso ocorre porque eu vou adicionar um UserController, para manter as coisas organizadas e separadas. Este arquivo index.js também precisará acessar o UserController também. Portanto, podemos adicioná-lo na parte superior sob nosso HotelController. Role para a direita, aqui exigimos os controladores e até agora só temos o HotelController, então logo abaixo podemos adicionar uma constante de UserController. Assim como acima, podemos adicionar a requisição, adicionar caminho. Isto vai ser... /Controllers/UserController e adicione um ponto-e-vírgula no final. Agora precisamos ir em frente e criar este arquivo UserController dentro de nossa pasta controllers. Abra a barra lateral, clique em “Controladores” e crie um novo arquivo. UserController, C.js maiúsculo. A primeira coisa que este arquivo precisa é o acesso ao modelo do usuário. Podemos exigir isso no topo dentro de uma constante. Usuário constante, U maiúsculo igual a exigir, em seguida, adicione o caminho do arquivo que é a string../está na pasta de modelos /user. Abaixo disso, precisamos criar o SignUpGet para lidar com a exibição do formulário de inscrição. Então exporta, isso é configurado assim como o HotelController, o nome da função de SignupGet, isso é igual à nossa função que leva no pedido, a resposta nossa função Bonnie. Tudo o que precisamos fazer é adicionar um res.render para renderizar um modelo de página, que queremos chamar de sign_up, opções possíveis seriam título de inscrição do usuário. Dê isso um salvamento. Antes que possamos ir em frente e criar este sinal de modelo embora, primeiro eu vou criar um mixin no formulário 2. Então abra a barra lateral, Exibições e, em seguida, Mixins, crie um novo arquivo _user_ form.pug. Agora podemos ir em frente e criar nosso formulário. Vamos começar criando nosso nome mixin de UserForm e, em seguida, configurar nosso formulário como normal. A ação vai ser igual a uma string vazia, então ele faz uma solicitação de post para as rodadas atuais, então o método de post, a classe, que vamos cercar cada entrada é form_input. Recuar em um nível, o rótulo, assim como antes quando criamos o formulário para adicionar um novo hotel, cada um desses tipos de entrada precisa corresponder ao nome que usamos em nosso esquema, então o primeiro será para o primeiro nome, o sobrenome, o e-mail e assim por diante. Este rótulo vai ser para o primeiro nome, então primeiro_ nome, abaixo do texto do primeiro nome para aparecer uma excelente forma. A entrada, uma vez que é texto, podemos adicionar o tipo de entrada de texto, assim tipo é igual ao texto. O nome do first_name, o ID para corresponder ao rótulo. Novamente, é apenas first_name e também este campo é obrigatório. Se voltarmos e recuar isso no mesmo nível como esta entrada de formulário, podemos adicionar um mais.form_input. Os rótulos começam para o sobrenome. O texto do sobrenome com dois pontos, então esta entrada também é a mesma que acima. Este será o tipo de texto, o nome do sobrenome, o ID a ser correspondido, que também é sobrenome também, e também marcar este campo como obrigatório. Vamos copiar essa entrada de cima e podemos reutilizar isso para o e-mail. O rótulo para e-mail, o texto do e-mail, tipo de entrada de e-mail também, e, em seguida, basta alterar os nomes dentro de aqui também, o ID, e este campo também é obrigatório. Vamos copiar essas três linhas de cima também para o e-mail e colá-las, porque vamos reutilizar uma semelhante, mas desta vez isso vai ser para confirmar o e-mail. O segundo vai ser confirm_email. Eu vou copiar este nome, então o tipo é bom, adicione isso no nome, adicione isso no ID. Este campo também é obrigatório e, em seguida, basta adicionar o texto do e-mail de confirmação. A próxima será a senha. Vamos adicionar o form_input, o rótulo. Este será o rótulo para o campo de senha, a entrada. A entrada, podemos adicionar um tipo de senha e vamos certificar-se de que a senha não é visível quando o usuário digita isso dentro do navegador, então o nome da senha 2, o ID. Este campo também é obrigatório. Parece tudo o que precisamos para a senha. Agora vamos copiar isto. Na verdade, precisamos adicionar o texto da senha e, em seguida, vamos duplicar essas três linhas de código, adicionar isso logo abaixo, e este vai ser para confirmar senha. Basta adicionar para confirmar e, em seguida, um sublinhado. Podemos copiar isto. Altere o texto aqui para confirmar a senha. O tipo de entrada também é senha, então eu vou colar isso em como o nome e também o ID. Novamente, este campo também é obrigatório. A última coisa que precisamos agora para o nosso formulário são as entradas com o tipo de envio. Isso vai ter o mesmo wrapper form_input, então o botão, colocar no tipo de enviar, e também uma classe de botão pequeno. Finalmente, podemos terminar isso com o texto de confirmação. Dê isso um salvamento. Agora com tudo isso no lugar, podemos adicionar o modelo de inscrição para adicionar este mixin em, assim na barra lateral. Agora, para as vistas, podemos criar um novo arquivo, e isso vai ser chamado sign_up.pug. Este arquivo de sign_up é aquele que corresponde dentro de nosso UserController. Este é um que nós criamos aqui, então agora precisamos adicionar nossas informações básicas aqui dentro. Nós vamos para se inscrever, isso amplia nosso layout. Precisamos também incluir o mixin que acabamos de criar. Mixins pasta /_user_ form, o conteúdo do bloco. Agora em nosso conteúdo, podemos adicionar um título de nível 2, que é o título, uma linha horizontal abaixo do título, e então abaixo aqui podemos adicionar nosso mixin, que é UserForm. Agora tudo o que resta a fazer é experimentar isso no navegador. Então vá para o navegador e vamos para o link de inscrição dentro do cabeçalho, role para baixo e aqui está o nosso formulário de inscrição que criamos. Eu só vou mudar isso para ser um U maiúsculo, então nós UserController. Eu troco dentro daqui, recarrego, e isso parece melhor. Esta é a etapa 1 agora concluída. Em seguida, criaremos a solicitação de postagem para lidar com a inscrição do usuário assim que ele enviar este formulário. 49. Validando a entrada do usuário: Este formulário de inscrição que você criou no último vídeo é apenas rotas de inscrição de barra direta, e também a mistura de formulários de usuário, que criamos no topo está postando no URL atual, já que deixamos a ação como um string. Isso será postado nas rotas de inscrição. Portanto, podemos criar uma solicitação de postagem dentro do index.js para lidar com essa solicitação, então vá para o index.js e, em seguida, para baixo para nossas rotas de usuário, então router.post. Isso também vai para as rotas de inscrição, então como uma string forward-slash inscrição, vamos fazer uso novamente de nosso controlador de usuário, e desta vez vamos criar o SignupPost, adicionar um ponto-e-vírgula no final, sobre o controlador de usuário, até a parte inferior, desta vez é exports.Signup e, em seguida, Post. Isto vai ser igual a um array, modo que criamos um pouco diferente do que normalmente fazemos. Nós ainda estaremos criando uma função em breve na parte inferior com a solicitação e resposta, mas desta vez eu adicionei em uma matriz. Vamos primeiro incluir aqui algumas funções de validação de formulário para verificar a entrada do usuário para qualquer entrada maliciosa ou erros, então vamos adicionar um comentário. Em primeiro lugar, vamos validar os dados do usuário. Isto irá basicamente limpar as entradas do usuário e , em seguida, torná-lo seguro para passar para o nosso servidor. Entradas de formulário, classificar maneira comum para hackers para inserir código, vez que é uma comunicação direta entre um hacker e também o servidor. Portanto, precisamos usar validação e sanitização para limpar a entrada antes que ela chegue ao servidor. Para fazer isso, vou incluir um pacote de nó chamado express validator, que instalamos como um pacote npm. Até o terminal, feche isso, então o comando é npm space i, e o pacote é express-validator, pressione Enter. Este pacote nos permitirá fazer duas coisas principais, validação e também sanitização. Validação é o processo de garantir que o usuário inseriu valores no formato correto, um pouco como nossos modelos que criamos para o usuário e o hotel. Ele pode garantir que o nome de usuário seja um número mínimo de caracteres, se o campo tiver dados alfanuméricos, se uma senha corresponder, e assim por diante. Sanitização é um processo que remove, substitui caracteres inseridos nos campos de entrada, que podem ser usados para enviar dados maliciosos para o servidor. Express validator vem com módulos que podemos usar para ambas as tarefas. Se formos para a barra lateral e abrirmos em módulos de nó, role para baixo até o validador expresso que acabamos de instalar, então aqui, abra isso. Dentro desta pasta, vamos estar usando ambos os módulos de verificação e filtro, alguns sobre o arquivo userController.js, podemos exigir estes no topo deste arquivo, então role para cima, e então podemos adicionar um comentário de validador expresso. Configure uma constante, as chaves. O primeiro será check, que é igual a exigir o express-validator, que é o nome do pacote, forward-slash check, que é o nome do módulo que precisamos incluir. Lembre-se, fazendo coisas como esta, se adicionarmos as chaves, isso é usado para importar um único membro do nosso módulo e, em seguida, armazená-lo dentro de um nome de variável chamado check. Portanto, esta constante de verificação será usada para validar os dados. Em seguida, a partir do mesmo módulo, também podemos usar os resultados de validação, então adicione uma vírgula, adicione resultados de validação. Isso executa a validação e armazena quaisquer erros de validação em objetos de resultado, mas mais sobre isso em breve. Em seguida, também podemos exigir o módulo de filtro e armazená-lo dentro de uma constante chamada higienização. Na próxima linha, crie uma constante com o nome da variável neste momento de desinfetar. Isso é igual a exigir, passar em nosso validador expresso, o nome do módulo que é o filtro de barra direta. Este módulo, como você deve ter adivinhado, serve para sanitizar os dados do usuário. Vamos começar por validar os dados usando uma constante de verificação que é configurada acima aqui. Até a nossa matriz, abaixo dos comentários de dados validados, podemos usar a nossa verificação, que é a constante. Dentro daqui podemos adicionar em nosso nome de campo, que é o primeiro nome de sublinhado. Estes nomes de campo precisam coincidir com os nomes que você tem dentro do nosso formulário de usuário, então apenas aqui, de volta para o controlador. O primeiro método que vou verificar é se o comprimento é um certo valor. Fazemos isso passando em objetos de opções, onde podemos verificar se o comprimento mínimo é igual, eu vou definir isso como um. Então IsLength é um método que está sendo fornecido pelo validador expresso, assim como todos os outros, que vamos adicionar agora. Nós também podemos encadear no final quantos destes como nós quisermos. O próximo eu vou adicionar com mensagem. Aqui dentro podemos passar uma mensagem se o comprimento não atender ao valor mínimo que você passar. Esta vai ser uma string de texto de 'Nome deve ser especificado', e depois para a próxima linha. Também vou acorrentar-me a outra coisa até ao fim. Poderíamos continuar cruzando a mesma linha, mas vou adicionar isso na próxima linha, só para ficar mais claro. Desta vez, vamos verificar se o texto é alfanumérico com ponto isAlfanumérico, os colchetes logo depois, e então também podemos encadear em uma mensagem como fizemos acima, então com a mensagem. Em seguida, passe uma string que você vai exibir para o usuário se o resultado não for alfanumérico. Adicione uma cadeia de texto de 'O nome deve ser alfanumérico'. Este é o fim da nossa primeira verificação no campo do primeiro nome. Podemos adicionar uma vírgula logo depois. Mas também vai fazer o mesmo com o sobrenome. Vamos copiar essas duas linhas, adicioná-las abaixo. A única diferença é o nome do campo. Verifique desta vez o sobrenome e, em seguida, também podemos alterar o texto. O sobrenome deve ser especificado e também o sobrenome deve ser alfanumérico. Novamente, certifique-se de que a vírgula está no final, para que você veja a verificação. Desta vez, vamos selecionar o campo de e-mail do nosso formulário. Podemos encadear no final deste ponto é e-mail. Este é um método que nós fornecemos escrever com dados válidos expressos que irá verificar se este campo corresponde a um formato de e-mail. Se isso não acontecer, nós também vamos adicionar a mensagem. Com mensagem, e isso vai ser uma cadeia de texto de endereço de e-mail inválido. Assim como os acima, precisamos adicionar uma vírgula logo depois. Também podemos verificar o próximo campo, que é o e-mail de confirmação. Isso também precisa ser uma string. Confirmar e-mail de sublinhado. Isto vai ser um pouco mais complexo. Precisamos agora verificar se os e-mails correspondem e também se as senhas correspondem também. Alunos, podemos usar um validador personalizado. Vamos primeiro configurar a verificação e adicionar nossa função de validação personalizada vazia apenas por agora. Selecionamos o nome do campo. Vamos encadear no final o validador personalizado, com ponto personalizado e, em seguida, também podemos cadeia em ponto com mensagem e vamos voltar a este em apenas um momento. Dentro de um costume e podemos passar em uma função. O primeiro parâmetro é o valor que ele recebe do campo. Adicione os colchetes aqui dentro, o primeiro valor, que vem do nosso formulário. Isso virá do nosso campo de e-mail de confirmação. O segundo valor vai estar dentro de um objeto. Adicionar um objeto de opções onde podemos passar em vários valores para aqui. Mas só precisamos acessar o objeto de solicitação, que também podemos passar. Agora isso nos dá toda a informação que precisamos. Temos o valor de confirmar e-mail, e também temos o objeto de solicitação, que foi armazenado dentro de todos os outros campos. Agora podemos terminar nossa função comparando os dois campos. Logo após os colchetes, podemos definir para obedecer função de seta ES6 para verificar se o valor, que é o nosso primeiro campo. Estes são os dados provenientes do e-mail de confirmação. Verifique se isso é igual à solicitação, que é o objeto request passado no email dot body dot. Aqui estamos pegando o campo de e-mail original, que é este aqui. Então estamos verificando que é o mesmo valor que é armazenado em valor como este campo apenas aqui. Tudo o que resta agora a fazer é passar em uma mensagem que é uma cadeia de endereços de e-mail não coincidem, com uma vírgula no final. Os dois últimos campos que tenho para a senha e também para confirmar senha. Podemos fazer o mesmo que este e-mail. Primeiro de tudo, vamos fazer nossa primeira verificação para os campos de senha inicial, verificar a senha. Vamos verificar se este é um comprimento mínimo. Vamos para seis caracteres. Passando nossos objetos, no mínimo seis. Na próxima linha, podemos usar ponto com mensagem. Senha inválida. As senhas devem ter no mínimo seis caracteres. Certifique-se de que a vírgula está no fim desta linha. Então, agora também podemos confirmar a senha usando o validador personalizado. Assim como o e-mail acima, Vamos copiar o validador personalizado e colar isso logo abaixo da senha. Aqui dentro, tudo o que precisamos fazer é mudar alguns campos. O primeiro é confirmar senha, para pegar este campo. Isso também será armazenado dentro deste valor como o primeiro argumento. Também precisamos passar o pedido como antes. Vamos pegar todas as informações de todos os outros campos. Em seguida, verificamos se o valor, que é este campo apenas aqui de confirmação, é igual a request ou body dot password, que é este campo logo acima. Podemos então mudar o texto. Todas as senhas não correspondem. Certifique-se de que a vírgula está no fim novamente. Após a nossa validação, podemos novamente definir nossa função, como de costume, passando nele o objeto de solicitação e resposta junto com o próximo. Vamos configurar isso como uma função de seta ES6, passando a solicitação, a resposta e também a próxima. No topo deste arquivo, criamos uma constante chamada resultados de validação logo dentro daqui, que agora podemos adicionar dentro de nossa função tomando no objeto request. Role para baixo até nossa função, adicione os resultados da validação. Passe o objeto de solicitação. Isso extrai quaisquer erros de validação dos objetos de solicitação. Podemos então armazená-los em uma constante para fazer uso de. No início, podemos armazenar uma constante com um nome de erros e definir isso para nossos resultados de validação. Basta fazer isso uma vírgula aqui. Agora eu quero configurar uma instrução if para verificar se temos algum erro. Passando essas constantes de erros e, em seguida, depois disso, podemos adicionar ponto está vazio. Em seguida, os colchetes logo depois e certifique-se que isso está escrito corretamente. Dot is empty é um método de resultado de validação que podemos usar para verificar se houve algum erro. Atualmente, verificamos se a matriz de erros está vazia, mas queremos fazer o oposto e verificar se há algum erro. Podemos fazer o oposto adicionando um ponto de exclamação logo na frente. Esta seção vai lidar com quaisquer erros. Há erros. Então, depois, podemos adicionar uma outra seção. Esta seção vai ser quatro sem erros. Dentro da seção if, se houver algum erro, podemos adicionar um ponto res renderizar para mostrar novamente o sinal do formulário e também um novo título de, corrija os seguintes erros. Res dot render, podemos reexibir o mesmo formulário de inscrição. Assinar sublinhado. Em seguida, adicione uma vírgula, passe nosso título dentro do objeto. O título de, por favor, corrija os seguintes erros e, em seguida, um ponto e vírgula no final. Vamos até o navegador e testar isso. Se salvarmos esse arquivo, recarregue nossa rota de inscrição. Parece ter um erro. Precisamos reiniciar o servidor. [ inaudível] começar, recarregue nossa rota de inscrição. Primeiro de tudo, vamos testar isso com alguns dados válidos. Vamos adicionar qualquer coisa dentro daqui que significa o número mínimo de caracteres, e também o formato de data. Podemos adicionar qualquer coisa aqui dentro. Clique em Confirmar. Não vemos nada acontecendo no momento porque todos esses dados são válidos. Nós não configuramos mais nada dentro deste bloco para lidar com o que fazer a seguir. Também vemos o mesmo título de inscrição de usuário, o que significa que não fomos redirecionados para essa inscrição com o título diferente. Agora vamos parar com isso e podemos adicionar alguns dados inválidos. Vamos reduzir a senha para estar abaixo de seis caracteres. Podemos alterá-lo para não parecer um e-mail, clique em Confirmar. O navegador da Web está nos impedindo de fazer isso porque isso é definido como um campo de e-mail. Vamos ficar com a senha por enquanto. Clique em Confirmar. Agora somos redirecionados para a mesma rota de inscrição pole slash, mas desta vez estamos usando o título da página ou corrija os seguintes erros. Ainda não passamos os erros para este modelo. Mas este é um bom sinal, que significa que agora estamos detectando se há algum erro e em seguida, renderizando nosso modelo de inscrição com um título de página diferente. 50. Passagem de erros para o modelo e sanitização de dados: Agora, com os erros sendo detectados, queremos exibi-los na tela. Para fazer isso, podemos passar os erros que você armazenou dentro desta variável local para o nosso modelo. Podemos fazer isso logo após nosso título. Adicione uma vírgula, podemos passar o nome dos erros. Este nome de erros estará disponível dentro dos modelos e isso vai ser igual a erros matriz ponto, este é o método de matriz. Vamos obter o conjunto completo de erros como uma matriz, em seguida, terá acesso a todos esses erros em nosso modelo, usando o nome do erro que demos apenas aqui. Agora, podemos exibir esses erros como uma lista não ordenada dentro dos modelos. Volte para o nosso arquivo prog ponto de inscrição. Sob a linha horizontal, podemos dizer se erros, este código só será executado se algum erro estiver sendo passado para os templates. Vamos criar uma lista não ordenada. Então podemos percorrer cada um dos erros da matriz. Para erro, em erros, vamos criar uma nova lista de item, que será igual ao erro e podemos pegar a mensagem de erro com ponto MSG. Agora, podemos salvar isso e depois testar se tudo está funcionando. Salve isso e recarregue. Eu escrevi errado [inaudível], erro em erros. Para o controlador. Pronto, dá-nos uma recarga outra vez. Estas são as nossas mensagens de erro de antes quando definimos as senhas para ter menos de seis caracteres. Agora recebemos uma mensagem de senhas inválidas. As senhas devem ter no mínimo seis caracteres. Vamos voltar. Vamos adicionar pequenos erros para que possamos garantir que os endereços de e-mail não correspondam. Vamos também adicionar nossas senhas que não têm muito e também sob seis caracteres e confirmar. Óptimo, os nossos endereços de e-mail não coincidem. Temos uma senha inválida e nossas senhas também não têm muito. Estas são as mensagens de erro que definimos dentro de nossa validação no controlador de usuário. Estes são todos avisos, que estão aqui. Muitas dessas mensagens podem nunca aparecer, se tivermos o campo obrigatório definido no formulário antigo. Se você apenas inovar camada útil de validação, mais no navegador, uma vez que você recebe uma mensagem de erro, todos esses campos que digitamos e agora vazio. Idealmente queremos manter os detalhes que o usuário inseriu, mas vamos corrigir supor. Em seguida, vamos passar para a sanitização. Isso será um pouco mais simples do que a validação. Vamos para o nosso controlador. Voltar à postagem de inscrição. Vamos descer. Primeiro de tudo, vamos comentar o resto ou renderizar. Em seguida, podemos substituir isso por um ponto vermelho JSON passando na solicitação, o corpo, que é os detalhes do formulário. Se salvarmos isso e preencher o formulário, volte e reenvie o formulário. Então nós digitamos uma senha, vamos para o teste. Confirme. Nós agora, ver os dados JSON que foi enviado a partir do formulário. Se clicarmos no botão Voltar e, em seguida, adicionar algum HTML dentro de qualquer um desses campos. Abra os suportes angulares todos estes em, Clique no polegar. Senha de novo. Confirme. Este HTML também é enviado com o JSON, que você pode ver dentro do primeiro nome, significa que isso também seria enviado para um servidor web para. Adicionar código dentro de uma entrada de formulário como esta pode ser usado maliciosamente por hackers, para enviar entradas potencialmente perigosas para o servidor. Como regra geral, sempre que recebemos insumos do usuário, devemos sempre validá-lo e desinfetá-lo também. Nós cuidamos da validação. Agora, para a sanitização. Em primeiro lugar, podemos fazer uso da variável higienizada que criamos anteriormente, quando importante, o módulo de filtro. aqui nós instalamos isso dentro da variável de higienização. Vamos descer um pouco antes de todas as funções. Podemos acessar isso que tivemos desinfetamento. Podemos novamente segmentar cada campo individual como fizemos antes com a validação ou podemos passar em um estilo que visa todos os campos. Em seguida, encadear na extremidade o método de corte, ponto trim. Isso removerá qualquer espaço em branco de antes e depois dos campos de texto. Finalmente, também podemos encadear nas extremidades, ponto escape e uma vírgula. Isso removerá todos os caracteres HTML que possam ser usados por hackers para criar um ataque de script entre sites. Se salvarmos isso e, em seguida, voltar para o navegador, e recarregar. Vemos que temos agora, removemos nossas tags HTML e substituímos pelos códigos de entidade HTML correspondentes. Nós agora cuidamos de validar e higienizar as entradas do usuário. Agora podemos passar para o próximo vídeo, que lida com salvar essas informações em nosso banco de dados. 51. Registrando novos usuários: Nós já validamos e higienizamos as entradas dos usuários. Agora, o próximo estágio é realmente salvar esses dados no banco de dados. Para ajudar com isso, vou usar um middle-ware de autenticação chamado passaportes. O passaporte está disponível no Passport js.org. Se formos até aqui e, em seguida, clique na Documentação. No lado esquerdo aqui vemos muitas maneiras diferentes que podemos usar o Passport para autenticar nossos usuários de diferentes maneiras, como usar o Facebook, Twitter e muito mais. Todos esses métodos são chamados de estratégias, sob este projeto e que usamos uma combinação de e-mail e senha para entrar. Se clicarmos em nome de usuário e senha aqui em cima. Sempre que é levado para esta seção de nome de usuário e senha e podemos ver por esta funcionalidade, isso é armazenado dentro de um módulo chamado Passport hyperlocal. Vamos em frente e instalar suponha. Além disso, há também um pacote conveniente que vamos usar chamado Passaporte-Local Mangusto. Este é um plugin ou extensão para Mangoose, o que torna realmente fácil de usar passaportes, nome de usuário e senha combinação para login. Ele nos dá um método de registro simples que levará qualquer usuário e senha e, em seguida, registrar este usuário com Mangusto. Primeiro, precisamos instalar todos esses pacotes no Visual Studio, então feche o servidor, execute o NPMI. Então eu quero incluir três pacotes diferentes. O primeiro é passaportes e você pode incluir vários pacotes na mesma instalação. Separado por espaço, também podemos adicionar Passports-Local, que foi a estratégia que você já viu antes dentro da documentação do passaporte. Então o terceiro e último do que precisamos será Passaportes Local-Mangusto. Aperte “Enter”. Deixe que todos estes puxl-in do MPM, vá para o número três, inicie o servidor com MPM executar DEF start. No user.js, que está dentro de nossos modelos. Vamos abrir isto. Isso verá esquema que configuramos para o usuário. Podemos pedir o pacote Passaportes Local-Mangusto. Coloque em cima deste arquivo. Vamos montar nossa constante chamada Passaportes Local-Mangusto. Isso é igual a exigir. Isso vai exigir o nosso módulo de nó, que é Passport-Local-Mangusto, uma vez que este é um plug Mongoose, precisamos adicionar este plugin ao nosso esquema antes de podermos usá-lo. Na parte inferior do esquema de nossos usuários. Com todo o módulo que temos exportações, podemos direcionar nosso usuário schema.plug-in e o plugin que você deseja adicionar é Passaportes-Local-Mongoose. Este é o nome constante que foi criado no topo aqui. Em seguida, eu vou passar em um objetos Options. Separado por vírgula, abra as chaves e, em seguida, podemos adicionar no campo de nome de usuário e definir isso igual a ou e-mail. Este objeto pode levar em várias opções. Você pode conferir na documentação se quiser saber mais. O que exatamente é esse campo de nome de usuário? Como sabemos quando ele é passado em, duas coisas para fazer login. Precisamos de um endereço de e-mail e também de uma senha. Assinar este campo de nome de usuário para e-mail está dizendo que queremos usar este campo de e-mail do esquema acima como nosso nome de usuário para fazer login. Por padrão, se deixarmos de fora este campo de nome de usuário, ele irá em frente e procurar em nosso esquema um campo chamado nome de usuário, que não temos. Em seguida, precisamos resolver Passport sobre no arquivo app.js/cabeça para app.js. Clique duas vezes sobre isso e vamos criar um pouco mais de espaço. No topo deste arquivo, vamos passar por baixo do roteador, vai configurar um comentário. Isso é para passports.js. Precisamos configurar passport.js dentro deste arquivo exigindo o esquema do usuário e também o módulo Passport. Tão const-user. Isso vai exigir que usemos um modelo. Esta é./ a pasta do modelo. Em seguida, encaminhe /o usuário. Em seguida, também podemos importar nosso módulo de passaporte e armazená-lo dentro de uma constante chamada Passport. Exigir um módulo de nó chamado Passport. Em nosso express up, precisamos primeiro inicializar Passport usando o passport.initialize middle-ware. Exploda isso, podemos rolar para baixo e você pode adicionar isso praticamente em qualquer lugar. Uma vez sobre isso logo após a configuração do mecanismo de exibição, vamos adicionar um comentário. Então configure o middle-ware Passport. Mais uma vez, vamos fazer uso de app.use, que já usamos no passado. Vá para, passe a variable.initialize possível.em seguida, um segundo, app.use. Este é passport.session; Esta primeira linha irá inicializar passaporte para usar dentro da nossa aplicação. Em seguida, o segundo, adicionando passport.session, nos permitirá usar sessões mais tarde, ignorar o usuário atual conectado. Mas voltaremos a isso mais tarde. Nós dissemos anteriormente que o uso de uma combinação de nome de usuário e senha é chamado de estratégia local de passaporte. Isso agora pode ser configurado usando passport.use. Logo abaixo disso, podemos dizer que passaportes.use, nosso modelo de usuário U.CreateGy. Estes criar estratégia é um método auxiliar fornecido pelo módulo Passports-Local-Mongoose, que instalamos, que então adiciona ao nosso esquema de usuário. Isso é responsável por criar o seguidor de estratégia Passport-Local, para anunciar, para tirar proveito do nome de usuário e senha login, que você deseja usar a partir de passaportes. Em seguida, precisamos serializar e desserializar o usuário. primeira forma é digitar isso, e então poderíamos falar um pouco sobre o que isso está fazendo. Primeiro de tudo, passport.SerializeUser. Dentro daqui passamos em nossos objetos de usuário, modelo de usuário de borracha. em seguida, o método serializar usuário. Então fazemos praticamente o oposto, que é passport.DeserializeUser. Assim como um marcador, nós adicionamos destruir model.DeserializeUser usuário. Isso pode ser um pouco complicado para começar a sua cabeça ao redor, mas o conceito principal está relacionado com sessões. Uma sessão que analisaremos com mais detalhes em breve, basicamente nos permitirá armazenar os detalhes do usuário, para que eles permaneçam conectados ao clicar de uma página para a próxima. Estas funções dizem ao Passport como obter as informações dos objetos deste usuário e quais informações armazenar em nossa sessão. Este é o caminho serializado. O caminho desserializado é a função que será responsável por eles obter as informações de usuários atuais de volta de nossa sessão e, em seguida, de volta para os objetos de usuário. Portanto, ficar e logado entre páginas. Mas novamente, voltaremos às sessões em um vídeo mais tarde. Isso deve ser agora para a configuração. Volte para o controlador de usuário. Salve o arquivo de usuário ou para usar um controlador. Para começar as coisas no post de inscrição, que é este array que criamos aqui. Certifique-se de que removemos a res.jayson. Remova esta linha e, em seguida, restabeleça nossa res.render. Logo após este res.render, vou adicionar na palavra-chave return. Esta palavra-chave return vai quebrar fora das instruções se houver algum erro neste estágio. Isto se seção acima é caçado em se houver algum erro, mas se eles não são , podemos ir em frente e salvar as informações do usuário dentro desta seção L. Aqui dentro, podemos configurar uma constante chamada novo usuário. Isso é igual a um novo usuário objetos onde vamos passar na solicitação do corpo, que é a informação do formulário. Em seguida, usamos outro método fornecido por Passports-Local-Mongoose, que irá então registrar nosso novo usuário. Pegue eu vou usar um modelo U.register. Este método de registo leva em três argumentos. Primeiro é o usuário que queremos registrar, que teremos armazenado nesta constante aqui. Novamente novo usuário. O segundo é uma senha, que é armazenada em request.body.password. Este vai ser apenas um usuário de teste por enquanto. Armazenar este texto simples não é um problema, mas em breve veremos como podemos criptografar sua senha antes de salvar, que é algo que devemos sempre fazer. Terceiro é uma função de retorno de chamada. Esta é uma função que será executada quando o método de registo tiver sido concluído. Adicione um coma, adicione uma função que leva em nosso erro, vamos torná-lo um pouco menor. Em seguida, crie o corpo da função. Dentro desta chamada de volta. A primeira coisa a fazer é lidar com quaisquer erros e, em seguida, passá-los ao longo do nosso middle-ware. Nós diremos se houver um erro que esteja em um log do console, com a mensagem de erro durante o registro. Em seguida, podemos adicionar uma vírgula e, em seguida, passar a mensagem de erro, que é armazenada nesta variável de erro. Depois disso, podemos passar isso ao longo de nossa cadeia de middle-ware. Podemos retornar uma ênfase ao próximo, o que também leva no erro. Vamos fazer o navegador. Podemos criar um usuário de teste e verificar isso está funcionando. Se voltarmos e ele vai para as nossas rotas de inscrição. Permite adicionar um usuário de teste. Então teste nosso teste. Confirme. A senha está boa. Clique em “Confirmar”. Se clicarmos em “Enviar”, o ícone do navegador na parte superior continuará girando. Isto é porque ainda não lhe dissemos o que fazer a seguir. Mas se formos para o mLab e depois recarregar e eu rolar para baixo, agora vemos que temos nossa coleção de hotéis com nossos documentos originais. Juntamente com isso, agora temos a coleção de nossos usuários que tem mais documentos dentro. Vamos clicar nisto. Faz mais espaço. Há o nosso usuário de teste que acabamos de adicionar com a senha de testar mais. Como mencionei antes, a senha não deve ser armazenada como texto simples. Isso é resolver o que irá corrigir no próximo vídeo, onde vamos olhar para criptografia de senha. 52. Criptografia da senha: Agora salvamos nossos usuários no banco de dados, mas é algo que ainda precisamos corrigir. Salvamos um usuário de teste no banco de dados, mas a senha é armazenada como texto sem formatação. Isto é algo que nunca devemos fazer. Na verdade, nenhuma empresa deve salvar sua senha no banco de dados assim. Se o banco de dados fosse invadido, o hacker teria acesso a todos os nomes de usuário e senhas. Há também uma boa chance de que um usuário também use a mesma senha em outros sites. Este é um grande risco de segurança. Muitas vezes há um equívoco de que uma grande empresa, vamos tomar o Facebook por exemplo. Você poderia simplesmente ir em seu próprio banco de dados e ver a senha de todos, se ele foi registrado. Isso não é e também não deve ser o caso de nenhuma empresa. Em vez disso, as senhas são criptografadas primeiro e a versão criptografada é armazenada dentro do banco de dados. Para entender um pouco mais sobre isso, precisamos estar cientes de hashin e sais. Hashin é basicamente uma maneira de embaralhar nossa senha. Quando nos registramos como um usuário a versão scrumble é então armazenada dentro do banco de dados. Cada vez que tentamos fazer login, nossa senha, entrará também é embaralhado novamente usando o mesmo algoritmo que quando nos registramos e esta versão desintegrada será verificada contra a mesma versão embaralhada dentro do banco de dados. Este hashin deve ser um processo unidirecional e não deve haver nenhuma maneira de convertê-lo de volta para a senha original. Os hackers podem usar o que é chamado de ataque de força bruta. No entanto, isso acontece quando eles usam um computador para gerar milhares de hashes de senhas até que um deles corresponda. Para tentar tornar as coisas ainda mais seguras, também podemos resolver a senha. Salting é quando adicionamos alguns dados, muitas vezes gerados aleatoriamente para cada senha. O salt é adicionado à senha do usuário e, em seguida, hash para torná-lo mais seguro. Este salt muitas vezes também é armazenado no banco de dados, juntamente com o valor hash. Nós vamos usar um pacote chamado bcrypts, que vai cuidar deste hashin e salga segue. Esta é a página do pacote que é executada agora. Se também passarmos para bcrypts mangusto, que também é um pacote npm. Para tornar as coisas ainda mais fáceis, nós também vamos estar usando este pacote bcrpt mangusto junto com o módulo bcrypt. Este é um plugin de mangusto. Assim como plugin mangusto que usamos para passaportes para tornar a integração com Mangusto realmente fácil. Primeiro vamos ao Visual Studio Code e instalamos os pacotes que precisamos. Até o terminal, NPM i e depois mongose-bcrypts. Vamos instalar por um momento. Certos sabonetes são bastante simples. Nós adicionamos estes no user.jsmodel. Precisamos exigir isso no topo. Vá para o user.js e depois que nossos dois exigem no topo, vamos configurar uma nova constante chamada bcrypts mangusto. Nós definimos isso como camelcase e então isso é igual a exigir. Vamos exigir o nome do módulo, que é mongustose-bcrypts. Em seguida, adicionamos isso como um plugin mangusto, assim como o módulo de mangusto local passaporte que adicionou anteriormente. Role para baixo até a parte inferior onde adicionamos nossos plugins acima do nosso login de antes, também podemos acessar o esquema do usuário. Permite plug-in. O plugin que queremos adicionar desta vez é bcrypts mangusto, que é o nosso nome de variável. Então, uma vez que temos este plug-in configurado, agora podemos adicionar a opção bcrypt ao nosso campo de senha do esquema. Fazemos isso definindo a opção bcrypt como verdadeira. Então até a nossa senha. Adicionar uma vírgula após necessário, podemos adicionar a opção bcrypt e definir isso como verdadeiro. Dá-nos um salvar e, em seguida, podemos passar para o link de inscrição na barra de navegação, e podemos criar um novo usuário de teste do navegador. Na verdade, precisamos executar o NPM Devstart. É o navegador e eu vou para mLab e exclui nosso usuário de teste e , em seguida, ir para se inscrever na barra de navegação superior, em seguida, vamos adicionar um usuário de teste uma vez pequeno. Você pode adicionar qualquer coisa aqui dentro. Aperte “Confirmar”. Em seguida, para mLab, aperte “Recarregar”. Vamos ver se nosso usuário de teste está agora dentro de lá, que é. Lembre-se quando confirmarmos quando clicamos no botão de inscrição aqui embaixo, ainda não decidimos para onde ir. O navegador permanecerá nesta página. De volta ao MLab. Agora, se você expandir nossa visão, usuário de teste que agora podemos ver sob os campos de senha temos esta versão criptografada agora armazenada dentro do nosso banco de dados, em vez do texto simples de antes. Agora temos isto a funcionar. Vamos excluir todos os nossos usuários do mLab. Exclua este e qualquer um de vocês usuários que você possa ter. Deixaremos tão claro para quando passarmos para o próximo vídeo onde começamos a lidar com o recurso de login. 53. Fazendo o login: Claro, ter contas de usuário dentro de gira varia, agora é usado a menos que o usuário registrado também pode fazer login ao retornar. Isto é o que agora vamos tratar neste vídeo. Além disso, não lidamos com o login no usuário imediatamente após o registro, o que é um toque agradável. Nós já temos um botão de login dentro do cabeçalho, que liga para as rotas de login barra direta. Vamos começar por lidar com esta rota dentro do arquivo index.js. Vamos sair hoje dentro da pasta de rotas e, em seguida, descer para nossas rotas de usuário, que é apenas aqui. Isso vai ser uma solicitação Get, então roteado ou Gats. O caminho do login de barra. Vamos usar o nosso controlador de uso, e, em seguida, criar um login recebe ou usamos controlador, agora podemos configurar esta função dentro aqui. Dentro do controlador, o uso do controlador, e, em seguida, ele para baixo trazer isso um pouco mais exports.login gets é igual a nossa função que leva na solicitação e os objetos de resposta. Ou corpo da função, que vai simplesmente descansar ou renderizar o modelo, que é chamado de login. Em seguida, as opções passam no título de login para continuar. Então vamos no final. Claro, também precisamos criar este login no modelo também. Faremos isso agora na barra lateral. As rotas, desculpe, as vistas. Clique no ícone “Novo arquivo” e, em seguida, login.org. Vamos começar estendendo nossos layouts. Bloquear conteúdo. Nível dois título com o título, que passou para os nossos modelos. Linha horizontal para separar o título do resto do nosso formulário. Vamos começar criando o nosso formulário agora, e as decisões têm a ação que vai ser encaminhado/login. O método vai ser um post solicitações. Vamos cercar cada uma das nossas entradas de formulário com a classe de formação boots.foam_ input e diz para o nosso CSS mais tarde. Isto vai ser uma entrada de formulário simples. Ele vai ter o e-mail em um grupo, a senha e, em seguida, um botão de envio na parte inferior. Primeiro vamos criar nosso e-mail. Rótulo para correio electrónico e, em seguida, o texto para o rótulo de correio electrónico dois. Esta entrada vai ter o tipo de e-mail. Isso fornecerá alguma validação do navegador se o tipo de email não estiver correto. Tipo de entrada, também precisamos do nome do e-mail 2 e também do ID do e-mail para combinar com sua etiqueta. O segundo, e na verdade, vamos apenas copiar este formulário vizinhança de grupo de entrada abaixo. Este vai ser para a senha. Também o texto off senha com o e logo depois é também um tipo de entrada de senha 2 o nome, e finalmente o ID 2 da senha. A última coisa que precisamos adicionar na parte inferior são as entradas do formulário final, e isso é para o nosso botão enviar. Um botão, isso precisa ter o tipo de envio. Envia um formulário, também podemos adicionar nossa classe CSS de colocar em pequeno. Mantenha o estilo consistente e, em seguida, o texto de login. Dado o nosso final eu salvar agora e bacause o navegador, que agora ver se nós atualizar neste rotas de login, que agora ver o nosso formulário para baixo na parte inferior. Uma vez que este formulário é enviado, precisamos lidar com a solicitação de postagem para a mesma rota. Sobre o index.js, podemos lidar com isso agora. Vamos duplicar esta linha aqui. Desta vez é quer ser roteador ponto post. Vamos enviar esta solicitação de postagem para as mesmas rotas de login, mas apenas para fazer é alterar o nome da nossa função para postagem de login. Ou poderíamos usar um controlador. Primeiro precisamos exigir o módulo Passport, uma vez que estaremos usando o método ofensivo K fornecido por este módulo até o topo, vamos configurar nossa constante de senhas capital P. Nós vamos exigir o módulo Passport, no final . Agora vamos fazer login post, que eu vou adicionar na parte inferior. Exports.Login post vai ser igual a passaportes, que é a nossa variável para o módulo de senha e, em seguida, adultos de defensores. Nós definimos este post de login b igual a placas de passagem, em seguida, Callie autenticar método, que fornecido com este módulo. Os primeiros argumentos que precisamos passar é a estratégia local para lidar com a solicitação de login. Passe um aqui dentro, separado por uma vírgula. O segundo é um objeto que contém algumas opções. Abra as chaves e eu vou adicionar isso em sua própria linha. Aqui vou passar duas opções. Eles redirecionarão o usuário quando um login tiver sido bem-sucedido ou malsucedido. O primeiro é um redirecionamento quando o login foi bem sucedido, e fazemos isso com sucesso. Redirecionamentos, que é reconhecido pelos passaportes, e, em seguida, irá redirecionar o usuário para a barra, que é a nossa rota de casa, separada por um,. Também podemos adicionar redirecionamento de falha para. Vamos redirecionar para o login de barra, que manterá o usuário na mesma página de login. Agora você deve ser tudo o que precisamos para fazer login, excluímos apenas usuários de teste no início do mLab. Agora, vamos registrar um novo usuário. Salve este arquivo para o navegador, precisamos primeiro sinal de um novo usuário. Vamos para o nosso próprio usuário. Detalhes aqui dentro. A confirmar O2 mLab, dê-nos uma atualização, e são usados agora está registrado então vamos tentar fazer login. Se voltarmos à inscrição do usuário, volte para a página inicial. Primeiro de tudo, vamos clicar na opção Login da navegação ou eu não sou um erro de digitação para ver se redirecionamos para este encaminhamento/login rotas. Role para baixo nosso e-mail e dentro aqui, e que sai uma senha incorreta, clique em “Login”. Ainda somos redirecionados para esse login de barra porque houve um erro com nossa senha. Vamos tentar um login bem-sucedido desta vez e ver para redirecioná-lo para esta página inicial. Vamos dar a este logo. Faça login com os detalhes corretos, e bom. Agora redirecionamos para a página inicial. Excelente. Agora temos a facilidade de login funcionando. Estamos contando com o redirecionamento, então diga-nos se há uma seta no minuto, mas adicionaremos algumas mensagens flash mais tarde para dar algum feedback ao usuário. A etapa final para isso é fazer login automaticamente no usuário após o registro. Isso é muito simples de fazer, já que já temos o post de login configurado. Nós podemos apenas adicionar estes para as rotas postais de inscrição. Sobre o nosso index.js, temos esta facilidade de postagem de login apenas aqui, então vamos copiar isso. Então precisamos ir para o pedido de postagem ao se inscrever. Depois que as postagens do signatário, podemos adicionar uma vírgula, e vamos adicionar isso em sua própria linha material para aqui. Também podemos adicionar postagem de login. Uma vez que o pedido de post está sendo enviado para as rotas de inscrição, que está aqui, ele irá então para o Atribuir um post e, em seguida, logar imediatamente com esta função que apenas aqui. Dê este arquivo um salvamento, e então expressa sabe para passar para o post slogan, precisamos chamar próximo no lado do post de inscrição. Para usar um controlador, vamos encontrar o nosso assinar um post, que é apenas aqui. Se rolarmos para baixo, temos isso se seções verificar se há alguma área. Logo depois dele e também podemos chamar a seguir e desconsidera passa para o post de login. Agora, eu tenho isso, isso é adicionado na seção else, que significa que não houve erros. Dentro deste bloco apenas aqui, e agora podemos testar isso adicionando um usuário de teste, então salve isso. Vá para se inscrever e, em seguida, é estranho usuário teste. Clique em “Confirmar” e role para baixo. Vemos que temos uma área na parte inferior do índice de chaves duplicadas. Agora, isso pode não ser completamente evidente o que está acontecendo aqui. Isto é basicamente para baixo para alguns índices antigos que já temos dentro de nosso banco de dados. Se formos ao mLab e dermos uma olhada, se clicarmos nos usuários, e depois abrimos isso, temos nosso usuário aqui, que configuramos. Se, em seguida, clicar sobre os índices, vemos agora que temos um e-mail conflitante e também índice de nome de usuário. Nós só queremos sair do e-mail, então vamos liderar este antigo nome de usuário de antes. Clique nisso, exclui. Agora volte ao cadastro, e vamos tentar reenviar o formulário. Bom. Agora redirecionado logo após a inscrição. Se formos para o mLab, clique em nosso banco de dados. Agora temos nossos dois usuários, que também é o Teste 1 que acabamos de adicionar de antes. Agora parece que nosso usuário está logado, eu também estou recebendo o redirecionamento de sucesso para a página inicial. Bom ou usuários agora podem fazer login, e em seguida vamos olhar para logouts. 54. Fazendo o logout: Como temos a maioria das coisas agora configuradas com o Passport, logout é um recurso direto para implementar agora. Passport dá-nos uma função de logout no objeto de solicitação. Para encerrar a sessão de login, a primeira coisa que precisamos fazer é adicionar uma opção de logout dentro do nervo. No momento, só temos os botões de inscrição e login. Então aqui, layout de um arquivo pug. Também podemos adicionar um link de logout. Para baixo para nossas visualizações e, em seguida, layout.pug. Role para baixo. Podemos criar um novo item de lista após o login, então li, que também será um link com um href de /logout e também o texto de logout também. Mais tarde, garantiremos que apenas um dos links de login ou logout esteja sendo exibido no navegador, dependendo do estado de login do usuário. Sobre o index.js, agora podemos lidar com essa rota também. Index.js sob a rota do usuário, vamos adicionar router.get. A string de /logout, use controller, e isso vai ser simply.logout. Vamos criar isso agora, dentro do controlador de usuário. Role para baixo até a parte inferior. Exports.logout, criar nossa função, solicitação e resposta. Dentro daqui podemos acessar o método de logout nos objetos de solicitação, que é fornecido pelo Passport, request.logout e, em seguida, nos objetos de resposta, vamos fazer um redirecionamento para redirecionar o usuário para a página inicial depois de logout. Isto é tudo o que precisamos fazer. Para o navegador, agora podemos dar uma chance. Salve este arquivo, recarregue a página inicial e, na verdade, tentaremos fazer login primeiro. Login. Agora somos levados para a página inicial. Além disso, a facilidade de logout redireciona para a página inicial também. Para ter certeza de que isso está funcionando, vamos para rotas diferentes, como /all. Tente clicar em sair e agora foram redirecionados para a página inicial. Então eu só quero ter certeza que isso é minúsculo só para combinar com o resto. Então layout.pug, mude isso e salve e lá vamos nós. Então tudo isso parece estar funcionando agora, mas não podemos ter 100% de certeza nos momentos. Nos próximos vídeos, forneceremos alguns comentários ao usuário para que ele saiba quando o login ou logout foi bem-sucedido adicionando mensagens de descarga. Além disso, faremos outras coisas também, como trabalhar com sessões, adicionar renderização condicional aos links de login e logout, além de personalizar o cabeçalho exibindo o nome do usuário quando conectado. 55. Trabalhando com sessões: Ao trabalhar com usuários, algo que você vai encontrar em breve, é uma necessidade de gerenciar uma sessão de usuário. As sessões são basicamente uma maneira de salvar um usuário autenticado, então elas são lembradas entre visitas por uma determinada duração. Eles também podem ser usados para vários de um usos também, mas este será o propósito das sessões neste projeto. Imagine que somos usuário e entrar em um site. Como você já sabe, quando clicarmos entre páginas, faremos uma nova solicitação para o servidor. Imagine como seria frustrante se precisássemos fazer login para cada nova página solicitada. Isso ocorre porque o servidor não conhece as informações do usuário. Portanto, usamos uma sessão como um tipo de armazenamento no lado do servidor para as informações do usuário que queremos reter durante nossa visita. O que acontece é quando um usuário faz login, uma sessão é criada e os detalhes do usuário são armazenados no banco de dados. Vamos usar nosso mesmo banco de dados Mongo para isso. Um ID de sessão é passado para o servidor para cada solicitação. Muitas vezes, esse ID é armazenado no que é chamado de cookie. O servidor, em seguida, verifica este ID com as informações que ele contém para este usuário e, em seguida, retorna as informações do usuário se tudo está bem. Para isso, eu vou estar usando um pacote NPM popular chamado express-session. Este é o módulo NPM que todos conhecemos. Este middleware nos permitirá configurar sessões para nossos usuários e também adicionar várias opções que veremos em breve. Em seguida, mencionamos que também armazenamos os dados da sessão no lado do servidor. Se formos em frente e rolar para baixo. Isso é bem perto do fundo. Precisamos encontrar nossas lojas de sessões. Aqui vamos nós “Lojas de Sessão Compatíveis”. Vemos uma lista das lojas que podemos usar com este módulo. Como já usamos Mongo em nossos projetos, podemos usar o pacote connect-mongo, que está listado aqui em baixo. Este é o que queremos usar. Este pacote nos permite usar MongoDB como nossa loja de sessão ao usar o Express. Primeiro vamos em frente e instalar o pacote em nosso projeto. Até o servidor e fecha. Precisamos adicionar “npm i” e o pacote é chamado de “Express-Session” aperte “Enter”. Uma vez que ele é puxado de npm, podemos então exigir este módulo no principal “app.js”. Abra a barra lateral, abra o “app.js”. Então, logo após o nosso roteador, vamos adicionar os comentários de “For Sessions”. Const Session vai ser igual para exigir o nome do módulo de “Express-Session”. vírgula no final. Em seguida, para a nossa loja Mongo. No terminal “NPM I”. Isto era “Connect-Mongo”. Vamos instalar. Nós também precisamos exigir este pacote também, então também no “app.js”, logo abaixo da nossa sessão, também podemos adicionar uma consonante de “Mongo Store”. Vou usar maiúsculas para isso e exigir “Connect -Mongo. Depois disso, podemos abrir os colchetes e depois passar na sessão. Ponto e vírgula. O que exatamente essa linha de código está fazendo quando temos aqui? Bem, como de costume, estamos pegando o pacote “Connect-Mongo” e armazená-lo dentro de uma constante chamada “Loja Mongo”. “ Connect-Mongo” está retornando uma função. Coloque um normal exigem carvão não executará imediatamente a função. Em vez disso, ele irá apenas armazená-lo dentro desta constante. É por isso que precisamos adicionar os colchetes no final, para ir em frente e executar esta função, juntamente com pessoa na variável sessão para esta função. Em seguida, abaixo, podemos configurar nossa sessão como “Middleware” para executar para cada solicitação com “app.use” e também passar novamente em nossa variável de sessão. Vamos rolar para baixo. Vamos adicionar isso logo após o nosso “app.use” sobre, então “app.use” a “Sessão” com os colchetes logo depois. Esta sessão leva em um “Objeto Opções”. Vamos adicionar as chaves e adicionar esta a uma nova linha. Isso cria um middleware de sessão com as opções que vamos adicionar agora. Todas as opções disponíveis estão listadas na documentação. Para o primeiro que vamos usar, que também é necessário, é a frase secreta. Vamos adicionar o “Segredo”. Também podemos armazenar isso dentro do nosso arquivo “.env”, já que será alguma informação sensível. Então primeiro vamos adicionar “process.env.secret.” Este “Secret” é uma cadeia de texto de nossa escolha, que é usada para assinar o cookie de ID de sessão. Em seguida, podemos adicionar a string dentro do nosso arquivo “.env”. Abra isso. Em seguida, no fundo, podemos adicionar o nosso “Segredo”. Isso pode ser igual a qualquer string de texto de nossa escolha. Eu só vou adicionar “Sessão de Viagem” adicionar um ponto de exclamação. Dê a este arquivo um “Salvar” feche-o. Em seguida, precisamos definir “Salvar em inicializado” para ser falso. Adicione uma vírgula depois de todos os segredos. Este é “Salvar em inicializado” e defina esse valor como “False”. Definido nesse valor significará que uma nova sessão não será salva no banco de dados, a menos que essa sessão seja realmente modificada. Isso é útil para um visitante que apenas navega em nossos sites e não precisa realmente de seus detalhes salvos em uma sessão. Isso resultará em muito menos salvos desnecessários em nosso banco de dados. Em seguida, adicione uma vírgula e adicione a opção de resave para ser falso. Definir como false garantirá que nossa sessão não seja salva, a menos que seja realmente modificada. Finalmente, precisamos fazer uso de nossa loja MongoDB usando esta opção loja com nossas constantes MongoDB, que definimos logo acima. Este é um só aqui. Depois de salvar novamente, adicione nossa opção de loja e vamos definir isso para um valor de novo MongoStore, adicione os colchetes logo depois. Esta nova loja leva a conexão de mangusto como uma opção, adicione as chaves, mangusto.conexão. Veja se está tudo bem. Temos mangusto, temos a nossa sessão, a nossa MongoStore. Agora podemos configurar um teste rápido para ver isso em ação. Você não precisa seguir com isso se você não quiser. Esta será apenas uma demonstração rápida. Na verdade, antes de fazermos isso, isso precisa ser MongooseConnection, o cólon e lá vamos nós, isso é igual a mongoose.connection, que também usamos anteriormente ao configurar o nosso MongoDB, que é apenas aqui. Agora vamos em frente e configurar o teste no arquivo index.js. Então salve nosso app.js. Abra o index.js e, em seguida, vamos rolar para cima. Os filtros da página inicial estão na rota da página inicial. Então eu vou apenas comentar esta linha para fora. Vamos criar uma nova função de teste para testar se a sessão está funcionando por login o número de visitas à página inicial na sessão. Primeiro vamos recriar nossa rota de casa. Então roteador.obter a barra direta do roteador doméstico. Vamos adicionar uma função, passando a solicitação e também a resposta. Dentro daqui a primeira coisa que vou fazer é criar uma declaração if. Se solicitar.session.page_views. Este módulo de sessão expressa torna nossos dados de sessão disponíveis nos objetos req.session. Também podemos fazer uso das visualizações de página para ver quantas vezes a página está sendo visitada. Agora podemos incrementar este total de visualizações de página em cada solicitação. Então adicione o req.session.page_views++. Isso aumentará o número de visualizações de página cada vez que houver uma solicitação para nossa página inicial. Em seguida, vamos exibir o número de visitas na tela usando um res.send. Nós vamos enviar usando os backticks, algumas mensagens de número de páginas visitadas, dois pontos. Em seguida, podemos adicionar em nossos dados dinâmicos, que é o req.session.page_views. É claro que também precisamos de outra declaração. Esta seção se irá lidar se houver qualquer visualização de página armazenada, ou seja, se o usuário já visitou. A sessão else será manipulada se o usuário estiver visitando pela primeira vez. Se for esse o caso, queremos que o req.session.page_views seja igual a um e então podemos fazer um res.send com o texto da primeira visita. Agora, se formos para o navegador em nossa primeira visita, devemos ver este texto que definimos aqui. Em seguida, para cada atualização adicional na página inicial, devemos então incrementar o número de visualizações de página uma cada vez e, em seguida, exibir isso na tela. Vamos dar uma chance a isso. Localhost: 3000, ele recarrega. Na verdade, precisamos iniciar o servidor de desenvolvimento. Temos um erro, então vamos dar uma olhada no que é isso. Sobre o nosso app.js. Só temos um erro de ortografia aqui. Guarde isso e agora fique verde novamente. Carregamos a página inicial e temos o texto da primeira visita. Agora, se clicarmos em atualizar, isso agora deve incrementar o número de visitas de página em cada clique. Então, três visitas, 4, 5, 6, 7. Agora vamos ao mLab para o banco de dados. Vamos refrescar. Bom. Agora veremos ao lado de nossos hotéis e usuários, agora vemos que uma coleção de sessões também foi criada com um documento. Se clicarmos sobre isso, veremos agora os detalhes da sessão armazenada aqui dentro. A sessão tem um ID exclusivo na parte superior e, em seguida, algumas informações sobre o cookie em si, como a idade máxima, quaisquer datas de validade que queremos definir, e também o número de visitas a páginas, que nós apenas olhamos dentro do navegador de sete. Todas essas opções podem ser definidas bios se quisermos fazer isso como uma opção. Quando formos em frente e marcarmos a sessão. A documentação tem alguns exemplos de como fazer isso se você quiser fazer alguma alteração. Agora sabemos que nossa sessão está funcionando, agora podemos remover o código de visualizações de página e restabelecer a página inicial original. Para o index.js, este código aqui pode ser removido ou comentado. Em seguida, o router.get, que era a página inicial original, pode então ser descomentado. Salve isso, recarregue o navegador na página inicial e tudo deve voltar ao normal. Mas desta vez estamos usando sessões. 56. Fornecendo feedback ao usuário com mensagens flash: Mais cedo, quando estávamos entrando e saindo, tivemos que confiar em um redirecionamento de página para nos informar se este foi um login bem-sucedido ou não. Este vídeo vai melhorar nossos nós adicionando mensagens flash para o usuário, que então irá aparecer e o usuário também pode clicar em um pequeno X no canto para removê-los uma vez que eles foram lidos. Esperamos até agora para adicionar mensagens flash por um bom motivo. Isso ocorre porque a mensagem flash é armazenada na sessão, então precisamos configurar isso primeiro. Vou usar um pacote de nós chamado Connect Flash para fornecer essas mensagens. Vamos instalar isso agora. Esta é a página do GitHub, se você quiser descobrir mais algumas informações. Mas, por enquanto, vou passar para o Visual Studio Code, fechar o servidor e, em seguida, executar o MPM. Eu conecto flash e puxando este pacote de MPM. Uma vez que ele está instalado, agora podemos ir para o nosso arquivo app.js e, em seguida, exigir este pacote na parte superior. Vamos abaixo das nossas sessões. Isso é um comentário? Isto é para mensagens grandes. Vamos em frente e criar uma constante chamada flash e isso vai exigir o módulo flash, então isso foi conectar hífen flash com um ponto-e-vírgula e, em seguida, podemos adicionar o flash como middleware para usar em nossa aplicação. Vamos rolar um pouco mais para baixo e podemos adicionar isso logo após nossas linhas de passaporte. No comentário, isso está indo para o middleware, então fazemos isso com app.use, que levará no pacote flash, que nós apenas exigimos. Em seguida, também podemos adicionar essa funcionalidade de descarga ao nosso próprio middleware abaixo. Então vamos até onde criamos nosso próprio middleware, que é apenas aqui, e depois deste req.path, também podemos adicionar um novo local. Então, res.locals, vamos para o meu flash local e definir isso igual ao flash req.dot e sair no final. Isso torna a funcionalidade flash disponível como uma variável dentro de todos os nossos modelos de plotagem. Ter isso como uma variável, é útil para renderização condicional. Se houver alguma mensagem para mostrar, podemos configurar o flash para qualquer uma de nossas funções. Mas para começar, eu vou para os controladores de usuário, postagem de login, então salve este arquivo e, em seguida, vá para o controlador de usuário e precisamos encontrar post de login, que é apenas aqui. Após o SuccessReDirect, também podemos adicionar um SuccessFlash, e, em seguida, uma string que você deseja exibir para o usuário de, você agora está logado, então agora vai ver esta string de texto apareceu na tela, vez de ter um redirecionamento para nos mostrar que estamos logados agora. passaporte funciona com flash de conexão por padrão, então isso é bastante simples de adicionar. Há também uma mensagem flash de falha dois que podemos adicionar para esta condição de falha na parte inferior. Separado por uma vírgula e adicione failureLash, defina isso como uma string, então o login falha e dirá, “tente novamente”. Agora precisamos de alguma maneira de exibir essas mensagens para o usuário. Um lugar conveniente para fazer isso seria no arquivo layout.pug. Este arquivo contém o nosso cabeçalho que está em cada página nos projetos. Vá para o layout.pug. A primeira coisa que eu vou fazer é definir duas constantes, as mensagens flash são um objeto contendo chaves e valores. Vamos para a nossa imagem de praia e podemos adicionar isso logo acima disso, então que é apenas aqui. Lembre-se que o JavaScript precisa ter o hífen. Então valores -const vai ser igual a objects.values e, em seguida, vamos pars no flash, então aqui estamos analisando nas mensagens flash, que é um objeto e vamos em frente e usar o método de valores de ponto, que retorna uma matriz de valores de propriedade do objeto. Lembre-se, objetos são feitos de pares de valores de chave, agora temos os valores aqui, então eu vou duplicar essa linha e definir isso para ser as chaves. Mude a constante para ser chaves e é aqui que usamos o método de teclas de ponto. Novamente, analisando as mensagens flash, as chaves e o tipo de mensagem que queremos, e eu vou criar três tipos de mensagens. O primeiro é o sucesso, e isso será para coisas como logins bem-sucedidos, também um tipo de erro para logins com falha e erros gerais. Em seguida, o terceiro e último tipo é para informação. Isso será para informações gerais como “Você está logout agora” e, em seguida, se ao longo dessas linhas, que não é uma mensagem geral de sucesso ou erro, veremos como definir manualmente esse tipo de mensagem em breve quando adicionamos mais mensagens flash no controlador. Também passaportes acrescenta estes dois para o sucesso eo fracasso de um login, modo que estes três tipos são estas chaves consumidor criado aqui. Agora vamos para os valores. Os valores são basicamente o anel de texto, como você “Você está logado agora” ou “Falha no login, tente novamente”. Nós só queremos mostrar essas mensagens se realmente houver alguma para mostrar, então podemos adicionar alguma renderização condicional dentro de nosso layout.pug, abaixo de nossas duas constantes irá adicionar uma instrução if. Se keys.length for maior que zero, então embaixo de uma div, que será um contêiner para a mensagem, esta div terá duas classes. Primeiro é uma classe de mensagem geral para o estilo da mensagem e, em seguida, uma segunda classe de sublinhado de mensagem e, em seguida, o nome da chave. O primeiro tipo, então classe é igual a quantos backticks, vez que este vai ser dados dinâmicos, então o primeiro para styling é mensagem e, em seguida, o segundo de mensagem sublinhado e, em seguida, podemos adicionar nossos dados dinâmicos de chaves. Isso gerará um nome de classe de informações de mensagem, sucesso mensagem e também erro de mensagem, e podemos então usar esses estilos livres dentro do CSS mais tarde para fornecer algumas cores diferentes para cada tipo de mensagem. Temos as mensagens armazenadas nas constantes deste valor e vamos apenas adicionar um S no final, na verdade, então valores. Vou colocar estes em um span elementos. Logo abaixo da nossa intensidade div um nível podemos criar um span que é igual às nossas constantes de valores. Em seguida, um segundo elemento span com a classe de close underscore btn. Isso vai fornecer uma pequena cruz que o usuário pode clicar em para, em seguida, remover a mensagem flash, possamos encontrar hífen X apenas como este ou podemos usar a entidade HTML de E comercial e, em seguida, vezes com o ponto-e-vírgula no final, por isso, aqui dentro queremos executar um evento onclick. Uma vez que o elemento span está sendo clicado, queremos executar isso em JavaScript que vai remover toda esta seção apenas aqui. Podemos fazer isso selecionando o nó pai. Os nós pai sendo este div circundante apenas aqui e, em seguida, chamar o método remove. Podemos adicionar o método onclick e definir isso para this.ParentNode, que novamente é este div apenas aqui e, em seguida, chamar.remove. Então esta é uma fonte exibindo a mensagem em nossa seção de cabeçalho. Então agora vamos até o navegador e experimentar isso. Então, vá para a sua página, e talvez seja necessário reiniciar o servidor. Então npm execute devstart. Uma vez que ele está funcionando, recarregue o navegador, e então podemos tentar fazer login. Então, clique em Login. Até o final, podemos adicionar nossos detalhes de login. Então, no início, queremos adicionar um login mal sucedido, adicionando uma senha incorreta. Agora recebemos a mensagem de, login falhou, tente novamente. Então, agora podemos clicar sobre isso, para que ele remova a mensagem, e vamos tentar mais uma. Desta vez, responderemos aos detalhes corretos e não vemos uma mensagem de sucesso. Então vamos ver o que está acontecendo e usar um controlador. Só temos um erro de ortografia, então sucesso. Recarregue isto. Vamos tentar terminar sessão e, em seguida, iniciar sessão novamente. Vamos fazer isso com sucesso desta vez, e agora recebemos a mensagem de, você está logado agora. Agora podemos clicar novamente sobre isso para remover a mensagem. Com este trabalho, agora podemos adicionar mais mensagens onde precisamos deles para exibir no arquivo do controlador de usuário dot js. Também podemos adicionar uma mensagem para fazer logout. Então rolando um pouco mais para baixo logo após a solicitação ou sair. Podemos acessar o req.flush, e queremos passar duas coisas aqui. O primeiro é o tipo de mensagem. Lembre-se de antes que dissemos que teríamos três tipos de mensagens diferentes: uma para erros, uma para sucesso e outra para informações gerais. Bem, esta vai ser uma mensagem de tipo info com uma string de, você está desconectado agora. Então, neste final, com o ponto-e-vírgula no final, isso nos dará um teste. Certifique-se de que ainda está logado e clique em terminar sessão, e agora temos a nossa mensagem no topo aqui. Agora, para o controlador do hotel, isso também precisa de algumas mensagens quando fazemos coisas como adicionar em hotéis e também atualizar. Então clique no controlador do hotel, e o primeiro que eu vou para é empurrar To Cloudinary, que é um dos primeiros que foram adicionados. Então, só aqui em cima, até a seção catch, vamos adicionar request.flash. Então esta vai ser uma mensagem de erro. Então, o tipo de erro e, em seguida, podemos adicionar uma mensagem de volta ao usuário informando que houve um problema ao carregar a imagem. Envie um texto de, desculpe, houve um problema ao carregar sua imagem, tente novamente. Uma vez que você fez isso, agora podemos continuar a criar um posto de hotel. Então, role para baixo para criar postagem de hotel logo abaixo, e isso é apenas aqui. Nós vamos adicionar isso na triseção porque esta será uma mensagem de sucesso para dizer que o hotel foi criado com sucesso. Logo após o aguarde hotel.save, request.flash, então o tipo de mensagem foi bem sucedido separado por uma vírgula. Precisamos adicionar isso dentro dos ticks traseiros porque também vamos exibir o nome do hotel. Como nossos literais modelo, assim hotel, o hotel sublinhar o nome que temos acesso a por causa desta variável de hotel, e, em seguida, o texto de criado com sucesso. Ok, bom. O próximo está na publicação de edição de remoção. Então isso é logo abaixo, então role para baixo. Esta será uma mensagem informativa para dizer que nenhuma correspondência foi encontrada. Esta é a seção de administração onde vamos editar ou remover um hotel. Lembro-me primeiro que precisamos passar um nome de hotel ou um ID de hotel para depois procurar na base de dados. Então vamos rolar para baixo. Se os dados do hotel forem maiores que zero, esta é a seção de sucesso, mas uma vez que eu adicionar isso na seção de outro, no caso de nenhum hotel ser encontrado. Request.flash, esta é uma mensagem de informação de nenhuma correspondência foi encontrada, e com apenas um par mais para o nosso dia agora, então vamos para atualizar post hotel, mas é claro quando atualizamos o hotel. Então vamos para a seção try, e logo antes do redirecionamento, podemos adicionar request.flash. Esta vai ser uma mensagem de sucesso, e usando os ticks traseiros, podemos fornecer uma mensagem. Mais uma vez usando nossos dados dinâmicos para passar no nome do hotel, então hotel.hotel_name, atualizado com sucesso com o ponto-e-vírgula no final. Então o último que eu vou adicionar é para excluir post hotel. Isto é para uma exclusão bem-sucedida do nosso hotel, antes da solicitação de redirecionamento flash. Esta vai ser uma mensagem de tipo de informação com dados dinâmicos. Então abra os ticks traseiros, então ID do hotel, podemos então passar o ID do hotel, que é esta variável apenas do topo aqui, que obtemos do request.params, foi excluída. Agora dê a este arquivo um salvamento e depois para o administrador do navegador. Agora precisamos ir ao /admin no novo hotel. Vamos adicionar teste para flash, e aqui dentro, em nossos projetos, a pasta pública, imagens, e vamos para o logotipo por agora isso não importa, começar a escrever, confirmar. Ótima. O teste para flash foi criado com sucesso. Tudo isso parece estar funcionando agora. Agora é isso para mensagens flash, mas continuaremos a adicioná-las conforme necessário durante o resto deste projeto. 57. Renderização condicional do usuário: Neste vídeo, vamos fazer algumas melhorias na experiência do usuário. Estará fazendo várias coisas, como renderização condicional para alterar os links nervosos dependendo dos estados logados do usuário também será exibindo o nome de usuário dentro do cabeçalho, e protegendo as rotas de administração. Para começar, podemos adicionar mais alguns locais a todos os middleware no arquivo app.js e, em seguida, role para baixo até nosso middleware cliente. Então, que é apenas esta função apenas aqui. Vou adicionar mais um assim. Isso é para o usuário. Então aqui dentro, precisamos de uma vantagem comum aqui. Então, digamos res.locals.user, vai ser igual ao usuário do ponto de solicitação e deve haver ponto-e-vírgula no final. Então deve mudar isso rapidamente. Assim, o usuário é adicionado ao objeto de solicitação pelo passaporte. Quando um usuário efetuou login com êxito. Agora podemos usar essa variável de usuário dentro de modelos para aplicar alguma renderização condicional. Atualmente, se passarmos para um menu, temos cadastro, temos login e também sair mostrando ao mesmo tempo. Só queremos mostrar os botões de inscrição e login quando o usuário não tiver entrado. Então, para o nosso layout, um PRG, e então vá para a nossa seção de nervos sobre o topo aqui. Nós vamos adicionar alguma renderização condicional para exibir somente se o usuário estiver conectado. Então, logo abaixo do logotipo na lista não ordenada, recuada em um nível, podemos dizer que se você usar é falso, vamos recuar neste item de lista para inscrição, e também fazer login. Esses dois botões só serão exibidos se o usuário não estiver conectado. Else mostrará o botão de logout quando o usuário estiver conectado. Então, para fazer isso, também podemos melhorar a seção de logout em um nível. Em seguida, podemos adicionar a seção else que alinha com a seção if logo acima. Além disso, uma vez que temos acesso a este uso de variável que você acabou de ver aqui, também podemos exibir para o menu, o nome do usuário. Nós só temos que sair, podemos pedir os colchetes e, em seguida, usar o hash duas saídas, alguns dados dinâmicos. Então abra as chaves. Agora podemos acessar o nome do ponto do usuário. Por isso, dá-nos um salvar e tentar sons no navegador. Então recarregue. Atualmente queremos ver o botão de inscrição e o login. Vamos tentar entrar. Vou ver o que acontece se adicionarmos nossos detalhes no fundo. É Login. Ótimo, então agora só vemos o botão de logout e também nosso nome é exibido ao lado disso. Vamos tentar clicar nisso e sair. Agora temos a mensagem instantânea aqui. Também agora só vemos os botões de inscrição e login. Agora, para proteger as rotas de administração contra usos não autorizados. Para fazer isso, eu vou criar um pedaço de middleware para queimar através onde precisamos verificar se o usuário é um administrador. Podemos fazer isso mais no uso de controller.js, e abaixo da parte inferior apenas explodir nossa função de logotipo. Podemos adicionar exports.admin. Esta vai ser uma função tomando o pedido, a resposta. Também a seguir, aqui dentro vamos fazer duas verificações. Primeiro é usar um método chamado é autenticado. Então eu vou dizer se o ponto de solicitação é autenticado, então ele vai chaves logo depois. Em seguida, o segundo é verificar se o usuário é um administrador. No início, quando criamos o modelo de usuário no users.js. Vamos abrir isto. Adicionamos os campos is admin, que é um tipo booleano padrão falso. Eu também vou usar isso na instrução, if para permitir apenas usuários livres que está definido como true. Então controlador de notícias, bem como verificar se o usuário está autenticado. Nós também podemos usar o comercial duplo. Também é verificar se a condição de request.user.admin está definida como true. Este será um pedaço de middleware, é pass-through. Então também precisamos ligar a seguir. Então, antes de tudo, adicione o próximo dentro aqui, que passará para a página de administração. Em seguida, a palavra-chave return depois disso, esta palavra-chave return irá quebrar a função se isso for verdade. Se esta condição não for atendida no entanto, podemos apenas redirecionar o usuário de volta para a página inicial. Fora se declarações, podemos pedir o res.redirects. Em seguida, como uma string basta para a frente barra para voltar para a página inicial. Agora mais no arquivo index.js, podemos e este middleware para nossas rotas de administração. Então index.js. Se encontrarmos nossa seção de administração, estas são rotas de administração aqui. O primeiro que queremos proteger é simplesmente a barra Admin. Então, antes de levá-los para a página de administração, também vai executar através da função Admin destes E, que também está no controlador de uso. Então use o ponto controlador é admin e separe-os com uma vírgula. Então eu também vou adicionar uma segunda rota 2 que vai pegar todas as rotas começando com um admin barra, e então encaminhar barra qualquer outra rota logo depois. Então vou te mostrar o que quero dizer com esse roteador estranho. Dot pode ser uma ronda de controle. Então, para tal administrador e, em seguida, barra, vamos usar a estrela. Então isso vai pegar todas as rotas que começam com a barra admin, e então qualquer uma das coisas depois. Então, vamos executar através do uso Controller.isAdmin antes que eles prossigam com qualquer uma dessas rotas extras. Agora vá para o navegador para testar projetos nos almirantes. Então, tanto o navegador quanto recarregar. Podemos ver por todos os itens de menu que não estamos logados no momento. Vamos tentar Forward/Admin. Em seguida, redirecionamos de volta para a página inicial. Então vamos tentar fazer login. Agora fazemos login com barra ou /admin mais uma vez. Mais uma vez, somos redirecionados de volta para a página inicial. Então, para ambos os casos, direcionamos de volta para aqui, o que significa que a autenticação falhou. Como você já deve ter adivinhado, isso é porque nós nos definimos como um usuário e é admin está definido para ser falso. Em MLab. Talvez seja baixo para trás. Sim, não há o nome de usuário, senha e login. Agora podemos selecionar nosso usuário do mLab e, em seguida, definir admin para ser verdadeiro. Clique no nosso banco de dados. Precisamos da coleção do usuário. Clique no ícone Editar. Então, aqui podemos ver é admin está definido como false. Podemos mudar isso para ser verdade. Clique em Salvar e voltar. Isso entrar no banco de dados não é algo que queremos fazer cada vez que queremos criar um novo administrador. Mas uma vez que temos um conjunto de administradores, como fazemos agora, um bom desafio para você seria ir em frente e criar algo a partir da tela de administração, para poder alterar a configuração para adicionar novos usuários de administração. Então agora códigos de barras o projeto enquanto ainda estamos conectados. Vamos voltar para as rotas de administração encaminhamento/administrador. Agora tem IsAdmin definido como true. Podemos ver que não redirecionamos mais e permaneceremos nessas rotas de administração. Agora, se tentarmos clicar em sair, seremos redirecionados de volta para a página inicial. Lembre-se que também adicionamos esta captura todas as rotas com a estrela. Vamos tentar algumas rotas diferentes aqui. Então admin, encaminhamento/ adiciona. Estamos atualmente levados de volta para a página inicial. Vamos tentar fazer login e testar isso novamente. Faça login como nosso administrador. Agora podemos tentar encaminhamento/admin. Obviamente, ele vai para isso, o que é bom. Mais uma vez vamos tentar sair. Agora estamos redirecionados de volta para a página inicial. 58. O modelo de pedido: Bem-vindo de volta a esta nova seção. Esta seção vai ser tudo sobre permitir que o usuário para fazer reservas e também a área de contas de usuário também. Onde o usuário pode ver qualquer reserva que tenha feito. Também adicionaremos isso à seção de administração, o administrador possa ver todas as reservas que foram feitas para todos os usuários. Esta reserva ou todas essas informações serão armazenadas em um banco de dados como uma coleção. Portanto, precisamos criar um modelo de pedido para salvar nossos dados. Primeiro crie um novo arquivo chamado order.js sobre dentro da pasta models, então modelos nova pasta order.js. Em seguida, podemos ir em frente e criar nosso modelo exatamente como temos para os usuários e também para o hotel. Vamos fechar uma barra lateral. Este modelo terá três coisas. Primeiro, o id do usuário, para que saibamos quem fez o pedido. Em segundo lugar, o hotel_id para o hotel que eu quero reservar e terceiro são os detalhes do pedido. Este será um objeto contendo os detalhes das datas de partida, número de voos e número de convidados. Como de costume, cria a nossa constante para o pacote Mangusto, que precisamos exigir no topo do arquivo, então exigem mangusto, ok? Em seguida, podemos criar a nossa constante para nosso esquema de ordem e satisfazer nova capital Mongoose.Schema S, que leva em nossos objetos. Nosso primeiro campo é o usuário underscore_id. Este id de usuário vai ter o tipo de string. Ele também vai ser um campo obrigatório, então nós definimos necessário para ser igual a true, separados por uma vírgula. Nosso segundo campo será para o hotel_id, que o usuário quer ir em frente e reservar. Isto vai ter um tipo diferente do que já vimos antes. Isso vai ser igual a Mongoose.Schema.Types com um T maiúsculo e o tipo vai ser o ObjectSID. O hotel_id vai usar este ObjectID como seu tipo de dados. Isto é fornecido pelo mangusto e vamos precisar dele por uma boa razão mais adiante nesta seção. Nós armazenamos no hotel_id, que está na reserva, mas também precisamos recuperar o resto dos detalhes do hotel do banco de dados. Usando este ObjectID em vez de uma string normal nos permitirá comparar corretamente este id com aquele que é armazenado no banco de dados mais tarde. Compreende este campo também precisa ser necessário para ser verdadeiro. Então nosso terceiro campo será para os detalhes do pedido, que irá conter o tipo de objetos e isso também é necessário para ser igual a verdadeiro ponto e vírgula no final. Em seguida, podemos exportar o nosso modelo com o nosso module.export familiar, que é igual ao nosso mongoose.model. Passamos o nome da ordem como o segundo valor que isso leva em nossa variável nome do esquema de ordem, que é este, apenas aqui, então em um ponto-e-vírgula no final e dar a isso um salvamento. Isso é suficiente para o nosso esquema de pedidos, em seguida, vamos começar a trabalhar criando uma página de confirmação de reserva e isso permitirá que o usuário reveja todos os detalhes antes de finalmente fazer um novo pedido. 59. Página de confirmação de reserva: No momento podemos ir para qualquer hotel que você quiser. Selecione isso e, em seguida, na parte inferior, podemos adicionar nossos detalhes de viagem. Se quiser reservar isso, precisamos adicionar a duração, as datas de partida, o número de convidados e, em seguida, realizar uma pesquisa para fornecer todos os detalhes. Se clicarmos na pesquisa recebida, este resultado da pesquisa será agora personalizado com todos os detalhes que estão centrados. Isso é bom, mas agora precisamos adicionar mais algumas etapas para permitir que o usuário reservar este hotel. O primeiro passo que eu quero adicionar é um botão Continuar para esta página, que levará o usuário a uma página de confirmação de reserva, onde ele poderá revisar seus detalhes finais antes de fazer o pedido. Esta vista do hotel está dentro dos mixins do hotel. Vamos para este arquivo no editor de texto. Barra lateral, mixins e, em seguida, sublinhar hotel. Lá em baixo. Role para a parte inferior deste arquivo, podemos condicionalmente renderizar um botão para mostrar apenas nas rotas de resultados. Estas são as rotas que estão atualmente em e, em seguida, vamos adicionar um botão Continuar logo abaixo do preço total. Este custo total está aqui. Vamos fazer algum espaço e podemos dizer se URL é igual a /results. Se for, podemos fornecer um link com a classe de botão, que vai ter um href igual a e quando está em ticks desembarcar. Este é/confirmation e, em seguida, a nossa seção dinâmica, que vai ser a nossa consulta e, em seguida, o texto todos continuar para todos botão. Para este link, vamos ser vinculá-lo a um URL de /confirmation, e então encaminhar barra uma string de consulta, que vai construí-lo a partir das informações necessárias para esta reserva. Esta cadeia de caracteres de consulta será uma série de pares de valor de nome. Este é o mesmo método que usamos anteriormente no curso quando usamos a API do iTunes. Vamos criar esta string de consulta agora acima. Logo acima de nossas instruções if, podemos criar uma constante chamada consulta, é correspondência aqui e isso vai ser igual a uma string dinâmica, então adicione os ticks de volta. Como mencionamos antes, esta é uma série de pares de valor de nome. A primeira será a identificação do hotel. Vamos definir o ID para ser igual a hotel._ id. Lembre-se de todas essas informações estão passando, passado ao longo da URL como uma string de consulta e seguida, podemos pegar essas informações e usá-lo em nosso controlador. Então precisamos do e comercial para adicionar um par de valor de segundo nome. O segundo vai ser para a duração. O e comercial, assim duração e isso vai ser igual à consulta de pesquisa que usamos antes logo acima para pegar nossa duração, a data de partida e também o número de convidados. SearchQuery.Duration, após a duração, esta vai ser as datas de partida e lembre-se que esta é apenas uma longa cadeia e esta vai ser igual a. Isso será novamente o SearchQuery e assim como já usamos antes, este é SearchQuery.DateOfDeparture. Depois disso, podemos adicionar um novo comercial e, que será para o número de convidados. Isso vai ser igual a searchQuery.NumberOfGuests, adicione um ponto-e-vírgula no final e todas essas informações agora formarão nossa URL. Vamos tentar isso no navegador. Salve este arquivo em nosso navegador e se você ainda rolar na página Resultados como eu sou. Basta recarregar o navegador, confirmar novamente antes de enviar. Agora vejo um botão Continuar na parte inferior. Clique neste botão. Fomos levados para uma rota que ainda não tratamos. Temos uma página inteira, como esperado. Mas se olharmos para o URL, podemos ver a rota que criamos de /confirmation e, em seguida, nossa série ou pares nome-valor. Temos o ID igual ao ID do hotel. Temos a duração de sete noites, as datas, e também encontrar o número de convidados igual a quatro. Esta é toda a informação que precisamos para construir uma ordem. Como todos sabem, é lidar com esta rota no index.jsfile. Vamos passar para as rotas index.js e podemos capturar essa string de consulta dentro de uma variável chamada dados. Em nossas rotas de usuário no log out, podemos adicionar router.get/confirmation/ e usamos dois pontos, já que esses dados são dinâmicos. Este vai ser um controlador de usuário, eu vou chamar a função Confirmação de Reserva. Em seguida, sobre ou nós usamos um controlador. Criaremos esta confirmação de reserva e iremos até o final logo após o logout. Exportações, por isso é confirmação de reserva. Esta vai ser uma função de sincronização. Uma vez que estaremos trabalhando com o banco de dados, passando a resposta do pedido cria um corpo de função, a transação, o bloco catch, passando o erro e também passar este erro para o próximo. Como estamos usando o próximo erro, também passamos isso após a solicitação e a resposta. A primeira coisa que eu vou fazer é capturar a string de consulta da URL. Lembre-se, podemos acessar isso a partir do request.params, seguido do nome que demos no roteador. Na seção de treinamento, criaremos uma constante chamada de dados, então solicest.params.data. Antes de ir mais longe, podemos verificar quais dados temos com um res.json. Então res.json, os dados de nossa string de consulta. Se guardarmos isto e agora atualizarmos, temos agora o nosso ID, a duração, data de partida e o número de convidados. Estes parecem ser os dados de uns, mas não estão sendo exibidos em formatos json. É só uma corda simples. Isso ocorre porque primeiro precisamos passar a string de consulta. Node fornece-nos com um módulo chamado string de consulta e este é um módulo núcleo. Não precisamos instalar nada extra, tudo o que fazemos é exigi-lo no arquivo em que queremos usá-lo. Vamos voltar para o controlador de uso excessivo, até o topo do arquivo e ele cria uma nova constante chamada querystring. Em seguida, exigir o módulo que é chamado string de consulta. Agora podemos passar as constantes de dados que criamos abaixo e armazenar os resultados em uma nova constante, que eu vou chamar de dados de pesquisa. Volte para a nossa confirmação de reserva. Podemos ir por baixo dos dados, criar novas constantes. Vou procurar dados, que vai ser igual à nossa string de consulta que acabamos de importar. Use o método parse, analisando os dados acima. Agora podemos adicionar os dados de pesquisa dentro do res.json e ver o que acontece. Dê um salvamento e, em seguida, recarregue o navegador. Ótimo. Agora temos os dados no formato com o qual podemos trabalhar. Atualmente, só temos o ID do hotel armazenado em res.json. Agora podemos pesquisar na base de dados os detalhes completos do hotel usando este documento de identificação. Abaixo, vou procurar dados, podemos escrever uma constante chamada hotel. Isto vai ser igual para esperar o nosso modelo de hotel dot find e a informação que queremos encontrar é o hotel com base no id de sublinhado. O id que você deseja pesquisá-lo no banco de dados será armazenado nos dados de pesquisa e então podemos acessar o.id. pesquisa data.id e faz uso de um H aqui dentro, já que este é o nosso modelo. Lembre-se ao criar nosso esquema de pedido, no último vídeo, eu disse que o id do hotel precisava ter o tipo de dados do id do objeto. É por isso que fizemos isso no último vídeo. Este id agora irá comparar corretamente com um id de hotel no banco de dados porque é, se fosse uma string, não funcionaria. Uma das coisas também, se passarmos para o navegador, vemos que o hotel não está definido. Isso é porque precisamos importar este arquivo do hotel também. Vamos até o topo. Podemos dizer que const de hotel e, em seguida, podemos exigir o modelo do hotel, então.. /models e /hotel. Agora podemos descer e substituir nosso res.json por um res.render. Voltar para a conformação de reservas. Podemos adicionar rest.render. Vamos criar um modelo de confirmação, então vamos adicionar essas informações agora. Em seguida, as nossas opções objetos passarão no título de confirmar a sua reserva. Também precisamos passar os dados para este modelo. Queremos enviar para ele as constantes do hotel, que vai conter todas as informações do hotel que tinha sido encomendado. Também estes dados de pesquisa apenas aqui, que irá conter as informações, tais como a data de partida. Hotel e também os tais dados. Agora podemos entrar em nossas visualizações e criar esses modelos de confirmação como um arquivo pug. Abra a pasta Views e, em seguida, crie a confirmation.pug, feche isso. Este será um modelo bastante simples que irá basicamente mostrar o mixin hotel juntamente com os dados do hotel e os dados de pesquisa, que vamos passar para o mixin. Isso você entrar em estende layout. Nós vamos incluir da pasta mixin, o conteúdo do bloco do hotel sublinhado. O título de nível dois, que vai ser o título. Podemos então criar um loop com cada olho no Hotel. Então, como o nosso mixin hotel na parte inferior, que vai levar em I, que é cada hotel individual e também os dados de pesquisa que passarão para este modelo. Lembre-se que isso contém informações como o número de hóspedes e a data de partida. Tudo isso será necessário para a página de confirmação. Se você nos deixar alterar a ortografia de conformação e assim renomear, certifique-se de que isso está correto e salve este arquivo. Agora em um mixin de hotel, então sublinhe hotel.pug. Este hotel já recebe os dados de quando criamos os modelos de resultados. Nós já temos o hotel, que passá-lo para esta variável como i ea consulta de pesquisa. A maioria das coisas já estão preparadas para nós. Se salvarmos este arquivo e, em seguida, recarregar o navegador, vemos o modelo está mostrando, temos todos os detalhes do hotel. Na parte inferior, temos a classificação de estrelas, temos o país, o custo por noite e o nome do hotel. Mas não vemos nenhum dos detalhes da pesquisa, como o número de noites. Vamos ver isso no mixin. Se rolarmos para baixo e darmos uma olhada na seção de resultados, este mixin tem todos os detalhes do SearchQuery que precisamos renderizados condicionalmente. Estes são mostrados apenas se as rotas começarem com /results. Nós também podemos adicionar ao final as rotas de confirmação ele. Se o URL é igual a resultados ou se é a página que estamos atualmente, que é a confirmação e, em seguida, nossos dados dinâmicos. Podemos verificar se o URL começa com. Queremos que este comece com um /confirmation/. Em seguida, recarregue na mesma página e agora, se rolarmos para baixo, vemos esses detalhes da pesquisa também aparecem na parte inferior. Nós quase terminamos agora para esses modelos. Mas ainda há uma pequena coisa a acrescentar. Esta é suposto ser a página de confirmação de reserva para confirmar que os dados do usuário estão todos corretos antes de fazer o pedido. Portanto, precisamos de um botão para realmente permitir que o usuário faça o pedido de volta no mixin do hotel. Nós só temos um botão continuar na parte inferior para a página de resultados. Também podemos adicionar um para a página de confirmação dois. Senão, isso se torna uma seção else if, porque nós vamos ter uma seção mais final abaixo na parte inferior. Vamos dar uma olhada nisso em um vídeo mais tarde. É URL.Começa com, queremos as rodadas de /confirmation/. Vamos então renderizar um botão como acima assim um.button ( href=' ) e eu vou deixar isso como uma string vazia por enquanto e vamos lidar com isso mais tarde. Faça o seu pedido e continuaremos esta seção href no próximo vídeo onde pedimos ao código para fazer os pedidos. Mas agora, se salvarmos esse arquivo e depois recarregarmos as rotas de confirmação, vemos agora um botão na parte inferior para fazer o pedido. Bom, as coisas agora estão indo bem. Vemo-nos no próximo vídeo onde passaremos a colocar os pedidos no banco de dados. 60. Colocando pedidos: O próximo passo, uma vez que o cliente tenha revisado os detalhes nesta página de confirmação, é ser capaz de realmente fazer o pedido. Na mistura do hotel, adicionamos a rota que precisamos para fazer o pedido. Nós vamos para o _hotel, e, em seguida, para baixo, nós adicionamos uma rota vazia para o href. Agora vou adicionar isso como barra, em seguida, ordem colocada, e, em seguida, barra, podemos adicionar nossa consulta dentro aqui. Abra as chaves e também analisando a consulta, que é todos os dados que precisamos para a ordem. Mas apenas uma coisa rápida para corrigir primeiro, nós só queremos que este botão para mostrar se o usuário está logado. Podemos usar alguma forma de renderização condicional. Depois do outro se também podemos adicionar uma seção if. Se o usuário estiver conectado, então queremos exibir este botão, então recuar isso em um nível, senão podemos redirecionar o usuário para a tela de login. Vamos adicionar a última seção para baixo na parte inferior, senão eu vou copiar este botão e, em seguida, colá-lo, e isso pode redirecionar o usuário de volta para a frente login barra, onde eles podem ir em frente e fazer login para fazer um pedido. Faça login para fazer o pedido. Há espaço para melhorias aqui se você quiser um pouco de projetos paralelos. Ao redirecionar para este formulário de login, não mantemos armazenados todos os detalhes da pesquisa. O usuário precisaria fazer login e, em seguida, realizar a pesquisa do hotel mais uma vez. Mas eu vou deixar isso com você como um desafio se você quiser ir e fazer isso. Agora, para o index.js. Podemos lidar com esta ordem feita rota. Salve este arquivo, index.js. Em seguida, podemos adicionar um router.get, virar que ao redor apenas para criá-lo, que foi ordem colocada barra, e então vamos capturar os dados mais uma vez a partir da string de consulta. O UserController.OrderPlaced e o ponto-e-vírgula no final. Em seguida, criamos ordem colocada sobre o UserController. Logo após a confirmação da reserva, vamos configurar isso, exports.OrderPlaced. Isso vai ser assíncrono, solicitação, a resposta, e também em seguida. Vou tentar bloquear, para começar. Podemos, então, capturar quaisquer erros e, em seguida, analisar esses erros para o próximo. Assim como fizemos acima para a confirmação da reserva, a primeira coisa que precisamos fazer é criar uma constante e pegar os dados do req.params. Na verdade, podemos apenas copiar esta linha, colar no bloco try e, em seguida, também precisamos usar o módulo string de consulta, que novamente usamos antes para analisar os dados em JSON. Então vamos configurar isso como uma constante, ParsedData, isso vai ser igual ao nosso módulo de string de consulta que importamos. Bem, para usar o método analisado, analisando os dados de cima. Agora é hora de fazer uso do nosso modelo de ordem que criamos no início desta seção para construir uma nova ordem para push para o banco de dados. Explodir nosso ParsedData e, em seguida, criar nossa constante de ordem. Estou configurando isso para uma nova ordem, que é O. Antes que possamos usar este modelo de ordem O, precisamos exigi-lo no topo deste arquivo. Isso precisa ser O, e depois no topo apenas coisas que o nosso hotel e criar uma nova constante chamada ordem. Exigir a partir da pasta modelos, que é.. barra modelos, e, em seguida, ordem barra encaminhar. Esta ordem que estamos construindo precisa ser a mesma estrutura que o modelo de ordem que criamos no início da seção. Se passarmos para este order.js, ele terá três campos diferentes, o id do usuário, o id do hotel, e também os detalhes do pedido. Primeiro, vamos adicionar o id de usuário em nosso pedido apenas aqui, então user_id será igual a um req.user. _id. Em seguida, o id do hotel , hotel_id, isso será igual ao ParsedData.id. Então, finalmente, os detalhes da ordem, que tem o tipo de objetos, então order_details, então poderíamos configurar isso como um objeto, assim como especificamos nos detalhes da ordem. Os detalhes deste pedido conterão todas as nossas informações da nossa string de consulta, que é armazenada dentro de dados analisados. O primeiro é a duração, que é igual a ParsedData.Duration. O segundo é a data de partida. Novamente, isso é igual ao ParsedData, e podemos acessar isso com.DateOfDeparture. O terceiro e último é o número de convidados, que será igual a ParsedData.NumberofConvidados. Esta é toda a informação que irá compor a nossa encomenda, temos os detalhes do hotel e também os detalhes da encomenda juntamente com o utilizador. Agora tudo o que precisamos fazer é chamar salvar neste pedido, que possamos aguardar o order.save, e depois do salvar também podemos adicionar uma mensagem flash para o usuário saiba que o pedido foi feito, então solicest.flash. Este tipo de mensagem vai ser Info e uma string de texto, então isso vai ser, “Obrigado. Seu pedido foi feito.” Em seguida, a última coisa a fazer é adicionar um reg.redirect, que redireciona o usuário para sua conta, então reg.redirect para uma rota de my-account. Esta rota ainda não foi criada, mas chegaremos a isso muito em breve. Mais no navegador, e então podemos ir em frente e testar isso. Salve este arquivo, no navegador. Somente página de confirmação no momento com o botão de fazer o seu pedido. Agora, se recarregarmos, agora vemos que o botão foi alterado para, por favor, faça o login para encomendar. Vamos clicar nisso e, em seguida, vamos em frente e fazer login. Uma vez logado, podemos agora ir para um hotel. Vamos descer até o fundo. Podemos fazer uma busca. Vamos para o número de convidados. Clique em “Pesquisar”. Agora somos levados para a página de resultados que tem nossos detalhes, continuaremos até a página de confirmação, que novamente tem todos os detalhes do pedido. Em seguida, clique em fazer o seu pedido. Agora somos levados para a minha conta e também recebemos a mensagem flash do seu pedido foi feita. Se deslocarmos para baixo, também recebemos um acompanhamento para a mensagem. Mas isso não é nada para se preocupar ainda. Vamos em frente e lidar com esta rota em breve. Mas se agora passarmos para o mLab e irmos para o nosso banco de dados, dentro das coleções, agora temos uma coleção de pedidos com um documento. Vamos abrir isto e ver o que contém. Expanda a exibição. Bom. Há o nosso id para o pedido, ter o id para o usuário, e também para o hotel. Nós também temos os detalhes do pedido para a duração, a data de partida e também o número de convidados. Isso é ótimo. Agora podemos passar para o próximo vídeo onde vamos criar a nova área de conta de usuário, onde o usuário pode ver todas as reservas que ele fez. 61. Área da conta do usuário: Depois de fazer o novo pedido, somos redirecionados para esta seção Minha conta, que ainda não configuramos. Isto é o que vamos seguir em frente e lidar com este vídeo. A área Minha Conta será uma seção Pessoal onde o usuário conectado poderá ver quaisquer pedidos que tenha feito. Pouco antes de fazer isso, precisamos também registrar um novo usuário para testar as coisas estão funcionando. Vamos sair e você pode se inscrever como um novo usuário. Vamos adicionar isso como testes. Vou testá-lo como a senha e confirmar. Bom, agora estamos logados como o usuário de teste. Agora precisamos ir em frente e fazer um novo pedido para qualquer hotel. Vamos nessa. Clique aqui. Então podemos adicionar o que quisermos aqui para fazer um pedido. Lá vamos nós. Procure por isso, continue até a confirmação e faça o pedido. Se formos agora ao mLab, devemos ver dois registros dentro da coleta de pedidos. Existem dois pedidos de dois usuários diferentes. Isso agora nos dá algumas informações para trabalhar, para que saibamos o que fazer. Agora precisamos primeiro ir para o index.js e, em seguida, podemos lidar com esta seção Minha Conta, então index.js e vamos adicionar isso também para as rotas de usuário, assim router.get, my- account, isso também será tratado pelo controlador de usuário. Em seguida, vamos em frente e criar MyAccounts, então é o controlador de usuário. Podemos preparar isso agora. Apenas para é admin, exportações.myAccounts. Isso será assíncrono, solicitação, resposta, e também em seguida, nossa seção de tentativa, detectar quaisquer erros e, em seguida, passar isso para o próximo. Ao configurar isso, poderíamos ir em frente e fazer algo como o que olhamos. Por exemplo, poderíamos ir ordens de const. Já usamos isso muitas vezes antes. Os usuários, as encomendas, e também para os hotéis. Selecione os pedidos.Localizar. Em seguida, poderíamos usar este método Find para corresponder o user_ID para as informações do request.user. _ID. Então podemos fazer um res.json para emitir as ordens. Para o navegador, ainda apenas em MyAccount, você pode clicar em “Recarregar”. Agora veja o JSON para os resultados. Isso funciona bem. Vemos a reserva de um usuário específico, então temos esse ID de usuário. Nós também temos os detalhes do pedido para o único pedido que está sendo feito. O pequeno problema é que provavelmente queremos mostrar ao usuário os detalhes do hotel, como o nome e o destino dentro de suas contas. Mas, atualmente, só temos esse ID de hotel que o usuário não reconheceria. Em mLab, temos várias coleções. Vamos ao nosso banco de dados. Temos os hotéis, os pedidos, as sessões e os usuários. Este ID que temos atualmente está na coleção de pedidos do banco de dados, mas os detalhes do hotel na coleção de hotéis. Basicamente, precisamos de uma maneira de pegar os detalhes do hotel de outra coleção. Podemos fazer isso usando o estágio de pesquisa do pipeline de agregação do Mongo. Voltando à seção MyAccount, podemos reutilizar a constante de pedidos. Mas desta vez vamos escrever order.aggregate, então vamos apenas remover esta seção aqui.aggregate e, em seguida, plus. Ainda precisamos filtrar pelo usuário. Podemos fazer isso na fase de jogo. Abra as chaves, $ símbolo corresponde exatamente como usamos antes. Em seguida, vamos escrever as correspondências User_ID para o Request.user.id. Isso só vai pegar todos os registros onde o ID do usuário corresponde ao usuário conectado atual. Adicione uma vírgula no final e, em seguida, podemos adicionar o estágio de pesquisa com $ símbolo lookup. Primeiro, precisamos especificar a coleção que queremos obter os dados. Atualmente, estamos na coleta de pedidos, mas queremos pegar os dados da coleção do hotel. Podemos fazer isso adicionando de e, em seguida, como uma string, podemos adicionar no nome da nossa coleção, que é hotéis. Em seguida é campo local, que vamos enviá-lo para o hotel_id. Campo local é o nome do campo de nossa coleção de pedidos, que é basicamente considerado as entradas. O ID do hotel está em nosso arquivo order.js. É este momento que você vê aqui. Adicione uma vírgula no final e, em seguida, depois disso, podemos adicionar os seguintes campos, e definir isso para uma string de ID sublinhado. Este é o campo de identificação de sublinhado da coleção do hotel, qual vamos combinar. Estes dados do hotel com os quais combinamos serão adicionados aos nossos pedidos como um array. Agora damos a este campo de matriz um nome de nossa escolha. Usamos o como palavras-chave e, em seguida, dar-lhe um nome de dados hotel_. Agora, se salvarmos este arquivo e depois ir para o navegador, podemos atualizar o JSON. Agora temos o novo campo de dados do hotel e isso está pegando todas as informações do hotel deste ID do hotel, mas de uma coleção diferente. Isso significa que agora temos acesso a todos os dados do hotel e podemos usá-los dentro de nossos templates. Vamos voltar para o controlador e criar este modelo agora substituindo o res.json. Podemos remover esta linha aqui e substituí-lo com um resto de renderização para produzir um novo modelo de user_accounts. Depois disso, passamos nossas opções. O título das minhas contas e também as informações do pedido. Salve isso e, em seguida, podemos criar nossos modelos user_account dentro de nossas visualizações com a extensão.pug. Em seguida, vá em frente e adicione o conteúdo. Dentro daqui nós respondemos o layout familiar estende, conteúdo de bloco, o título de nível 2 do título e a linha horizontal apenas para separar o título da constante. Vou adicionar uma instrução if para verificar se o usuário está conectado. Se for, podemos então ir e saídas de um cabeçalho de nível 3 e os ticks de volta, uma vez que isso será dinâmico com a mensagem de Oi, em seguida, uma vírgula, então podemos produzir o nome do usuário selecionando user.first_name. Isso vai dizer algo como, “Oi Chris”, com um ponto de exclamação no final. Então vamos verificar se algum pedido está presente no banco de dados. Podemos dizer se orders.length é maior que 0. Esta seção só será exibida se houver algum pedido. Em seguida, adicionaremos um título de nível 3 com o texto das suas reservas e para todas as reservas. Nós vamos percorrer todas as ordens no banco de dados para este usuário em particular e então eu vou colocá-los dentro de uma lista não ordenada. Vamos fazer loop através usando cada ordem em pedidos, eu vou cercar isso em uma div com a classe de reservas para que possamos adicionar CSS mais tarde. Então podemos construir nossa lista desordenada. Nós primeiro listar item que vai através dos ticks de volta para que o texto de Ordem ref. Em seguida, podemos adicionar a referência da ordem que é armazenado em ordem. _id. Debaixo deste primeiro item da lista, que é para o id do pedido, vamos então criar um segundo loop que irá percorrer os dados do nosso hotel. Lembre-se que os dados do hotel são esta matriz que adicionamos no final. Uma vez que estamos nesta ordem em particular, também precisamos fazer um loop através dos dados do hotel para acessar todas as informações dentro daqui. Para fazer isso, criamos um novo loop com cada um e vamos dizer dados em order.hotel_data. Tudo o que vamos fazer agora é criar cinco itens de lista diferentes que serão para o hotel, o país, a data de partida, o número de noites, e também o número de convidados. Vamos adicionar o nosso primeiro item da lista. O hotel será igual a data.hotel_name. Os dados referem-se a todos os dados desta seção de dados do hotel. Vamos então acessar as chaves individuais, como o nome do hotel, o país e o custo por noite. Tem o nome do hotel, fecha os carrapatos e depois ia duplicar isto mais quatro vezes. O segundo é para o país e, em seguida, data.country. O terceiro será a partida. A data de partida não está dentro dos dados do hotel. Isso faz parte da nossa informação original aqui para que possamos acessar isso com todos os detalhes. DateofPartida. Vamos remover esta seção, acessar nossa ordem original que é o primeiro loop no topo aqui, então order.ORDER_details.DateOfDeparture. O próximo é o número de noites. Vamos copiar esta seção aqui e, em seguida, colar isso em. Tudo o que precisamos fazer é alterar a data de partida para ser a duração. Finalmente, o último será para o número de convidados. Podemos remover isso e substituí-lo com o ORDER_details.NumberOfGuests. Esta seção aparecerá se houver reservas usando estas declarações if. Se não houver, precisamos adicionar uma seção mais abaixo na parte inferior no mesmo nível. Isso só vai exibir um título de nível 3 com o texto de nenhuma ordem para mostrar. Então diremos, ainda assim... Isto é para toda a seção de reservas. Lembre-se, na parte superior, verificamos se o usuário estava presente. Nós também podemos adicionar uma declaração else para a seção 2. Bem na parte inferior podemos adicionar isso no mesmo nível que as declarações if. Certifique-se de que eles estão alinhados, então podemos adicionar um segundo título de nível 3, que simplesmente diz: “Por favor, faça login para ver esta seção.” Agora, para o navegador, lembre-se de substituir este JSON pelo resto da renderização. Agora podemos apenas atualizar a área Minha conta, rolar para baixo e esses detalhes de nosso usuário de teste. Esta reserva é o hotel número 6, por isso é bom. Vamos sair e podemos tentar nosso outro usuário. Vamos entrar. Agora podemos ir para a área Minha conta, então /my-account, role para baixo, e este é o hotel número 2, então este é um pedido diferente do que vimos antes. Agora estamos recebendo os pedidos corretos para o usuário correto. Apenas para terminar as coisas, podemos ir para o layout do perfil e outros vinculados a esta seção Minha Conta. Abra a barra lateral, vá para o layout.pug. Logo acima deste link de logout, podemos adicionar um novo item de lista no mesmo nível. Adicione um link com o href e isso vai para minhas contas com o texto das minhas reservas/contas. Salve isso, feche a barra lateral e, em seguida, recarregue e agora tenha um botão e leve-os para a seção de conta. Com isso agora funcionando, em seguida, vamos fazer algum trabalho na visualização de administração para permitir que o administrador veja uma lista completa de reservas de todos os usuários. 62. Exibindo todos os pedidos: No último vídeo, criamos uma área de conta onde o usuário pode ver suas próprias reservas. Nos coloca em admin, queremos poder ter todas as reservas disponíveis para ver para todos os usuários. Se fizermos login como um administrador e, em seguida, ir para a barra admin, nós já temos essa visão de administrador disponível para nós. Anteriormente, ao criar esta página, também adicionamos um item de menu chamado exibir reservas, que agora você pode ir em frente e usar. Isso acabou no arquivo admin.plug. Então vamos abrir isso, dentro de mais visualizações, então clique no admin.pug, e aqui vamos nós, esta é a seção de reservas de visualização que vincula a forward barra admin, forward barra ordens. Então agora precisamos ir para o arquivo index.js e lidar com essa rota agora. Vamos copiar essa rota, fechá-la, fecharei mais desses arquivos para baixo, vá para o index.js e mantenha isso organizado. Vou voltar para a seção de administração. Então, estas são as rotas de administração e, em seguida, adicionar router.get, vez que esta é uma solicitação get. E, em seguida, colar na cadeia de ordens de barra de administração, isso também vai usar o controlador de usuário, em seguida, vamos criar todas as ordens dentro do controlador de usuário. Então você salva este arquivo. Vamos passar para o usuário controller.js. Então, esta seção de todos os pedidos vai ser muito semelhante à seção minha conta que criamos no último vídeo. Então, podemos copiar esta seção completa de antes e, em seguida, colar logo abaixo. Precisamos mudar minhas contas para ser todas as ordens. Então, a principal diferença entre isso e a seção minha conta é que não precisamos desses muito estágio do pipeline de agregação. Isso ocorre porque não precisamos muito para um usuário em particular, podemos simplesmente procurar todos os pedidos dentro do nosso banco de dados. Então, podemos remover este estágio de correspondência do nosso pedido, também precisamos que o modelo seja alterado para um modelo chamado ordens, e vamos criar isso em breve e o título de todos os pedidos. Estas são todas as mudanças que precisamos fazer. Então, agora podemos criar o modelo de ordens dentro de nossos pontos de vista, precisamos criar ordens ponto pug. Então, para começar, podemos estender os layouts, conteúdo de bloco, passar no título como um título de nível 3, uma linha horizontal. Então, sob esta linha horizontal, queremos exibir as ordens. Lembre-se do último vídeo, já adicionamos o código para exibir os pedidos dentro deste arquivo account.pug do usuário. Então, se abrirmos as contas de usuário, este é o mesmo código que temos aqui para exibir o pedido. Então, ao invés de digitar tudo isso novamente, faria sentido adicionar isso a um mixin. Vamos copiar, ou na verdade vamos cortar apenas informações do item da lista, o número de convidados, até esta reserva se no topo. Cortamos isso para a barra lateral, dentro dos mixins podemos criar um novo arquivo, e este é chamado de sublinhado orders.pug. Este mixin é criado como sempre fazemos com o nome no topo, então mixin ordem. Na verdade, vamos chamar isto de ordens, que vai tomar a ordem individual. Em seguida, recuado em um nível, podemos colar na reserva de antes. Certifique-se de que está tudo recuado corretamente, caso contrário, obtemos alguns erros. Agora só precisamos adicionar este mixin em nossos dois arquivos, começando com a conta de usuário. Acabamos de tirar isso de antes. Na parte superior podemos incluir são mixin, que está na pasta mixins, e depois sublinhar ordens. Em seguida, role para baixo agora podemos adicionar o nosso mixin. Queremos que isso apareça na tela, então nós apenas enchemos nosso loop, podemos adicionar em pedidos. Vou passar na ordem individual do nosso loop, salvar este arquivo e então podemos fazer o mesmo para o arquivo order.pug. Então selecionamos isso, no topo podemos incluir nosso mixin, então mixins forward barra _orders, então sob a linha horizontal podemos criar nosso loop, assim como fizemos nas contas de usuário. Cada ordem em ordens, então podemos adicionar nossos pedidos mixin, que leva na ordem individual do nosso loop. Dê a este arquivo um salvamento, de volta ao administrador. Agora podemos clicar em ver reservas na parte inferior, o que nos leva para o administrador relativo ordens barra barra, rolar para baixo, e agora podemos ver dois pedidos diferentes de dois usuários diferentes. Além de estar logado como administrador e poder ver todos os pedidos, também temos nossa própria seção de contas exclusiva no topo. Vamos clicar sobre isso também, e agora se rolarmos para baixo, devemos ver apenas nossas próprias honras, mas temos um 404 de não encontrado. Podemos ver que há um problema no topo. Nós podemos vinculá-lo para encaminhar barra admin forward barra barra minhas contas, e nós não queremos esta seção de administração dentro aqui. Só precisamos ir à minha conta. Vamos ao layout do pug, só precisamos de uma barra antes das minhas contas. Eu deveria tentar mais uma vez, clicando nas minhas reservas, agora temos apenas a reserva única para a conta do Chris, e novamente se formos para Admin, vá para Ver Reservas. Como somos administradores, também podemos ver os pedidos de outras pessoas. Junto com isso, isso também significa que nosso mixin também está funcionando bem, já que agora estamos vendo essas informações de ordem em dois arquivos separados. Este é agora para exibir todos os pedidos dentro da tela de administração. No próximo vídeo vamos voltar ao nosso estilo adicionando alguns CSS final. 63. CSS final: Já faz algum tempo desde que trabalhamos com o nosso estilo. Então, vamos tomar alguns momentos para fazer alguns ajustes, especialmente para os recursos que adicionamos nas últimas seções. Eu não vou adicionar uma grande quantidade de CSS extra. Você pode ir ainda mais longe se você quiser Agora o que está fazendo algumas pequenas alterações, começando com os botões. Então você já deve ter notado se formos a um hotel, e então se fizermos uma pesquisa para a data, número de convidados, uma vez que passamos para a página de resultados, temos este botão apenas aqui para continuar. Nós também temos um botão para fazer o pedido. Então, a primeira coisa que vou começar é com estes botões aqui. Então vamos passar para o style.css. Então vamos para a pasta pública, que fecha sobre estes para baixo. Então, a pasta pública. Então precisamos ir para as folhas de estilo e depois o style.css. Então, dentro deste arquivo e também fora da consulta de mídia, podemos adicionar nosso estilo de botão, então vamos rolar para baixo até nossa consulta de mídia, que é apenas aqui. Podemos nos certificar de que estamos fora disso. Então, apenas sob o botão pequeno, eu vou adicionar a classe botão, que está dentro do nosso HTML. Podemos adicionar uma cor de fundo. Quero que as mentes sejam cadete azul, e um pequeno raio de fronteira, todos os cinco pixels. Também um pouco de preenchimento de 0.5em. Salve isso. Recarregar. Agora o nosso botão parece muito mais bonito. Se agora passarmos para a página da conta clicando em um link na parte superior. Essa lista de reservas, que você adicionou nos últimos vídeos, também precisa de algum trabalho. Isso estava dentro do arquivo mais antigo de mixins orders.pug. Isto tem um mixins chamado _orders. Então vamos para os mixins e abrir este arquivo. Este mixin foi cercado por um div com a classe de reservas, que agora podemos usar no CSS. Sparkle para o style.css. Vamos novamente, adicionar estes fora da consulta de mídia para direcionar as reservas ul. Vou adicionar alguma margem de 2em, a parte superior e inferior, e zero para a esquerda e direita. Os fundos, novamente de cadete azul. Também um pequeno valor de preenchimento de 10 pixels. Então vamos salvar isso. Recarrega a secção da minha conta. Então, em seguida, queremos segmentar os itens de lista individuais e configurá-los para ser nível de bloco, que eles sejam empilhados um em cima do outro. Então, após as reservas ul. Vamos adicionar reservas li. Defina o tipo de exibição para ser bloco. O fundo, então isso se destaca do azul cadete. Vou adicionar um valor cinza de eee e também algum preenchimento de 0.5em. Vamos ver como isso parece no navegador. Adicione um S. Lá vamos nós. Então eu não vou ir muito fundo neste estilo como muito é para baixo para a preferência pessoal. Mas a última coisa que vou mudar são as mensagens flash. Eles estão localizados no lado do arquivo layout.pug. Então vamos até lá e rolar para baixo até nossa seção de mensagens, que é apenas aqui. Vemos uma classe de mensagem sendo aplicada ao div, que manterá nosso estilo geral de mensagem. Em seguida, também uma classe dinâmica de sublinhado de mensagem. Isso será informação, sucesso ou erro. Usando esses nomes de classe, podemos criar cores diferentes para cada tipo de mensagem. Por exemplo, vermelho para um erro. Também abaixo disso há um span com a classe de botão fechar. Isso também pode ser usado para estilizar a cruz, que remove a mensagem. Então, para o estilo. Então nós novamente, fora da consulta de mídia, vamos começar com o.message. Isto foi para os nossos estilos gerais de mensagem. Então, alguma margem de dez pixels na parte superior e inferior, zero à esquerda e à direita um pequeno valor de preenchimento de 0,5em, uma borda de um pixel, e uma linha sólida, um raio de borda de cinco pixels. Também o tamanho da fonte para ser 1.2em. Salve isso. Vamos tentar olhar para fora. Então isso agora parece um pouco melhor. Vamos agora direcionar a cruz para apenas aqui e movê-la para o lado direito, bem como mudar o cursor para ser um ponteiro. Vamos pairar por cima. Então, por baixo da mensagem, podemos direcionar o close_btn. Podemos flutuar para a direita. Então agora também podemos segmentar o botão de fechar. Mas desta vez o pairar os estados. Tudo o que eu quero fazer aqui é mudar o cursor para ser um ponteiro. Então os próximos três estilos que vamos adicionar serão todos relacionados com o tipo de mensagem. Então lembre-se de antes dentro dos layouts, temos esta seção dinâmica de message_. Então [inaudível] _info, sucesso e erro. Então podemos usá-los para dividir três cores diferentes, seguir as mensagens flash. Então vamos começar com o message_info. O message_success. Então o último é message_error. Então tudo o que vamos fazer aqui é adicionar algumas cores. Então o primeiro, eu vou adicionar um valor RGB de 40, 92 e para o azul um valor de 177, para o sucesso, o valor de 39, 87 e 39. Então, para a mensagem de erro, a cor vermelha será um valor RGB de 233, 66 e 66. Vamos adicionar um ponto-e-vírgula no final dessas três linhas. Salve este arquivo e recarregue o navegador. Então, primeiro de tudo, se tentarmos sair, recebemos uma mensagem azul para informações. Vamos tentar fazer login. Então, antes de tudo, se fizermos uma senha incorreta no login, recebemos a mensagem de erro vermelha. Então vamos tentar novamente com a senha correta desta vez. Agora temos a cor verde para o sucesso. Excelente. Isso agora está funcionando bem. Vou deixá-lo aqui para o estilo CSS. Mas é claro, vá em frente e mude as coisas para atender às suas necessidades. 64. Preparando para produção: Bem-vinda de volta. Esta vai ser uma seção muito emocionante como vemos todo o nosso trabalho duro finalmente compensando. Vamos finalmente empurrar nosso projeto para um servidor web ao vivo para o resto do mundo ver. Primeiro de tudo, algumas medidas que vou tomar para preparar o nosso aplicativo. Primeiro de tudo, vou ativar a compressão. Isso irá adicionar compressão gzip, como lidamos com arquivos, compactamos em nosso computador. que pode diminuir o tamanho do corpo de resposta, que acelera o desempenho do nosso aplicativo. Este é um pacote npm, simplesmente chamado de compressão, que podemos instalar através da linha de comando como de costume. Desligado para a compressão npm i do projeto e, em seguida, pressione ENTER. Está puxando este pacote da NPM. Uma vez que isso é feito, nós podemos então exigir esta final sobre o app.js direito no topo, assim como nós normalmente fazemos, então o app.js. Vamos fechar alguns destes nossos novos selos. Não, não, o app.js logo no topo, vou criar uma constante chamada compressão e exigir esse arquivo. Então precisamos adicionar essa compressão como middleware com app.use. Role para baixo e vamos fechar isso depois do nosso aplicativo. Digamos “Comprimir respostas” com nossa análise app.use em compactação. Isso é tudo o que precisamos fazer para configurar a compactação para nossas respostas. Devo dizer que é anotado em nossos cabeçalhos de resposta mais tarde. Em seguida, é um módulo NPM de segurança, que é chamado de capacete. Este módulo não protegerá nosso aplicativo de todos os riscos de segurança lá fora, mas habilitá-lo é um passo na direção certa e pode causar muitas precauções comuns que devemos tomar. Este módulo funciona como middleware e define vários cabeçalhos HTTP, que veremos em apenas um momento. Vamos primeiro instalar este módulo com npm i e o nome do pacote dos capacetes. Uma vez que isso é instalado, podemos então passar para o nosso app.js e, em seguida, exigir este módulo novamente na parte superior, logo sob a nossa compressão, então const capacete, exigem o módulo capacetes. Isso deve então ser definido o mais cedo possível na cadeia de middleware , novamente, usando app.use. Logo depois de configurar nosso aplicativo Express, então role para baixo para var aplicativo é igual a Express. Podemos ter isso aqui, então app.use análise no capacete e, em seguida, um ponto e vírgula no final. Pouco antes de começarmos a trabalhar com isso, eu vou comentar esta linha para fora, que possamos ver como nossos cabeçalhos se parecem antes de usar capacetes. Mantenha este comentário fora e, em seguida, vá para as ferramentas de desenvolvedor. Quando ele inicia o servidor com o npm execute DevStart. Para ver nossos cabeçalhos HTTP, podemos acessar as ferramentas de desenvolvedor dentro de um Chrome, então clique com o botão direito do mouse e inspecione. Então, se formos para a guia Rede, vamos fechar isso, recarregar, clicar no host local e, em seguida, quando você clicar na guia cabeçalhos, que é apenas aqui. Quero trazer isso à tona para que fique mais visível na tela. As informações que nos interessam são esses cabeçalhos de resposta. Esta informação conhecida como cabeçalho, é informação analisada com o pedido e a resposta, e vamos colocar isso no lado para que seja fácil de ver. Lá vamos nós. Ótima. Há nossos cabeçalhos de resposta, que podemos ver apenas aqui e apenas como uma comparação, eu vou tirar um screenshots rápido disso. Vou fazer uso disso em um momento. Ele contém coisas como nosso Content-Type de texto/html, ele é definido para ter um conjunto de caracteres de utf-8, que é o padrão. O tipo de codificação do gzip, que foi definido de bios antes quando pregamos uma compressão. Uma das coisas que precisamos abordar aqui é a tag X-Powered-By, que está abaixo e esta está definida para ser Express. O Helmet ocultará essas informações juntamente com outras pessoas para que os hackers não possam explorar quaisquer vulnerabilidades conhecidas dentro da estrutura em que usamos. Não vai esconder completamente o fato de que estamos usando o Express, há outras maneiras de verificar, mas este é um passo na direção certa. Agora, se voltarmos para o projeto e descomentar, este pedaço de middleware, salve o arquivo. Agora, se recarregar o navegador, clique no host local e, em seguida, voltar para nossos cabeçalhos de resposta, vemos que agora temos mais informações de cabeçalho. Vamos puxar as capturas de tela de antes, clique duas vezes sobre isso. A primeira coisa a notar neste novo cabeçalho de resposta é que não temos mais esta seção Powered-By Express na parte inferior, isso foi removido por capacetes. Há também algumas informações extras agora adicionadas. Eu não vou me aprofundar muito em tudo aqui, mas eu vou te dar algumas informações gerais sobre o que está acontecendo. Podemos ver que temos as opções Content-Type definido para ser “nosniff”. Isso impede que o navegador tente detectar ou adivinhar o tipo de nome. Este é o tipo de arquivo com o qual estamos lidando, como um arquivo PNG ou JavaScript. Isso impede que o navegador tente automaticamente detectar o Content-Type e basicamente errar, portanto, executando algum código que não deveria. Também temos o controle DNS Prefetch definido para estar desligado. Isso é mais um recurso de desempenho em vez de segurança. Quando visitamos um URL em um navegador, o nome da URL, como Google.com, é basicamente um alias para um endereço IP numérico. DNS é um servidor que contém um banco de dados dessas URLs e também os endereços IP para, em seguida, marchá-los para cima. Este URL, como Google.com, é muito mais fácil para os seres humanos lembrarem do que o endereço IP numérico real. Esse recurso diz ao navegador para não fazer uma solicitação DNS muito cedo antes que o usuário clique em um link ou carregue o recurso. Nós também temos as opções de download para ser noopen. Isso protege contra uma antiga vulnerabilidade do Internet Explorer, que permite que o navegador execute downloads dentro do contexto do seu site. Definir isso irá parar o Internet Explorer permitindo que downloads de html maliciosos sejam executados em um ambiente inseguro. Nós temos o Frame-Option definido para ser SAMEORIGIN. Este controlará se seus sites podem ser carregados em um iframe ou não. Ele deve ser desativado, a menos que você tenha uma boa necessidade para isso. Então temos proteção XSS e XSS significa scripting entre sites, e é uma maneira de os invasores terem acesso aos nossos sites. Eles fazem isso encontrando maneiras de executar código JavaScript dentro desses sites. Esta é uma das coisas que estamos tentando proteger quando sanitizar as entradas do usuário em todas as formas e capacetes também tem esta opção para ajudar com alguma segurança básica. Como você pode imaginar, agora a segurança é um assunto profundo e confira os documentos do capacete para obter mais informações, se você quiser descobrir um pouco mais. Mas, por enquanto, sei que esta é uma proteção básica agora em vigor. No próximo vídeo, finalmente enviaremos nosso aplicativo para produção usando Heroku. 65. Enviando nosso aplicativo expresso para o Heroku: Agora vou mostrar-lhe como empurrar a sua aplicação expressa terminada para uma plataforma chamada Heroku. Heroku é uma plataforma baseada em nuvem que nos permite implantar facilmente nossos aplicativos para produção. Ele funciona com Ruby on Rails, PHP, Python, Node e [inaudível]. Há também um nível gratuito. Assim, podemos aprender a usá-lo sem qualquer custo e só precisamos pagar se nosso projeto crescer. Quartos Heroku em aplicativos chamados dynodes, que são basicamente recipientes totalmente gerenciados. Para empurrar para Heroku, primeiro precisamos instalar um software de controle de versão chamado git. Isso está disponível em gitscm.com. Então clique neste link aqui. Então vamos levá-lo para a página inicial do git. Então vamos para a seção de download na parte inferior. Clique nisso e, em seguida, clique no download para o seu sistema operacional. Então eu vou clicar na versão do Mac apenas lá, e defini-lo descarregando. Já tenho o git instalado na minha máquina. Então, se você não quiser seguir em frente e siga as instruções de instalação para instalar o seu sistema operacional específico. Se você não está familiarizado com o git, é um sistema de controle de versão de código aberto, que nos permite trabalhar em projetos ou software e, em seguida, empurrar nossas mudanças em vários estágios. Isso nos permite não apenas manter o controle de quaisquer mudanças, mas também voltar para versões anteriores, se fizermos asneira. Git é instalado em nossa máquina, e também podemos enviar nosso código para serviços hospedados como o GitHub, ou, no nosso caso, podemos usá-lo para enviar para Heroku. Então, uma vez que você estiver pronto, precisamos ir até o terminal ou você pode usar o terminal embutido no código do estúdio visual. Então, dentro do aqui na parte inferior, podemos verificar se o git está instalado corretamente, usando os comandos git dash version. Se você vir um número de versão retornado para nós, isso significa que o git foi instalado com sucesso. Portas Git são projeto no que é chamado de repositório, que você pode pensar como um baldes de armazenamento. Podemos inicializar um repositório vazio em nossos projetos com o comando git in it. Já tenho o repositório configurado. Então este reinicializar é o repositório git. Você pode receber uma mensagem ligeiramente diferente, mas desde que seu repositório tenha sido criado, agora é bom seguir em frente. Podemos então verificar o status de quais arquivos em nossos projetos estão sendo empurrados para git e quais não têm, usando o comando chamado git status. Então pressione enter e agora veja uma lista de arquivos e pastas vermelhas de nossos projetos. O ilustre vermelho porque eles são classificados como não rastreados. Precisamos declarar quais arquivos queremos adicionar ao git, e quais não. Antes de avançarmos, há algo que normalmente queremos fazer primeiro. Isto é para criar um novo arquivo em nosso projeto chamado git ignore. Isso porque temos todos esses arquivos e pastas, mas nem sempre queremos que todos sejam compartilhados no git. Não queremos compartilhar o arquivo.env porque isso tem informações confidenciais. Também a pasta de módulos nó pode ser ignorada também, uma vez que é uma pasta enorme que vai ocupar muito espaço. Então toda a barra de design, na raiz de nossos projetos, o que é fechar tudo isso. Crie um novo arquivo chamado.gitignore. Então, para ignorar esses arquivos, podemos listá-los dentro daqui. Então, começando com a pasta de módulos do nó. Então, basta adicioná-los pelo nome. Então, a pasta de módulos nó, também podemos ignorar o arquivo.env e, finalmente, no final, o DS-Store. O DS-Store é um arquivo que muitas vezes é adicionado automaticamente ao usar um Mac. Por isso, queremos reconhecê-lo também, uma vez que não será necessário para todos os projectos. Este arquivo git ignore se torna ainda mais importante se enviarmos esse código para algum lugar como o GitHub. Se nos esquecermos de acrescentar isto, nossas informações confidenciais podem estar online para qualquer pessoa ver. Além disso, os módulos do nó não são necessários, porque sempre podemos executar o comando de instalação do NPM, para instalá-los todos a partir da lista no arquivo package.json. Também dentro deste arquivo package.json, eu vou adicionar [inaudível] configuração, e isso é para declarar qual versão dos nós vamos usar. Então, se estamos indo para o terminal e digite no nó dash-v, eu estou na versão chromium 10.3.0 Então nós podemos definir isso no package.json. Então, abra isso, e então, na parte inferior, para as dependências de desenvolvimento, podemos definir os motores. Este é um objeto onde definimos a versão dos nós para ser uma string, que é a nossa versão atual. Então eu no 10.3.0, e é claro que isso acontece a ser a versão atual que você está usando. Nós definimos a versão Node dentro aqui. Assim, a versão de produção do Node corresponderá à mesma versão que estamos usando durante o desenvolvimento. Isso pode evitar possíveis problemas ao usar diferentes versões em desenvolvimento e produção. Agora, se fecharmos isto e partirmos, na verdade, deixa-me guardar isto primeiro, e depois voltar para o terminal. Podemos novamente executar git status, pressione enter, salvar o git ignore arquivo e, em seguida, executar git status, pressione enter. Agora vemos que estamos faltando o arquivo.env e também os módulos do nó. Então agora podemos ir em frente e usar o git como comando, seguido pelo ponto. Então git add dot hit enter. Isso diz ao git para adicionar ou para preparar todos os arquivos que são vermelhos. Nós também podemos usar git add seguido pelo nome do arquivo para adicionar um arquivo ou pasta no momento, vez de usar ponto, que usaria para adicionar todos os arquivos. Se rodarmos novamente o status do git, pressione enter, os arquivos e pastas agora estão definidos como verdes. Isso significa que eles agora estão prontos para ser comprometidos com o git. Para isso, existe o comando git commit. Então digite git, commit-m e, em seguida, dentro de aspas, você pode adicionar uma mensagem, como commit inicial. Então, adicionamos esta mensagem para descrever quais alterações fizemos usando um sinalizador traço m, em seguida, uma mensagem entre aspas logo depois. Então pressione enter, e isso deve agora submeter todos os nossos arquivos em nosso repositório vazio. Sobre o status do git, até a parte inferior do hit enter, agora mostrará que agora não é nada para confirmar. Nosso trabalho na bandeja é limpo e ele permanecerá assim até que modifiquemos qualquer um dos arquivos. Então, por exemplo, no style.css, se adicionamos algo como padding:1px, salve isso e [inaudível] git status. Mas agora veja a versão modificada do style.css. Mas eu não vou empurrar para git, já que isso vai ser excluído. Então este é agora o nosso trabalho concluído com git. Então agora precisamos passar para Heroku. A primeira coisa que precisamos fazer é ir para Heroku.com e criar uma conta gratuita. Então vamos nos inscrever. Então adicione nossos detalhes aqui dentro. Fora de uma função, vá para um desenvolvedor, adicione o país, selecione nosso idioma principal. Eu quero ir do nó, sem robôs, criar uma conta gratuita e, em seguida, você precisa entrar em seus e-mails e confirmar as contas. Vá em frente e faça isso e volte em alguns instantes. Ok. Bem-vinda de volta. Depois de confirmar sua nova conta e configurar a senha, precisamos continuar, que nos leva à área do painel de controle de Rocchio. Dentro da área do painel, podemos criar um novo projeto com este ícone na parte superior. Clique em Novo, crie novo aplicativo. Em seguida, integramos um nome de aplicativo. Vamos viajar, o que não está disponível porque eu já usei isso antes, então vamos para Vamos viajar para, que está disponível. Selecione o país ou a região e, em seguida, crie um aplicativo. Em seguida, tomar em nosso aplicativo e podemos ver que temos esta seção métodos de implantação apenas aqui. Eu vou usar o método Heroku git, que você vê aqui, que usa o Heroku CLI. Usando este método, precisamos instalar este CLI. Clique no link aqui e abriremos isso em uma nova guia. Transfira e instale e, em seguida, instale para o seu sistema operativo específico. Uma vez terminado, você pode clicar sobre isso e, em seguida, passar pelo instalador. Bom. Uma vez feito isso, podemos agora voltar para o terminal e agora teremos acesso aos comandos Heroku. Para baixo no terminal, podemos adicionar login Heroku para, em seguida, fazer login em nossas contas. Quero mudar o e-mail para o que acabei de registrar. Pressione Enter e, em seguida, adicione a senha, link para nossas contas. Ótimo. Agora estamos logados como nosso uso de e-mail apenas aqui. Vou digitar, Clear, para nos dar mais espaço. Voltando ao painel do projeto, precisamos agora copiar esta linha de código aqui, que é Heroku Gits. Isso também está vinculado ao nosso projeto Let's Travel, então copie isso e cole-o no terminal e clique em “Enter”. Então isso definirá nosso aplicativo Heroku como uma versão remota do Gits. Uma filial remota é uma versão do nosso projeto que vive em outro lugar, em Heroku ou GitHub. Esta é a nossa versão remota agora definida e agora o estágio final é ir em frente e empurrar de Gits para Heroku. Fazemos isso com os Gits empurrando Heroku. Git push, Heroku e depois Mestre, aperte Enter. A ramificação mestre é a ramificação principal ou padrão do Gits. Dê-nos alguns momentos para empurrar para Heroku. Uma vez feito isso, podemos copiar o link que veremos dentro do terminal, ou podemos acessar um comando chamado Heroku Open. Vamos construir nosso projeto e empurrar o Heroku. Bom. Isso está tudo feito agora, então podemos copiar o link que vemos aqui, ou podemos digitar Heroku e depois abrir, pressionar Enter. Agora ele deve abrir dentro do nosso navegador no link que já vimos antes. Parece que vemos um erro dentro do navegador. Isso ocorre porque em nosso projeto configuramos variáveis de ambiente, mas ignoramos o arquivo.env, que as contém. Agora precisamos adicionar essas variáveis de volta ao Heroku, de volta ao painel e até o topo. Temos uma opção de configurações apenas aqui e, em seguida, dentro aqui temos uma seção chamada Config Variables. Vamos clicar em revelar as variáveis e vemos que não temos nenhuma dessas configurações ainda. Agora podemos copiar as variáveis do nosso arquivo.envfile. Vamos abrir o. Pasta ENV. O primeiro é DB. Vamos copiar isto. Podemos adicionar nossa chave como DB e, em seguida, copiar nosso valor MongoDB. Cole isso como o valor e depois adicione. Basta fazer o mesmo para nossa nuvem e renomear o valor, a chave de API, colocar isso em. Em seguida, temos os segredos da API. Este aqui, e então nós só precisamos remover isso e apenas ter a chave. Os segredos e, em seguida, adicione isso. Finalmente os segredos da sessão de viagem. Adicione isso, lá vamos nós. Assim como estas variáveis de ambiente, há mais um que eu vou adicionar. Lá em baixo, vai ser node_ ENV. Isso vai ser definido para produção, então adicione isso. Isso mudará os ambientes de nó padrão do desenvolvimento para a produção. Isso alterará algumas das configurações do aplicativo, como remover algumas mensagens de erro, que não queremos que o usuário veja. Ele agora irá descontar nosso CSS e modelos de revisão para desempenho. Agora ele irá ignorar as dependências dev do arquivo package.json. Você não precisa mais deles em produção. Agora, se voltarmos para a guia do navegador, clique sobre isso e, em seguida, recarregue o navegador. Agora vemos que o projeto está funcionando novamente. Este é agora um link ao vivo que você pode agora levar e mostrar aos seus amigos e familiares. Além disso, se você tiver seu próprio domínio personalizado, você pode usá-lo para ler Heroku e você pode descobrir como fazer isso na documentação. Brincar com isso e tudo ainda deve funcionar normalmente. Ainda devemos conseguir fazer login. Vamos dar uma chance a isso. Agora estamos logados, podemos acessar nossas contas. Há nossas reservas, todas as imagens ainda parecem funcionar na nuvem unária, o que é bom. Claro que tudo ainda está sendo puxado de Mongo porque nós adicionamos a variável de ambiente de mLab. Lembre-se de que a versão do mLab que temos usado para testes não foi projetada para produção, mas isso é bom apenas para fins de aprendizagem. Por enquanto, pequenos parabéns por empurrar seu aplicativo expresso para a produção. Mas por agora, porém, um enorme parabéns por chegar até aqui, e também agora empurrar seu aplicativo Express para um servidor web ao vivo. 66. Obrigado!: Parabéns por chegar ao final deste curso. Espero que você esteja agora muito mais confortável criando aplicativos web de pilha completa usando tecnologias como Node, Express, MongoDB, Hotspot e muito mais. Começamos desde o início a analisar como o Node e o Express funcionam, juntamente com a criação da aplicação “vamos viajar”. Criamos modelos de página, usamos roteamento para alternar entre páginas e aprendemos como todas as partes de um aplicativo Node e Express se encaixam. Em seguida, passamos para como poderíamos integrar bancos de dados em todos os projetos, incluindo modelar nossos dados, usando vários métodos para obter os dados corretos quando necessário, um longo tempo com o essencial criar, ler, atualizar e excluir ações. Depois disso, reforçamos nosso conhecimento criando mais projetos, incluindo diferentes visualizações, controladores, variáveis de ambiente, uploads de arquivos e armazenamento em nuvem, juntamente com algumas novas técnicas do ES6 Onward. Nós cobrimos o tratamento de contas de usuário, incluindo registro e login, validação de entradas do usuário, trabalho com sessões, mensagens flash e também renderização condicional. Para completar o projeto, tratamos da área de contas de usuário e também permitimos que o usuário colocasse reservas. Finalmente, enviamos nossos projetos para um servidor ao vivo para o resto do mundo ver. Adeus por enquanto e espero vê-lo em outro curso em breve. 67. Siga-me no Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui sobre compartilhamento de habilidades. Siga-me para que quaisquer atualizações sejam informadas de quaisquer novas classes à medida que forem disponibilizadas. Obrigado mais uma vez, boa sorte. Espero vê-lo novamente em futuras aulas.