Embora seja possível renderizar sites estáticos a partir de um servidor, há muitas limitações com essa abordagem, incluindo duplicação de código e falta de flexibilidade-especialmente quando se trata de leitura dados de um banco de dados. Felizmente, Express.js nos fornece uma maneira de criar páginas HTML dinâmicas de nossos aplicativos do lado do servidor por meio de um mecanismo de modelo.
Um mecanismo de template funciona de uma maneira bastante simples: você cria um template e, com a sintaxe apropriada, passa variáveis para ele. Então, na rota apropriada para renderizar o modelo, você atribui valores às variáveis declaradas em seu arquivo de modelo. Eles são compilados em tempo real conforme o modelo é renderizado.
Um recurso essencial dos motores de modelo é que eles nos permitem criar componentes reutilizáveis chamados parciais, que podem ser reutilizados em outros arquivos. Isso ajuda a evitar a duplicação de código e torna as alterações mais fáceis de implementar.
Existem vários mecanismos de template disponíveis hoje, e os mais populares incluem Pug (fka Jade), Handlebars, EJS, Mustache, Swig e outros. Esta postagem discutirá os seguintes mecanismos de modelo para Express:
- Pug
- EJS
- Guidão
Primeiros passos
Configure um novo projeto npm e instale o Express digitando os seguintes comandos em seu terminal:
npm init npm eu expresso
Crie uma pasta src . É aqui que escreveremos todo o nosso código para este projeto. Na pasta, crie um arquivo chamado app.js e uma pasta chamada views para conter as visualizações que renderizaremos por meio do Express. Adicione uma subpasta partials na pasta views para armazenar as parciais. Sua estrutura de pastas deve ser semelhante a esta:
├──src ├───visualizações ├───parciais app.js
Adicione este código padrão do Express ao arquivo app.js :
const express=require ('express');
const path=require ('path');
const app=express ();
app.get ('/', (solicitação, resposta)=> { return response.send ('OK');
});
app.listen (5000, ()=> { console.log ('O aplicativo está escutando na porta 5000');
});
Integração de mecanismos de modelo Express
A integração de um mecanismo de modelo em seu aplicativo Express requer apenas algumas linhas de código. Logo após atribuir a função Express (antes de criar suas rotas), adicione as seguintes configurações do aplicativo:
-
views, o diretório onde os arquivos de modelo estão localizados (por exemplo,app.set ('views','./views')). O padrão é o diretórioviewsno diretório raiz do aplicativo -
view engine, seu mecanismo de template. Por exemplo, para usar o mecanismo de modelo Pug:app.set ('view engine','pug')
Pug
Pug tem uma sintaxe muito distinta, favorecendo recuos e espaços em relação aos colchetes angulares tradicionais em tags HTML. Uma página típica com segmentos de cabeça e corpo tem esta aparência:
doctype html
html cabeça meta (nome='janela de visualização', conteúdo='largura=largura do dispositivo') link (rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css") título=assunto corpo div.container.mt-2 cabeçalho h2 bem-vindo p Aqui está a página inicial de # {name} seção h2 aqui está o corpo p Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, repelendo! rodapé h2 aqui está o rodapé p a (href=link) Cancelar inscrição
Pelo exemplo acima, você pode ver que não há tags de abertura ou fechamento. Em vez disso, a tag delimitadora é declarada e seus filhos são indentados logo abaixo, como em Python. O conteúdo de cada tag é declarado ao lado da tag, enquanto os atributos são declarados entre parênteses. As classes são indicadas com . e ids com # .
As variáveis podem ser definidas de duas maneiras:
- Usando o sinal de igual (
=) -Isso geralmente é usado quando a variável a ser declarada é o único conteúdo da tag ou atributo correspondente, como visto em nossotitleeatags - Usando a sintaxe
# {variable}-Este método pode ser usado quando a variável é o único conteúdo da tag/atributo e quando faz parte de uma corda mais longa
Para renderizar o conteúdo acima no Express, primeiro instale o pacote Pug do npm:
npm i pug
A seguir, copie o código acima em um arquivo index.pug dentro da pasta views e em app.js , registre Pug como o motor de template preferido:
app.set ('view engine','pug');
app.set ('views', path.join (__ dirname,'views'));
No mesmo arquivo, crie uma rota que processe o arquivo desta forma:
app.get ('/index', (solicitação, resposta)=> { response.render ('índice', { assunto:'motor de modelo Pug', nome:'nosso modelo', link:'https://google.com' });
});
O método render leva o nome do arquivo (sem a extensão) e então os valores das variáveis no arquivo de modelo.
Usando parciais no Pug
Vamos criar um arquivo de navegação reutilizável chamado _nav.pug na subpasta partials; Eu gosto de prefixar parciais com um sublinhado ( _ ). Isso conterá nosso menu de navegação com o seguinte código:
nav.navbar.navbar-dark.bg-primary.navbar-expand .recipiente a.navbar-brand (href='#') TMP ul.navbar-nav.mr-auto li.nav-item a.nav-link (href='#') span Home li.nav-item a.nav-link (href='#') extensão sobre li.nav-item a.nav-link (href='#') menu span li.nav-item a.nav-link (href='#') Span Contact span.navbar-text a.nav-link (href='#') span Login
Podemos então incluir o parcial em nosso arquivo index.pug usando a palavra-chave include apenas dentro da tag body :
corpo incluir parcials/_nav//parcial incluído aqui div.container.mt-2
Visite localhost: 5000/index e você deverá obter algo assim:
Esta é uma introdução simples ao modelo Pug. Você pode aprender mais no site oficial do pug .
EJS
EJS é muito mais semelhante a HTML do que Pug, mantendo o método usual de abrir e fechar tags, bem como especificar atributos. As variáveis são declaradas usando colchetes angulares e o sinal de porcentagem desta maneira: <%=name%> .
As tags EJS podem ser usadas de diferentes maneiras:
-
<%=-Escape o valor fornecido e envie-o para o modelo -
<%--Envie o valor fornecido sem escape. É aconselhável que você escape de todas as variáveis HTML antes de renderizar para evitar ataques de cross-site scripting (XSS) -
<%-Realiza operações de controle, como usar uma condicional ou loop
Integrando EJS ao Express
Primeiro, instale o pacote ejs do npm:
npm i ejs
Em seguida, mude a configuração do view engine do aplicativo de Pug para EJS:
app.set ('view engine','ejs');
Agora, para reescrever nosso código Pug acima em EJS, crie um arquivo index.ejs em sua pasta views e adicione o seguinte código:
<%=assunto%> Bem-vindo
Esta é a página inicial de <%=name%>
Aqui está o corpo
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, repelendo!
Usando parciais em EJS
Dentro da subpasta partials , crie um arquivo _nav.ejs e adicione este código:
Você pode adicionar nav partial em seu arquivo de índice adicionando o caminho relativo do arquivo partials à palavra-chave include , modificando a linha logo abaixo da tag body :
<%-include ('./partials/_nav'); %>//parcial incluído aqui
Adicione a seguinte rota ao arquivo app.js :
app.get ('/index', (solicitação, resposta)=> { response.render ('índice', { assunto:'mecanismo de modelo EJS', nome:'nosso modelo', link:'https://google.com' });
});
Agora, quando você inicia seu servidor e visita a rota /index , a página deve ser renderizada com conteúdo semelhante ao do modelo Pug.
Guidão
O guiador, como o EJS, tenta permanecer fiel ao estilo HTML usual com uma maneira simples de inserir variáveis usando duas chaves-por exemplo, {{variable}} -ou três chaves para HTML sem escape personagens. Ele é construído no mecanismo de modelagem bigode , portanto, eles compartilham algumas semelhanças.
Existem vários pacotes npm disponíveis para compilar e renderizar barras de guia no Express, mas estarei usando o pacote hbs . Isso é instalado por meio do comando:
npm i hbs
Em seguida, definimos nosso mecanismo de visualização para hbs com:
app.set ('view engine','hbs');
Uma reescrita index.hbs de nossas páginas de índice anteriores ficaria assim:
{{sujeito}}
Bem-vindo
Esta é a página inicial de {{name}}
Aqui está o corpo
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, repelendo!
Usando parciais no guiador
Usando a mesma estrutura de arquivo anterior, crie um arquivo _nav.hbs dentro da pasta partials . Usaremos o mesmo código no arquivo _nav.ejs acima, pois é a sintaxe HTML usual sem nenhuma variável definida.
Ao contrário dos outros motores de modelo, você deve registrar seus parciais no guiador antes de usá-los. Importe o módulo hbs em seu arquivo app.js e use o método registerPartials :
const hbs=require ('hbs');
hbs.registerPartials (path.join (__ dirname,'views/partials'));
Após o registro, você simplesmente usa o nome do arquivo parcial em vez do caminho relativo ao incluí-lo em um arquivo hbs . A sintaxe para incluir uma parcial em outro arquivo hbs é {{> partialname}} . Você pode incluir sua parcial de navegação em seu arquivo de índice, modificando a linha logo abaixo da tag de abertura body :
{{> _nav}}//parcial incluído aqui
Adicione a seguinte rota ao app.js para renderizar o arquivo de índice:
app.get ('/index', (solicitação, resposta)=> { response.render ('índice', { assunto:'hbs template engine', nome:'nosso modelo', link:'https://google.com' });
});
Visitar a rota /index deve renderizar uma página semelhante à mesma rota no aplicativo Pug.
Conclusão
Os mecanismos de modelo são muito fáceis de configurar e exigem pouco ou nenhum padrão, e você pode criar aplicativos grandes com eles sem ter que perder muito tempo aprendendo a sintaxe. Você pode aprender mais sobre eles visitando seus documentos para começar a criar páginas da Web dinâmicas renderizadas a partir do servidor.
O código-fonte para este aplicativo está no GitHub com cada mecanismo de modelo em um branch diferente, com o mesmo nome.
A postagem Modelo Express.js principal mecanismos para páginas HTML dinâmicas apareceram primeiro no LogRocket Blog .
Categories: UncategorizedWordpress
