Bei der Webentwicklung ist die Darstellung von Daten vom Server auf Webseiten entscheidend für die Schaffung interaktiver und dynamischer Benutzererlebnisse. Hier kommen Template Engine wir Express.js zur Rettung. A Template Engine ist ein Tool, mit dem Sie dynamische HTML-Vorlagen erstellen können, indem Sie Daten vom Server in den HTML-Code einfügen.
Warum verwenden Template Engine ?
Template Engine Helfen Sie dabei, HTML-Markup von den vom Server kommenden Daten zu trennen. Dadurch können Sie HTML-Code einfacher verwalten, ohne Daten in jede Codezeile einbetten zu müssen. Stattdessen erstellen Sie „Platzhalter“ oder „Tags“ innerhalb des HTML-Codes, die Template Engine später mit serverseitigen Daten gefüllt werden.
Verwendung Template Engine in Express.js
Express.js unterstützt verschiedene template engine, wie Pug(früher bekannt als Jade) und EJS(Embedded JavaScript). Nachfolgend finden Sie Beispiele für die Verwendung von Pug und EJS in Express.js:
Mit Mops Template Engine
Pug installieren: Sie müssen das pug Paket über npm installieren.
npm install pug --save
Konfigurieren Template Engine: Definieren Sie in der Konfigurationsdatei Ihrer Anwendung(z. B. app.js) Pug als template engine.
app.set('view engine', 'pug');
Erstellen Sie eine Pug-Vorlage: Erstellen Sie Pug-Dateien im views Verzeichnis. Erstellen Sie beispielsweise eine index.pug Datei:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Routenhandhabung und Datenrendering: Bei der Routenhandhabung können Sie Daten an die template engine Verwendung übergeben res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Verwendung von EJS Template Engine
EJS installieren: Installieren Sie das ejs Paket über npm.
npm install ejs --save
Konfigurieren Template Engine: Definieren Sie EJS als template engine in der Konfiguration Ihrer Anwendung.
app.set('view engine', 'ejs');
Erstellen Sie eine EJS-Vorlage: Erstellen Sie EJS-Dateien im views Verzeichnis. Erstellen Sie beispielsweise eine index.ejs Datei:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Routenhandhabung und Datenrendering: Übergeben Sie bei der Routenhandhabung Daten an den template engine Benutzer res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Abschluss
Mit Template Engine in Express.js können Sie dynamische Webseiten erstellen und Informationen vom Server im Browser des Benutzers anzeigen. Durch die Verwendung von Pug, EJS oder anderen template engine können Sie interaktive und flexible Webseiten erstellen, die ein besseres Benutzererlebnis bieten und die Verwaltung von HTML-Code und -Daten optimieren.