前后端分页的简单实现

  • Vue.js Element-UI
  • SpringBoot Jpa

基本效果图如下：

1.前端基于Element的分页组件

Element分页组件：

1
2
3
4
5
6
7
8
9
<div class="block" style="margin-top:15px;">
      <el-pagination align='center'
      @current-change="handleCurrentChange" // 改变页码时触发的方法，还有很多其他的触发事件
      :current-page="currentPage"   // 当前页
      :page-size="pageSize"         // 分页大小
      layout="total, prev, pager, next"     // 分页条的功能(主题) 可定制
      :total="total">   // 元素总数量
      </el-pagination>   
</div>

定义数据参数：

1
2
3
4
5
tableData:[],  // 元素列表
currentPage: 1, // 当前页码
total: 0,  // 总条数
pageSize: 10,   // 每页的数据条数
....

请求后端数据

1
2
3
4
5
6
7
8
9
10
// get page
to_getPage(){
    var self = this;
    this.$axios.get("/member?currentPage=" + self.currentPage + "&pageSize=" + self.pageSize).then((response)=>{
        let data = response.data;
        console.info(data);
        self.tableData = data.content;
        self.total = data.totalElements;
    });
},

2.后端基于Jpa的简单分页方法

1
2
3
4
5
6
7
@GetMapping("/member")
Page<Member> getmembers(Integer pageSize,
						Integer currentPage){
	// 生成一个分页器，包括当前页，大小，排序规则
	Pageable pageable = PageRequest.of(currentPage,pageSize,Sort.by("memId"));
	return memberRepository.findAll(pageable);
}

3.更多关于Jpa分页的步骤知识点：

  1. 创建实体类
  2. 定义Repository并继承PagingAndSortingRepository或其子类 如：JpaRepository
1
2
3
4
5
6
7
8
9
// 相应约定好的分页方法就送上门来了
public interface ArticleRepository extends PagingAndSortingRepository<Article,Long> {
     //查询article表的所有数据，传入Pageable分页参数，不需要自己写SQL
    Page<Article> findAll(Pageable pageable);
    //根据author字段查询article表数据，传入Pageable分页参数，不需要自己写SQL
    Page<Article> findByAuthor(String author, Pageable pageable);
    //根据author字段和title字段，查询article表数据，传入Pageable分页参数，不需要自己写SQL
    Slice<Article> findByAuthorAndTitle(String author, String title, Pageable pageable);
}
  1. 生成分页器 实现分页
1
2
3
4
5
6
7
8
// 查询第一页(从0开始)的数据，每页10条数据
Pageable pageable = PageRequest.of(0, 10);   //第一页
//Pageable pageable = PageRequest.of(1, 10);  //第二页
//Pageable pageable = PageRequest.of(2, 10);  // 第三页
//数据库操作获取查询结果
Page<Article> articlePage = articleRepository.findAll(pageable);
//将查询结果转换为List
List<Article> articleList = articlePage.getContent();
  1. 实现排序
1
2
3
4
5
6
7
8
9
// 简单排序
articleRepository.findAll(Sort.by("createTime"));

// 复合排序
articleRepository.findAll(Sort.by("author").ascending()
                        .and(Sort.by("createTime").descending()));

// 分页排序
Pageable pageable = PageRequest.of(0, 10,Sort.by("createTime"));
  1. 关于分页器的返回对象Page继承自Slice，这里介绍一些方法内容
1
2
3
4
5
6
7
8
9
10
11
12
13
List <T>  getContent（）; //获取元素数组

Pageable  getPageable（）; //当前切片的分页信息

boolean  hasContent（）; //是否有查询结果？

boolean  isFirst（）;  //是否是第一个切片

boolean  isLast（）;  //是否是最后一个切片

Pageable nextPageable(); // 下一个切片的分页信息

Pageable previousPageable(); // 上一个切片的分页信息
  1. Page的方法
1
2
3
4
5
//总页数
int getTotalPages();

//总数据条数
long getTotalElements();