在前端开发中,模板引擎是一个很有用的工具,它能够以动态的方式将数据渲染到 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 的命令如下:
npm install express --save npm install ejs --save
这将会在你当前项目的 node_modules
目录下安装这两个包。同时,你需要在你的代码中导入它们:
const express = require('express'); const app = express(); const ejs = require('ejs');
配置 EJS 模板引擎
在使用 EJS 模板引擎之前,需要在 Express.js 中配置它。这可以通过 app.set()
方法完成。下面是一个简单的实例:
app.set('view engine', 'ejs'); app.set('views', __dirname + '/views');
在这个例子中,我们告诉 Express.js 使用 EJS 作为模板引擎,并指定模板页面的路径。注意,这里使用了 Node.js 的 __dirname
变量,用于获取当前文件所在的目录名。
创建 EJS 模板
一旦配置完成,我们可以开始编写 EJS 模板了。在 Express.js 中,模板文件默认保存在 views
目录下。
下面是一个简单的 EJS 模板文件,它渲染了一个包含用户名的欢迎语句:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------- --- -------- ----------- ------- ------ ----------- --- -------- -------- ------- -------
在这个模板中,<%= ... %>
是 EJS 的标签,用于向模板中动态输出内容。在这里,我们通过 username
变量向模板中传递了一个用户名称,并在 HTML 标题和正文中显示出来。
使用 EJS 模板
使用 EJS 模板引擎渲染 HTML 页面很简单。在 Express.js 中,我们只需要调用 res.render()
方法即可。下面是一个简单的示例:
app.get('/', function(req, res) { res.render('welcome', { username: 'John' }); });
在这个示例中,我们定义了访问 '/ '
路径时的处理程序,它通过调用 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