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

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

我有一个变量，比如 @font-face { font-family: 'BebasNeue'; src: url(fonts/BebasNeue-Regular.woff2) format('woff2'); }，其中包含 data 形式的数据，每个项目都有一个唯一的 ID。

Array

我已通过 GET 请求将数据从服务器发送到前端。但是如何为数据数组中的每个元素动态创建一个单独的网页？我必须在哪里写 html 和 css？我想要一种方法，可以为每个元素创建一个页面，例如 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. }) 显示有关与 Id 匹配的数据条目的信息。需要用哈巴狗吗？ hbs？ejs？我很困惑。

解决方法

所以我发现我必须使用 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. pages.ejs 中的前端标记：

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

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

请注意，<%、<%= 和 %> 是 EJS 的标签。在 official docs 中详细了解它们。

感谢 Mohammad 让我知道这件事。（来自评论）