将数据值从MongoDB传递到Node.js中的ejs模板

Question

我有一个快速应用程序，我在其中使用ejs渲染视图。 例如，这是我拥有的一种视图：

<a href="/admin/categories" class="list-group-item">
                            <span style="margin-right: 6px" class="glyphicon glyphicon-folder-close"></span>
                            Categories
                            <span class="badge categoriesCount"><%= catCount %></span> <!-- get data from mongo -->
                        </a>

在我的路线文件中，我从mongodb获取了值，并尝试将它们传递到视图中，例如：

router.get('/', (req, res) => {

let cat_count = 0,
    prod_count = 0,
    user_count = 0,
    order_count = 0;

Category.count({}, (err, count) => {
    if (!err) {
        cat_count = count;
        console.log('Cat count from db:\t' + count);
    } else {
        console.error('Error Fetching Categories Count:\t' + err);
    }
});

Products.count({}, (err, count) => {
    if (!err) {
        prod_count = count;
        console.log('Prod count from db:\t' + count);
    } else {
        console.error('Error Fetching Products Count:\t' + err);
    }
});

Users.count({}, (err, count) => {
    if (!err) {
        user_count = count;
        console.log('User count from db:\t' + count);
    } else {
        console.error('Error Fetching Users Count:\t' + err);
    }
});

Orders.count({}, (err, count) => {
    if (!err) {
        order_count = count;
        console.log('Orders count from db:\t' + count);
    } else {
        console.error('Error Fetching Orders Count:\t' + err);
    }
});

res.render('index', {
    catCount: cat_count,
    prodCount: prod_count,
    userCount: user_count,
    orderCount: order_count
  });
});

其中catCount是模板中变量的实际参数。 这是行不通的，我一直想办法解决。

我也尝试过使用DOM querySelector('className').innerHTML但这也不起作用。

将值发送到模板的最好方法是使用ejs。 谢谢。

Answer 1

您的代码将无法工作，因为您的count变量的值将仅在回调运行后分配。 处理回调时，必须注意，在运行main函数时，回调函数中的代码不会立即执行。 您现在所拥有的类似于以下内容：

// initialize variables
// execute Category.count({}) and call the function that you passed in when data is ready
// execute Products.count({}) and call the function that you passed in when data is ready
// execute Users.count({}) and call the function that you passed in when data is ready
// execute Orders.count({}) and call the function that you passed in when data is ready
// render

所有这5行代码将在一秒钟内运行，并且不会等到那些回调函数被调用。 一种解决方法是将所有回调相互嵌套：

router.get('/', (req, res) => {

  let cat_count = 0,
      prod_count = 0,
      user_count = 0,
      order_count = 0;

  Category.count({}, (err, count) => {
    if (!err) {
      cat_count = count;
      console.log('Cat count from db:\t' + count);

      Products.count({}, (err, count) => {
        if (!err) {
          prod_count = count;
          console.log('Prod count from db:\t' + count);

          Users.count({}, (err, count) => {
            if (!err) {
              user_count = count;
              console.log('User count from db:\t' + count);

              Orders.count({}, (err, count) => {
                if (!err) {
                  order_count = count;
                  console.log('Orders count from db:\t' + count);

                  res.render('index', {
                    catCount: cat_count,
                    prodCount: prod_count,
                    userCount: user_count,
                    orderCount: order_count
                  });
                } else {
                  console.error('Error Fetching Orders Count:\t' + err);
                }
              });
            } else {
              console.error('Error Fetching Users Count:\t' + err);
            }
          });
        } else {
          console.error('Error Fetching Products Count:\t' + err);
        }
      });
    } else {
      console.error('Error Fetching Categories Count:\t' + err);
    }
  });
});

但是，这确实很麻烦，在JavaScript中被称为回调地狱 。 这是Promises派上用场的地方。

您可以执行以下操作：

router.get('/', (req, res) => {
  let queries = [
    Category.count({}), 
    Products.count({}), 
    Users.count({}), 
    Orders.count({})
  ];

  Promise.all(queries)
  .then(results => {
    res.render('index', {
      catCount: results[0],
      prodCount: results[1],
      userCount: results[2],
      orderCount: results[3]
    });
  })
  .catch(err => {
    console.error('Error fetching data:', err)
  });
});

对于Mongoose，当您不传递函数作为第二个参数时，函数调用返回的值（例如Category.count({}) ）将是一个Promise。 我们将所有这些未解决的Promises放入数组中，并调用Promise.all来解决它们。 通过使用Promise.all ，您可以等到所有计数查询都执行Promise.all之后再继续呈现index视图。 在这种情况下，Mongoose函数调用的results将按照queries数组的顺序存储在results数组中。