将 Mongodb 查询数据传递给 Pug 的更好方法

Question

我正在寻找一种更好的方法来将数据传递到 webdev 应用程序中的 index.js 文件。请注意，我实际上只有大约一个月的 webdev 经验，所以这可能是由于缺乏经验。这是我的软件流程：

我在呈现页面之前在路由处理程序中查询数据。然后我将这些数据传递给呈现的页面（注意我需要隐藏一些键值。但是聚合有效）。

exports.getPlotView = async(req, res, next) =>{ //从中获取要查询的模块，存储为var.testModel const qParse = new PlotQueryParse(req.query).parseObj(); // console.log(qParse) // const 测试块名称 = qParse.testblock+"名称" ; // const limitName = qParse.limitname;

 const aggregationObj = {$match:
                             {'jobId':qParse.jobId, '<key2>':<val2>, "<key>":"<val>"}
                         }

 const data = await qParse.testModel.aggregate([aggregationObj]);
 console.log(data[0])
 const dataString = JSON.stringify(data[0]);
 //parse the url to make the query
 res.status(200).render('testPlotView', {
     pageHeader: "Test",
     subHead: "Test summary",
     IPn: "IPn",
     inData:dataString
 });

}

数据被传递到 pug 模板。该模板将其用作隐藏元素

 extends base
 block content
     div.hide_data #{inData}

     div#dataviz

现在在我的 index.js 脚本（侦听 evenets）中，数据从页面加载，然后存储以供 post 处理。我想直接访问变量而不是隐藏它然后访问 DOM 元素。

window.addEventListener('load', 函数(){ 如果（window.location.href.includes（'testplotdata'））{ console.log('its a me mario') //如果我们在测试图数据页中，让我们绘制 var jsonObject = JSON.parse(document.querySelector('.hide_data').innerHTML); console.log(jsonObject['testData'])
```
 //post processing code ....

 }
```
})

同样，我想要一种获取查询数据的方法，无需将其保存为 DOM 元素，然后在我的外部事件侦听器脚本中访问它。

谢谢！

Answer 1

不是将数据存储在 HTML 中，而是将内联脚本添加到您的模板以将其存储在全局变量中。所以将 div.hide_data #{inData} 替换为：

script.
   var inData = !{inData};   // inData passed by backend must be a string
                             // representing a valid JS object (JSON will do)

现在您只需在外部脚本中将 inData 作为现成的本机对象进行访问（您需要确保在上述脚本之后加载，将其放在 <body> 的末尾即可）

// No need: var jsonObject = JSON.parse(document.querySelector('.hide_data').innerHTML);
console.log(inData);    // Go ahead with the data

将 Mongodb 查询数据传递给 Pug 的更好方法

Better way of passing Mongodb query data to Pug

javascript

mongoose

mongodb

express

pug