Heim >Web-Frontend >js-Tutorial >Grundlegendes zur Template Engine in Node (Erste Schritte)
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 在后端和前端模板中都很流行。例如,流行的前端框架Ember就是使用Handlebars
作为模板引擎。
Handlebars 是Mustache模板语言的扩展,Mustache 模板语言主要专注于简单性和最小的模板。
首先,创建一个空文件夹,然后打开终端,然后运行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/
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.
Server-side Rendering (SSR)
genannt. 🎜Handlebars
als Template-Engine. 🎜🎜Handlebars ist eine Erweiterung der Mustache-Vorlagensprache, die sich hauptsächlich auf Einfachheit und minimale Vorlagen konzentriert. 🎜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>
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>
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}}
.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}}
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}}
http://localhost:3000/
in Ihrem Browser: 🎜🎜🎜🎜为了展示一些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>
上面我们添加了一个 navbar
和一个帖子的展示内容 card
,运行效果如下:
现在,让我们从页面本身中删除这些硬编码的值,这些值由路由传递进来, 在 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>
效果如下:
由于这里需要一些逻辑判断,即 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 为空,所以显示了 期待你们的留言
。
#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}}
在#each
循环中,可以使用this
来引用当前迭代中的元素。在我们的示例中,它引用了一个随后被渲染的字符串
如果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}}
在本文中,我们介绍了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!