Wie man EJS verwendet, um Ihre Node-Anwendung zu templatisieren

Einführung

Beim schnellen Erstellen von Node-Anwendungen ist es manchmal notwendig, eine schnelle Möglichkeit zur Vorlagenbildung Ihrer Anwendung zu haben.

Jade wird als das Standard-Vorlagen-Engine für Express verwendet, aber die Jade-Syntax kann für viele Anwendungsfälle übermäßig komplex sein.

Eingebettete JavaScript-Vorlagen (EJS) können als alternative Vorlagen-Engine verwendet werden.

In diesem Artikel erfahren Sie, wie Sie EJS auf eine Express-Anwendung anwenden, wiederholbare Teile Ihrer Website einbeziehen und Daten an die Ansichten übergeben können.

Voraussetzungen

Wenn Sie diesem Artikel folgen möchten, benötigen Sie:

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

Dieses Tutorial wurde ursprünglich für express v4.17.1 und ejs v3.1.5 geschrieben. Es wurde mit Node v16.0.0, npm v7.11.1, express v4.17.1 und ejs v3.1.6 überprüft.

Schritt 1 — Einrichten des Projekts

Zuerst öffnen Sie Ihr Terminalfenster und erstellen ein neues Projektverzeichnis:

mkdir ejs-demo

Dann navigieren Sie zum neu erstellten Verzeichnis:

cd ejs-demo

An diesem Punkt können Sie ein neues npm-Projekt initialisieren:

npm init -y

Als nächstes müssen Sie das Paket express installieren:

npm install express@4.17.1

Dann installieren Sie das Paket ejs:

npm install ejs@3.1.6

An diesem Punkt haben Sie ein neues Projekt bereit, um Express und EJS zu verwenden.

Schritt 1 — Konfiguration mit server.js

Mit allen installierten Abhängigkeiten konfigurieren wir die Anwendung, um EJS zu verwenden und die Routen für die Index-Seite und die About-Seite einzurichten.

Erstellen Sie eine neue server.js-Datei, öffnen Sie sie mit Ihrem Code-Editor und fügen Sie die folgenden Codezeilen hinzu:

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

// Setzen Sie den Ansichtsmotor auf EJS
app.set('view engine', 'ejs');

// Verwenden Sie res.render, um eine EJS-Ansichtsdatei zu laden

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

// Über-Seite
app.get('/about', function(req, res) {
  res.render('pages/about');
});

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

Dieser Code definiert die Anwendung und hört auf Port 8080.

Dieser Code legt auch EJS als den Ansichtsmotor für die Express-Anwendung fest, indem er verwendet:

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

Beachten Sie, wie der Code eine Ansicht an den Benutzer sendet, indem er res.render() verwendet. Es ist wichtig zu beachten, dass res.render() im Ordner views nach der Ansicht sucht. Sie müssen also nur pages/index definieren, da der vollständige Pfad views/pages/index ist.

Als nächstes erstellen Sie die Ansichten mit EJS.

Schritt 2 — Erstellen der EJS-Partials

Wie bei vielen Anwendungen, die Sie erstellen, gibt es viel Code, der wiederverwendet wird. Diese werden als Partials betrachtet. In diesem Beispiel gibt es drei Partials, die auf der Indexseite und der Über-Seite wiederverwendet werden: head.ejs, header.ejs und footer.ejs. Lassen Sie uns diese Dateien jetzt erstellen.

Erstellen Sie ein neues views-Verzeichnis:

mkdir views

Dann erstellen Sie ein neues Unterverzeichnis partials:

mkdir views/partials

In diesem Verzeichnis erstellen Sie eine neue head.ejs-Datei und öffnen sie mit Ihrem Code-Editor. Fügen Sie die folgenden Zeilen Code hinzu:

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

Dieser Code enthält Metadaten für den head eines HTML-Dokuments. Er enthält auch Bootstrap-Stile.

Als Nächstes erstellen Sie eine neue header.ejs-Datei und öffnen sie mit Ihrem Code-Editor. Fügen Sie die folgenden Zeilen Code hinzu:

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

Dieser Code enthält die Navigation für ein HTML-Dokument und verwendet mehrere Klassen von Bootstrap für das Styling.

Als Nächstes erstellen Sie eine neue footer.ejs-Datei und öffnen sie mit Ihrem Code-Editor. Fügen Sie die folgenden Zeilen Code hinzu:

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

Dieser Code enthält Copyright-Informationen und verwendet mehrere Klassen von Bootstrap für das Styling.

Als Nächstes verwenden Sie diese Partials in index..ejs und about.ejs.

Schritt 3 — Hinzufügen der EJS-Partials zu den Ansichten

Sie haben drei Partials definiert. Jetzt können Sie sie in Ihren Ansichten includen.

Verwenden Sie <%- include('RELATIVE/PATH/TO/FILE') %>, um ein EJS-Partial in einer anderen Datei einzubetten.

• Das Minuszeichen <%- statt nur <% sagt EJS, dass es rohes HTML rendern soll.
• Der Pfad zum Partial ist relativ zur aktuellen Datei.

Dann erstellen Sie ein neues pages Unterverzeichnis:

mkdir views/pages

In diesem Verzeichnis erstellen Sie eine neue index.ejs-Datei und öffnen sie mit Ihrem Code-Editor. Fügen Sie die folgenden Codezeilen hinzu:

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

Speichern Sie die Änderungen an dieser Datei und führen Sie dann die Anwendung aus:

node server.js

Wenn Sie http://localhost:8080/ in einem Webbrowser besuchen, können Sie die Indexseite beobachten:

Als nächstes erstellen Sie eine neue about.ejs-Datei und öffnen sie mit Ihrem Code-Editor. Fügen Sie die folgenden Codezeilen hinzu:

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

Dieser Code fügt eine Bootstrap-Seitenleiste hinzu, um zu zeigen, wie Partial-Views strukturiert werden können, um sie in verschiedenen Vorlagen und Seiten wiederzuverwenden.

Speichern Sie die Änderungen an dieser Datei und führen Sie dann die Anwendung aus:

node server.js

Wenn Sie http://localhost:8080/about in einem Webbrowser besuchen, können Sie die About-Seite mit einer Seitenleiste sehen:

Jetzt können Sie beginnen, EJS für die Datenübermittlung von der Node-Anwendung an die Ansichten zu verwenden.

Schritt 4 — Daten an Ansichten und Teilansichten übermitteln

Definieren wir einige grundlegende Variablen und eine Liste, die an die Indexseite übermittelt werden soll.

Öffnen Sie server.js erneut in Ihrem Code-Editor und fügen Sie die folgenden Codezeilen innerhalb der app.get('/')-Route hinzu:

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

// Setze den View-Engine auf EJS
app.set('view engine', 'ejs');

// Verwende res.render, um eine EJS-View-Datei zu laden

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

// Über-Seite
app.get('/about', function(req, res) {
  res.render('pages/about');
});

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

Dieser Code definiert ein Array namens mascots und einen String namens tagline. Als nächstes verwenden wir sie in index.ejs.

Rendern einer einzelnen Variable in EJS

Um eine einzelne Variable auszugeben, kannst du <%= tagline %> verwenden.

Öffne index.ejs in deinem Code-Editor und füge die folgenden Codezeilen hinzu:

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

Dieser Code wird den Wert von tagline auf der Indexseite anzeigen.

Schleifen über Daten in EJS

Um über Daten zu iterieren, kannst du .forEach verwenden.

Öffne index.ejs erneut in deinem Code-Editor und füge die folgenden Codezeilen hinzu:

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

Speichere die Änderungen an dieser Datei und führe dann die Anwendung aus:

node server.js

Wenn du http://localhost:8080/ in einem Webbrowser besuchst, kannst du die Indexseite mit den mascots beobachten:

Daten an ein Partial in EJS übergeben

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 sein, die das Partial verwendet, sonst wird ein Fehler ausgelöst.

Sie können auch Variablen in einem EJS-Partial mit der include-Syntax definieren und übergeben, wie folgt:

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

Aber seien Sie erneut vorsichtig, wenn Sie davon ausgehen, dass eine Variable definiert wurde.

Wenn Sie auf eine Variable in einem Partial verweisen möchten, die möglicherweise nicht immer definiert ist, und ihr einen Standardwert geben möchten, können Sie dies wie folgt tun:

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

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

Abschluss

In diesem Artikel haben Sie gelernt, wie Sie EJS auf eine Express-Anwendung anwenden, wiederholbare Teile Ihrer Website einfügen und Daten an die Ansichten übergeben können.

Mit EJS können Sie Anwendungen erstellen, wenn Sie keine zusätzliche Komplexität benötigen. Durch die Verwendung von Partials und die Möglichkeit, Variablen problemlos an Ihre Ansichten zu übergeben, können Sie schnell großartige Anwendungen erstellen.

Konsultieren Sie die EJS-Dokumentation für weitere Informationen zu Funktionen und Syntax. Konsultieren Sie Vergleich von JavaScript-Template-Engines: Jade, Mustache, Dust und mehr, um die Vor- und Nachteile verschiedener Ansichts-Engines zu verstehen.