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

时间 2021-06-21

标签 html 前端 node git github web 面试数据库 express npm 栏目 JavaScript 繁體版

原文原文链接

做者：Janith Kasun
译者：前端小智
来源：stackabuse

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。html

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及个人系列文章。前端

简介

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

咱们还将讨论如何使用 Express.js 框架配置 Handlebars ，以及如何使用内置helpers 建立动态页面。最后，咱们将了解如何在须要时开发自定义helper ?。git

什么是模板引擎

早在上世纪90年代，当互联网出现时，它主要用于科学目的，好比发表研究论文，以及做为大学和科学家之间的沟通渠道。那时的大多数网页都是静态的。静态web页面对每一个用户都是相同的，不会根据每一个用户而改变，若是要更改页面上的任何内容，都必须手动完成。github

在现代世界中，事物的互动性更强，而且为每一个用户量身定制。今天，几乎每一个人都能访问互联网。如今的大多数web应用程序都是动态的。例如，在一些购物网站上，不一样用户登陆的界面，展现是不同的，所谓的千人千面。对于每一个人来讲，页面将遵循相同的模板(即上面有用户名的连续发布)，可是内容将是不一样的 ?。web

模板引擎的工做内容：定义展现内容模板，而后根据当前用户和对数据库的查询，用接收到的内容填充模板。面试

咱们能够在后端和前端使用模板引擎。若是咱们在后端使用模板引擎来生成HTML，这种方式叫作服务器端渲染(SSR) ?。数据库

Handlebars

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

Handlebars 是Mustache模板语言的扩展，Mustache 模板语言主要专一于简单性和最小的模板。npm

在 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添加以下内容：

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

Handlebars 更多功能

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

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

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Book Face</a>
</nav>

<div class="posts">
    <div class="row justify-content-center">
        <div class="col-lg-7" style="margin-top: 50px;">
            <div class="card">

                <img src="https://picsum.photos/500/500"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">此文章由 前端小智 发布</h5>

                    <ul class="list-group">
                        <li class="list-group-item">期待大家的留言/li>
                        <li class="list-group-item">期待大家的留言</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

上面咱们添加了一个 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 class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Book Face</a>
</nav>

<div class="posts">
    <div class="row justify-content-center">
        <div class="col-lg-7" style="margin-top: 50px;">
            <div class="card">

                <img src="https://picsum.photos/500/500"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">此文章由 {{post.author}} 发布</h5>

                    <ul class="list-group">
                        <li class="list-group-item">期待大家的留言/li>
                        <li class="list-group-item">期待大家的留言</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

效果以下：

使用条件

因为这里须要一些逻辑判断，即 comments 没数据不显示，咱们看看如何在Handlebars 模板中使用条件：

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Book Face</a>
</nav>

<div class="posts">
    <div class="row justify-content-center">
        <div class="col-lg-7" style="margin-top: 50px;">
            <div class="card">

                <img src="https://picsum.photos/500/500"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}
                    <ul class="list-group">
                    </ul>
                    {{else}}
                    <ul class="list-group">
                        <li class="list-group-item">期待大家的留言</li>
                    </ul>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</div>

这里咱们的 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 class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Book Face</a>
</nav>

<div class="posts">
    <div class="row justify-content-center">
        <div class="col-lg-7" style="margin-top: 50px;">
            <div class="card">

                <img src="https://picsum.photos/500/500"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}
                    <ul class="list-group">
                      {{#each post.comments}}
                      <li class="list-group-item">{{this}}</li>
                      {{/each}}
                    </ul>
                    {{else}}
                    <ul class="list-group">
                        <li class="list-group-item">期待大家的留言</li>
                    </ul>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</div>

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

<div class="posts">
    <div class="row justify-content-center">
      {{#each posts}}
        <div class="col-lg-7" style="margin-top: 50px;">
            <div class="card">
                <img src="{{this.image}}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">此文章由 {{post.author}} 发布</h5>
                    {{#if this.comments}}
                    <ul class="list-group">
                      {{#each this.comments}}
                      <li class="list-group-item">{{this}}</li>
                      {{/each}}
                    </ul>
                    {{else}}
                    <ul class="list-group">
                        <li class="list-group-item">期待大家的留言</li>
                    </ul>
                    {{/if}}
                </div>
            </div>
        </div>
      {{/each}}
    </div>
</div>

总结

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

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://stackabuse.com/guide-...

交流

文章每周持续更新，能够微信搜索【大迁世界】第一时间阅读，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，欢迎Star。