如何在前端从res.send中检索数据，并为数据库中的每个元素动态创建页面

Question

我有一个变量，比如data，它包含Array形式的数据，每个项目都有一个唯一的ID。

app.get('/products/:id', function (req, res) {
res.send(data.map(data => "" + data.id + "")) //basically gets the data of the element in the Array whos Id has been given to the server. 
})

我已经通过GET请求将数据从服务器发送到前端。但是，我如何为数据数组中的每个元素动态创建一个单独的网页？我必须在哪里写html和css？我想要一种方法，可以为每个元素创建一个页面，比如domain.com/products/id，它显示与Id匹配的数据条目的信息。需要使用pug吗？hbs？ejs？我很困惑。

Answer 1

所以我发现我必须使用Javascript模板将数据发送到视图。我用了ejs，效果很好！

情况如下：

1.从我的数据库中获取我的数据，在本例中是使用db.findOne()的MongoDB。

2.我们得到一个数组，比方说data。使用相同的res.render语法将变量发送到我的视图，只是用一种更酷的方式。

app.get('/blogs/:id',(req,res)=>{
const data = //find function
res.render('page.ejs', {body:data});
})

:id为数据库中的每个元素创建一个页面。现在视图，即public/page.ejs文件有一个全局body变量我们现在可以使用来显示我们的博客。

3.页面中的前端标记。ejs:

<div class="blogs">
<%=body.forEach (item)=>{%>
<p><%=item.blog%></p><br>
<%=}%>
</div>

我们在数组上调用一个forEach函数，并为数组中的每个项(即每个博客(创建一个段落元素。

请不要说<%、<%=和%>是EJS的标签。在官方文档中阅读更多关于它们的信息。

感谢穆罕默德让我知道这件事。(来自评论(