Nodejs中ejs如何在前端使用后端传来的对象？

Nodejs中ejs如何在前端使用后端传来的对象？

如题。 举个例子，在后端用res.render(‘index’, {context: contextObject}); 前端的javascript里面有没有办法能拿到contextObject这个对象，并操作 （读取）其中的内容？

谢谢

4 回复

当然可以。在Node.js中使用EJS模板引擎时，可以在后端将数据传递给前端页面，然后通过EJS模板语法在前端页面中直接访问这些数据。下面我将详细解释这一过程，并提供示例代码。

示例

后端代码（Node.js + EJS）

假设我们有一个简单的Express应用：

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const contextObject = {
        title: "欢迎来到我的网站",
        content: "这是首页的内容"
    };
    res.render('index', { context: contextObject });
});

app.listen(3000, () => console.log("服务器运行在 http://localhost:3000"));

在这段代码中，我们创建了一个Express应用，并设置了EJS作为视图引擎。当用户访问根路径/时，我们将一个包含title和content属性的对象传递给index.ejs模板。

前端代码（index.ejs）

接下来，我们创建index.ejs文件来展示从后端传递过来的数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= context.title %></title>
</head>
<body>
    <h1><%= context.title %></h1>
    <p><%= context.content %></p>
</body>
</html>

在这个EJS模板中，我们使用了<%= %>标签来输出context对象中的属性。这会使得浏览器最终显示如下内容：

欢迎来到我的网站
这是首页的内容

直接在前端JavaScript中访问数据

如果你希望在前端的JavaScript代码中直接访问这些数据，你可以将它们嵌入到HTML中，例如：

<script>
    var contextObject = <%- JSON.stringify(context) %>;
    console.log(contextObject.title); // 输出 "欢迎来到我的网站"
</script>

注意这里的<%- %>标签，它会直接输出未经过滤的JavaScript代码。我们将其转换为JSON字符串，这样就可以在JavaScript中直接使用这个对象了。

总结

以上就是在Node.js应用中，如何使用EJS模板引擎将后端数据传递给前端并进行处理的过程。通过这种方式，你不仅可以在HTML中直接使用这些数据，还可以在JavaScript中访问它们，从而实现更灵活的前端逻辑。


假如： contextObject = {“key”:“value”}; ejs输出 <%= context.key %>

详情请参考 http://www.9958.pw/post/ejs

也就是说只能一个值一个值的取？

有几种可能是逐条操作比较麻烦的：

  1. contextObject有bind的方法，比如dump()，不能在前端直接调用；
  2. 如果contextObject里面变量比较多，还要for遍历？ var query = new Object(); <% for (var k in contextObject) { %> query.<%= k %> = <%- contextObject[k] %>; <% } %>

在Node.js中使用EJS模板引擎时，可以通过以下步骤将后端数据传递给前端，并在JavaScript中访问这些数据。

后端代码

首先，在后端代码中，你需要使用res.render方法将数据传递给EJS模板。例如：

// 假设这是一个Express应用
app.get('/', function(req, res) {
    var contextObject = { name: 'John Doe', age: 30 };
    res.render('index', { context: contextObject });
});

这里，contextObject对象被传递给了EJS模板，并作为变量context可用。

EJS模板代码

接下来，在EJS模板文件（例如index.ejs）中，你可以直接使用传递过来的数据。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Example</title>
</head>
<body>
    <h1>Welcome, <%= context.name %>!</h1>
    <p>You are <%= context.age %> years old.</p>

    <!-- 这里我们可以在HTML中直接访问context对象 -->
    <script type="text/javascript">
        // JavaScript可以直接访问EJS渲染上下文中的变量
        console.log("Context object:", <%= JSON.stringify(context) %>);
        // 或者直接访问特定属性
        console.log("Name:", <%= JSON.stringify(context.name) %>);
    </script>
</body>
</html>

在这个例子中，<%= %>标签用于插入变量的值到HTML中。当页面渲染时，它会输出用户的名字和年龄。

注意事项

  • 在使用<%= JSON.stringify(context) %>这样的语法时，确保你的数据是安全的，没有包含可能造成XSS攻击的恶意内容。
  • 如果需要更复杂的操作，可以考虑将context对象作为全局变量或通过其他方式传递给JavaScript，例如隐藏域或数据属性。

以上就是如何在Node.js和EJS中将后端数据传递到前端并进行访问的方法。

回到顶部