在前端开发中，使用模板引擎可以更加方便地生成 HTML 页面。而在 Node.js 的 Express 框架中使用模板引擎，则是一种常见的做法。本文将介绍如何在 Express.js 中使用模板引擎 EJS，并探讨一些有关 EJS 的技巧。
什么是 EJS？
EJS（Embedded JavaScript）是一种嵌入式 JavaScript 模板引擎，用于生成 HTML 页面。它可以将 JavaScript 和 HTML 代码结合起来，形成模板文件。在模板文件中，可以使用 EJS 的标签语法插入变量、执行循环和条件判断等操作，最终生成 HTML 代码。
在 Express.js 中使用 EJS
在 Express.js 中，可以很方便地使用 EJS 模板引擎。通过设置 Express.js 应用程序的“view engine”和“views”选项，即可启用 EJS，并指定 EJS 模板文件的位置。以下是使用 EJS 快速搭建 Express.js 应用程序的代码示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-- -- --- ----
------------- -------- -------
---------------- -----------
-- ----
------------ ----- ---- -- -
------------------- -
------ ----------- - -----
-------- -------- -- --- --- -------- ------ -- ------------
---
---
-- -----
---------------- -- -- -
------------------- -- ------- -- ------------------------
---在上面的代码中，首先使用 require 引入 express 库，并创建一个 Express 应用程序实例（app）。接着，通过调用 app.set() 方法，设置 EJS 模板引擎和模板文件的位置。在定义路由时，通过 res.render() 方法将模板文件和数据渲染到 HTML 页面中。最后通过 app.listen() 方法启动服务器。
EJS 标签语法
EJS 的模板文件中，可以使用以下标签语法：
- 输出变量内容：
<%= variable %> - 执行 JavaScript 代码：
<% code %>或<%- code %> - 条件判断：
<% if (condition) { %> code <% } %> - 循环遍历：
<% for (let i = 0; i < array.length; i++) { %> code <% } %>
例如，以下是一个包含 EJS 标签语法的模板文件“index.ejs”：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ----------
-------
------
------- ------- -------
-- -- -------------- - --
----
-- --- ---- - - -- - - ------------- ---- - --
------- ------------- -------
-- - --
-----
-- - ---- - --
----- ----- ----------
-- - --
-------
-------在上面的模板文件中，使用了 <%= %> 标签输出变量 title 和 message 的内容；使用了 <% %> 标签执行条件判断和循环遍历操作。在应用程序中使用 res.render() 方法渲染该模板文件时，可以将相应的数据传递给模板文件，如下所示：
-- -------------------- ---- -------
------------ ----- ---- -- -
------------------- -
------ ----------- - -----
-------- -------- -- --- --- -------- ------ -- -------------
------ -
- ----- ----- ---- --
- ----- ----- ------ --
- ----- ---- -------- -
-
---
---在上述代码中，将 title、message 和 users 三个变量传递给 index.ejs 模板文件。在模板文件中，通过 <%= %> 和 <% %> 标签，将这些变量输出和执行相应的操作，生成最终的 HTML 页面。
EJS 的包含（include）功能
除了上述基本的标签语法外，EJS 还具有包含（include）功能，可以嵌套使用不同的模板文件。包含功能可以有效地避免重复代码的出现，提高代码的可维护性。以下是一个包含其他模板文件的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ----- ---------- ------- ------ -- ------- ---------- -- ------- ------- ------- -- ------- ---------- -- ------- -------
在上述代码中，使用 include 标签引入了 header.ejs 和 footer.ejs 两个子模板文件。这样，将 header.ejs 和 footer.ejs 中通用的代码抽离出来，可以使整个系统的代码量得到有效地精简和管理。
总结
本文介绍了在 Express.js 中使用 EJS 模板引擎的技巧，包括 EJS 的基本语法、设置 EJS 的方式以及包含（include）功能。通过学习本文，可以更加熟练地使用 EJS 模板引擎，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed4de4f6b2d6eab3772c52