在 Express.js 中,使用 EJS 模板引擎可以方便地将动态数据渲染到 HTML 页面中。本文将介绍如何在 Express.js 中使用 EJS 模板引擎,并给出详细的步骤和示例代码,帮助读者快速掌握相关技能。
安装和配置
首先,通过 npm 安装 EJS 模板引擎:
npm install ejs --save
安装完成后,在 Express.js 中配置 EJS 模板引擎,将其设置为默认的视图引擎:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------- -------- ------- ------------ ------------- ---- - ------------------- ------- ----------- ---- ------- --- ---------------- ---------- - ------------------- ------- -- ---- ---------- ---
在上面的代码中,我们首先通过 require
引入 express
模块,并创建了一个 Express 应用。然后,使用 app.set()
方法,将 EJS 模板引擎设置为默认的视图引擎。在 app.get()
方法中,我们通过 res.render()
方法将渲染后的 HTML 页面返回给客户端。
EJS 模板语法
在 EJS 模板中,可以使用以下一些特殊的标签和语法:
输出变量
使用 <%= %>
标签可以将变量的值输出到 HTML 页面中:
<h1><%= title %></h1>
在上面的代码中,我们通过 <%= %>
标签将 title
变量输出到 HTML 页面中。
条件语句
使用 <% %>
和 <%= %>
标签可以创建条件语句:
<% if (user) { %> <h2>Welcome <%= user.name %>!</h2> <% } else { %> <a href="/login">Login</a> <% } %>
在上面的代码中,我们通过 <% %>
和 <%= %>
标签创建了一个条件语句。如果 user
存在,则输出欢迎消息;否则输出登录链接。
循环语句
使用 <% %>
和 <%= %>
标签可以创建循环语句:
<ul> <% for (let i = 0; i < users.length; i++) { %> <li><%= users[i].name %></li> <% } %> </ul>
在上面的代码中,我们通过 <% %>
和 <%= %>
标签创建了一个循环语句,将 users
数组中的每个用户的 name
属性输出到 HTML 页面中。
示例代码
下面是一个完整的示例代码,演示了如何在 Express.js 中使用 EJS 模板引擎:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------- -------- ------- ------------ ------------- ---- - ----- ---- - - ------ ----------- ---- ----- ------ - ------ --------- ------ ------- ------ ---------- - -- ------------------- ------ --- ---------------- ---------- - ------------------- ------- -- ---- ---------- ---
在上面的代码中,我们首先通过 require
引入 express
模块,并创建了一个 Express 应用。然后,使用 app.set()
方法,将 EJS 模板引擎设置为默认的视图引擎。在 app.get()
方法中,我们创建了一个对象 data
,包含一个 title
变量和一个 users
数组。最后,通过 res.render()
方法将 data
对象渲染后的 HTML 页面返回给客户端。
总结
本文介绍了如何在 Express.js 中使用 EJS 模板引擎,并给出了详细的步骤和示例代码。希望本文对读者有一定的指导意义,可以帮助读者快速掌握相关技能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c335c283d39b488172d400