分页查询 前后端代码

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

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

  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;
};

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

你可能感兴趣的:(react,antd,js,react,js,sqlite,nodejs,web)