Express.js 是一种流行的 Node.js Web 开发框架，通过使用视图引擎（View Engine），可以使得渲染 HTML 模板变得更加方便和高效。传统上，前端开发人员需要手动渲染 HTML 模板，并与后端开发人员合作来完成整个应用程序的开发。但是，使用视图引擎可以使得前端开发人员专注于如何设计应用程序的视图，而后端开发人员专注于如何处理数据和逻辑。本文将详细介绍如何使用 Express.js 中的视图引擎来渲染页面。
什么是 Express.js 视图引擎？
视图引擎是一种模板引擎，它可以将动态数据绑定到 HTML 模板中。使用视图引擎可以使得 HTML 模板的编写更加简单和快捷，遵循了 DRY (Don't Repeat Yourself) 原则。而且，使用视图引擎后，所有的 HTML 模板可以存储在单独的文件中，可以更轻松地维护和共享。
Express.js 支持多种类型的视图引擎，包括 EJS、Pug 和 Handlebars 等。这些视图引擎都有相应的模板语言，使得前端开发人员可以灵活地设计视图。
如何使用视图引擎？
在 Express.js 中启用视图引擎比较简单。首先，需要通过 npm 安装相应的视图引擎模块。下面以 EJS 为例，介绍如何使用视图引擎。
步骤一：安装 EJS 模块
在终端中输入以下命令，安装 EJS 模块：
--- ------- --- ------
步骤二：使用 EJS 模板引擎
在 Express.js 应用程序中将 EJS 引擎设置为默认引擎：
----- ------- - ------------------- ----- --- - ---------- -- --- --- ---- ------ -- --- ------------- -------- -------
这里使用 app.set('view engine', 'ejs') 语句设置视图引擎为 EJS。
步骤三：创建 EJS 模板文件
在项目根目录下创建一个 views 文件夹，用于存储 EJS 模板文件。在 views 文件夹中创建一个 index.ejs 文件，用于测试。
------ ------ ---------- ------------ ------- ------ --------- --- ---- -------- ------- -------
这里使用了 EJS 模板语言，使用 <%= %> 将变量绑定在 HTML 中。
步骤四：渲染 EJS 模板
下面使用 Express.js 的 res.render 方法来渲染 EJS 模板。在路由中添加以下代码：
------------ ----- ---- -- - ------------------- - ----- ------- --- ---
这里使用 res.render 将 index.ejs 模板渲染为 HTML 页面，并将 { name: 'World' } 传递给模板，替换模板中的 name 变量。
步骤五：启动 Express.js 应用程序
在终端中输入如下命令，启动 Express.js 应用程序：
---- ------
现在，在浏览器中访问 http://localhost:3000/，就能看到 Hello World!。
总结
本文介绍了如何使用视图引擎来渲染 HTML 模板，并使用 EJS 模板引擎为例，给出了详细的使用指南，并提供了示例代码。使用视图引擎可以提高开发效率，并使得应用程序易于维护和扩展。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64895f5d48841e98947a8831