分页实现

#前端调用实现

前端

html：

// 页面添加分页组件，传入分页变量
<pagination
  v-show="total>0"  //整个分页组件中，通过 v-show 属性来判断是否展示分页组件，如果后端返回的总记录数 total 大于 0，就展示分页组件。
  :total="total"  //分页组件中，通过 total 属性来获取后端返回的总记录数，从而计算出总页数，并在分页中展示。:表示传递给组件的参数
  :page.sync="queryParams.pageNum" //同样的，通过 :page.sync 和 :limit.sync 属性，来绑定当前页码和每页数据数量。这些属性是和组件内部的状态进行双向绑定的，当页码或每页数据数量发生变化时，组件内部会自动刷新。
  :limit.sync="queryParams.pageSize"
  @pagination="getList" //最后，通过 @pagination 属性，绑定一个自定义回调函数 getList，当用户点击分页组件中的页码时，将会调用该函数，来重新获取当前页码的数据。
/>


js：
// 定义分页变量
queryParams: {
  pageNum: 1,
  pageSize: 10
},
methods: {
  getList(newPage) {  // 定义 getList 函数
    this.queryParams.pageNum = newPage;  // 更新页码参数
    listUser(this.queryParams).then(response => { // 调用接口获取数据
      this.userList = response.rows;
      this.total = response.total;
    });
  }// 调用后端api方法，传入参数 获取结果查询结构 
listUser(this.queryParams).then(response => {
    this.userList = response.rows; //这里面保存着响应的分页后的数据
    this.total = response.total; //总数
  }
);}

 

后台

@PostMapping("/list") //定义/list接口,用于查询出列表
@ResponseBody //返回非页面数据
public TableDataInfo list(User user) //TableDataInfo 可以理解为分页后的数据结构，user用于条件查询
{ 
startPage(); // 此方法配合前端完成自动分页pagehelper，前端会发送当前页和页面大小，这里会保存该数据， 
List<User> list = userService.selectUserList(user); //要分页的list 
return getDataTable(list);//将list分页 
}

常见坑点1：selectPostById莫名其妙的分页。例如下面这段代码

startPage(); //创建一些分页参数
List<User> list;
if(user != null){
list = userService.selectUserList(user);
} else {
list = new ArrayList<User>();
}
Post post = postService.selectPostById(1L);
return getDataTable(list);

原因分析：这种情况下由于user存在null的情况，就会导致pageHelper生产了一个分页参数，但是没有被selectUserList执行时消费，这个参数就会一直保留在这个线程上。 当这个线程的参数再次被selectPostById错误的使用时，就可能导致不该分页的方法去消费这个分页参数，这就产生了莫名其妙的分页。因此分页函数startPage应该与要分页的list紧密结合

上面这个代码，应该写成下面这个样子才能保证安全。

List<User> list;
if(user != null){
startPage();
list = userService.selectUserList(user);
} else {
list = new ArrayList<User>();
}
Post post = postService.selectPostById(1L);
return getDataTable(list);

 

 

注意

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