如何在 Express.js 中使用 EJS 模板引擎

阅读时长 4 分钟读完

在 Express.js 中,使用 EJS 模板引擎可以方便地将动态数据渲染到 HTML 页面中。本文将介绍如何在 Express.js 中使用 EJS 模板引擎,并给出详细的步骤和示例代码,帮助读者快速掌握相关技能。

安装和配置

首先,通过 npm 安装 EJS 模板引擎:

安装完成后,在 Express.js 中配置 EJS 模板引擎,将其设置为默认的视图引擎:

-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------

------------- -------- -------

------------ ------------- ---- -
  ------------------- ------- ----------- ---- -------
---

---------------- ---------- -
  ------------------- ------- -- ---- ----------
---

在上面的代码中,我们首先通过 require 引入 express 模块,并创建了一个 Express 应用。然后,使用 app.set() 方法,将 EJS 模板引擎设置为默认的视图引擎。在 app.get() 方法中,我们通过 res.render() 方法将渲染后的 HTML 页面返回给客户端。

EJS 模板语法

在 EJS 模板中,可以使用以下一些特殊的标签和语法:

输出变量

使用 <%= %> 标签可以将变量的值输出到 HTML 页面中:

在上面的代码中,我们通过 <%= %> 标签将 title 变量输出到 HTML 页面中。

条件语句

使用 <% %><%= %> 标签可以创建条件语句:

在上面的代码中,我们通过 <% %><%= %> 标签创建了一个条件语句。如果 user 存在,则输出欢迎消息;否则输出登录链接。

循环语句

使用 <% %><%= %> 标签可以创建循环语句:

在上面的代码中,我们通过 <% %><%= %> 标签创建了一个循环语句,将 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

纠错
反馈