分页实现

若依框架是一款开箱即用的企业级前后端分离项目，前端基于 Vue 和 Element UI，后端基于 Spring Boot 和 MyBatis。本文将详细介绍在若依框架中如何实现分页功能，包括前端和后端的具体实现步骤、常见问题和注意事项。

一、前端分页实现

前端分页功能是通过 Element UI 提供的 pagination 组件来实现的。这个组件允许用户在页面上进行分页操作，并通过分页参数与后端交互获取分页数据。

1. 定义分页参数

在前端 Vue 组件的 data 中定义用于控制分页的参数，这些参数包括当前页码 (pageNum)、每页显示的条目数 (pageSize) 和数据总条数 (total)。

export default {
  data() {
    return {
      // 查询参数，包括分页信息
      queryParams: {
        pageNum: 1,  // 当前页码
        pageSize: 10 // 每页显示数量
      },
      userList: [],   // 用户列表数据
      total: 0        // 数据总条数
    };
  },
  methods: {
    // 获取用户列表数据
    getList() {
      listUser(this.queryParams).then(response => {
        this.userList = response.rows;  // 设置用户列表数据
        this.total = response.total;    // 设置数据总条数
      });
    }
  }
};

2. 添加分页组件

在模板中使用 pagination 组件，并将分页参数绑定到组件上。通过 @pagination 事件来响应分页操作，触发数据的重新加载。

<template>
  <div>
    <!-- 用户列表展示 -->
    <el-table :data="userList">
      <!-- 表格列定义 -->
    </el-table>

    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

关键点：

• v-show="total > 0"：当数据条目大于 0 时显示分页组件。
• :page.sync 和 :limit.sync：双向绑定当前页码和每页显示数量。
• @pagination：分页改变时触发 getList 方法重新获取数据。

3. 调用后端接口

在 getList 方法中，调用后端接口方法 listUser，并将 queryParams 作为参数传递，获取分页后的数据。

listUser(this.queryParams).then(response => {
  this.userList = response.rows;  // 设置用户列表数据
  this.total = response.total;    // 设置数据总条数
});

二、后端分页实现

后端分页依赖 MyBatis 的 PageHelper 插件。通过 PageHelper，后端可以轻松地处理分页查询，并将结果返回给前端。

1. 引入 PageHelper

在若依框架中，PageHelper 已经集成，你只需要在业务逻辑中调用 startPage 方法来启动分页。

2. 在 Service 层启动分页

在 Service 层的方法中使用 PageHelper.startPage 启动分页查询。startPage 方法会自动从查询参数中获取 pageNum 和 pageSize，并应用到接下来的 SQL 查询中。

@Service
public class UserServiceImpl implements IUserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> selectUserList(User user) {
        // 启动分页，参数为当前页码和每页显示数量
        PageHelper.startPage(user.getPageNum(), user.getPageSize());
        // 查询用户列表
        return userMapper.selectUserList(user);
    }
}

3. 在 Controller 层封装分页结果

在 Controller 层，通过 startPage 方法启动分页，然后调用业务逻辑进行查询，并将结果封装到 TableDataInfo 对象中返回给前端。

@RestController
@RequestMapping("/system/user")
public class UserController {

    @Autowired
    private IUserService userService;

    @PostMapping("/list")
    @ResponseBody
    public TableDataInfo list(User user) {
        // 启动分页
        startPage();
        // 查询用户列表
        List<User> list = userService.selectUserList(user);
        // 返回封装后的分页数据
        return getDataTable(list);
    }
}

重要说明：

• startPage()：启动分页，PageHelper 会自动获取分页参数（如 pageNum 和 pageSize）。
• getDataTable(List)：将查询结果封装为带有分页信息的 TableDataInfo 对象，供前端使用。

三、常见问题与解决方案

在实际开发过程中，可能会遇到分页实现中的一些常见问题。以下是几个常见的坑点以及对应的解决方案。

1. 未预期的分页问题

问题描述：某些情况下，由于 startPage 调用位置不当，可能会导致一些不该分页的查询也受到分页影响，从而引发预期之外的问题。

示例问题：

startPage();
List<User> list;
if(user != null){
    list = userService.selectUserList(user);
} else {
    list = new ArrayList<User>();
}
Post post = postService.selectPostById(1L);  // 这里会受到分页影响
return getDataTable(list);

解决方案：应确保 startPage 方法仅在分页查询的代码块内调用，避免影响其他查询。

正确示例：

List<User> list;
if(user != null){
    startPage();
    list = userService.selectUserList(user);
} else {
    list = new ArrayList<User>();
}
Post post = postService.selectPostById(1L);  // 确保此查询不受分页影响
return getDataTable(list);

2. 分页无效的问题

问题描述：如果 startPage 方法之后存在其他非分页的查询，可能会导致分页无效。

示例问题：

startPage();
Post post = postService.selectPostById(1L);  // 这里不该分页
List<User> list = userService.selectUserList(user);  // 这个分页无效
return getDataTable(list);

解决方案：确保 startPage 方法紧跟在分页查询方法之前调用。

正确示例：

Post post = postService.selectPostById(1L);  // 确保非分页查询在前
startPage();
List<User> list = userService.selectUserList(user);  // 正确分页
return getDataTable(list);

3. 数据库方言问题

问题描述：默认情况下，PageHelper 使用的是 MySQL 的分页语法。如果项目数据库使用其他类型，需要调整 PageHelper 的配置。

解决方案：在 application.yml 中设置 pagehelper.helperDialect 为对应数据库的方言，例如 PostgreSQL。

pagehelper:
  helperDialect: postgresql  # 修改为PostgreSQL数据库方言

四、注意事项

1. 线程安全性：PageHelper 的分页参数存储在 ThreadLocal 中，确保分页方法调用后紧跟 MyBatis 的查询方法。PageHelper 会在 finally 代码块中自动清除 ThreadLocal 存储的对象，以确保线程安全。

2. 异常处理：如果在调用 startPage 后，MyBatis 查询方法未被正确调用（例如因为异常抛出），可能会导致 ThreadLocal 中的分页参数未被清除，从而影响该线程的后续操作。

3. 分页结果解析：在前端解析分页结果时，需要确保正确解析数据列表和总条数，以保证分页组件的正确显示和功能性。