在前端开发中，模板引擎是一个非常重要的工具，用于生成 HTML 页面。其中，Express.js 是一款非常流行的 Node.js Web 框架，而 Handlebars.js 则是一款优秀的 JavaScript 模板引擎。本文将介绍如何使用 Express.js 和 Handlebars.js 实现模板引擎，并提供详细的示例代码、工作流程和指导意义。
Express.js
首先，我们需要安装 Express.js。您可以使用以下命令：
npm install express
接下来，创建一个 app.js 文件并在其中输入以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ----- ------ - ---------------- -- -- - ----------------------- --- --------- -- ---- ------- ---
我们使用 require 函数导入 Express.js 模块，并使用 express() 函数创建一个新的应用程序实例。接着，我们在应用程序中创建了一个主页路由，并在启动服务器时将其绑定到端口 3000 上。
Handlebars.js
接下来，我们需要安装 Handlebars.js。您可以使用以下命令：
npm install handlebars
Handlebars.js 在 HTML 视图中使用模板引擎生成 HTML 页面。
首先，我们需要创建一个新文件夹 views。在该文件夹中，我们将创建所有的 HTML 视图。例如，我们可以在 views/index.handlebars 文件中创建以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------------------- ------- ------ ---------------------- ---------------------- ------- -------
在上面的代码中，我们使用 Handlebars.js 的模板语言包装了 HTML 标签。花括号 ({{}}) 中的变量是我们将在 Express.js 应用程序中动态设置的变量。例如，我们可以将 pageTitle 和 pageContent 插入到 HTML 中。
使用 Handlebars.js 编译器
然后，我们需要设置 Express.js 应用程序来使用 Handlebars.js。我们需要导入 Handlebars.js 并将其与一个标准的 JavaScript app.use 函数绑定：
const handlebars = require('handlebars');
// The following line must be set up for handlebars to work in express.js!!
app.engine('handlebars', exphbs({defaultLayout: 'main'}))
app.set('view engine', 'handlebars');在上面的代码中，我们使用了 Handlebars.js 编译器。app.engine 函数是 Express.js 提供的用于将模板引擎与指定文件扩展名匹配的函数。我们调用 app.engine 函数并传递 handlebars 作为模板引擎的名称、exphbs 作为模板引擎的实例、defaultLayout 作为默认HTML布局文件的名称。
接着，我们调用 app.set 函数来设置默认视图引擎为 handlebars。
在 Express.js 中渲染视图
现在，我们已经设置好了 Express.js 应用程序和 Handlebars.js 模板引擎。接下来，我们需要在我们的代码中使用它们。
例如，我们可以创建以下代码：
app.get('/about', (req, res) => {
res.render('about', {
pageTitle: 'About Us',
pageContent: 'We are a group of developers dedicated to creating the best web applications possible.'
});
});该 app.get 路由使用了 res.render 函数，该函数接受两个参数：要呈现的视图文件的名称（在 views 文件夹中查找，扩展名为 handlebars），以及传递到该视图文件的任意数据，以便在该视图中进行渲染（例如 pageTitle 和 pageContent）。
现在，我们已经创建了 about HTML 视图，它将在 /about 路由中呈现。在访问此路由时，Handlebars.js 将在 HTML 视图中将变量替换为动态的值。
Express.js 和 Handlebars.js 的优点
总之，使用 Express.js 和 Handlebars.js 可以实现有效的、动态的 HTML 视图。这使开发人员能够在代码中轻松合并动态数据和 HTML。此外，Express.js 和 Handlebars.js 的使用非常广泛，因此有大量的文档和社区支持。
示例代码
您可以在以下 GitHub 仓库中找到本文介绍的示例代码：
https://github.com/duolaAOIFE/using-express-and-handlebars-together
总结
本文介绍了如何使用 Express.js 和 Handlebars.js 实现模板引擎，提供了详细的步骤和示例代码。使用 Express.js 和 Handlebars.js 可以轻松创建动态的 HTML 视图，这使得开发人员可以构建高效、动态和动人的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a719c48841e9894893b54