21xrx.com
2024-11-22 06:28:30 Friday
登录
文章检索 我的文章 写文章
Node.js 后端分页实现
2023-07-05 01:58:21 深夜i     --     --
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 实现分页的功能。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复