分页查询前后端代码

最新推荐文章于 2025-06-15 23:02:58 发布

原创最新推荐文章于 2025-06-15 23:02:58 发布 · 996 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #js #sqlite #nodejs #web

js 同时被 3 个专栏收录

12 篇文章

订阅专栏

react

11 篇文章

订阅专栏

antd

3 篇文章

订阅专栏

本文探讨了在前端使用Ant Design和React进行开发时，如何通过分页查询优化数据展示，避免一次性加载大量数据。后端采用Koa框架配合SQLite，通过limit和count实现智能分页。遇到的问题和解决方案也进行了分享。

需求分析：
用表格展示数据，当数据过大时，从时间和缓存上考虑，一次返回全部数据是不可取的。于是使用分页查询。
前端每次点击切换页面的时候，带着当前页面参数向后端发请求，后端查询时用limit，只返回当前页面的数据，同时后端需返回一个count值计算所有要展示的数据量，供前端可展示页数（否则就只有一页）。
前端react、antd，后端koa、sqlite。

前端代码：
首先在组件pagination内设置翻页回调函数，写在属性onChange里，该函数可以拿到当前页面和页面条数，带上这些参数向后端发请求。
同时组件内要设置total，表示总条数，这样才可以显示正确的分页栏。

 <Table
              expandIcon={null}
              expandedRowRender={record => expandedRowRender(record)}
              expandedRowKeys={expendedKey}
              rowKey={record => record.id}
              columns={columns}
              dataSource={records}
              style={{ backgroundColor: '#fff', marginTop: 16 }}
              onChange={CChange}
              pagination={{ onChange: PageChange, total: pageCount, current: currentPage }}
/>

    const PageChange = (page, pageSize) => {
      currentPage = page;
      if (searchData.search) {
        actions.fetchRecords(searchData, page, pageSize);
        currentPage = 1;
      } else {
        actions.fetchRecords({}, page, pageSize);
      }
    };

踩坑：
可以看到我还有一个current属性，这个代表当前页面。之前我出现了一个bug，如果当前在第二页，点击搜索会返回正确的搜索信息，但分页栏的页面显示得还是第二页，正确来说应该要回到第一页。
于是我搜索antd的文档，发现其有一个current属性，我们在翻页和搜索的时候手动指定即可正确表示页面。

后端代码：
后端代码没啥可说的，就是拿到参数，查询的时候用上limit即可。
controller.js

export const getRecord = async (request, reply) => {
  console.log(request.query);
  const {
    match, search, page, pageSize,
  } = request.query;
  let ans;
  let condition;
  if (!match || !search) { // 返回全部记录
    ans = await getAllRecords(page, pageSize);
  } else { //  返回搜索记录
    if (match === 'exact') {
      condition = search;
    } else {
      condition = `%${search}%`;
    }
    ans = await getRecordsByCondition(condition, page, pageSize);
  }
  return reply(ans).code(200);
};

orm.js

export const getAllRecords = async (page, pageSize) => {
  const sqlAllRecords = `
  ${sqlCommon}
  order by createtime desc limit ${(page - 1) * pageSize},${pageSize};
  `;
  const sqlPageCount = `
  select count(*) as count from (${sqlCommon})
  `;
  const records = await sequelize.query(sqlAllRecords, { raw: true });
  const pageCount = await sequelize.query(sqlPageCount, { raw: true });
  console.log(pageCount[0][0].count);
  const ans = {
    records: records[0],
    pageCount: pageCount[0][0].count,
  };
  return ans;
};

运行截图没什么特别的，就不放了。