Node.js 后端分页实现 |21xrx.com

Node.js 后端分页实现

2023-07-05 01:58:21 深夜i 25 0

Node js 后端分页实现

Node.js 是一种流行的后端开发技术，其支持对数据库的操作和应用实现，可以让开发者快速且高效地构建出各种类型的应用程序。在实际应用中，很多应用都需要支持分页功能，以方便用户对大量数据进行查阅和操作，本文将讲解如何利用 Node.js 实现后端分页。

1. 首先了解分页的实现原理

分页功能是实现非常普遍的功能，它的基础原理是将大数据按照指定的数量进行划分，每次查询数据的时候只查询部分数据并且将页码显示在分页栏上，用户想跳转到其他页码时可以触发相应的操作请求，后端会再次返回新的数据进行页面渲染。可以大致了解以下分页实现原理：

图1：分页实现原理

2. 基于 Node.js 实现后端分页

Node.js 本身并不提供分页实现的工具库，开发者需要借助第三方模块来快速实现相应的功能。本文将以 Sequelize ORM 和 Express 库为例，进行分页功能实现。

（1）按分类查询数据

在这个分页实现的例子中，假设我们是一个博客网站，需要将所有博客按照分类进行查询并按照时间倒序排列。我们将先编写一个按照分类查询的 API，代码如下：

router.get('/posts/:category', async (req, res) => {
 const page = 1 = req.query;
 const { category } = req.params;
 try {
  const posts = await Post.findAndCountAll({
   where: { category },
   limit: perPage,
   offset: perPage * (page - 1),
   order: [['createdAt', 'DESC']]
  });
  res.json({
   data: posts.rows,
   pagination: {
    currentPage: parseInt(page, 10),
    pages: Math.ceil(posts.count / perPage),
    totalItems: posts.count,
   },
  });
 } catch (error) {
  res.status(500).send({ error: error.message });
 }
});

上述代码实现了一个按照分类查询博客的 API 接口，其中需要传递 `perPage` 和 `page` 参数来实现分页，同时通过 Sequelize 提供的 `findAndCountAll` 方法来查询博客数据，这个函数会将查询结果和总记录数一同返回。

（2）前端渲染分页

接下来，我们需要在前端中将分页渲染出来。前端需要根据后端返回的分页信息来计算总页数，生成页码按钮，并且将按钮点击事件连贯到后端请求上。前端的渲染代码如下：

const createPaginationButtons = (currentPage, pages) => {
 let buttons = '';
 for (let i = 1; i <= pages; i++) {
  const active = currentPage === i ? 'active' : '';
  buttons += `<button class="btn btn-page ${active}" data-page="${i}">${i}</button>`;
 }
 return buttons;
};
const renderPagination = ( pagination) => {
 const currentPage = pagination;
 container.innerHTML = `
  <div class="pagination">
   <span>${totalItems} items in total</span>
   <div class="pagination-buttons">${createPaginationButtons(currentPage, pages)}</div>
  </div>
 `;
};
const main = async () => {
 const container = document.querySelector('.posts-container');
 const paginationContainer = document.querySelector('.pagination-container');
 const response = await fetch('/api/posts/javascript');
 const pagination = await response.json();
 container.innerHTML = data.map(post => `<div>${post.title}</div>`).join('');
 renderPagination( container: paginationContainer );
 const pageButtons = document.querySelectorAll('.btn-page');
 [...pageButtons].forEach(button => button.addEventListener('click', async () => {
  const data = new FormData();
  data.append('perPage', 10);
  data.append('page', button.dataset.page);
  const response = await fetch(`/api/posts/javascript`,
   method: 'GET');
  const pagination: newPagination = await response.json();
  container.innerHTML = newData.map(post => `<div>${post.title}</div>`).join('');
  renderPagination( pagination: newPagination);
 }));
};
main();

上述代码将查询数据和渲染分页的逻辑分离，并且为分页按钮添加点击事件，将点击事件绑定到发送请求的方法上，实现了基于 Node.js 实现分页的功能。

上一篇: idea打包java可执行jar包

下一篇: C++线程池的四种创建方式及其区别

评论区

相似文章