在 Express.js 中使用 EJS 模板引擎构建动态网站的完整指南

阅读时长 5 分钟读完

在现代 Web 应用程序中,动态网站已经成为了一种主流的实现方式。在这种情况下,服务器端的框架和模板引擎是非常重要的。在 Node.js 的生态系统中,Express.js 是一个流行的 Web 框架,它提供了一种简单而又强大的方式来构建 Web 应用程序。在本文中,我们将介绍如何在 Express.js 中使用 EJS 模板引擎来构建动态网站。

什么是 EJS 模板引擎?

EJS(Embedded JavaScript)是一个简单而又强大的 JavaScript 模板引擎,它可以帮助我们快速构建动态网站。EJS 具有以下特点:

  • EJS 允许我们使用 JavaScript 代码在 HTML 页面中嵌入动态内容。
  • EJS 允许我们使用模板继承来避免代码重复。
  • EJS 支持自定义标签和过滤器。

安装和配置 EJS

在使用 EJS 模板引擎之前,我们需要安装它。可以使用 npm 包管理器来安装 EJS,命令如下:

安装完成之后,我们需要在 Express.js 应用程序中配置 EJS。在 app.js 文件中,添加以下代码:

这里,我们使用 app.set() 方法来设置视图引擎为 EJS。这将告诉 Express.js 在渲染视图时使用 EJS 模板引擎。

创建 EJS 视图

在 Express.js 中,视图是我们网站中显示给用户的 HTML 页面。视图通常包含 HTML、CSS 和 JavaScript 代码,以及嵌入式 JavaScript 代码块。在 EJS 中,我们可以使用 <% %> 标签来嵌入 JavaScript 代码块,使用 <%= %> 标签来嵌入 JavaScript 表达式。

以下是一个简单的 EJS 视图示例:

-- -------------------- ---- -------
--------- -----
------
------
    ---------- ----- ----------
-------
------
    ------- ------- -------
-------
-------
展开代码

在这个视图中,我们使用 <%= %> 标签来嵌入变量 titlemessage。这些变量可以在渲染视图时从服务器端传递过来。

渲染 EJS 视图

在 Express.js 中,我们可以使用 res.render() 方法来渲染 EJS 视图。res.render() 方法接受两个参数:视图名称和一个包含视图数据的对象。

以下是一个简单的 Express.js 控制器示例,它渲染了上面的 EJS 视图:

在这个示例中,我们使用 res.render() 方法来渲染名为 index 的 EJS 视图,并将 titlemessage 传递给视图。渲染完成后,Express.js 将返回一个包含渲染后 HTML 的响应。

在 EJS 视图中使用控制流和条件语句

在 EJS 中,我们可以使用控制流和条件语句来根据不同条件渲染不同的 HTML 内容。

以下是一个示例,它使用 if 语句和 forEach 循环来渲染一个包含用户列表的 HTML 表格:

-- -------------------- ---- -------
-------
    -------
        ----
            -------------
            --------------
        -----
    --------
    -------
        -- ---------------------------- - --
            ----
                ------- --------- -------
                ------- ---------- -------
            -----
        -- --- --
    --------
--------
展开代码

在这个示例中,我们使用 forEach 循环来遍历用户列表,并使用 <%= %> 标签来嵌入用户的名称和电子邮件地址。

在 EJS 视图中使用布局

在大型 Web 应用程序中,通常需要使用布局来避免在每个页面中重复相同的 HTML 代码。在 EJS 中,我们可以使用模板继承来实现布局。

以下是一个示例,它使用模板继承来创建一个基本布局:

-- -------------------- ---- -------
--------- -----
------
------
    ---------- ----- ----------
-------
------
    --- ---- --
-------
-------
展开代码

在这个示例中,我们使用 <%- %> 标签来嵌入视图内容。这个标签将视图内容作为原始 HTML 插入到布局中。

以下是一个示例,它使用上面的布局来创建一个完整的 EJS 视图:

在这个示例中,我们使用 layout() 函数来指定要使用的布局。这个函数必须在视图内容之前调用。

结论

在本文中,我们介绍了如何在 Express.js 中使用 EJS 模板引擎来构建动态网站。我们学习了如何安装和配置 EJS,如何创建和渲染 EJS 视图,以及如何在视图中使用控制流、条件语句和布局。希望这篇文章对你有所帮助!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/676658fa76af2b9a20f618a1

纠错
反馈

纠错反馈