在现代 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,命令如下:
npm install ejs --save
安装完成之后,我们需要在 Express.js 应用程序中配置 EJS。在 app.js 文件中,添加以下代码:
const express = require('express'); const app = express(); app.set('view engine', 'ejs');
这里,我们使用 app.set()
方法来设置视图引擎为 EJS。这将告诉 Express.js 在渲染视图时使用 EJS 模板引擎。
创建 EJS 视图
在 Express.js 中,视图是我们网站中显示给用户的 HTML 页面。视图通常包含 HTML、CSS 和 JavaScript 代码,以及嵌入式 JavaScript 代码块。在 EJS 中,我们可以使用 <% %>
标签来嵌入 JavaScript 代码块,使用 <%= %>
标签来嵌入 JavaScript 表达式。
以下是一个简单的 EJS 视图示例:
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ----- ---------- ------- ------ ------- ------- ------- ------- -------展开代码
在这个视图中,我们使用 <%= %>
标签来嵌入变量 title
和 message
。这些变量可以在渲染视图时从服务器端传递过来。
渲染 EJS 视图
在 Express.js 中,我们可以使用 res.render()
方法来渲染 EJS 视图。res.render()
方法接受两个参数:视图名称和一个包含视图数据的对象。
以下是一个简单的 Express.js 控制器示例,它渲染了上面的 EJS 视图:
app.get('/', function(req, res) { res.render('index', { title: 'Express', message: 'Hello World!' }); });
在这个示例中,我们使用 res.render()
方法来渲染名为 index
的 EJS 视图,并将 title
和 message
传递给视图。渲染完成后,Express.js 将返回一个包含渲染后 HTML 的响应。
在 EJS 视图中使用控制流和条件语句
在 EJS 中,我们可以使用控制流和条件语句来根据不同条件渲染不同的 HTML 内容。
以下是一个示例,它使用 if
语句和 forEach
循环来渲染一个包含用户列表的 HTML 表格:
-- -------------------- ---- ------- ------- ------- ---- ------------- -------------- ----- -------- ------- -- ---------------------------- - -- ---- ------- --------- ------- ------- ---------- ------- ----- -- --- -- -------- --------展开代码
在这个示例中,我们使用 forEach
循环来遍历用户列表,并使用 <%= %>
标签来嵌入用户的名称和电子邮件地址。
在 EJS 视图中使用布局
在大型 Web 应用程序中,通常需要使用布局来避免在每个页面中重复相同的 HTML 代码。在 EJS 中,我们可以使用模板继承来实现布局。
以下是一个示例,它使用模板继承来创建一个基本布局:
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ----- ---------- ------- ------ --- ---- -- ------- -------展开代码
在这个示例中,我们使用 <%- %>
标签来嵌入视图内容。这个标签将视图内容作为原始 HTML 插入到布局中。
以下是一个示例,它使用上面的布局来创建一个完整的 EJS 视图:
<% layout('layout') %> <h1><%= title %></h1> <p><%= message %></p>
在这个示例中,我们使用 layout()
函数来指定要使用的布局。这个函数必须在视图内容之前调用。
结论
在本文中,我们介绍了如何在 Express.js 中使用 EJS 模板引擎来构建动态网站。我们学习了如何安装和配置 EJS,如何创建和渲染 EJS 视图,以及如何在视图中使用控制流、条件语句和布局。希望这篇文章对你有所帮助!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/676658fa76af2b9a20f618a1