Блог

Я создаю сайт блога и пытаюсь использовать разбивку на страницы для навигации по страницам сообщений в блоге, когда в базе данных хранится более 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 переменную и отобразит соответствующие страницы сообщений в блоге из серверной части. Но вместо этого он ничего не делает.

Любая помощь будет оценена.

Поскольку вы знаете общее количество элементов (сообщений в блоге), вы можете выполнить простую математику, чтобы узнать, какой будет последняя страница.

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

Точно так же, как вы передаете posts and totalItems , я бы также передал currentPage and 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> тегов.