簡(jiǎn)介
在本文中，我們將介紹如何用Node.js和Express來(lái)使用 Handlebars 模板引擎。還會(huì)介紹什么是模板引擎，以及如何使用把 Handlebars 建服務(wù)器端渲染(SSR) web應(yīng)用程序。

創(chuàng)新互聯(lián)公司主營(yíng)鷹潭網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,App定制開(kāi)發(fā),鷹潭h5成都小程序開(kāi)發(fā)搭建,鷹潭網(wǎng)站營(yíng)銷推廣歡迎鷹潭等地區(qū)企業(yè)咨詢

我們還將討論如何使用 Express.js 框架配置 Handlebars ，以及如何使用內(nèi)置helpers創(chuàng)建動(dòng)態(tài)頁(yè)面。最后，我們將了解如何在需要時(shí)開(kāi)發(fā)自定義helper 。

什么是模板引擎
早在上世紀(jì)90年代，當(dāng)互聯(lián)網(wǎng)出現(xiàn)時(shí)，它主要用于科學(xué)目的，比如發(fā)表研究論文，以及作為大學(xué)和科學(xué)家之間的溝通渠道。那時(shí)的大多數(shù)網(wǎng)頁(yè)都是靜態(tài)的。靜態(tài)web頁(yè)面對(duì)每個(gè)用戶都是相同的，不會(huì)根據(jù)每個(gè)用戶而改變，如果要更改頁(yè)面上的任何內(nèi)容，都必須手動(dòng)完成。

在現(xiàn)代世界中，事物的互動(dòng)性更強(qiáng)，并且為每個(gè)用戶量身定制。今天，幾乎每個(gè)人都能訪問(wèn)互聯(lián)網(wǎng)?，F(xiàn)在的大多數(shù)web應(yīng)用程序都是動(dòng)態(tài)的。例如，在一些購(gòu)物網(wǎng)站上，不同用戶登錄的界面，展示是不一樣的，所謂的 千人千面。對(duì)于每個(gè)人來(lái)說(shuō)，頁(yè)面將遵循相同的模板(即上面有用戶名的連續(xù)發(fā)布)，但是內(nèi)容將是不同的 。

模板引擎的工作內(nèi)容：定義展示內(nèi)容模板，然后根據(jù)當(dāng)前用戶和對(duì)數(shù)據(jù)庫(kù)的查詢，用接收到的內(nèi)容填充模板。

我們可以在后端和前端使用模板引擎。如果我們?cè)诤蠖耸褂媚０逡鎭?lái)生成HTML，這種方式叫做服務(wù)器端渲染(SSR) 。

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

Handlebars 是Mustache模板語(yǔ)言的擴(kuò)展，Mustache 模板語(yǔ)言主要專注于簡(jiǎn)單性和最小的模板。

在 Node.js 中使用 Handlebars
首先，創(chuàng)建一個(gè)空文件夾，然后打開(kāi)終端，然后運(yùn)行npm init -y以默認(rèn)配置建一個(gè)空的 Node.js 項(xiàng)目。

開(kāi)始之前，我們需要安裝所需的Node.js庫(kù)。通過(guò)運(yùn)行以下命令來(lái)安裝express和express-handlebars模塊：

npm install --save express express-handlebars

**注意:**在服務(wù)器端使用 Handlebars 時(shí)，你可能會(huì)使用一個(gè)像express-handlebars這樣的幫助模塊，它將Handlebars與web框架集成在一起。在本文中，我們主要關(guān)注模板語(yǔ)法，這也是我們使用express-handlebars的原因，但是如果你自己處理模板編譯和渲染，還需要看 compilation API reference 對(duì)應(yīng)的文檔說(shuō)明 。

然后，重新創(chuàng)建默認(rèn)的 Handlebars 目錄結(jié)構(gòu)。views 文件夾包含所有Handlebars 手模板：

 
 
 
 

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

views文件夾內(nèi)的layouts文件夾將包含布局或模板包裝器。這些布局將包含模板之間共享的HTML結(jié)構(gòu)，樣式表和腳本。

main.hbs文件是主布局，home.hbs文件是我們要構(gòu)建的示例Handlebars模板。

在我們的示例中，我們使用一個(gè)腳本來(lái)保持簡(jiǎn)單性。首先，在app.js文件中導(dǎo)入所需的庫(kù):

 
 
 
 

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

然后，創(chuàng)建一個(gè)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è)置中，我們通過(guò)extname標(biāo)志將其更改為.hbs，因?yàn)樗獭?/p>

接著，在main.hbs布局添加Bootstrap腳本和樣式：

在home.hb添加如下內(nèi)容：

 
 
 
 

  
  
  
  
Hello World from Handlebars
 
 
 
 
 

在 app.js 中添加對(duì)應(yīng)的路由配置：

 
 
 
 

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

然后，添加如果監(jiān)聽(tīng)的端口號(hào)：

 
 
 
 

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

這樣就可以在控制臺(tái)中運(yùn)行node app.js啟動(dòng)應(yīng)用程序。

但是我們也可以選擇使用諸如nodemon之類的工具。使用nodemon，我們?cè)诟拇a時(shí)不需要每次都要重新啟動(dòng)服務(wù)器，nodemon會(huì)自動(dòng)刷新服務(wù)器。

盤(pán)它：

 
 
 
 

  
  
  
  
npm i -g nodemon 
 
 
 
 

安裝后，運(yùn)行：

 
 
 
 

  
  
  
  
nodemon app.js 
 
 
 
 

在瀏覽器中打開(kāi) http://localhost:3000/：

Handlebars 更多功能
為了展示一些Handlebars功能，我們將構(gòu)建一個(gè)社交媒體類的網(wǎng)站。這里我們用一個(gè)簡(jiǎn)單的數(shù)組來(lái)模擬數(shù)據(jù)庫(kù)。

將home.hbs內(nèi)容更新成如下：

 
 
 
 

  
  
  
  
 
  
  
  
  
    Book Face 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
         
  
  
  
  
             
  
  
  
  
 
  
  
  
  
                
  
  
  
  
                    class="card-img-top" alt="..."> 
  
  
  
  
                 
  
  
  
  
                    此文章由 前端小智 發(fā)布 
  
  
  
  
 
  
  
  
  
                     
  
  
  
  
                        期待你們的留言/li> 
  
  
  
  
                        期待你們的留言