Table of Contents
Introdução
Ao criar aplicativos Node dinamicamente, uma maneira fácil e rápida de modelar seu aplicativo pode ser necessária.
O Jade é o mecanismo de exibição do Express por padrão, mas a sintaxe do Jade pode ser complexa de mais para muitos casos de uso. O EJS é uma alternativa que cumpre essa função muito bem e é bastante fácil de ser configurado. Vamos dar uma olhada em como criar um aplicativo simples e usar o EJS para incluir partes repetíveis do nosso site (parciais) e passar dados para nossas exibições.
Como configurar o aplicativo de demonstração
Estaremos fazendo duas páginas para nosso aplicativo, sendo uma com largura total e a outra com uma barra lateral.
Estrutura de arquivos
Aqui estão os arquivos que serão necessários para o nosso aplicativo. Vamos fazer o modelamento dentro da pasta de exibições e o resto do processo segue o padrão para práticas com o Node.
- views
----- partials
---------- footer.ejs
---------- head.ejs
---------- header.ejs
----- pages
---------- index.ejs
---------- about.ejs
- package.json
- server.js
Configuração do Node
Vamos entrar em nosso arquivo package.json e configurar nosso projeto por lá.
[label package.json]
{
"name": "node-ejs",
"main": "server.js",
"dependencies": {
"ejs": "^3.1.5",
"express": "^4.17.1"
}
}
Tudo o que precisamos é o Express e EJS. Agora, precisamos instalar as dependências que acabamos de definir. Vá em frente e execute:
[environment local]
npm install
Com todas as nossas dependências instaladas, vamos configurar o nosso aplicativo para usar o EJS e definir nossas rotas para as duas páginas que precisamos: a página de índica (largura total) e a página "sobre" (barra lateral). Isso tudo será feito dentro do nosso arquivo server.js.
[label server.js]
// load the things we need
var express = require('express');
var app = express();
// set the view engine to ejs
<^>app.set('view engine', 'ejs');<^>
// use res.render to load up an ejs view file
// index page
app.get('/', function(req, res) {
res.render('pages/index');
});
// about page
app.get('/about', function(req, res) {
res.render('pages/about');
});
app.listen(8080);
console.log('8080 is the magic port');
Aqui definimos nosso aplicativo e configuramos ele para ser exibido na porta 8080. Também é necessário definir o EJS como o mecanismo de exibição para o nosso aplicativo Express usando app.set('view engine', 'ejs');. Observe como enviamos uma exibição para o usuário usando o res.render(). É importante notar que o res.render() irá procurar em uma pasta de exibições pela exibição. Dessa forma, só é preciso definir pages/index, já que o caminho completo é views/pages/index.
Iniciar o nosso servidor
Vá em frente e inicie o servidor usando:
[environment local]
node server.js
Agora, podemos ver nosso aplicativo em um navegador em http://localhost:8080 e http://localhost:8080/about. Nosso aplicativo está configurado e precisamos definir nossos arquivos de exibição e ver como o EJS funciona neles.
Criar as parciais do EJS
Assim como muitos outras aplicativos que compilamos, grande parte do código será reutilizado. Iremos chamá-los de parciais e definir três arquivos que vamos usar em todo o nosso site: head.ejs, header.ejs e footer.ejs. Vamos criar esses arquivos agora.
[label views/partials/head.ejs]
<meta charset="UTF-8">
<title>EJS Is Fun</title>
<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
</style>
[label views/partials/header.ejs]
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">EJS Is Fun</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</nav>
[label views/partials/footer.ejs]
<p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
Adicionar as parciais do EJS às exibições
As nossas parciais já estão definidas. Tudo o que precisamos fazer é incluí-las em nossas exibições. Vamos entrar em index.ejs e about.ejs e usar a sintaxe include para adicionar as parciais.
Sintaxe para incluir uma parcial do EJS
Utilize <%<^>-<^> include(<^>'RELATIVE/PATH/TO/FILE'<^>) %> para incorporar um parcial do EJS em outro arquivo.
- O hífen
<^><%-<^>é usado, ao invés de apenas<%para dizer ao EJS para renderizar HTML não processado.
- O caminho para o parcial é relativo ao arquivo atual.
[label views/pages/index.ejs ]
<!DOCTYPE html>
<html lang="en">
<head>
<^><%- include('../partials/head'); %><^>
</head>
<body class="container">
<header>
<^><%- include('../partials/header'); %><^>
</header>
<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
</div>
</main>
<footer>
<^><%- include('../partials/footer'); %><^>
</footer>
</body>
</html>
Agora, podemos observar nossa exibição definida no navegador em http://localhost:8080. !node-ejs-templating-index
Para a página "sobre", também adicionamos uma barra lateral de inicialização para demonstrar como as parciais podem ser estruturadas para reuso em diferentes modelos e páginas.
[label views/pages/about.ejs ]
<!DOCTYPE html>
<html lang="en">
<head>
<^><%- include('../partials/head'); %><^>
</head>
<body class="container">
<header>
<^><%- include('../partials/header'); %><^>
</header>
<main>
<div class="row">
<div class="col-sm-8">
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<h3>Look I'm A Sidebar!</h3>
</div>
</div>
</div>
</main>
<footer>
<^><%- include('../partials/footer'); %><^>
</footer>
</body>
</html>
Se visitarmos http://localhost:8080/about, veremos nossa página "sobre" com uma barra lateral! !node-ejs-templating-about
Agora, podemos começar a usar o EJS para passar dados do nosso aplicativo Node para nossas exibições.
Passar dados para exibições e parciais
Vamos definir algumas variáveis básicas e uma lista para passar para nossa página inicial. Volte para seu arquivo server.js e adicione o código a seguir dentro da sua rota app.get('/').
[label server.js]
// index page
app.get('/', function(req, res) {
var mascots = [
{ name: 'Sammy', organization: "the cloud provider", birth_year: 2012},
{ name: 'Tux', organization: "Linux", birth_year: 1996},
{ name: 'Moby Dock', organization: "Docker", birth_year: 2013}
];
var tagline = "No programming concept is complete without a cute animal mascot.";
res.render('pages/index', {
mascots: mascots,
tagline: tagline
});
});
Acabamos de criar uma lista chamada mascots e uma string simples chamada tagline. Vamos entrar em nosso arquivo index.ejs e usá-los.
Renderizar uma única variável no EJS
Para ecoar uma única variável, utilizamos apenas <%= tagline %>. Vamos adicionar isto em nosso arquivo index.ejs:
[label views/pages/index.ejs]
...
<h2>Variable</h2>
<p><%= tagline %></p>
...
Executar um loop em dados no EJS
Para executar um loop em nossos dados, vamos utilizar o .forEach. Vamos adicionar isto em nosso arquivo de exibição:
[label views/pages/index.ejs ]
...
<ul>
<% mascots.forEach(function(mascot) { %>
<li>
<strong><%= mascot.name %></strong>
representing <%= mascot.organization %>, born <%= mascot.birth_year %>
</li>
<% }); %>
</ul>
...
Agora, podemos ver em nosso navegador que as novas informações foram adicionadas!
Passar dados para uma parcial no EJS
A parcial do EJS tem acesso aos mesmos dados que a exibição pai. Mas tenha cuidado: caso esteja fazendo referência a uma variável em uma parcial, <^>ela precisa estar definida em todas as exibições que usam a parcial<^> ou ocorrerá um erro.
Também é possível definir e passar variáveis a uma parcial do EJS na sintaxe include desta forma:
[label views/pages/about.ejs]
...
<header>
<%- include('../partials/header', <^>{variant:'compact'}<^>); %>
</header>
...
No entanto, é necessário novamente ter cuidado em assumir que uma variável já está definida.
Se quiser fazer referência a uma variável em uma parcial que talvez nem sempre esteja definida e atribuir-lhe um valor padrão, faça isso desta forma:
[label views/partials/header.ejs]
...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...
Na linha acima, o código do EJS está renderizando o valor de variant caso esteja definido e default caso contrário.
Conclusão
O EJS permite a criação rápida de aplicativos quando não precisamos de nada muito complexo. Usando parciais e tendo a capacidade de passar facilmente variáveis às nossas exibições, somos capazes de criar aplicativos fantásticos rapidamente.
Para outras referências sobre o EJS, consulte a documentação oficial aqui.
