Nodejs 请问使用ejs怎样可以把数据存在浏览器端的变量中？

Nodejs 请问使用ejs怎样可以把数据存在浏览器端的变量中？

4 回复

Nodejs 请问使用ejs怎样可以把数据存在浏览器端的变量中？

在使用 EJS（Embedded JavaScript）模板引擎时，有时需要将服务器端的数据传递到客户端的JavaScript变量中。这可以通过直接在EJS模板中插入JavaScript代码来实现。以下是一个简单的示例，展示如何将Node.js服务器端的数据通过EJS模板传递到浏览器端的JavaScript变量。

示例代码

假设我们有一个简单的Express应用，并且我们希望将一些数据传递给前端页面。

  1. 服务器端代码
// 引入必要的模块
const express = require('express');
const app = express();
const port = 3000;

// 定义一些数据
const data = {
    username: 'JohnDoe',
    age: 25,
    email: 'john.doe@example.com'
};

// 设置视图引擎为EJS
app.set('view engine', 'ejs');

// 路由处理
app.get('/', (req, res) => {
    // 渲染EJS模板，并将数据传递给模板
    res.render('index', { user: data });
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});
  1. EJS模板代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pass Data to Client</title>
</head>
<body>
    <h1>Welcome, <%= user.username %>!</h1>

    <!-- 将服务器端的数据传递到JavaScript变量 -->
    <script>
        const userData = {
            username: '<%= user.username %>',
            age: <%= user.age %>,
            email: '<%= user.email %>'
        };
        
        console.log(userData);
    </script>
</body>
</html>

解释

在这个例子中，我们首先定义了一些数据对象data，然后在路由处理函数中将其传递给EJS模板。在EJS模板中，我们使用<%= %>标签来输出字符串值，而使用<% %>标签来执行JavaScript代码并输出非字符串值（如数字）。

在JavaScript部分，我们将这些数据存储在一个名为userData的变量中，这样就可以在浏览器端的JavaScript代码中使用这些数据了。

这种方法简单且有效，适用于大多数基本需求。如果需要更复杂的交互或状态管理，可以考虑使用现代前端框架如React、Vue等。


你在前端渲染不就行了，一个异步把model拉到前端，再用ejs render一下，ejs引入在浏览器上运行，而不是在后端，是不是这个意思？

模板中加script标签，var一个变量等于ejs render出的json格式字符串

<script> var yourvariables = { <%= key %> : <%= val %> }； </script>

在Node.js中使用EJS模板引擎时，你可以将后端的数据传递到前端页面，并将其存储在浏览器端的JavaScript变量中。以下是如何实现这一功能的方法：

示例代码

  1. 服务器端（Node.js + EJS）
// app.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const data = { name: "John Doe", age: 30 };
    res.render('index', { user: data });
});

app.listen(3000, () => console.log('Server started on port 3000'));
  1. 模板文件（views/index.ejs）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Example</title>
</head>
<body>
    <script>
        // 将后端传递的数据赋值给浏览器端的变量
        var userData = <%- JSON.stringify(user) %>;
        
        console.log(userData.name);  // 输出 "John Doe"
        console.log(userData.age);   // 输出 30
    </script>
</body>
</html>

解释

  • 在app.js中，我们定义了一个包含用户信息的对象data，并将其通过res.render方法传递给EJS模板。
  • 在index.ejs模板中，使用<%- JSON.stringify(user) %>将后端传来的数据以JSON字符串的形式插入到JavaScript代码中，并直接赋值给userData变量。
  • 这样，userData变量就可以在客户端的JavaScript环境中使用了。

这种方式可以让你在服务器端生成的HTML页面中嵌入动态数据，从而在客户端进行操作。

回到顶部