在现代 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
