EJS (Embedded JavaScript) 是一种嵌入式 JavaScript 模板引擎，它能够在 HTML 或其他文本文件中通过 JavaScript 语法来编写动态内容，从而简化了前端模板的开发工作。本文将介绍在 Express.js 中如何配置和使用 EJS 模板引擎，帮助读者加深对于该技术的理解，并提供具有指导意义的实践示例和经验总结。
1. 配置 EJS 模板引擎
要使用 EJS 模板引擎，首先需要在 Node.js 应用中安装 EJS 模块，可以使用 npm 命令来安装：
npm install ejs --save
在 Express.js 应用中，需要在 app.js 或 server.js 文件中设置模板引擎的视图路径和模板文件的扩展名，如下所示：
const express = require('express')
const app = express()
app.set('views', __dirname + '/views')
app.set('view engine', 'ejs')上面的代码将 views 目录作为视图文件的根路径，并将其下的 .ejs 文件作为 EJS 模板文件。此外，还需要在路由函数中设置相应的渲染函数来呈现 EJS 模板文件的动态效果，例如：
app.get('/', (req, res) => {
res.render('index', { title: 'Welcome to EJS', message: 'Hello, World!' })
})上面的代码使用 res.render() 方法来呈现名为 index.ejs 的 EJS 模板文件，并传递了一个对象参数 { title: 'Welcome to EJS', message: 'Hello, World!' } 作为模板变量，这些变量可以在模板文件中通过 <%= %> 标签来输出相应的值。
2. 使用 EJS 模板引擎
在使用 EJS 模板引擎时，需要了解一些基本的语法和标签，如下所示：
声明变量
可以通过 <% %> 标签来声明变量或进行逻辑判断、循环等操作。例如：
<% const name = 'EJS' %>
<% if (name === 'EJS') { %>
<h1>Welcome to <%= name %>!</h1>
<% } %>上面的代码声明了一个变量 name，然后使用 if 条件语句来判断其值是否等于 'EJS'，最后通过 <%= %> 标签来输出变量的值。
输出变量值
可以通过 <%= %> 标签来输出模板变量的值，例如：
<p>Hello, <%= name %>!</p>
上面的代码会将传递给模板的变量 name 的值输出到 HTML 中。
循环迭代
可以通过 <% %> 标签来进行循环迭代操作，例如：
<ul>
<% for (let i = 0; i < names.length; i++) { %>
<li><%= names[i] %></li>
<% } %>
</ul>上面的代码将数组 names 中的元素进行循环迭代，并使用 <%= %> 标签来输出每个元素的值。
包含标签
可以使用 <% include %> 标签来包含其他的 EJS 模板文件，例如：
<% include header.ejs %> <!-- Content goes here --> <% include footer.ejs %>
上面的代码可以将 header.ejs 和 footer.ejs 两个模板文件包含到当前的模板文件中，从而实现模板的复用和组合。
3. 实践示例与总结
下面给出一个基于 EJS 模板引擎的留言板示例，可以帮助读者更好地理解该技术的应用和实践：
-- -------------------- ---- -------
----- ------- - ------------------
----- --- - ---------
---------------- --------- - ---------
------------- -------- ------
---------------------------- --------- ---- ---
---------------------------------
--- -------- - --
------------ ----- ---- -- -
------------------- - -------- --
--
-------------------- ----- ---- -- -
----- - ----- ------- - - --------
-- ----- -- -------- -
--------------- ----- ------- --
-
-----------------
--
---------------- -- -- -
---------------------- -- ---- ------
--上面的代码实现了一个简单的留言板功能，使用了 EJS 模板引擎来动态生成页面内容。在 index.ejs 文件中，使用了循环迭代和包含标签来展示留言列表和表单：
-- -------------------- ---- -------
-- ------- ---------- --
---- ---------------- ------
-----------------
--- -------------------
-- --- ---- - - -- - - ---------------- ---- - --
--- ------------------------
----------- ---------------- ------------ --- ------------------- --
-----
-- - --
-----
----- ------------- ------------------
---- -------------------
------ -----------------------
------ ----------- -------------------- ----------- ------------------ ---- ------
------
---- -------------------
------ -----------------------------
--------- -------------------- -------------- -------- ------------------ ---- --------------------
------
------- ------------- ---------- ----------------------------
-------
------
-- ------- ---------- --上面的代码展示了如何使用 EJS 模板引擎来快速构建动态页面。通过本文的介绍和实践示例，读者可以深入了解和掌握 EJS 模板引擎的配置和使用方法，从而在前端开发中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648efa3848841e9894d5b33b