入门指南：Node/JavaScript中的模板引擎

简介
在本文中，我们将介绍如何用Node.js和Express来使用 Handlebars 模板引擎。还会介绍什么是模板引擎，以及如何使用把 Handlebars 建服务器端渲染(SSR) web应用程序。

创新互联公司主营鹰潭网站建设的网络公司,主营网站建设方案,App定制开发,鹰潭h5成都小程序开发搭建,鹰潭网站营销推广欢迎鹰潭等地区企业咨询

我们还将讨论如何使用 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添加如下内容：

 
 
 
 
  
  
  
  Hello World from Handlebars

在 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/：

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

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

 
 
 
 
  
  
  
   
  
  
  
      Book Face 
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
       
  
  
  
           
  
  
  
               
  
  
  
   
  
  
  
                  
  
  
  
  
                    class="card-img-top" alt="..."> 
  
  
  
                   
  
  
  
                      此文章由 前端小智 发布 
  
  
  
   
  
  
  
                       
  
  
  
                          期待你们的留言/li> 
  
  
  
                          期待你们的留言

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

Book Face
class="card-img-top" alt="...">
此文章由 {{post.author}} 发布
期待你们的留言/li>
期待你们的留言

Book Face
class="card-img-top" alt="...">
此文章由 {{post.author}} 发布
{{#if post.comments}}
{{else}}
期待你们的留言
{{/if}}

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

Book Face
class="card-img-top" alt="...">
此文章由 {{post.author}} 发布
{{#if post.comments}}
{{#each post.comments}}
{{this}}
{{/each}}
{{else}}
期待你们的留言
{{/if}}

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}}
此文章由 {{post.author}} 发布
{{#if this.comments}}
{{#each this.comments}}
{{this}}
{{/each}}
{{else}}
期待你们的留言
{{/if}}
{{/each}}