Heim > Artikel > Web-Frontend > Grundlegendes zur Template Engine in Node (Erste Schritte)

Grundlegendes zur Template Engine in Node (Erste Schritte)

青灯夜游nach vorne: 2020-10-30 17:38:312021Durchsuche

Empfohlenes Tutorial: node js-Tutorial

In diesem Artikel stellen wir vor, wie Sie die Steering-Template-Engine mit Node.js und Express verwenden. Außerdem stellen wir vor, was eine Template-Engine ist und wie man mit Handlers Webanwendungen für serverseitiges Rendering (SSR) erstellt. Node.js和Express来使用 Handlebars 模板引擎。还会介绍什么是模板引擎，以及如何使用把 Handlebars 建服务器端渲染(SSR) web应用程序。

我们还将讨论如何使用 Express.js 框架配置 Handlebars ，以及如何使用内置helpers 创建动态页面。最后，我们将了解如何在需要时开发自定义helper。

什么是模板引擎

早在上世纪90年代，当互联网出现时，它主要用于科学目的，比如发表研究论文，以及作为大学和科学家之间的沟通渠道。那时的大多数网页都是静态的。静态web页面对每个用户都是相同的，不会根据每个用户而改变，如果要更改页面上的任何内容，都必须手动完成。

在现代世界中，事物的互动性更强，并且为每个用户量身定制。今天，几乎每个人都能访问互联网。现在的大多数web应用程序都是动态的。例如，在一些购物网站上，不同用户登录的界面，展示是不一样的，所谓的千人千面。对于每个人来说，页面将遵循相同的模板(即上面有用户名的连续发布)，但是内容将是不同的。

模板引擎的工作内容：定义展示内容模板，然后根据当前用户和对数据库的查询，用接收到的内容填充模板。

我们可以在后端和前端使用模板引擎。如果我们在后端使用模板引擎来生成HTML，这种方式叫做服务器端渲染(SSR)。

Handlebars

Handlebars 在后端和前端模板中都很流行。例如，流行的前端框架Ember就是使用Handlebars作为模板引擎。

Handlebars 是Mustache模板语言的扩展，Mustache 模板语言主要专注于简单性和最小的模板。

在 Node.js 中使用 Handlebars

首先，创建一个空文件夹，然后打开终端，然后运行npm init -y以默认配置建一个空的 Node.js 项目。

开始之前，我们需要安装所需的Node.js库。通过运行以下命令来安装express和express-handlebars模块：

npm install --save express express-handlebars

注意:在服务器端使用 Handlebars 时，你可能会使用一个像express-handlebars这样的帮助模块，它将Handlebars与web框架集成在一起。在本文中，我们主要关注模板语法，这也是我们使用express-handlebars的原因，但是如果你自己处理模板编译和渲染，还需要看 compilation API reference 对应的文档说明。

然后，重新创建默认的 Handlebars 目录结构。 views 文件夹包含所有Handlebars 手模板：

├── app.js
└── views
    ├── home.hbs
    └── layouts
        └── main.hbs

views文件夹内的layouts文件夹将包含布局或模板包装器。这些布局将包含模板之间共享的HTML结构，样式表和脚本。

main.hbs文件是主布局，home.hbs文件是我们要构建的示例Handlebars模板。

在我们的示例中，我们使用一个脚本来保持简单性。首先，在app.js文件中导入所需的库:

const express = require('express');
const exphbs = require('express-handlebars');

然后，创建一个Express app

const app = express();

现在，我们可以配置express-handlebars作为我们的视图引擎:

const express = require('express');
const exphbs = require('express-handlebars');


const app = express();

app.engine('hbs', exphbs({
  defaultLayout: 'main',
  extname: '.hbs'
}))

app.set('view engine', 'hbs');

默认情况下，Handlebars 模板的扩展名是.handlebars。但是在这里的设置中，我们通过extname标志将其更改为.hbs，因为它更短。

接着，在main.hbs布局添加Bootstrap脚本和样式：

在home.hb添加如下内容：

<h1>Hello World from Handlebars</h1>

在 app.js 中添加对应的路由配置：

app.get('/', (req, res) => {
    res.render('home');
});

然后，添加如果监听的端口号：

app.listen(3000, () => {
    console.log('The web server has started on port 3000');
});

这样就可以在控制台中运行node app.js启动应用程序。

但是我们也可以选择使用诸如nodemon之类的工具。使用nodemon，我们在改代码时不需要每次都要重新启动服务器，nodemon会自动刷新服务器。

盘它：

 npm i -g nodemon

安装后，运行：

 nodemon app.js

在浏览器中打开 http://localhost:3000/

Wir besprechen außerdem, wie man Lenker mit dem Express.js-Framework konfiguriert und wie man dynamische Seiten mit den integrierten Helfern erstellt. Abschließend erfahren Sie, wie Sie bei Bedarf einen benutzerdefinierten Helfer entwickeln.

Was ist eine Template-Engine?

Grundlegendes zur Template Engine in Node (Erste Schritte)

In den 1990er Jahren, als das Internet aufkam, wurde es hauptsächlich für wissenschaftliche Zwecke wie die Veröffentlichung von Forschungsarbeiten und als Kommunikationskanal zwischen Universitäten und Wissenschaftlern genutzt. Die meisten Webseiten waren damals statisch. Statische Webseiten sind für jeden Benutzer gleich und ändern sich nicht für jeden Benutzer. Wenn Sie etwas auf der Seite ändern möchten, müssen Sie dies manuell tun. 🎜In der modernen Welt sind die Dinge interaktiver und für jeden Benutzer individuell anpassbar. Heutzutage hat fast jeder Zugang zum Internet. Die meisten Webanwendungen sind heutzutage dynamisch. Beispielsweise werden auf einigen Shopping-Websites die Benutzeroberflächen für die Anmeldung verschiedener Benutzer unterschiedlich angezeigt, sodass sogenannte Tausende von Personen unterschiedliche Ansichten haben. Die Seite folgt für alle der gleichen Vorlage (d. h. aufeinanderfolgende Beiträge mit dem Benutzernamen), aber der Inhalt wird unterschiedlich sein. 🎜🎜Der Arbeitsinhalt der Vorlagen-Engine: Definieren Sie die Anzeigeinhaltsvorlage und füllen Sie die Vorlage dann mit dem empfangenen Inhalt basierend auf dem aktuellen Benutzer und der Abfrage an die Datenbank. 🎜🎜Wir können die Template-Engine sowohl im Backend als auch im Frontend verwenden. Wenn wir eine Template-Engine im Backend verwenden, um HTML zu generieren, wird diese Methode Server-side Rendering (SSR) genannt. 🎜

Lenker

🎜Lenker sind sowohl in Backend- als auch Frontend-Vorlagen beliebt. Beispielsweise verwendet das beliebte Front-End-Framework Ember Handlebars als Template-Engine. 🎜🎜Handlebars ist eine Erweiterung der Mustache-Vorlagensprache, die sich hauptsächlich auf Einfachheit und minimale Vorlagen konzentriert. 🎜

Verwenden von Handles in Node.js

🎜Erstellen Sie zunächst einen leeren Ordner, öffnen Sie dann ein Terminal und führen Sie dann npm init -y aus, um einen leeren Knoten mit Standardkonfiguration zu erstellen. js-Projekt. 🎜🎜Bevor wir beginnen, müssen wir die erforderlichen Node.js-Bibliotheken installieren. Installieren Sie die Module express und express-handlebars, indem Sie den folgenden Befehl ausführen: 🎜🎜npm install --save express express-handlebars🎜🎜Hinweis: Wenn Sie Handlebars auf der Serverseite verwenden, können Sie ein Hilfsmodul wie express-handlebars verwenden, das Handlebars in das Web-Framework integriert. In diesem Artikel konzentrieren wir uns hauptsächlich auf die Vorlagensyntax, weshalb wir express-handlebars verwenden. Wenn Sie sich jedoch selbst mit der Vorlagenkompilierung und dem Rendern befassen, müssen Sie auch die Dokumentation lesen, die der Kompilierungs-API-Referenz entspricht . 🎜🎜Dann erstellen Sie die Standard-Verzeichnisstruktur „Lenkers“ neu. Der Ordner views enthält alle Handvorlagen für Lenker: 🎜

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Grundlegendes zur Template Engine in Node (Erste Schritte)" >
                </p><p>
                    </p><h5>此文章由 前端小智 发布</h5>

期待你们的留言/li>
期待你们的留言

🎜 Der Ordner layouts im Ordner views enthält das Layout oder den Vorlagen-Wrapper. Diese Layouts enthalten HTML-Strukturen, Stylesheets und Skripte, die von den Vorlagen gemeinsam genutzt werden. 🎜🎜Die Datei main.hbs ist das Hauptlayout und die Datei home.hbs ist die Beispielvorlage für Lenker, die wir erstellen möchten. 🎜🎜In unserem Beispiel verwenden wir ein Skript, um es einfach zu halten. Importieren Sie zunächst die erforderlichen Bibliotheken in die Datei app.js: 🎜

app.get('/', function (req, res) {
    res.render('home', {
        post: {
            author: '小智',
            image: 'https://picsum.photos/500/500',
            comments: []
        }
    });
});

🎜Dann erstellen Sie eine Express-App 🎜

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Grundlegendes zur Template Engine in Node (Erste Schritte)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>

期待你们的留言/li>
期待你们的留言

🎜Jetzt können wir express-handlebars als unsere Ansicht konfigurieren Engine: 🎜

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Grundlegendes zur Template Engine in Node (Erste Schritte)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}

期待你们的留言

{{/if}} 🎜Standardmäßig lautet die Erweiterung der Lenkervorlage .handlebars. Aber im Setup hier haben wir es über das Flag extname in .hbs geändert, weil es kürzer ist. 🎜🎜Als nächstes fügen Sie das Bootstrap-Skript und den Stil zum main.hbs-Layout hinzu: 🎜🎜Fügen Sie den folgenden Inhalt zu home.hb hinzu: 🎜

app.get('/', function (req, res) {
  res.render('home', {
      post: {
          author: '小智',
          image: 'https://picsum.photos/500/500',
          comments: [
            '前端小智终身学习者',
            '前端小智持续分享者',
            '虽然没啥流量，但也希望你也能坚持分享下去，帮助更多的初学者'
          ]
      }
  });
});

🎜Fügen Sie in app.js die entsprechende Routing-Konfiguration hinzu: 🎜

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Grundlegendes zur Template Engine in Node (Erste Schritte)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}

{{this}}

期待你们的留言

{{/if}} 🎜Dann fügen Sie die Nummer des Überwachungsports hinzu: 🎜

app.get('/', function (req, res) {
  res.render('home', {
      posts: [
        {
          author: '小智',
          image: 'https://picsum.photos/500/500',
          comments: [
            '前端小智终身学习者',
            '前端小智持续分享者',
            '虽然没啥流量，但也希望你也能坚持分享下去，帮助更多的初学者'
          ]
        },
        {
          author: '前端大智',
          image: 'https://picsum.photos/500/500?2',
          comments: []
        }
      ]
  });
});

🎜Damit Sie node app.js ausführen können in der Konsole Starten Sie die Anwendung. 🎜🎜Aber wir können uns auch für den Einsatz von Tools wie Nodemon entscheiden. Mit nodemon müssen wir den Server nicht jedes Mal neu starten, wenn der Code geändert wird. nodemon aktualisiert den Server automatisch. 🎜🎜Disketten Sie es: 🎜

<p>
    </p><p>
      {{#each posts}}
        </p><p>
            </p><p>
                <img  alt="Grundlegendes zur Template Engine in Node (Erste Schritte)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if this.comments}}

{{this}}

期待你们的留言

{{/if}} {{/each}} 🎜Führen Sie nach der Installation Folgendes aus: 🎜rrreee🎜Öffnen Sie http://localhost:3000/ in Ihrem Browser: 🎜🎜🎜🎜

Handlebars 更多功能

为了展示一些Handlebars功能，我们将构建一个社交媒体类的网站。这里我们用一个简单的数组来模拟数据库。

将home.hbs内容更新成如下：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Grundlegendes zur Template Engine in Node (Erste Schritte)" >
                </p><p>
                    </p><h5>此文章由 前端小智 发布</h5>

期待你们的留言/li>
期待你们的留言

上面我们添加了一个 navbar 和一个帖子的展示内容 card，运行效果如下：

Grundlegendes zur Template Engine in Node (Erste Schritte)

向模板传递参数

现在，让我们从页面本身中删除这些硬编码的值，这些值由路由传递进来，在 app.js 中修改如下内容：

app.get('/', function (req, res) {
    res.render('home', {
        post: {
            author: '小智',
            image: 'https://picsum.photos/500/500',
            comments: []
        }
    });
});

post 对象包含author,image和comments等字段。我们可以在 Handlebars模板使用{{post}}来引用这些值：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Grundlegendes zur Template Engine in Node (Erste Schritte)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>

期待你们的留言/li>
期待你们的留言

效果如下：

Grundlegendes zur Template Engine in Node (Erste Schritte)

使用条件

由于这里需要一些逻辑判断，即 comments 没数据不显示，我们看看如何在Handlebars 模板中使用条件：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Grundlegendes zur Template Engine in Node (Erste Schritte)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}

期待你们的留言

这里我们的 comments 为空，所以显示了 期待你们的留言。

Grundlegendes zur Template Engine in Node (Erste Schritte)

#if是把 Handlebars 的内置帮助器。如果if语句返回true，则将渲染#if块内部的块。如果返回false，undefined，null，""，0或[]，则不会渲染该块。

#if仅接受一个条件，并且不能使用 JS 比较语法（===）。如果需要使用多个条件或其他语法，则可以在代码中创建一个变量，然后将其传递给模板。另外，你可以定义自己的 helper ，我们将在上一节中进行操作。

使用循环

由于帖子可以包含多个评论，因此我们需要一个循环渲染它们。首先，我们先添加一些数据：

app.get('/', function (req, res) {
  res.render('home', {
      post: {
          author: '小智',
          image: 'https://picsum.photos/500/500',
          comments: [
            '前端小智终身学习者',
            '前端小智持续分享者',
            '虽然没啥流量，但也希望你也能坚持分享下去，帮助更多的初学者'
          ]
      }
  });
});

现在，在我们的模板中，使用#each循环遍历它们：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Grundlegendes zur Template Engine in Node (Erste Schritte)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}

{{this}}

期待你们的留言

在#each循环中，可以使用this来引用当前迭代中的元素。在我们的示例中，它引用了一个随后被渲染的字符串

Grundlegendes zur Template Engine in Node (Erste Schritte)

如果posts是一个对象数组，你也可以访问该对象的任何属性。例如，如果有一个人员数组，你可以简单地使用this.name来访问name字段。

现在，为我们的 posts 添加多个数据:

app.get('/', function (req, res) {
  res.render('home', {
      posts: [
        {
          author: '小智',
          image: 'https://picsum.photos/500/500',
          comments: [
            '前端小智终身学习者',
            '前端小智持续分享者',
            '虽然没啥流量，但也希望你也能坚持分享下去，帮助更多的初学者'
          ]
        },
        {
          author: '前端大智',
          image: 'https://picsum.photos/500/500?2',
          comments: []
        }
      ]
  });
});

然后，使用#each来遍历 posts：

<p>
    </p><p>
      {{#each posts}}
        </p><p>
            </p><p>
                <img  alt="Grundlegendes zur Template Engine in Node (Erste Schritte)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if this.comments}}

{{this}}

期待你们的留言

总结

在本文中，我们介绍了Handlebars的基础知识，Handlebars 是Node.js 和前端JavaScript 的模板引擎。使用 Handlebars，我们可以创建在服务器端或客户端渲染的动态网页。使用 Handlebars 的条件，循环，局部和自定义帮助器功能，我们的网页将不仅仅是静态HTML。

原文地址：https://stackabuse.com/guide-to-handlebars-engine-for-node/

作者：Janith Kasun

译者：前端小智

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonGrundlegendes zur Template Engine in Node (Erste Schritte). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Einführung des Front-End-DateiflussflieNächster Artikel：Einführung des Front-End-Dateiflussflie

In Verbindung stehende Artikel

Mehr sehen