在前面一节中，我们探讨了如何使用 Express.js 渲染模板。了解了如何通过响应对象将数据连接到模板并展示它们。现在这一节中，我们将深入讨论如何在渲染模板时传递变量。
传递变量的基本概念
在使用模板引擎渲染页面时，通常需要将数据传递到模板中，以便在页面上动态生成内容。在 Express.js 中，您可以通过 res.render() 方法轻松实现这一点，该方法的第一个参数为模板名称，第二个参数则为要传递到模板的变量对象。
例子：基础变量传递
让我们从一个基本的案例开始，演示如何传递变量。假设我们有一个名为 index.ejs 的模板文件，其内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1><%= greeting %></h1>
<p>当前时间是：<%= currentTime %></p>
</body>
</html>
|
然后可以在我们的 Express 应用中这样设置路由：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| const express = require('express');
const app = express();
const path = require('path');
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.get('/', (req, res) => {
const currentTime = new Date().toLocaleString();
res.render('index', {
title: '欢迎来到首页',
greeting: '你好，世界！',
currentTime: currentTime
});
});
app.listen(3000, () => {
console.log('服务器已启动，访问 http://localhost:3000');
});
|
在这个例子中，我们创建了一个简单的 Express 应用程序，并在根路由中调用 res.render() 方法，将 title、greeting 和 currentTime 变量传递给 index.ejs 模板。模板中的 <%= %> 语法用来插入变量值。
传递复杂的数据结构
除了基本数据类型，我们还可以向模板传递复杂的对象或数组。这在需要动态展示多个内容时尤其有用。
例子：传递对象和数组
假设我们想在模板中显示一份用户的详细信息，以及他们的爱好列表。在 index.ejs 中，模版可能看起来如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= user.name %>'s Profile</title>
</head>
<body>
<h1>用户姓名: <%= user.name %></h1>
<p>年龄: <%= user.age %></p>
<h2>爱好</h2>
<ul>
<% user.hobbies.forEach(function(hobby) { %>
<li><%= hobby %></li>
<% }) %>
</ul>
</body>
</html>
|
在路由中，我们可以这样设置：
1
2
3
4
5
6
7
8
9
| app.get('/user', (req, res) => {
const user = {
name: '张三',
age: 28,
hobbies: ['阅读', '旅行', '摄影']
};
res.render('index', { user: user });
});
|
此时，当您访问 /user 路由时，将渲染一个显示用户信息和爱好的页面。
使用局部变量
在使用模板时，您还可以将不同的局部变量传递到模板，以进一步组织代码。例如：
1
2
3
4
| app.get('/hello', (req, res) => {
const name = 'Alice';
res.render('hello', { name: name });
});
|
在 hello.ejs 中，您可以这样使用：
1
| <h1>你好，<%= name %>!</h1>
|
总结
通过本节的学习，我们了解到如何在使用 Express.js 渲染模板时传递各种变量，包括简单类型、对象和数组。有效的使用变量能够极大增强模板的动态性和可读性。在实际开发中，这种方法使得我们能够创建出交互性更强、内容更加丰富的 Web 应用。
在下一章中，我们将继续讨论如何将 Node.js 应用部署到生产环境，包括如何优化应用性能和安全性。请继续关注！
