ExpressJS 中的 HandleBars 模板

Handlebars.js 是一个模板引擎，类似于 node.js 中的 ejs 模块，但更强大且易于使用。它确保最小化模板，并且是一个保持视图和代码分离的无逻辑引擎。它可以与 express 一起用作 hbs 模块，可通过 npm 获得。 HandleBars 可用于将网页从服务器端的数据呈现到客户端。

安装 hbs 模块的命令：

npm i hbs

要在 express 中使用把手，我们需要将 HTML 代码存储到源目录中“views”文件夹中的 .hbs 扩展名中，因为 hbs 会在 views 文件夹中查找页面。

我们需要在 index.js 文件中做的第一件事是要求 hbs 模块

var express = require('express')
var hbs = require('hbs')
var app = express()

现在，我们需要更改默认视图引擎。

app.set('view engine', 'hbs')

如果不需要视图目录，您可以通过以下命令更改视图路径：

app.set('views', )

现在让我们在我们的views目录中创建一个demo.hbs文件，内容如下：

    
        
This is a Demo Page on localhost!
    

现在，我们通过 express 将我们的网页渲染到本地服务器。

app.get('/', (req, res)=>{
    res.render('demo')
})
  
app.listen(3000)

现在，打开您的浏览器并在网址上输入localhost:3000并验证您服务器上的网页。

现在我们将了解如何将页面动态链接到服务器端数据。
在 index.js 中，我们声明了一个演示对象，实际上，该对象可以是请求体和/或数据库查询的结果。

var demo = {
    name : 'Rohan',
    age : 26
}
  
app.get('/', (req, res)=>{
     res.render('dynamic', {demo : demo})
})

这里我们将demo对象作为demo发送到我们的hbs页面。我们可以检索视图文件夹中的 dynamic.hbs 中的信息。

    
        
{{demo.name}} is {{demo.age}} years old.
    

输出：

Rohan is 26 years old

给定多个值，我们可以遍历所有值以对每个元素执行相同的功能/显示。

让我们举个例子，将以下代码添加到您的index.js并运行服务器并获得响应。

var projects = {
    name : 'Rahul', 
    skills : ['Data Mining', 'BlockChain Dev', 'node.js']
}
  
app.get('/projects', (req, res)=>{
    res.render('projects', {project : project});
})

view/projects.hbs 看起来像这样：

    
        {{projects.name}} has the following skills : 

        {{#each projects.skills}}
            {{this}} 

        {{/each}}
    

输出：

Rahul has the following skills : 
Data Mining
BlockChain Dev
node.js