什么是车把？
车把是与其他著名著名的模板应用程序中使用的最常用的模板引擎之一，例如Mustache JS，Pug，EJS等。它与Express JS框架一起在服务器端特别使用。
官方文档： - Handlebars
文件夹结构图像： -
package.json结构： -
app.js代码： -
const express = require("express");
const handlebars = require('express-handlebars');
const path = require("path");
const helpers = require("handlebars-helpers")();
const app = express();
const PORT = 8000;
const hbs = handlebars.create({
extname: "hbs",
defaultLayout: "main",
layoutsDir: path.join(__dirname, 'views/layout'),
helpers: helpers,
partialsDir: path.join(__dirname, 'views/partials')
});
app.engine("hbs", hbs.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));
// Custom Helper
helpers.makeBold = function (aString) {
return '<strong style="color:red">' + aString.toUpperCase() + '</strong>';
};
app.get("/", (req, res) => {
res.render("home", {
title: "Express",
peoples: ["salman", "sharukh", "amitabh"],
products: [
{
name: "mobile",
category: "Electronics",
stock: 1000
},
{
name: "Electronics",
category: "Electronics",
stock: 0
},
{
name: "mobile",
category: "Electronics",
stock: 1000
}
]
})
})
app.get("/about", (req, res) => {
res.render("about", {
title: "about",
layout: "second"
});
})
app.listen(PORT, () => {
console.log(`Server is Listening at ${PORT} Port.`);
})
main.hbs代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<h1>home</h1>
{{{body}}}
</body>
</html>
second.hbs： -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
</head>
<body>
<h1>second</h1>
{{{body}}}
</body>
</html>
productloop.hbs代码： -
<hr>
<h1>products -
{{#each products}}
<span style="color: red;"> {{@index}} </span> - {{this.name}}
{{#eq this.name "mobile"}}
common
{{else}}
not common
{{/eq}}
{{#if this.stock}}
{{this.stock}}
{{else}}
(zero)
{{/if}}
{{/each}}
</h1>
<hr>
home.hbs代码： -
<h1>home - {{title}}</h1>
<h1>peoples - {{peoples}}</h1>
{{add 20 30}}
<h1>divide {{floor (divide 20 12)}}</h1>
{{!-- {{/add}} --}}
<h1>makebold {{#makeBold "aksh"}} {{/makeBold}}</h1>
{{#contains peoples "salman1"}}
salman is there
{{else}}
salman is not there
{{/contains}}
<h1>peoples -
{{#each peoples}}
{{this}}
{{/each}}
</h1>
<hr>
<h1>products -
{{#each products}}
<span style="color: red;"> {{@index}} </span> - {{this.name}}
{{#eq this.name "mobile"}}
common
{{else}}
not common
{{/eq}}
{{#if this.stock}}
{{this.stock}}
{{else}}
(zero)
{{/if}}
{{/each}}
</h1>
<hr>
{{> productloop}}
关于.hbs代码： -
<h1>About - {{title}}</h1>
主页的输出图像： -
关于页面的输出图像： -
