Nodejs门外汉请教js怎么给ejs模块传数组变量或者对象？

Nodejs门外汉请教js怎么给ejs模块传数组变量或者对象？

门外汉请教js怎么给ejs模块传数组变量或者对象？ app.get(’/query’, function (req, res) {

    res.render('query', {
        title: '查询',
        bb1: i,
        bb2: i++,
        bb3: i,
        bb4: i,
        bb5: i,
        bb6: i,
        bb7: i,
        bb8: i,
        bb9: i,
        bb10:i,
        user: req.session.user,

怎么把bb1~bb10，改为bb[10]之类，试过一些方法都没用？求指点


4 回复

当然可以！在使用 EJS 模板引擎时，你可以很方便地将 JavaScript 数组或对象传递给模板。下面是一个具体的示例，展示如何将数组和对象传递给 EJS 模板，并在模板中使用它们。

示例代码

首先，确保你已经安装了 Express 和 EJS：

npm install express ejs

接下来，创建一个简单的 Express 应用来处理请求并渲染模板：

app.js

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

// 设置 EJS 作为模板引擎
app.set('view engine', 'ejs');

// 示例数据
const data = {
    title: '查询',
    user: { name: 'John Doe' },
    numbers: Array.from({ length: 10 }, (_, i) => i + 1),
    details: {
        name: 'Alice',
        age: 25,
        hobbies: ['reading', 'coding', 'traveling']
    }
};

// 路由处理
app.get('/query', (req, res) => {
    res.render('query', data);
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

在这个例子中，我们定义了一个 data 对象，其中包含一个数组 numbers 和一个对象 details。我们将这些数据传递给 res.render 方法来渲染模板。

query.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1>查询页面</h1>
    <p>用户信息: <%= user.name %></p>
    
    <!-- 遍历数组 -->
    <ul>
        <% for (let number of numbers) { %>
            <li><%= number %></li>
        <% } %>
    </ul>

    <!-- 访问对象属性 -->
    <p>姓名: <%= details.name %></p>
    <p>年龄: <%= details.age %></p>
    <p>爱好:</p>
    <ul>
        <% for (let hobby of details.hobbies) { %>
            <li><%= hobby %></li>
        <% } %>
    </ul>
</body>
</html>

解释

  1. 设置模板引擎：

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

    这行代码告诉 Express 使用 EJS 作为模板引擎。

  2. 数据准备：

    const data = {
    title: '查询',
    user: { name: 'John Doe' },
    numbers: Array.from({ length: 10 }, (_, i) => i + 1),
    details: {
        name: 'Alice',
        age: 25,
        hobbies: ['reading', 'coding', 'traveling']
    }
};

    我们创建了一个包含数组和对象的数据对象。

  3. 路由处理：

    app.get('/query', (req, res) => {
    res.render('query', data);
});

    在路由处理函数中，我们使用 res.render 方法将数据传递给模板进行渲染。

  4. 模板文件：

    • <%= title %> 和 <%= user.name %> 用于输出字符串。
    • <% for ... %> 循环用于遍历数组和对象。

通过这种方式，你可以方便地将数组和对象传递给 EJS 模板，并在模板中进行遍历和访问。希望这对你有所帮助！


var param = {
  title: '查询',
  user: req.session.user
};
for(var i = 1; i <= 10; i ++) {
  param['bb' + i] = i;
}
res.render('query', param);

多谢

当你使用 EJS 模板引擎时，你可以直接将数组或对象传递给 res.render 方法。以下是如何将多个变量（如 bb1 到 bb10）合并为一个数组并传递给 EJS 模板的示例。

示例代码

首先，确保你已经安装了 EJS 并正确配置了 Express：

npm install express ejs

然后，在你的 Node.js 代码中，你可以这样传递数组：

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

app.get('/query', function (req, res) {
    const bbArray = [];
    for (let i = 1; i <= 10; i++) {
        bbArray.push(i);
    }

    res.render('query', {
        title: '查询',
        bbArray: bbArray,
        user: req.session.user,
    });
});

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

在这个例子中，我们创建了一个名为 bbArray 的数组，并将其填充从 1 到 10 的数字。然后，我们将这个数组作为属性传递给 res.render 方法。

在 EJS 模板中使用传递的数组

在你的 EJS 文件（例如 query.ejs）中，你可以这样访问这个数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <ul>
        <% bbArray.forEach(function(item) { %>
            <li><%= item %></li>
        <% }); %>
    </ul>
    <p>当前用户： <%= user.username %></p>
</body>
</html>

在这个 EJS 模板中，我们遍历了传递的数组 bbArray 并显示每个元素。同时，我们也展示了如何访问传递的对象 user 中的 username 属性。

通过这种方式，你可以更简洁地传递数据到 EJS 模板，并在模板中灵活地使用这些数据。

回到顶部