如何在模板中传递数据？

推荐答案

在 Express 中，可以通过 res.render() 方法将数据传递给模板引擎。以下是一个示例：

app.get('/', (req, res) => {
  const data = {
    title: 'Express 模板示例',
    message: '欢迎使用 Express 模板引擎！'
  };
  res.render('index', data);
});

在这个示例中，data 对象包含了要传递给模板的数据。res.render() 方法的第一个参数是模板文件的名称（例如 index），第二个参数是要传递给模板的数据对象。

本题详细解读

1. 模板引擎的选择

Express 支持多种模板引擎，如 EJS、Pug、Handlebars 等。在使用模板引擎之前，需要先设置并配置模板引擎。例如，使用 EJS 模板引擎时，可以通过以下代码进行设置：

app.set('view engine', 'ejs');

2. 数据传递方式

在 Express 中，数据通过 res.render() 方法传递给模板。res.render() 方法的第一个参数是模板文件的名称，第二个参数是一个包含数据的对象。模板引擎会根据传递的数据渲染模板，并生成最终的 HTML 页面。

3. 模板中的变量使用

在模板文件中，可以通过模板引擎的语法访问传递的数据。例如，在 EJS 模板中，可以使用 <%= %> 语法输出变量的值：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
</head>
<body>
  <h1><%= message %></h1>
</body>
</html>

在这个示例中，<%= title %> 和 <%= message %> 分别输出了 data 对象中的 title 和 message 属性。

4. 复杂数据的传递

除了简单的字符串，还可以传递复杂的数据结构，如数组或对象。例如：

// www.javascriptcn.com code example
app.get('/', (req, res) => {
  const data = {
    title: 'Express 模板示例',
    users: [
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 }
    ]
  };
  res.render('index', data);
});

在模板中，可以通过循环结构遍历数组：

<ul>
  <% users.forEach(user => { %>
    <li><%= user.name %> - <%= user.age %> 岁</li>
  <% }) %>
</ul>

5. 模板继承与局部模板

许多模板引擎支持模板继承和局部模板的功能。例如，在 EJS 中，可以使用 <%- include('partials/header') %> 引入局部模板。这种方式可以帮助你更好地组织代码，避免重复。

6. 安全性考虑

在传递数据时，需要注意防止 XSS（跨站脚本攻击）等安全问题。大多数模板引擎会自动对输出的变量进行转义，以防止恶意脚本注入。如果需要输出原始 HTML，可以使用 <%- %> 语法（在 EJS 中），但要确保数据来源可信。

通过以上方式，你可以在 Express 中灵活地传递数据到模板，并根据需要渲染动态内容。