在本章中，我们将深入探讨如何使用 Express.js 渲染 EJS 模板。渲染模板是 Web 应用程序中最重要的功能之一，它允许我们在服务器端生成动态 HTML 内容。

渲染 EJS 模板

首先，我们需要在 Express.js 中设置 EJS 作为我们的视图引擎。在上一篇中，我们已经介绍了如何使用 EJS 模板引擎，接下来我们将使用 res.render() 方法来渲染模板。

1. 设置视图引擎

确保在你的 Express 应用中已经设置了 EJS 作为视图引擎，如下所示：

const express = require('express');
const app = express();
const path = require('path');

// 设置视图目录
app.set('views', path.join(__dirname, 'views'));

// 设置 EJS 作为模板引擎
app.set('view engine', 'ejs');

2. 创建 EJS 模板

假设我们在 views 目录下创建了一个名为 index.ejs 的文件，内容如下：

<!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. 渲染模板

接下来，我们将设置一个路由来渲染这个模板。我们将向模板传递一些数据，比如用户的名字和当前时间。

app.get('/', (req, res) => {
    // 要传递给模板的数据
    const data = {
        name: '张三',
        currentTime: new Date().toLocaleString()
    };

    // 渲染 template，并传递 data
    res.render('index', data);
});

在这里，我们定义了一个根路由，处理对主页的请求。我们创建了一个包含用户名称和当前时间的 data 对象，并将其传递给 res.render() 方法。

4. 启动服务器

最后，我们需要启动 Express 服务器，使其能够处理请求：

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
    console.log(`服务器正在运行，访问 http://localhost:${PORT}`);
});

完整代码如下：

const express = require('express');
const app = express();
const path = require('path');

// 设置视图目录
app.set('views', path.join(__dirname, 'views'));

// 设置 EJS 作为模板引擎
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() 方法，我们能够向模板传递动态数据，使得我们的网站能够生成个性化的内容。在下一节中，我们将讨论如何在渲染模板时传递多个变量。

Jupyter AI

26 渲染模板