Mit zunehmender Komplexität einer Anwendung steigen auch ihre Anforderungen. Irgendwann kann das Bereitstellen statischer HTML-Dateien den Fortschritt behindern oder die Funktionalität der App beeinträchtigen. Stattdessen möchten Sie dynamische Inhalte bereitstellen, eine Aufgabe, die Template-Engines wie Handlebars ermöglichen.
Handlebars ist eine minimale, logiklose Templating-Engine für NodeJS. Es ist eine Erweiterung der Moustache-Template-Engine. Da es sich um eine logiklose Engine handelt, können Sie damit die Präsentation strikt vom zugrunde liegenden Code trennen.
Handlebars wird als Templating-Engine vom NestJS-Framework hervorragend unterstützt.
Was ist eine Templating-Engine?
Eine Templating-Engine ist ein Tool, das HTML-Tags und eine Programmiersprache kombiniert, um eine HTML-Vorlage mit minimalem Code zu erstellen.
Die Vorlagen-Engine fügt zur Laufzeit Daten in die HTML-Vorlage ein, um die endgültige Ansicht im Browser zu rendern.
Möglicherweise finden Sie es kompliziert, eine Templating-Engine wie Handlebars einzurichten, da viele Schritte erforderlich sind. Jedoch,
das Express-Server-Framework die NestJS standardmäßig verwendet, bietet eine hervorragende Unterstützung für Handlebars.Schritt 1: Generieren Sie eine NestJS-Anwendung
Führen Sie den folgenden Befehl aus, um eine neue Nest-Anwendung zu erstellen:
Nest neu <Name Ihrer App>
Schritt 2: Installieren Sie den Lenker
Führen Sie den folgenden Befehl aus, um Handlebars mit zu installieren der npm-Paketmanager:
npm install express-handlebars@^5.3.0@Typen/express-handlebars@^5.3.0
Schritt 3: Express-Instanz konfigurieren
Navigieren Sie zu Ihrer main.ts Datei und Import NestExpress-Anwendung aus @nestjs/platform-express.
Weisen Sie NestExpressApplication als generischen Typ der zu schaffen Methode.
So:
konst Anwendung = erwarten NestFactory.create(AppModul)
Übergeben von NestExpressApplication an die App -Objekt gibt ihm Zugriff auf ExpressJS-exklusive Methoden. Sie benötigen diese Methoden, um bestimmte Handlebars-Eigenschaften zu konfigurieren.
Schritt 4: Lenker konfigurieren
Zunächst müssen Sie die Speicherorte angeben, an denen Ihre Anwendung die HTML- und andere statische Dateien (Stylesheets, Bilder usw.) finden wird. Sie können Ihre HTML-Dateien in einem „Ansichten“-Ordner und andere statische Dateien in einem „Öffentlichkeit“-Ordner bzw.
Um die Speicherorte anzugeben, beginnen Sie mit dem Importieren beitreten aus Weg. Dann, innerhalb der Bootstrap Funktion, legen Sie den Speicherort für die Stile fest.
So:
app.useStaticAssets (join (__dirname, '..', 'Öffentlichkeit'))
Die Join-Funktion nimmt eine beliebige Anzahl von Schnur Argumente, verbindet sie und normalisiert den resultierenden Pfad. __dirname gibt den Pfad des Ordners zurück, in dem sich die main.ts Datei liegt.
Legen Sie als Nächstes den Speicherort für Ihre HTML-Dateien wie folgt fest:
app.setBaseViewsDir (join (__dirname, '..', 'Ansichten'));
Als nächstes importieren Sie Handlebars in Ihre main.ts Datei:
importieren * wie hbs aus 'Express-Lenker';
Du brauchst die hbs import zum Konfigurieren von Handlebars-Eigenschaften wie dem Erweiterungsnamen usw.
Der standardmäßige Dateierweiterungsname für Handlebars lautet .Lenker.
Dieser Erweiterungsname ist lang, aber Sie können ihn mit konfigurieren app.engine Anruf. app.engine ist eine native Wrapper-Funktion um die express.engine Methode. Es braucht zwei Argumente: ext und eine Callback-Funktion. Siehe die Express-Dokumentation auf app.engine um mehr darüber zu erfahren.
Anruf app.engine(), und übergeben Sie als erstes Argument die Zeichenfolge „hbs“. Rufen Sie dann als zweites Argument die Funktion hbs auf und übergeben Sie ein Konfigurationsobjekt mit einer Eigenschaft Nebenname einstellen 'hbs'. Diese Einstellung ändert den Erweiterungsnamen von .handlebars in .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Stellen Sie schließlich die Ansichts-Engine wie folgt auf Handlebars ein:
app.setViewEngine('hbs');
Schritt 5: Ordner erstellen
Erstellen Sie im Stammverzeichnis Ihres Projekts zwei neue Ordner. Sie werden die erste verwenden, Öffentlichkeit, um die Stylesheets für Ihre Anwendung zu speichern. Im Ansichtenspeichern Sie alle Ihre HTML-Dateien.
Damit ist die Einrichtung Ihrer Entwicklungsumgebung abgeschlossen. Im nächsten Abschnitt erhalten Sie einen Überblick über die Handlebars-Syntax und ihre Verwendung in einer NestJS-Anwendung.
Die Lenker-Syntax
Dieser Abschnitt behandelt den Großteil der handlebars-Syntax, die Sie benötigen, um Ihre Dateien dynamisch bereitzustellen.
Helfer
Helfer sind Funktionen, die die Ausgabe umwandeln, über Daten iterieren und bedingte Ausgaben rendern.
Handlebars bietet zwei Arten von Helfern (blockiert und integriert) und Sie können benutzerdefinierte Helfer erstellen, die Ihren Anforderungen entsprechen.
Sie kennzeichnen einen Helfer, indem Sie ihn in doppelte geschweifte Klammern einschließen. Stellen Sie seinem Namen eine Raute (#) für ein öffnendes Hilfs-Tag und einen Schrägstrich (/) für ein schließendes Tag voran.
Zum Beispiel:
{{!-- wenn der Wert ist Stimmt, wird das div gerendert anders, wird es nicht --}}
{{#if Wert}}
<div>Der Wert wurde gerendert</div>
{{/wenn}}
Wenn Sie einen benutzerdefinierten Helfer erstellen, müssen Sie ihn in Ihrem registrieren hbs Konfigurationsobjekt in Ihrer main.ts Datei, bevor Sie sie in Ihrer Anwendung verwenden können.
// main.ts
importieren { customHelper } aus './helpers/hbs.helpers';
// Innerhalb der Bootstrap-Funktion
app.engine('hbs', hbs({ extname: 'hbs', Helfer: { customHelper } }));
Ausdrücke
Ausdrücke sind die Einheit einer Lenkervorlage. Ihre Verwendung von Ausdrücken hängt von der Komplexität der Aufgabe ab. Sie können sie allein in einer Vorlage verwenden, sie als Eingabe an Helfer übergeben und vieles mehr.
Kennzeichnen Sie Ausdrücke mit doppelten geschweiften Klammern, zum Beispiel:
<h1>{{Botschaft}}</h1>
Partielle
Ein Partial bezieht sich auf ein vorab gespeichertes HTML-Element, da es in mehreren HTML-Dateien erscheint. Zum Beispiel Navigationsleisten und Fußzeilen. Sie können diesen Inhalt in einer Datei speichern und bei Bedarf einfügen.
Wie bei Ihren statischen und HTML-Dateien müssen Sie auch ein Partials-Verzeichnis in Ihrem festlegen app.engine Konfigurationsobjekt.
Registrieren Sie Ihr Partials-Verzeichnis, indem Sie Ihrem Konfigurationsobjekt den folgenden Code hinzufügen:
// main.ts
partialsDir: join (__dirname, '..', 'Ansichten/Teile'),
Sie können mit der Partial-Call-Syntax auf einen Partial zugreifen. Geben Sie in doppelten geschweiften Klammern ein Größer-als-Symbol (>) gefolgt vom Namen des Teiltons ein.
Zum Beispiel:
{{> nameOfPartial}}
Grundrisse
Ein Handlebars-Layout ist eine HTML-Seite, die verwendet wird, um zugrunde liegende Metadaten oder die allgemeine Struktur für andere HTML-Seiten in der Anwendung festzulegen. Es fungiert als Container mit einem Platzhalter, in den Sie dynamische Daten einfügen können.
Zum Beispiel:
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Metazeichensatz="UTF-8">
<meta http-equiv="X-UA-kompatibel" Inhalt="IE=Rand">
<metaname="Ansichtsfenster" Inhalt="width=Gerätebreite, initial-scale=1.0">
<Titel>Templating in NestJS mit Handlebars</title>
</head>
<Karosserie>
<Header>
{{!-- Navigationsleiste teilweise --}}
{{>Navigationsleiste}}
</header>
<div>
{{!-- Körperplatzhalter --}}
{{{Karosserie}}}
</div>
{{!-- Fußzeile teilweise --}}
{{>Fusszeile}}
</body>
</html>
Wenn Sie Ihren Code ausführen, übernimmt Handlebars den Inhalt der .hbs Datei, die Sie rendern möchten, und fügt sie in die ein Karosserie Platzhalter. Dann wird das Ergebnis als endgültige HTML-Seite gerendert.
Sie müssen Ihr Layouts-Verzeichnis in Ihrem registrieren app.engine Konfigurationsobjekt und legen Sie eine Standardlayoutdatei fest. Eine Standardlayoutdatei ist die Layoutdatei, die Handlebars verwendet, wenn Sie kein bestimmtes Layout definieren.
Fügen Sie Ihrem Konfigurationsobjekt den folgenden Code hinzu, um ein Standardlayout zu deklarieren und ein Layoutverzeichnis zu registrieren:
Standardlayout: 'Name der Layoutdatei',
layoutsDir: join (__dirname, '..', 'Ansichten/Layouts'),
Rendern einer .hbs-Datei
Importieren Sie in Ihrer Controller-Datei die Auflösung Dekorateur aus @nestjs/common und Antwort aus ausdrücken.
Übergeben Sie dann in Ihrem Routenhandler ein Argument, res. Weisen Sie res einen Response-Typ zu und kommentieren Sie ihn mit dem Res-Decorator. Der Res-Decorator legt die nativen Antwortenbehandlungsmethoden von Express offen und deaktiviert den NestJS-Standardansatz.
Rufen Sie als Nächstes die Methode render für res auf und übergeben Sie den Namen der Datei, die Sie rendern möchten, als erstes Argument. Übergeben Sie als zweites Argument ein Objekt, das den Namen des Layouts und den Ersatzwert für einen Ausdruck enthält.
Der Lenker verwendet das in Ihrem eingestellte Standardlayout app.engine Konfigurationsobjekt, wenn Sie kein Layout bereitstellen.
@Erhalten()
getHallo(@Res() Auflösung: Antwort){
return res.render('Name der Datei', { Layout: 'Name des Layouts', Botschaft: 'Hallo Welt' });
}
Alternativen zum Lenker
Handlebars ist ein hervorragendes Templating-Tool mit vielen praktischen Funktionen wie Helfern und Layouts. Abhängig von Ihren Anforderungen können Sie jedoch eine Alternative wie EJS (Embedded JavaScript), Pug oder Moustache auswählen.