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.
Estaremos fazendo duas páginas para nosso aplicativo, sendo uma com largura total e a outra com uma barra lateral.
Obtenha o código: é possível encontrar um repositório git com o código de demonstração completo no GitHub aqui
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
O package.json
armazenará as informações do nosso aplicativo Node e as dependências necessárias (express e EJS). O server.js
armazenará as configurações do nosso servidor Express. Vamos definir as rotas para nossas páginas aqui.
Vamos entrar em nosso arquivo package.json
e configurar nosso projeto por lá.
{
"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:
- 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
.
// 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
.
Vá em frente e inicie o servidor usando:
- 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.
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.
<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>
<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>
<p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
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.
Utilize <%- include('RELATIVE/PATH/TO/FILE') %>
para incorporar um parcial do EJS em outro arquivo.
<%-
é usado, ao invés de apenas <%
para dizer ao EJS para renderizar HTML não processado.<!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
.
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.
<!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!
Agora, podemos começar a usar o EJS para passar dados do nosso aplicativo Node para nossas exibições.
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('/')
.
// index page
app.get('/', function(req, res) {
var mascots = [
{ name: 'Sammy', organization: "DigitalOcean", 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.
Para ecoar uma única variável, utilizamos apenas <%= tagline %>
. Vamos adicionar isto em nosso arquivo index.ejs:
...
<h2>Variable</h2>
<p><%= tagline %></p>
...
Para executar um loop em nossos dados, vamos utilizar o .forEach
. Vamos adicionar isto em nosso arquivo de exibição:
...
<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!
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:
...
<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:
...
<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.
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.