EJS模板无法渲染传入数据仅显示空白页问题求助

核心问题原因 #

• Node.js 中数据库查询属于异步 IO 操作，你当前的代码将 res.render 放在了 Product.find 回调函数的外部，会在数据库还未返回查询结果时就直接渲染页面，此时传入模板的 artisanproduct 是初始空数组，遍历空数组不会生成任何卡片元素，因此页面显示空白。
• 原有代码对查询结果的处理逻辑冗余，不需要拆分出三个独立数组再重新拼接为对象数组，可直接复用查询返回的 products 数据。
• EJS 模板中存在多余的闭合 </form> 标签，无对应开启的 <form> 标签，可能引发 DOM 结构解析异常。

修正后的路由代码 #

app.get('/viewproducts', function (req, res) {
  Product.find(function (err, products) {
    if (err) {
      console.log(err);
      return res.status(500).send('商品查询失败');
    }
    // 字段匹配的情况下可直接传入查询结果
    res.render('viewproducts', { artisanproduct: products });
  });
});

如果需要手动筛选字段，可调整为如下写法：

app.get('/viewproducts', function (req, res) {
  Product.find(function (err, products) {
    if (err) {
      console.log(err);
      return res.status(500).send('商品查询失败');
    }
    const productList = products.map(item => ({
      name: item.name,
      description: item.description,
      price: item.price
    }))
    res.render('viewproducts', { artisanproduct: productList });
  });
});

EJS 模板调整建议 #

删除多余的 </form> 标签，或者在对应位置补充 <form> 开启标签，避免 DOM 结构解析错误。

内容的提问来源于stack exchange，提问作者Khaoula Qassibi