Hoe u EJS gebruikt om uw Node-toepassing te templateren

Introductie

Bij het snel maken van Node-toepassingen is een snelle manier om uw toepassing te templateren soms noodzakelijk.

Jade wordt geleverd als de standaard template-engine voor Express, maar de Jade-syntax kan voor veel gebruikssituaties overdreven complex zijn.

Embedded JavaScript templates (EJS) kunnen worden gebruikt als alternatieve template-engine.

In dit artikel leert u hoe u EJS kunt toepassen op een Express-toepassing, herhaalbare delen van uw site kunt opnemen en gegevens naar de weergaven kunt doorgeven.

Vereisten

Als u dit artikel wilt volgen, heeft u het volgende nodig:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

Deze tutorial is oorspronkelijk geschreven voor express v4.17.1 en ejs v3.1.5. Het is geverifieerd met Node v16.0.0, npm v7.11.1, express v4.17.1, en ejs v3.1.6.

Stap 1 — Project instellen

Open eerst je terminalvenster en maak een nieuwe projectmap aan:

mkdir ejs-demo

Navigeer vervolgens naar de zojuist aangemaakte map:

cd ejs-demo

Op dit punt kun je een nieuw npm-project initialiseren:

npm init -y

Vervolgens moet je het express-pakket installeren:

npm install express@4.17.1

Installeer dan het ejs-pakket:

npm install ejs@3.1.6

Op dit punt heb je een nieuw project klaar om Express en EJS te gebruiken.

Stap 1 — Configuratie met server.js

Met alle geïnstalleerde afhankelijkheden, laten we de applicatie configureren om EJS te gebruiken en de routes voor de indexpagina en de over-pagina in te stellen.

Maak een nieuw server.js-bestand aan en open het met je code-editor en voeg de volgende regels code toe:

var express = require('express');
var app = express();

// stel de weergavemotor in op ejs
app.set('view engine', 'ejs');

// gebruik res.render om een ejs-weergavebestand te laden

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

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

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

Deze code definieert de applicatie en luistert op poort 8080.

Deze code stelt ook EJS in als de weergavemotor voor de Express-applicatie met behulp van:

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

Merk op hoe de code een weergave naar de gebruiker stuurt door res.render() te gebruiken. Het is belangrijk op te merken dat res.render() zal zoeken in een views-map voor de weergave. Dus je hoeft alleen pages/index te definiëren aangezien het volledige pad views/pages/index is.

Vervolgens maak je de weergaven met behulp van EJS.

Stap 2 — Het maken van de EJS Partials

Net als bij veel van de applicaties die je bouwt, zal er veel code zijn die hergebruikt wordt. Dit worden partials genoemd. In dit voorbeeld zullen er drie partials zijn die worden hergebruikt op de startpagina en over pagina: head.ejs, header.ejs, en footer.ejs. Laten we die bestanden nu maken.

Maak een nieuwe views-map aan:

mkdir views

Vervolgens maak je een nieuwe submap partials aan:

mkdir views/partials

In deze map maak je een nieuw head.ejs bestand aan en open het met je code-editor. Voeg de volgende regels code toe:

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

Deze code bevat metadata voor de head van een HTML-document. Het bevat ook Bootstrap stijlen.

Vervolgens maak je een nieuw header.ejs bestand aan en open het met je code-editor. Voeg de volgende regels code toe:

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

Deze code bevat navigatie voor een HTML-document en maakt gebruik van verschillende klassen van Bootstrap voor de opmaak.

Vervolgens maak je een nieuw footer.ejs bestand aan en open het met je code-editor. Voeg de volgende regels code toe:

<p class="text-center text-muted">&copy; Copyright 2020 The Awesome People</p>

Deze code bevat auteursrechtinformatie en maakt gebruik van verschillende klassen van Bootstrap voor de opmaak.

Vervolgens ga je deze gedeelten gebruiken in index.ejs en about.ejs.

Stap 3 — Het Toevoegen van de EJS Gedeelten aan Weergaven

Je hebt drie gedeelten gedefinieerd. Nu kun je ze inclusief toevoegen aan je weergaven.

Gebruik <%- include('RELATIEF/PAAD/NAAR/BESTAND') %> om een EJS gedeelte in een ander bestand in te sluiten.

• Het minteken <%- in plaats van alleen <% vertelt EJS om ruwe HTML te renderen.
• Het pad naar het gedeelte is relatief aan het huidige bestand.

Vervolgens, maak een nieuwe pages submap:

mkdir views/pages

In deze map, maak een nieuw index.ejs bestand aan en open het met je code-editor. Voeg de volgende regels code toe:

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

Sla de wijzigingen aan dit bestand op en voer vervolgens de applicatie uit:

node server.js

Als je http://localhost:8080/ bezoekt in een webbrowser, kun je de Indexpagina waarnemen:

Maak vervolgens een nieuw about.ejs bestand aan en open het met je code-editor. Voeg de volgende regels code toe:

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

Deze code voegt een Bootstrap zijbalk toe om te demonstreren hoe partials gestructureerd kunnen worden voor hergebruik in verschillende sjablonen en pagina’s.

Sla de wijzigingen aan dit bestand op en voer vervolgens de applicatie uit:

node server.js

Als je http://localhost:8080/about bezoekt in een webbrowser, kun je de Overpagina met een zijbalk waarnemen:

Nu kun je beginnen met het gebruik van EJS om gegevens van de Node-applicatie naar de weergaven door te geven.

Stap 4 — Gegevens doorgeven aan Weergaven en Partials

Laten we wat basisvariabelen en een lijst definiëren om door te geven aan de Indexpagina.

Herzie server.js in je code-editor en voeg de volgende regels code toe binnen de app.get('/') route:

var express = require('express');
var app = express();

// stel de weergavemotor in op ejs
app.set('view engine', 'ejs');

// gebruik res.render om een ejs-weergavebestand te laden

// startpagina
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
  });
});

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

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

Deze code definieert een array genaamd mascots en een string genaamd tagline. Laten we ze vervolgens gebruiken in index.ejs.

Een Enkele Variabele Weergeven in EJS

Om een enkele variabele weer te geven, kunt u <%= tagline %> gebruiken.

Ga terug naar index.ejs in uw code-editor en voeg de volgende regels code toe:

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

Deze code zal de waarde van tagline weergeven op de Index-pagina.

Data Doorlopen in EJS

Om door gegevens te lopen, kunt u .forEach gebruiken.

Ga terug naar index.ejs in uw code-editor en voeg de volgende regels code toe:

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

Sla de wijzigingen in dit bestand op en voer vervolgens de applicatie uit:

node server.js

Als u http://localhost:8080/ bezoekt in een webbrowser, kunt u de Index-pagina met de mascots observeren:

Gegevens doorgeven aan een Deel in EJS

De EJS deel heeft toegang tot alle dezelfde gegevens als de ouderweergave. Maar wees voorzichtig. Als je een variabele in een deel refereert, moet deze gedefinieerd zijn in elke weergave die het deel gebruikt, anders wordt er een fout gegenereerd.

Je kunt ook variabelen definiëren en doorgeven aan een EJS deel in de include-syntax zoals dit:

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

Maar wees opnieuw voorzichtig met aannames over of een variabele is gedefinieerd.

Als je een variabele in een deel wilt refereren die mogelijk niet altijd is gedefinieerd, en er een standaardwaarde aan wilt geven, kun je dat als volgt doen:

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

In de bovenstaande regel geeft de EJS-code de waarde van variant weer als deze gedefinieerd is, en default als dat niet het geval is.

Conclusie

In dit artikel heb je geleerd hoe je EJS kunt toepassen op een Express-applicatie, herhaalbare delen van je site kunt opnemen en gegevens aan de weergaven kunt doorgeven.

EJS stelt je in staat om applicaties te bouwen wanneer je geen extra complexiteit nodig hebt. Door gebruik te maken van delen en de mogelijkheid om eenvoudig variabelen door te geven aan je weergaven, kun je snel enkele geweldige applicaties bouwen.

Raadpleeg de EJS-documentatie voor aanvullende informatie over functies en syntaxis. Raadpleeg Vergelijking van JavaScript-templating-engines: Jade, Mustache, Dust en meer voor het begrijpen van de voor- en nadelen van verschillende weergavemotoren.