📌  相关文章
📜  ExpressJS 中的 HandleBars 模板(1)

📅  最后修改于: 2023-12-03 14:41:05.180000             🧑  作者: Mango

ExpressJS 中的 Handlebars 模板

Handlebars 是一种基于 Mustache 模板语言的扩展，它允许程序员来创建可重用的模板，简化表达式的书写同时也提供了更加灵活的控制流。

在 ExpressJS 中，由于 Handlebars 能够与 ExpressJS 的视图引擎集成，因此我们可以使用 Handlebars 快速地创建复杂的 Web 应用程序。

安装

要使用 Handlebars，在 ExpressJS 工程中需要配置视图引擎并安装必要的依赖。

npm install --save express-handlebars

const express = require('express');
const exphbs = require('express-handlebars');
const app = express();

app.engine('handlebars', exphbs({ defaultLayout: 'main' }));
app.set('view engine', 'handlebars');

上述代码中，exphbs 是 Handlebars 视图引擎的实例化对象，main.handlebars 是默认的布局文件。

语法

Handlebars 提供了大量的表达式和控制流语句，可以使模板更加具有可读性和可维护性。

输出变量
<p>{{username}}</p>

上述代码中，username 是一个变量，它会在模板渲染时被替换成真实的值。

注释
{{! 这是一个注释 }}
条件语句
{{#if isLogin}}
  <p>已登录</p>
{{else}}
  <p>未登录</p>
{{/if}}

上述代码中，isLogin 是一个变量，如果该变量的值为 true，则输出 "已登录"，否则输出 "未登录"。

循环语句
{{#each list}}
  <li>{{name}}</li>
{{/each}}

上述代码中，list 是一个数组，{{name}} 会被渲染多次，输出数组中每个对象的 name 属性。

布局文件

布局文件是一种特殊的 Handlebars 模板，它定义了整个站点或应用程序的框架结构。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>{{title}}</title>
  <link rel="stylesheet" href="/public/css/style.css">
  {{{head}}}
</head>

<body>
  {{{body}}}
</body>

</html>

上述代码中的 {{{head}}} 和 {{{body}}} 表示子模板的内容将被渲染在 head 和 body 标签中。

传递参数

为了将数据从 ExpressJS 控制器传递给 Handlebars 模板，我们可以通过渲染模板的方法传递一个带有数据的 JSON 对象。

app.get('/', (req, res) => {
  res.render('home', {
    title: '主页'
  });
});

上述代码中的 { title: '主页' } 将被传递给 Handlebars 模板，它可以使用 {{title}} 输出主页的标题。

参考链接