分页实现

  • 前端基于element封装的分页组件 pagination(opens new window)
  • 后端基于mybatis的轻量级分页插件pageHelper(opens new window)

    前端调用实现

    1、前端定义分页流程
    1. // 一般在查询参数中定义分页变量
    2. queryParams: {
    3. pageNum: 1,
    4. pageSize: 10
    5. },
    6. // 页面添加分页组件，传入分页变量
    7. <pagination
    8. v-show="total>0"
    9. :total="total"
    10. :page.sync="queryParams.pageNum"
    11. :limit.sync="queryParams.pageSize"
    12. @pagination="getList"
    13. />
    14. // 调用后台方法，传入参数 获取结果
    15. listUser(this.queryParams).then(response => {
    16.   this.userList = response.rows;
    17.   this.total = response.total;
    18. }
    19. );

后台逻辑实现

  1. @PostMapping("/list")
  2. @ResponseBody
  3. public TableDataInfo list(User user)
  4. {
  5.     startPage();  // 此方法配合前端完成自动分页
  6.     List<User> list = userService.selectUserList(user);
  7.     return getDataTable(list);
  8. }
  • 常见坑点1：selectPostById莫名其妙的分页。例如下面这段代码
    1. startPage();
    2. List<User> list;
    3. if(user != null){
    4.   list = userService.selectUserList(user);
    5. } else {
    6.   list = new ArrayList<User>();
    7. }
    8. Post post = postService.selectPostById(1L);
    9. return getDataTable(list);

原因分析：这种情况下由于user存在null的情况，就会导致pageHelper生产了一个分页参数，但是没有被消费，这个参数就会一直保留在这个线程上。 当这个线程再次被使用时，就可能导致不该分页的方法去消费这个分页参数，这就产生了莫名其妙的分页。
上面这个代码，应该写成下面这个样子才能保证安全。

  1. List<User> list;
  2. if(user != null){
  3.     startPage();
  4.     list = userService.selectUserList(user);
  5. } else {
  6.     list = new ArrayList<User>();
  7. }
  8. Post post = postService.selectPostById(1L);
  9. return getDataTable(list);
  • 常见坑点2：添加了startPage方法。也没有正常分页。例如下面这段代码
    1. startPage();
    2. Post post = postService.selectPostById(1L);
    3. List<User> list = userService.selectUserList(user);
    4. return getDataTable(list);

原因分析：只对该语句以后的第一个查询（Select）语句得到的数据进行分页。
上面这个代码，应该写成下面这个样子才能正常分页。

  1. Post post = postService.selectPostById(1L);
  2. startPage();
  3. List<User> list = userService.selectUserList(user);
  4. return getDataTable(list);

注意
如果改为其他数据库需修改配置application.yml文件中的属性helperDialect=你的数据库