登录
首页 >  文章 >  前端

Node.jsEJS传值，动态控制前端UI

时间：2025-11-03 16:45:41 193浏览 收藏

学习文章要努力，但是不要急！今天的这篇文章《Node.js Express传EJS变量，动态控制前端UI》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

Node.js Express与EJS模板变量传递：动态控制前端UI显示

本文详细介绍了如何在Node.js Express应用中，将后端变量安全有效地传递至EJS模板，并利用这些变量动态控制前端UI元素的显示，例如根据业务逻辑决定是否展示警告信息。通过示例代码，阐述了Express路由中数据传递方法及EJS模板中变量的接收与嵌入技巧，同时强调了服务器端渲染与客户端脚本交互的关键点。

1. 概述：Express与EJS的数据桥梁

在构建基于Node.js和Express的Web应用时，我们经常需要将服务器端处理的数据（如用户状态、数据库查询结果、业务逻辑判断）呈现在客户端的HTML页面上。EJS（Embedded JavaScript）作为一种流行的模板引擎，允许我们在HTML中嵌入JavaScript代码，从而实现动态内容的生成。理解如何高效地在Express路由中将数据传递给EJS模板，是实现动态UI控制的基础。

2. Express路由中传递数据到EJS

Express框架通过 res.render() 方法将数据对象传递给指定的EJS模板。这个数据对象中的所有属性都将在EJS模板中作为局部变量可用。

示例代码：Express路由

假设我们有一个仪表盘页面，需要根据用户的某些状态来决定是否显示一个警告信息。

// app.js 或一个独立的路由文件 (routes/dashboard.js)
const express = require('express');
const router = express.Router();

router.get("/dashboard", (req, res, next) => {
  // 模拟从数据库或业务逻辑中获取的数据
  const userData = {
    userName: "访客用户",
    showAlert: true, // 这是一个布尔值，用于控制警告显示
    message: "您的账户信息需要更新！"
  };

  // 使用 res.render() 方法将 userData 对象传递给 'pages/dashboard' 模板
  // userData 对象中的属性（userName, showAlert, message）将在 EJS 模板中直接可用
  res.render("pages/dashboard", { userData });
});

module.exports = router;

在上述代码中，我们定义了一个 /dashboard 路由。当请求到达此路由时，我们创建了一个 userData 对象，其中包含 showAlert 属性来指示是否应该显示警告。res.render("pages/dashboard", { userData }) 会加载 views/pages/dashboard.ejs 文件，并将 userData 对象作为渲染上下文。

3. EJS模板中接收与使用变量

在EJS模板中，我们可以使用特定的标签来访问从Express传递过来的变量。

  • <%= variable %>: 用于输出变量的值，并对HTML特殊字符进行转义，防止XSS攻击。
  • <%- variable %>: 用于输出变量的原始值，不进行转义。使用时需谨慎，确保内容安全。

示例代码：EJS模板 (views/pages/dashboard.ejs)

为了实现动态控制警告显示，我们可以将 showAlert 变量嵌入到HTML元素的 data-* 属性中，然后使用客户端JavaScript来读取并操作DOM。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户仪表盘</title>
    <style>
        /* 警告框的基本样式 */
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
            color: #a94442; /* 文本颜色 */
            background-color: #f2dede; /* 背景色 */
            border-color: #ebccd1; /* 边框颜色 */
            display: none; /* 默认隐藏 */
        }
        /* 当需要显示时添加此class */
        .alert.show {
            display: block;
        }
    </style>
</head>
<body>
    <main>
        <h1>欢迎, <%= userData.userName %>!</h1>

        <!--
            使用数据属性 (data-show-alert) 将服务器端变量传递到客户端。
            EJS在服务器端渲染时，会将 <%= userData.showAlert %> 替换为实际的布尔值字符串 "true" 或 "false"。
            默认将警告框隐藏 (display: none)。
        -->
        <div id="statusAlert" class="alert" data-show-alert="<%= userData.showAlert %>">
            <%= userData.message %>
        </div>

        <p>这里是仪表盘的其他内容...</p>
    </main>

    <script>
        // 确保DOM完全加载后再执行脚本
        document.addEventListener('DOMContentLoaded', () => {
            const alertElement = document.getElementById('statusAlert');

            if (alertElement) {
                // 从数据属性中获取服务器端传递的布尔值字符串
                // 注意：HTML属性值总是字符串，所以需要与 'true' 字符串进行比较
                const shouldDisplayAlert = alertElement.dataset.showAlert === 'true';

                if (shouldDisplayAlert) {
                    // 如果 shouldDisplayAlert 为 true，则添加 'show' 类来显示警告框
                    alertElement.classList.add('show');
                    // 如果需要更复杂的交互，例如浏览器原生弹窗，可以在这里触发
                    // alert('警告: ' + alertElement.textContent.trim());
                }
            }
        });
    </script>
</body>
</html>

关键点解析：

  1. 服务器端渲染： EJS模板在服务器端被Node.js处理，<%= userData.showAlert %> 会被替换为真实的字符串值（例如 "true" 或 "false"），然后将完整的HTML发送给浏览器。
  2. *`data-` 属性：** 这是一个标准的HTML5特性，允许我们在HTML元素上存储自定义数据。它是将服务器端数据传递给客户端JavaScript进行后续处理的有效方式。
  3. 客户端JavaScript： 在浏览器中，JavaScript通过 element.dataset.propertyName 来访问 data-* 属性的值。由于HTML属性值总是字符串，所以 dataset.showAlert 会是 "true" 或 "false" 字符串，需要进行相应的比较。
  4. 避免在