Verwenden von EJS zur Vorlagenerstellung Ihrer Node-Anwendung

Einführung

Bei der Erstellung von schnellen, spontanen Node-Anwendungen ist manchmal eine einfache und schnelle Methode zur Erstellung von Vorlagen unserer Anwendung erforderlich.

Jade wird standardmäßig als Ansichts-Engine für Express bereitgestellt, doch kann die Jade-Syntax für viele Anwendungsfälle übermäßig komplex sein. EJS ist eine Alternative, die diese Aufgabe gut erfüllt und sehr einfach einzurichten ist. Sehen wir uns an, wie wir eine einfache Anwendung erstellen und EJS verwenden können, um wiederholbare Teile unserer Website (Teilbereiche oder Partials) einzubinden und Daten an unsere Ansichten zu übergeben.

Einrichten der Demo-Anwendung

Wir werden für unsere Anwendung zwei Seiten erstellen, wobei eine Seite eine volle Breite und die andere eine Seitenleiste hat.

Dateistruktur

Hier sind die Dateien, die wir für unsere Anwendung benötigen. Wir werden unsere Vorlage im Ansichten-Ordner „views“ vornehmen und der Rest ist ganz normale Node-Praxis.

- views
----- partials
---------- footer.ejs
---------- head.ejs
---------- header.ejs
----- pages
---------- index.ejs
---------- about.ejs
- package.json
- server.js

package.json enthält unsere Node-Anwendungsinformationen und die Abhängigkeiten, die wir benötigen (express und EJS). server.js enthält die Einrichtung und Konfiguration unseres Express-Servers. Hier definieren wir unsere Routen zu unseren Seiten.

Node-Einrichtung

Gehen wir in unsere Datei package.json und richten dort unser Projekt ein.

{
  "name": "node-ejs",
  "main": "server.js",
  "dependencies": {
    "ejs": "^3.1.5",
    "express": "^4.17.1"
  }
}

Wir benötigen lediglich Express und EJS. Jetzt müssen wir die Abhängigkeiten installieren, die wir gerade definiert haben. Fahren Sie fort und führen Sie aus:

npm install

Nach der Installation aller unserer Abhängigkeiten konfigurieren wir unsere Anwendung für die Verwendung von EJS und richten unsere Routen für die beiden Seiten ein, die wir benötigen: die Index-Seite (volle Breite) und die Info- oder About-Seite (Seitenleiste). Dies führen wir alles in unserer Datei server.js aus.

// 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');

Hier definieren wir unsere Anwendung und stellen sie so ein, dass sie auf Port 8080 angezeigt wird. Außerdem müssen wir EJS als Anzeige-Engine für unsere Express-Anwendung mit app.set('view engine', 'ejs'); festlegen. Beachten Sie, wie wir mit res.render() eine Ansicht an den Benutzer senden. Es ist wichtig zu beachten, dass res.render() in einem Ansichten-Ordner nach der Ansicht sucht. Wir müssen also nur pages/index definieren, da der vollständige Pfad views/pages/index lautet.

Starten unseres Servers

Fahren Sie fort und starten Sie den Server mit:

node server.js

Jetzt können wir unsere Anwendung im Browser unter http://localhost:8080 und http://localhost:8080/about sehen. Unsere Anwendung ist eingerichtet und wir müssen unsere View-Dateien definieren und sehen, wie EJS dort funktioniert.

Erstellen der EJS-Teilbereiche

Wie bei vielen von uns erstellten Anwendungen gibt es viel Code, der wiederverwendet wird. Wir nennen diese Teilbereiche oder Partials und definieren drei Dateien, die wir auf allen Seiten verwenden: head.ejs, header.ejs und footer.ejs. Lassen Sie uns diese Dateien jetzt erstellen.

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

Hinzufügen der EJS Partials zu Ansichten

Wir haben unsere Partials nun definiert. Wir müssen sie nur in unsere Ansichten einbinden. Gehen wir in index.ejs und about.ejs und verwenden die Syntax include zum Hinzufügen der Partials.

Syntax für das Einbinden eines EJS-Partials

Verwenden Sie <%- include('RELATIVE/PATH/TO/FILE') %>, um ein EJS-Partial in eine andere Datei einzubinden.

• Der Bindestrich <%- anstatt nur <% weist EJS an, rohes HTML zu rendern.
• Der Pfad zu dem Partial ist relativ zur aktuellen Datei.

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

Jetzt können wir unsere definierte Ansicht im Browser unter http://localhost:8080 sehen.

Für die Info- oder About-Seite fügen wir auch eine Bootstrap-Seitenleiste hinzu, um zu zeigen, wie Partials für die Wiederverwendung über verschiedene Vorlagen und Seiten strukturiert werden können.

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

Wenn wir http://localhost:8080/about besuchen, können wir unsere About-Seite mit einer Seitenleiste sehen!

Jetzt können wir damit beginnen, EJS für die Datenübergabe von unserer Node-Anwendung an unserer Ansichten zu verwenden.

Übergeben von Daten an Ansichten und Partials

Definieren wir einige grundlegende Variablen und eine Liste, die an unsere Startseite übergeben werden sollen. Gehen Sie zurück in Ihre Datei server.js und fügen Sie Folgendes in Ihrer Route app.get('/') ein.

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

Wir haben eine Liste namens mascots und eine einfache Zeichenfolge namens tagline erstellt. Gehen wir in unsere Datei index.ejs und verwenden sie.

Rendern einer einzelnen Variable in EJS

Um eine einzelne Variable zu wiederholen, verwenden wir einfach <%= tagline %>. Fügen wir dies unserer Datei index.ejs hinzu:

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

Überschleifen von Daten in EJS

Um unsere Daten überzuschleifen verwenden wir .forEach. Fügen wir dies unserer View-Datei hinzu:

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

Jetzt können wir in unserem Browser die neu hinzugefügten Informationen sehen!

Übergeben von Daten an ein Partial in EJS

Das EJS-Partial hat Zugriff auf dieselben Daten wie die übergeordnete Ansicht. Seien Sie jedoch vorsichtig: Wenn Sie eine Variable in einem Partial referenzieren, muss sie in jeder Ansicht definiert werden, die das Partial verwendet, da sonst ein Fehler ausgelöst wird.

Sie können Variablen auch wie folgt in der Include-Syntax definieren und an ein EJS-Partial übergeben:

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

Sie müssen jedoch wieder vorsichtig sein, wenn Sie annehmen, dass eine Variable definiert wurde.

Wenn Sie in einer Partial auf eine Variable verweisen, die eventuell nicht immer definiert ist, und ihr einen Standardwert geben möchten, können Sie dies folgendermaßen tun:

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

In der obigen Zeile rendert der EJS-Code den von variant, wenn er definiert ist, und default, wenn er nicht definiert ist.

Zusammenfassung

EJS ermöglicht uns das schnelle Erstellen von Anwendungen, wenn wir nichts allzu Komplexes benötigen. Durch Verwendung von Partials und die Möglichkeit, Variablen einfach an unsere Ansichten zu übergeben, können wir schnell einige großartige Anwendungen erstellen.

Weitere Informationen zu EJS finden Sie in den offiziellen Dokumenten hier.