element-UI+Vue+SpringBoot 分页查询

前端分页插件使用element-UI的

组件代码

current-page，指定当前的页码数

page-size，指定每页的数据条数

total，总记录条数

current-change，当页码数发生改变时触发的事件

Vue代码

在vue中初始化分页条件

        //初始分页条件
        pagination: {
          page: 1,
          size: 8,
          count: 0,
        },

将分页参数发送到后台

      getStoreFileList() {

        const params = this.pagination;
    
        this.axios.get('/storefile/list?page='+this.pagination.page +'&size='+ this.pagination.size)
        //this.axios.post('/storefile/list',{params})
        .then((res) => {
          this.storeFileList = res.data.result;
          this.pagination.count = res.data.count;
          // console.log(this.storeFileList);
          // alert(this.storeFileList[0].name);
        })
      }

后台响应的结果集赋值到table表格中，并且将记录总条数更新。

current-change，页码数发生改变，给分页条件重新赋值，然后用新的分页参数请求后台，刷新列表。

      //分页条件改变
      handleCurrentChange(page) {
        this.pagination.page = page;
        this.getStoreFileList();
      },

Java后台

    @GetMapping("/list")
    public PageResult findAll(@RequestParam(required = false) Integer page,
                                         @RequestParam(required = false) Integer size
                                        ){
        page = page == null || page < 2 ? 0 : page - 1;
        size = size == null || size < 0 ? 10 : size;

        Sort sort = new Sort(Sort.Direction.DESC, "uploadDate");
        PageRequest pageRequest = PageRequest.of(page, size, sort);
        Page all = storeFileRepository.findAll(pageRequest);
        //总记录数
        long totalElements = all.getTotalElements();
        //数据列表
        List list = all.getContent();
        //总页数
        int totalPages = all.getTotalPages();
        //返回的数据集
        PageResult pageResult = new PageResult<>();
        pageResult.setCount(totalElements);
        pageResult.setResult(list);
        pageResult.setPage(totalPages);
        return pageResult;
    }

使用spring data的PageRequest对象来进行分页，将分页参数和查询条件封装成一个PageRequest对象，然后根据PageRequest对象查询出结果集，对结果集进行解析。

为了更好的将响应的结果集返回给前端，这里使用了一个自定义PageResult对象来进行结果集的响应。

public class PageResult {

	//总记录数
	private Long count;

	//总页数
	private Integer page;

	//结果
	private List result;

	public PageResult() {
	}

	public Long getCount() {
		return count;
	}

	public void setCount(Long count) {
		this.count = count;
	}

	public Integer getPage() {
		return page;
	}

	public void setPage(Integer page) {
		this.page = page;
	}

	public List getResult() {
		return result;
	}

	public void setResult(List result) {
		this.result = result;
	}
}

将数据列表集，总记录数，总页数封装成一个PageResult对象返回给前端，前端再解析进行渲染。