Question

我正在构建一个博客站点，并尝试在数据库中存储3个以上的帖子时使用分页导航博客帖子的页面。我试图在单击“较新”或“上一个”按钮到后端以控制页面时从前端传递数据。我该怎么做？

我觉得我必须以某种方式使用POST方法。

这是我在EJS中的前端代码。这些是控制帖子页面的按钮。

  <% if(totalItems > 3){ %>
  <div class="page-buttons">
    <form action="/">
      <button type="submit" class="btn btn-outline-info newer-posts">Next</button>

    <button type="submit" class="btn btn-outline-info older-posts">Previous</button>
    </form>

  </div>
  <% } %>

这是后端的路由。

app.get("/", (req, res) => {
  let currentPage = req.query.page || 1;
  let perPage = 3;
  let totalItems;

  Post.find()
    .countDocuments()
    .then(count => {
      totalItems = count;
      Post.find()
        .skip((currentPage - 1) * perPage)
        .limit(perPage)
        .then(posts => {
            res.render("home", {
              posts: posts,
              totalItems: totalItems
            });
        });
    })
});

我希望单击按钮将增加或减少currentPage变量，并从后端呈现适当的博客文章页面。但是，它什么也不做。

任何帮助将不胜感激。

Answer 1

既然您知道项目的总数（博客帖子），就可以做一些简单的数学运算来知道最后一页的内容。

const lastPage = Math.ceil(totalItems / perPage);

就像您要通过posts和totalItems一样，我也要通过currentPage和lastPage。我们基本上可以在模板中进行上述数学运算，但是为什么要这么做？

res.render("home", {
    posts,
    currentPage,
    totalItems,
    lastPage
});
// The above notation is shorthand for prop: value

现在，在模板中，我们可以根据传递的变量决定是否显示上一页和下一页按钮。

如果currentPage大于1，我们必须在第二页或更高的页面上，因此请显示指向当前页面?page=<%= currentPage - 1 %>的链接。

如果currentPage低于lastPage，则我们尚未到达结尾，因此我们显示指向下一页的链接。就是?page=<%= currentPage + 1 %>

这里不需要使用表格。简单的<a>标签就足够了。

如何添加分页来浏览博客文章页面（节点/快速）

1 个答案: