// Tutorial //

Como usar o EJS para modelar seu aplicativo Node

Published on October 22, 2020
Default avatar
By Chris Sev
Sr Developer Advocate
Português
Como usar o EJS para modelar seu aplicativo Node

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

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.

Configuração do Node

Vamos entrar em nosso arquivo package.json e configurar nosso projeto por lá.

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:

  1. 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.

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:

  1. 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.

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>
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>
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.
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.

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('/').

server.js
// 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.

Renderizar uma única variável no EJS

Para ecoar uma única variável, utilizamos apenas <%= tagline %>. Vamos adicionar isto em nosso arquivo index.ejs:

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:

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!

node-ejs-templating-rendered

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:

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:

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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Chris Sev

author

Sr Developer Advocate

Founder of scotch.io. Slapping the keyboard until good things happen.


Default avatar
Community Builder

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.


Still looking for an answer?

Was this helpful?
Leave a comment

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!