如何在.EJS模板中添加变量

在EJS（Embedded JavaScript）模板中添加变量是一种常见的做法，它允许你在渲染HTML时动态插入数据。以下是如何在EJS模板中添加变量的基础概念和相关步骤：

基础概念

EJS是一种简单的模板语言，它允许你在HTML中嵌入JavaScript代码。通过这种方式，你可以在服务器端生成动态内容。

添加变量的步骤

在服务器端设置变量：首先，你需要在服务器端定义要传递给模板的变量。这通常在渲染模板的函数中完成。
在服务器端设置变量：首先，你需要在服务器端定义要传递给模板的变量。这通常在渲染模板的函数中完成。
在EJS模板中使用变量：在EJS模板文件（例如index.ejs）中，你可以使用<%= %>标签来插入变量的值。
在EJS模板中使用变量：在EJS模板文件（例如index.ejs）中，你可以使用<%= %>标签来插入变量的值。

优势

动态内容：允许在服务器端生成动态HTML内容。
易于维护：将逻辑和视图分离，使代码更易于维护。
性能：EJS模板引擎在渲染时性能较高。

类型

EJS主要分为两种类型：

标准EJS：使用<%= %>插入变量，<% %>执行JavaScript代码。
EJS的Lodash模板：类似于标准EJS，但有一些额外的功能和改进。

应用场景

Web开发：在Node.js应用中广泛用于生成动态网页。
报告生成：可以用于生成包含动态数据的报告。
邮件模板：用于生成个性化的电子邮件内容。

常见问题及解决方法

1. 变量未显示

原因：可能是变量名拼写错误或未正确传递到模板。 解决方法：检查变量名拼写，并确保在渲染模板时正确传递了变量。

2. 变量值为空

原因：可能是服务器端未正确初始化变量或数据获取失败。 解决方法：在服务器端添加调试信息，确保变量被正确赋值。

3. 安全问题（如XSS攻击）

原因：直接插入用户输入可能导致跨站脚本攻击。 解决方法：使用<%= %>而不是<%- %>来插入变量，以确保自动进行HTML转义。

示例代码

以下是一个完整的示例，展示了如何在Express应用中使用EJS模板：

服务器端代码 (app.js)：

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

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

app.get('/', (req, res) => {
    const data = {
        title: 'My Website',
        message: 'Welcome to my website!'
    };
    res.render('index', data);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

EJS模板 (views/index.ejs)：

<!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><%= message %></h1>
</body>
</html>

通过这种方式，你可以轻松地在EJS模板中添加和使用变量，从而实现动态内容的渲染。