Node.js Express与EJS模板变量传递：动态控制前端UI显示-js教程-PHP中文网

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

霞舞

发布： 2025-10-10 08:24:13

原创

172人浏览过

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传递过来的变量。

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

<%= 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>

登录后复制

关键点解析：

服务器端渲染： EJS模板在服务器端被Node.js处理，<%= userData.showAlert %> 会被替换为真实的字符串值（例如 "true" 或 "false"），然后将完整的HTML发送给浏览器。
*`data-` 属性：** 这是一个标准的HTML5特性，允许我们在HTML元素上存储自定义数据。它是将服务器端数据传递给客户端JavaScript进行后续处理的有效方式。
客户端JavaScript： 在浏览器中，JavaScript通过 element.dataset.propertyName 来访问 data-* 属性的值。由于HTML属性值总是字符串，所以 dataset.showAlert 会是 "true" 或 "false" 字符串，需要进行相应的比较。
避免在 <script> 标签内直接使用 EJS 变量进行逻辑判断： EJS变量在服务器端渲染时被替换，客户端JavaScript运行时，EJS标签已经不存在了。如果需要在JS代码中使用EJS变量，应将其渲染到HTML元素的属性（如 data-*）或一个全局JavaScript变量中（如 window.config = { showAlert: <%= userData.showAlert %> };）。

4. 注意事项

EJS渲染时机： 务必理解EJS是在服务器端生成HTML，然后将HTML发送给客户端浏览器。客户端的JavaScript在HTML加载后才执行。
变量转义： 始终优先使用 <%= %> 进行变量输出，以自动转义HTML特殊字符，防止跨站脚本（XSS）攻击。只有当你确定输出内容是安全的HTML片段时，才考虑使用 <%- %>。
调试技巧： 如果变量没有按预期显示，请检查浏览器开发者工具中的“元素”或“源代码”选项卡，查看EJS标签是否被正确替换为期望的值。这有助于区分是Express传递问题、EJS渲染问题还是客户端JavaScript逻辑问题。
数据结构： 传递给EJS的数据对象可以包含复杂的嵌套结构。在EJS中，你可以使用点符号（userData.userName）来访问这些嵌套属性。

5. 总结

通过Express的 res.render() 方法和EJS模板的 <%= %> 标签，我们可以轻松地将后端数据传递到前端页面。结合HTML5的 data-* 属性和客户端JavaScript，我们能够实现强大的动态UI控制，如根据服务器端状态动态显示或隐藏元素，从而构建交互性更强的Web应用。理解服务器端渲染与客户端脚本执行的生命周期是掌握这一技术栈的关键。

以上就是Node.js Express与EJS模板变量传递：动态控制前端UI显示的详细内容，更多请关注php中文网其它相关文章！