Express.js 中使用 EJS 模板引擎的详细教程

阅读时长 4 分钟读完

在前端开发中,模板引擎是一个很有用的工具,它能够以动态的方式将数据渲染到 HTML 页面中。在 Node.js 的世界里,Express.js 是一个广泛使用的 Web 框架,而 EJS 模板引擎则是它的默认选择之一。

在本文中,我们将详细介绍如何在 Express.js 中使用 EJS 模板引擎,包括如何安装和配置它,以及如何在 Node.js 中编写 EJS 模板。

安装 Express.js 和 EJS

如果你还没有安装 Node.js 和 Express.js,可以从官网下载并安装。在安装 Express.js 时,可以选择使用 EJS 作为模板引擎,也可以之后再进行配置。

安装 Express.js 和 EJS 的命令如下:

这将会在你当前项目的 node_modules 目录下安装这两个包。同时,你需要在你的代码中导入它们:

配置 EJS 模板引擎

在使用 EJS 模板引擎之前,需要在 Express.js 中配置它。这可以通过 app.set() 方法完成。下面是一个简单的实例:

在这个例子中,我们告诉 Express.js 使用 EJS 作为模板引擎,并指定模板页面的路径。注意,这里使用了 Node.js 的 __dirname 变量,用于获取当前文件所在的目录名。

创建 EJS 模板

一旦配置完成,我们可以开始编写 EJS 模板了。在 Express.js 中,模板文件默认保存在 views 目录下。

下面是一个简单的 EJS 模板文件,它渲染了一个包含用户名的欢迎语句:

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

在这个模板中,<%= ... %> 是 EJS 的标签,用于向模板中动态输出内容。在这里,我们通过 username 变量向模板中传递了一个用户名称,并在 HTML 标题和正文中显示出来。

使用 EJS 模板

使用 EJS 模板引擎渲染 HTML 页面很简单。在 Express.js 中,我们只需要调用 res.render() 方法即可。下面是一个简单的示例:

在这个示例中,我们定义了访问 '/ ' 路径时的处理程序,它通过调用 res.render() 方法来渲染 welcome.ejs 模板。我们还向 res.render() 方法提供了一个数据对象,其中 username 属性的值是 'John'

在实际运行中,res.render() 方法会取出 welcome.ejs 模板,将数据对象中的 username 填充进去,生成最终的 HTML 页面,并将其发送给浏览器。这个页面将显示一个欢迎语句,其中用户名为 'John'

总结

在本文中,我们详细介绍了如何在 Express.js 中使用 EJS 模板引擎,从安装和配置到编写和使用模板,一步一步地讲解了每个步骤。

EJS 模板引擎是一个非常方便的工具,遵循前端工程化的思路,将网站分为盒子的思想,可以让前端开发更加高效、易于维护。希望通过这篇文章,可以帮助你更好地理解和使用 EJS 模板引擎,在 Web 开发中发挥更大的作用。

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

纠错
反馈