在本章中，我们将深入探讨如何使用 Express.js 渲染 EJS 模板。渲染模板是 Web 应用程序中最重要的功能之一，它允许我们在服务器端生成动态 HTML 内容。
渲染 EJS 模板
首先，我们需要在 Express.js 中设置 EJS 作为我们的视图引擎。在上一篇中，我们已经介绍了如何使用 EJS 模板引擎，接下来我们将使用 res.render() 方法来渲染模板。
1. 设置视图引擎
确保在你的 Express 应用中已经设置了 EJS 作为视图引擎，如下所示：
1
2
3
4
5
6
7
8
9
| const express = require('express');
const app = express();
const path = require('path');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
|
2. 创建 EJS 模板
假设我们在 views 目录下创建了一个名为 index.ejs 的文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎页面</title>
</head>
<body>
<h1>欢迎, <%= name %>!</h1>
<p>当前时间：<%= currentTime %></p>
</body>
</html>
|
在这个模板中，我们使用了 <%= %> 语法来输出变量。
3. 渲染模板
接下来，我们将设置一个路由来渲染这个模板。我们将向模板传递一些数据，比如用户的名字和当前时间。
1
2
3
4
5
6
7
8
9
10
| app.get('/', (req, res) => {
const data = {
name: '张三',
currentTime: new Date().toLocaleString()
};
res.render('index', data);
});
|
在这里，我们定义了一个根路由，处理对主页的请求。我们创建了一个包含用户名称和当前时间的 data 对象，并将其传递给 res.render() 方法。
4. 启动服务器
最后，我们需要启动 Express 服务器，使其能够处理请求：
1
2
3
4
5
| const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`服务器正在运行，访问 http://localhost:${PORT}`);
});
|
完整代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| const express = require('express');
const app = express();
const path = require('path');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
const data = {
name: '张三',
currentTime: new Date().toLocaleString()
};
res.render('index', data);
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`服务器正在运行，访问 http://localhost:${PORT}`);
});
|
5. 访问渲染结果
现在启动你的服务器并访问 http://localhost:3000，你将会看到渲染后的 HTML 页面，其中将包含传递给模板的名称和当前时间。
总结
在本节中，我们学习了如何使用 Express.js 渲染 EJS 模板。通过 res.render() 方法，我们能够向模板传递动态数据，使得我们的网站能够生成个性化的内容。在下一节中，我们将讨论如何在渲染模板时传递多个变量。
