作者：Janith Kasun
译者：前端小智
起源：stackabuse
点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

简介

在本文中，咱们将介绍如何用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 手模板：

├── 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和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。