轻轻松松 get！「ruoyi分页原理的前端后端」一文带你彻底搞懂

前端

2023-01-18 12:46:56

掌握分页原理，打造高效数据列表

前言：

在当今数据密集的时代，分页技术已成为现代 Web 应用程序中不可或缺的一部分。它可以将庞大的数据集分解成更小、更易管理的块，从而优化用户体验和提高应用程序性能。本文将深入探讨分页原理，并通过示例代码展示如何在实际应用中实现它。

分页组件：前端与后端的协作

分页功能通常通过前端和后端的协同实现。前端负责创建分页界面，收集用户输入并将其传递给后端。后端则根据接收到的参数执行分页查询，并返回相应的数据。

前端实现：

前端可以使用各种框架和组件库来创建分页组件。例如：

Ant Design：流行的组件库，提供开箱即用的分页组件。
Bootstrap：广泛使用的框架，也包含分页组件。
jQuery：允许开发人员创建自定义分页组件。

前端查询：

前端分页组件收集用户输入，并将其转换成查询参数，例如当前页码和每页显示的数据条数。这些参数随后被发送到后端。

后端实现：

后端收到查询参数后，使用各种 ORM 框架或直接使用 SQL 语句执行分页查询。它将结果封装成分页信息，包括当前页码、总页数、每页数据量和实际数据。

分页原理的具体实现

让我们通过示例代码进一步了解分页的具体实现。

Java Service 层代码：

@Override
public PageInfo<User> findUserPage(UserQueryParams userQueryParams) {
    PageHelper.startPage(userQueryParams.getPage(), userQueryParams.getSize());
    List<User> userList = userMapper.selectUserList(userQueryParams);
    return new PageInfo<>(userList);
}

Java DAO 层代码：

@Override
public List<User> selectUserList(UserQueryParams userQueryParams) {
    return sqlSessionTemplate.selectList("com.example.mapper.UserMapper.selectUserList", userQueryParams);
}

前端 JavaScript 代码：

import { Pagination } from 'antd';

const App = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const handlePageChange = (page, pageSize) => {
    setCurrentPage(page);
    setPageSize(pageSize);
    // 调用后端 API 获取数据
  };

  return (
    <Pagination
      current={currentPage}
      pageSize={pageSize}
      total={100}
      onChange={handlePageChange}
    />
  );
};

export default App;