如何在前端从 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 匹配的数据条目的信息。需要用哈巴狗吗？ hbs？ejs？我很困惑。

Answer 1

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

事情是这样的：

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

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 让我知道这件事。（来自评论）

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

How to retrieve data in front end from res.send and create page for each element in DB dynamically

javascript

backend

node.js

express