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

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

[[347065]]

简介
在本文中,我们将介绍如何用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 手模板:

  1. ├── app.js 
  2. └── views 
  3.     ├── home.hbs 
  4.     └── layouts 
  5.         └── main.hbs 

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

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

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

  1. const express = require('express'); 
  2. const exphbs = require('express-handlebars'); 

然后,创建一个Express app

  1. const app = express(); 

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

  1. const express = require('express'); 
  2. const exphbs = require('express-handlebars'); 
  3.  
  4.  
  5. const app = express(); 
  6.  
  7. app.engine('hbs', exphbs({ 
  8.   defaultLayout: 'main'
  9.   extname: '.hbs' 
  10. })) 
  11.  
  12. app.set('view engine''hbs'); 

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

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

在home.hb添加如下内容:

  1. <h1>Hello World from Handlebars</h1> 

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

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

然后,添加如果监听的端口号:

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

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

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

盘它:

  1. npm i -g nodemon 

安装后,运行:

  1. nodemon app.js 

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

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

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

  1. <nav class="navbar navbar-dark bg-dark"
  2.     <a class="navbar-brand" href="#">Book Face</a> 
  3. </nav> 
  4.  
  5. <div class="posts"
  6.     <div class="row justify-content-center"
  7.         <div class="col-lg-7" style="margin-top: 50px;"
  8.             <div class="card"
  9.  
  10.                 <img src="https://picsum.photos/500/500" 
  11.                     class="card-img-top" alt="..."
  12.                 <div class="card-body"
  13.                     <h5 class="card-title">此文章由 前端小智 发布</h5> 
  14.  
  15.                     <ul class="list-group"
  16.                         <li class="list-group-item">期待你们的留言/li> 
  17.                         <li class="list-group-item">期待你们的留言</li> 
  18.                     </ul> 
  19.                 </div> 
  20.             </div> 
  21.         </div> 
  22.     </div> 
  23. </div> 

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

向模板传递参数
现在,让我们从页面本身中删除这些硬编码的值,这些值由路由传递进来, 在 app.js 中修改如下内容 :

  1. app.get('/'function (req, res) { 
  2.     res.render('home', { 
  3.         post: { 
  4.             author: '小智'
  5.             image: 'https://picsum.photos/500/500'
  6.             comments: [] 
  7.         } 
  8.     }); 
  9. }); 

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

  1. <nav class="navbar navbar-dark bg-dark"
  2.     <a class="navbar-brand" href="#">Book Face</a> 
  3. </nav> 
  4.  
  5. <div class="posts"
  6.     <div class="row justify-content-center"
  7.         <div class="col-lg-7" style="margin-top: 50px;"
  8.             <div class="card"
  9.  
  10.                 <img src="https://picsum.photos/500/500" 
  11.                     class="card-img-top" alt="..."
  12.                 <div class="card-body"
  13.                     <h5 class="card-title">此文章由 {{post.author}} 发布</h5> 
  14.  
  15.                     <ul class="list-group"
  16.                         <li class="list-group-item">期待你们的留言/li> 
  17.                         <li class="list-group-item">期待你们的留言</li> 
  18.                     </ul> 
  19.                 </div> 
  20.             </div> 
  21.         </div> 
  22.     </div> 
  23. </div> 

效果如下:

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

  1. <nav class="navbar navbar-dark bg-dark"
  2.     <a class="navbar-brand" href="#">Book Face</a> 
  3. </nav> 
  4.  
  5. <div class="posts"
  6.     <div class="row justify-content-center"
  7.         <div class="col-lg-7" style="margin-top: 50px;"
  8.             <div class="card"
  9.  
  10.                 <img src="https://picsum.photos/500/500" 
  11.                     class="card-img-top" alt="..."
  12.                 <div class="card-body"
  13.                     <h5 class="card-title">此文章由 {{post.author}} 发布</h5> 
  14.                     {{#if post.comments}} 
  15.                     <ul class="list-group"
  16.                     </ul> 
  17.                     {{else}} 
  18.                     <ul class="list-group"
  19.                         <li class="list-group-item">期待你们的留言</li> 
  20.                     </ul> 
  21.                     {{/if}} 
  22.                 </div> 
  23.             </div> 
  24.         </div> 
  25.     </div> 
  26. </div> 

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

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

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

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

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

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

  1. <nav class="navbar navbar-dark bg-dark"
  2.     <a class="navbar-brand" href="#">Book Face</a> 
  3. </nav> 
  4.  
  5. <div class="posts"
  6.     <div class="row justify-content-center"
  7.         <div class="col-lg-7" style="margin-top: 50px;"
  8.             <div class="card"
  9.  
  10.                 <img src="https://picsum.photos/500/500" 
  11.                     class="card-img-top" alt="..."
  12.                 <div class="card-body"
  13.                     <h5 class="card-title">此文章由 {{post.author}} 发布</h5> 
  14.                     {{#if post.comments}} 
  15.                     <ul class="list-group"
  16.                       {{#each post.comments}} 
  17.                       <li class="list-group-item">{{this}}</li> 
  18.                       {{/each}} 
  19.                     </ul> 
  20.                     {{else}} 
  21.                     <ul class="list-group"
  22.                         <li class="list-group-item">期待你们的留言</li> 
  23.                     </ul> 
  24.                     {{/if}} 
  25.                 </div> 
  26.             </div> 
  27.         </div> 
  28.     </div> 
  29. </div> 

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

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

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

  1. app.get('/'function (req, res) { 
  2.   res.render('home', { 
  3.       posts: [ 
  4.         { 
  5.           author: '小智'
  6.           image: 'https://picsum.photos/500/500'
  7.           comments: [ 
  8.             '前端小智终身学习者'
  9.             '前端小智持续分享者'
  10.             '虽然没啥流量,但也希望你也能坚持分享下去,帮助更多的初学者 ' 
  11.           ] 
  12.         }, 
  13.         { 
  14.           author: '前端大智'
  15.           image: 'https://picsum.photos/500/500?2'
  16.           comments: [] 
  17.         } 
  18.       ] 
  19.   }); 
  20. }); 

然后,使用#each来遍历 posts:

  1. <div class="posts"
  2.     <div class="row justify-content-center"
  3.       {{#each posts}} 
  4.         <div class="col-lg-7" style="margin-top: 50px;"
  5.             <div class="card"
  6.                 <img src="{{this.image}}" class="card-img-top" alt="..."
  7.                 <div class="card-body"
  8.                     <h5 class="card-title">此文章由 {{post.author}} 发布</h5> 
  9.                     {{#if this.comments}} 
  10.                     <ul class="list-group"
  11.                       {{#each this.comments}} 
  12.                       <li class="list-group-item">{{this}}</li> 
  13.                       {{/each}} 
  14.                     </ul> 
  15.                     {{else}} 
  16.                     <ul class="list-group"
  17.                         <li class="list-group-item">期待你们的留言</li> 
  18.                     </ul> 
  19.                     {{/if}} 
  20.                 </div> 
  21.             </div> 
  22.         </div> 
  23.       {{/each}} 
  24.     </div> 
  25. </div> 

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

 

责任编辑:姜华 来源: 今日头条
相关推荐

2017-01-04 15:22:57

TrimPath模板引擎

2021-10-22 08:29:14

JavaScript事件循环

2019-11-13 09:01:48

开源JavaScript模板引擎

2012-04-13 09:45:53

JavaScriptjQuery

2022-11-30 15:15:48

2014-05-16 11:09:38

Handlebars模板引擎

2016-08-02 10:22:10

JS微软Node

2010-09-08 15:13:09

Node节点Node属性

2015-12-08 11:39:59

JavaScript引擎指南

2014-05-12 10:21:41

JavaScript 模板引擎

2016-11-01 20:26:47

前端模板underscoreWeb

2019-11-13 08:50:46

GitHub代码开发者

2017-03-20 17:59:19

JavaScript模板引擎

2017-03-15 08:43:29

JavaScript模板引擎

2020-05-11 09:54:33

JavaScript开发技术

2011-01-19 11:17:36

2011-07-15 14:01:50

PHP模板引擎

2020-11-11 07:48:21

Node

2019-10-12 10:50:00

JavaScript编程语言代码

2011-09-08 10:21:50

Node.js
点赞
收藏

51CTO技术栈公众号