這篇文章主要介紹了Node中的模板引擎是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
在本文中，我們將介紹如何用Node.js和Express來使用 Handlebars 模板引擎。還會介紹什么是模板引擎，以及如何使用把 Handlebars 建服務(wù)器端渲染(SSR) web應(yīng)用程序。
我們還將討論如何使用Express.js 框架配置 Handlebars ，以及如何使用內(nèi)置helpers 創(chuàng)建動態(tài)頁面。最后，我們將了解如何在需要時開發(fā)自定義helper。
早在上世紀(jì)90年代，當(dāng)互聯(lián)網(wǎng)出現(xiàn)時，它主要用于科學(xué)目的，比如發(fā)表研究論文，以及作為大學(xué)和科學(xué)家之間的溝通渠道。那時的大多數(shù)網(wǎng)頁都是靜態(tài)的。靜態(tài)web頁面對每個用戶都是相同的，不會根據(jù)每個用戶而改變，如果要更改頁面上的任何內(nèi)容，都必須手動完成。
在現(xiàn)代世界中，事物的互動性更強(qiáng)，并且為每個用戶量身定制。今天，幾乎每個人都能訪問互聯(lián)網(wǎng)?，F(xiàn)在的大多數(shù)web應(yīng)用程序都是動態(tài)的。例如，在一些購物網(wǎng)站上，不同用戶登錄的界面，展示是不一樣的，所謂的 千人千面。對于每個人來說，頁面將遵循相同的模板(即上面有用戶名的連續(xù)發(fā)布)，但是內(nèi)容將是不同的。
模板引擎的工作內(nèi)容：定義展示內(nèi)容模板，然后根據(jù)當(dāng)前用戶和對數(shù)據(jù)庫的查詢，用接收到的內(nèi)容填充模板。
我們可以在后端和前端使用模板引擎。如果我們在后端使用模板引擎來生成HTML，這種方式叫做服務(wù)器端渲染(SSR)。
Handlebars 在后端和前端模板中都很流行。例如，流行的前端框架Ember就是使用Handlebars作為模板引擎。
Handlebars 是Mustache模板語言的擴(kuò)展，Mustache 模板語言主要專注于簡單性和最小的模板。
首先，創(chuàng)建一個空文件夾，然后打開終端，然后運行npm init -y以默認(rèn)配置建一個空的 Node.js 項目。
開始之前，我們需要安裝所需的Node.js庫。 通過運行以下命令來安裝express和express-handlebars模塊：
npm install --save express express-handlebars
注意:在服務(wù)器端使用Handlebars 時，你可能會使用一個像express-handlebars這樣的幫助模塊，它將Handlebars與web框架集成在一起。在本文中，我們主要關(guān)注模板語法，這也是我們使用express-handlebars的原因，但是如果你自己處理模板編譯和渲染，還需要看 compilation API reference 對應(yīng)的文檔說明。
然后，重新創(chuàng)建默認(rèn)的 Handlebars 目錄結(jié)構(gòu)。views 文件夾包含所有Handlebars 手模板：
重慶分公司
重慶分公司
├── app.js
└── views
├── home.hbs
└── layouts
└── main.hbsviews文件夾內(nèi)的layouts文件夾將包含布局或模板包裝器。 這些布局將包含模板之間共享的HTML結(jié)構(gòu)，樣式表和腳本。
main.hbs文件是主布局，home.hbs文件是我們要構(gòu)建的示例Handlebars模板。
在我們的示例中，我們使用一個腳本來保持簡單性。首先，在app.js文件中導(dǎo)入所需的庫:
const express = require('express');
const exphbs = require('express-handlebars');然后，創(chuàng)建一個Express app
const app = express();
現(xiàn)在，我們可以配置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');默認(rèn)情況下，Handlebars 模板的擴(kuò)展名是.handlebars。 但是在這里的設(shè)置中，我們通過extname標(biāo)志將其更改為.hbs，因為它更短。
接著，在main.hbs布局添加Bootstrap腳本和樣式：
在home.hb添加如下內(nèi)容：
Hello World from Handlebars
在app.js 中添加對應(yīng)的路由配置：
app.get('/', (req, res) => {
res.render('home');
});然后，添加如果監(jiān)聽的端口號：
app.listen(3000, () => {
console.log('The web server has started on port 3000');
});這樣就可以在控制臺中運行node app.js啟動應(yīng)用程序。
但是我們也可以選擇使用諸如nodemon之類的工具。 使用nodemon，我們在改代碼時不需要每次都要重新啟動服務(wù)器，nodemon會自動刷新服務(wù)器。
盤它：
npm i -g nodemon
安裝后，運行：
nodemon app.js
在瀏覽器中打開http://localhost:3000/：
為了展示一些Handlebars功能，我們將構(gòu)建一個社交媒體類的網(wǎng)站。 這里我們用一個簡單的數(shù)組來模擬數(shù)據(jù)庫。
將home.hbs內(nèi)容更新成如下：
此文章由 前端小智 發(fā)布
上面我們添加了一個navbar 和一個帖子的展示內(nèi)容card，運行效果如下：
現(xiàn)在，讓我們從頁面本身中刪除這些硬編碼的值，這些值由路由傳遞進(jìn)來， 在app.js 中修改如下內(nèi)容 ：
app.get('/', function (req, res) {
res.render('home', {
post: {
author: '小智',
image: 'https://picsum.photos/500/500',
comments: []
}
});
});post 對象包含author,image和comments等字段。 我們可以在 Handlebars模板使用{{post}}來引用這些值：
此文章由 {{post.author}} 發(fā)布
效果如下：
由于這里需要一些邏輯判斷，即comments 沒數(shù)據(jù)不顯示，我們看看如何在Handlebars 模板中使用條件：
此文章由 {{post.author}} 發(fā)布
{{#if post.comments}}
這里我們的 comments 為空，所以顯示了期待你們的留言。
#if是把 Handlebars 的內(nèi)置幫助器。 如果if語句返回true，則將渲染#if塊內(nèi)部的塊。 如果返回false，undefined，null，""，0或[]，則不會渲染該塊。
#if僅接受一個條件，并且不能使用 JS 比較語法（===）。 如果需要使用多個條件或其他語法，則可以在代碼中創(chuàng)建一個變量，然后將其傳遞給模板。 另外，你可以定義自己的 helper ，我們將在上一節(jié)中進(jìn)行操作。
由于帖子可以包含多個評論，因此我們需要一個循環(huán)渲染它們。 首先，我們先添加一些數(shù)據(jù)：
app.get('/', function (req, res) {
res.render('home', {
post: {
author: '小智',
image: 'https://picsum.photos/500/500',
comments: [
'前端小智終身學(xué)習(xí)者',
'前端小智持續(xù)分享者',
'雖然沒啥流量，但也希望你也能堅持分享下去，幫助更多的初學(xué)者'
]
}
});
});現(xiàn)在，在我們的模板中，使用#each循環(huán)遍歷它們：
此文章由 {{post.author}} 發(fā)布
{{#if post.comments}}
在#each循環(huán)中，可以使用this來引用當(dāng)前迭代中的元素。在我們的示例中，它引用了一個隨后被渲染的字符串
如果posts是一個對象數(shù)組，你也可以訪問該對象的任何屬性。例如，如果有一個人員數(shù)組，你可以簡單地使用this.name來訪問name字段。
現(xiàn)在，為我們的posts 添加多個數(shù)據(jù):
app.get('/', function (req, res) {
res.render('home', {
posts: [
{
author: '小智',
image: 'https://picsum.photos/500/500',
comments: [
'前端小智終身學(xué)習(xí)者',
'前端小智持續(xù)分享者',
'雖然沒啥流量，但也希望你也能堅持分享下去，幫助更多的初學(xué)者'
]
},
{
author: '前端大智',
image: 'https://picsum.photos/500/500?2',
comments: []
}
]
});
});然后，使用#each來遍歷posts：
{{#each posts}}
此文章由 {{post.author}} 發(fā)布
{{#if this.comments}}
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享Node中的模板引擎是什么內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來學(xué)習(xí)!
