如何将MongoDB集合传递给.pug模板？代码场景下的技术问询

你的核心问题是没有把MongoDB查询到的集合数据传递给Pug模板——当前代码用res.send()直接返回了JSON数据，完全没和模板做关联，所以模板里自然找不到Test变量。下面一步步帮你修正：

1. 修改get函数：渲染模板并传递数据 #

把res.send(list)换成Express的res.render()方法，这个方法专门用来渲染模板并传递变量。我们会把查询到的集合数据以Test为变量名传给模板：

// test.js中的路由处理函数
function get(req, res) {
  mongo.GetSort({}, {state: 1, name: 1}, 'Test')
    .then(function (list) {
      // 渲染test.pug模板，同时把集合数据赋值给Test变量
      res.render('test', { Test: list });
    })
    .catch(function(err) {
      // 别忘记处理查询错误，避免服务器崩溃
      console.error('获取Test集合失败:', err);
      res.status(500).send('服务器内部错误');
    });
}

2. 在Pug模板中正确访问数据 #

现在你可以在test.pug里直接使用Test变量了。如果要在控制台打印数据，需要注意把模板变量转成前端JS能识别的JSON格式：

// test.pug示例代码
html
  head
    title Test集合数据展示
  body
    h1 Test集合内容
    // 遍历集合数据，把内容展示在页面上
    ul
      each item in Test
        li= `${item.name} - 状态: ${item.state}`
    
    // 在浏览器控制台打印Test集合数据
    script.
      // 用!{}输出未转义的JSON字符串，确保前端能解析成JS对象
      const testCollection = !{JSON.stringify(Test)};
      console.log('Test集合数据:', testCollection);

3. 确保Express已配置Pug模板引擎 #

如果还没做基础配置，需要在你的主入口文件（比如app.js）里添加以下代码，让Express识别Pug模板：

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

// 设置模板引擎为Pug
app.set('view engine', 'pug');
// 设置模板文件存放目录（默认是项目根目录下的views文件夹，若你的test.pug在其他路径需修改）
app.set('views', './views');

关键细节提醒 #

• res.render()的第一个参数是模板文件名（无需加.pug后缀），第二个参数是传给模板的变量对象，键名就是你在模板里要用到的变量名（这里是Test）。
• 在Pug的script标签里，必须用!{}输出未转义的JSON字符串——如果用#{}会自动转义特殊字符，导致JSON格式失效，前端无法解析。

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