Come utilizzare EJS per il template della tua applicazione Node

Tutorial

Introduzione

Quando si creano rapidamente applicazioni Node, a volte è necessario un modo veloce per creare un modello per la tua applicazione.

Jade viene fornito come il motore di modello predefinito per Express, ma la sintassi di Jade può essere eccessivamente complessa per molti casi d’uso.

I modelli di JavaScript incorporati (EJS) possono essere utilizzati come motore di modello alternativo.

In questo articolo, imparerai come applicare EJS a un’applicazione Express, includere parti ripetibili del tuo sito e passare dati alle viste.

Effettua il deploy delle tue applicazioni frontend da GitHub utilizzando la Piattaforma App di DigitalOcean. Lascia che DigitalOcean si concentri sulla scalabilità della tua app.

Prerequisiti

Se desideri seguire questo articolo, avrai bisogno di:

Nota: Puoi trovare un repository git del codice demo completo su GitHub.

Questo tutorial è stato originariamente scritto per express v4.17.1 e ejs v3.1.5. È stato verificato con Node v16.0.0, npm v7.11.1, express v4.17.1 e ejs v3.1.6.

Passaggio 1 — Configurazione del Progetto

Innanzitutto, apri la finestra del terminale e crea una nuova directory del progetto:

  1. mkdir ejs-demo

Successivamente, naviga nella directory appena creata:

  1. cd ejs-demo

A questo punto, puoi inizializzare un nuovo progetto npm:

  1. npm init -y

Successivamente, sarà necessario installare il pacchetto express:

  1. npm install express@4.17.1

Poi installa il pacchetto ejs:

  1. npm install ejs@3.1.6

A questo punto, hai un nuovo progetto pronto per utilizzare Express ed EJS.

Passaggio 1 — Configurazione con server.js

Con tutte le dipendenze installate, configuriamo l’applicazione per utilizzare EJS e impostiamo le route per la pagina di indice e la pagina di informazioni.

Crea un nuovo file server.js e aprilo con il tuo editor di codice e aggiungi le seguenti righe di codice:

server.js
var express = require('express');
var app = express();

// impostare il motore di visualizzazione su ejs
app.set('view engine', 'ejs');

// utilizzare res.render per caricare un file di visualizzazione ejs

// pagina di indice
app.get('/', function(req, res) {
  res.render('pages/index');
});

// pagina di informazioni
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

Questo codice definisce l’applicazione e ascolta sulla porta 8080.

Questo codice imposta anche EJS come motore di visualizzazione per l’applicazione Express utilizzando:

`app.set('view engine', 'ejs');`

Nota come il codice invia una vista all’utente utilizzando res.render(). È importante notare che res.render() cercherà una vista in una cartella views. Quindi è sufficiente definire pages/index poiché il percorso completo è views/pages/index.

Successivamente, creerai le viste utilizzando EJS.

Passaggio 2 — Creazione dei Partials EJS

Come molte delle applicazioni che costruisci, ci sarà molto codice che viene riutilizzato. Questi sono considerati partial. In questo esempio, ci saranno tre partial che verranno riutilizzati nella pagina di indice e nella pagina di informazioni: head.ejs, header.ejs e footer.ejs. Creiamo quei file ora.

Crea una nuova directory views:

  1. mkdir views

Successivamente, crea una nuova sottodirectory partials:

  1. mkdir views/partials

In questa directory, crea un nuovo file head.ejs e aprilo con il tuo editor di codice. Aggiungi le seguenti righe di codice:

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>

Questo codice contiene i metadati per l’head di un documento HTML. Include anche gli stili di Bootstrap.

Successivamente, crea un nuovo file header.ejs e aprilo con il tuo editor di codice. Aggiungi le seguenti righe di codice:

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>

Questo codice contiene la navigazione per un documento HTML e utilizza diverse classi di Bootstrap per lo stile.

Successivamente, crea un nuovo file footer.ejs e aprilo con il tuo editor di codice. Aggiungi le seguenti righe di codice:

views/partials/footer.ejs
<p class="text-center text-muted">&copy; Copyright 2020 The Awesome People</p>

Questo codice contiene le informazioni sul copyright e utilizza diverse classi di Bootstrap per lo stile.

Successivamente, utilizzerai queste parti in index.ejs e about.ejs.

Passo 3 — Aggiunta dei Parziali EJS alle Viste

Hai tre parziali definiti. Ora puoi include loro nelle tue viste.

Usa <%- include('PERCORSO/RELATIVO/AL/FILE') %> per incorporare un parziale EJS in un altro file.

  • Il trattino <%- anziché solo <% indica a EJS di renderizzare HTML grezzo.
  • Il percorso del parziale è relativo al file corrente.

Quindi, crea una nuova sottodirectory pages:

  1. mkdir views/pages

In questa directory, crea un nuovo file index.ejs e aprilo con il tuo editor di codice. Aggiungi le seguenti linee di codice:

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>

Salva le modifiche a questo file e poi esegui l’applicazione:

  1. node server.js

Se visiti http://localhost:8080/ in un browser web, puoi osservare la pagina di indice:

Successivamente, crea un nuovo file about.ejs e aprilo con il tuo editor di codice. Aggiungi le seguenti linee di codice:

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>

Questo codice aggiunge una barra laterale Bootstrap per mostrare come i parziali possano essere strutturati per essere riutilizzati su diversi modelli e pagine.

Salva le modifiche a questo file e poi esegui l’applicazione:

  1. node server.js

Se visiti http://localhost:8080/about in un browser web, puoi osservare la pagina “About” con una barra laterale:

Ora puoi iniziare a utilizzare EJS per passare i dati dall’applicazione Node alle viste.

Passaggio 4 — Passaggio dei Dati alle Viste e ai Parziali

Definiamo alcune variabili di base e una lista da passare alla pagina di indice.

Rivisita server.js nel tuo editor di codice e aggiungi le seguenti linee di codice all’interno del percorso app.get('/'):

server.js
var express = require('express');
var app = express();

// impostare il motore di visualizzazione su ejs
app.set('view engine', 'ejs');

// utilizzare res.render per caricare un file di visualizzazione ejs

// pagina di indice
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
  });
});

// pagina su
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

Questo codice definisce un array chiamato mascots e una stringa chiamata tagline. Successivamente, usiamoli in index.ejs.

Rendering di una Singola Variabile in EJS

Per stampare una singola variabile, è possibile utilizzare <%= tagline %>.

Rivedi index.ejs nel tuo editor di codice e aggiungi le seguenti righe di codice:

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>

    <h2>Variable</h2>
    <p><%= tagline %></p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Questo codice mostrerà il valore di tagline sulla pagina di indice.

Ciclo sui Dati in EJS

Per ciclare sui dati, è possibile utilizzare .forEach.

Rivedi index.ejs nel tuo editor di codice e aggiungi le seguenti righe di codice:

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>

    <h2>Variable</h2>
    <p><%= tagline %></p>

    <ul>
      <% mascots.forEach(function(mascot) { %>
        <li>
          <strong><%= mascot.name %></strong>
          representing <%= mascot.organization %>,
          born <%= mascot.birth_year %>
        </li>
      <% }); %>
    </ul>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Salva le modifiche a questo file e quindi esegui l’applicazione:

  1. node server.js

Se visiti http://localhost:8080/ in un browser web, puoi osservare la pagina di indice con i mascots:

Passaggio di dati a una parziale in EJS

La parziale EJS ha accesso agli stessi dati della vista genitore. Ma fai attenzione. Se stai facendo riferimento a una variabile in una parziale, essa deve essere definita in ogni vista che utilizza la parziale o verrà generato un errore.

Puoi anche definire e passare variabili a una parziale EJS nella sintassi di inclusione come segue:

views/pages/about.ejs
...
<header>
  <%- include('../partials/header', {variant: 'compact'}); %>
</header>
...

Ma devi di nuovo fare attenzione a presumere che una variabile sia stata definita.

Se vuoi fare riferimento a una variabile in una parziale che potrebbe non essere sempre definita e assegnarle un valore predefinito, puoi farlo in questo modo:

views/partials/header.ejs
...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

Nella riga sopra, il codice EJS sta rendendo il valore di variant se è definito e default se non lo è.

Conclusione

In questo articolo hai imparato come applicare EJS a un’applicazione Express, includere parti ripetibili del tuo sito e passare dati alle viste.

EJS ti consente di costruire applicazioni quando non hai bisogno di complessità aggiuntive. Utilizzando le parziali e avendo la capacità di passare facilmente le variabili alle tue viste, puoi costruire rapidamente delle ottime applicazioni.

Consulta la documentazione di EJS per ulteriori informazioni sulle funzionalità e sulla sintassi. Consulta Confronto tra Motori di Templating JavaScript: Jade, Mustache, Dust e Altro per comprendere i pro e i contro dei diversi motori di visualizzazione.

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-ejs-to-template-your-node-application