在开发的过程最常用也是最常见的就是表格的分页查询了，在开发的时候碰到了这个需求，所以今天讲讲怎么把Pagehelper集成到SpringBoot并结合前端框架Vue，完成分页的操作！
首先先在pom加上Pagehelper的依赖
<!-- pageHelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.3.0</version>
</dependency>
然后就是后端的的Controller文件的编写
@ApiOperation(value = "xxxxxxxx")
@GetMapping("pageInfo")
@ResponseBody
public PageInfo<xxx_xxx> dataInfo(int pageNum, int pageSize ,String xxx,String xxxx){
//1. 通过调用PageHelper的静态方法开始获取分页数据
//指定当前是第几页，以及每页要显示的条数
PageHelper.startPage(pageNum,pageSize);
//2. 获取当前的所有的记录
List<I_Family> list = i_familyService.getFamily(xxx, xxx);
//3. 获取当前分页对象
PageInfo<I_Family> pageInfo = new PageInfo<I_Family>(list);
return pageInfo;
}
那么现在后端就解决了，开始编写前端的部分的代码了…
首先先加一下element-UI分页的组件
在这个地方引入Pagination组件
<template>
<div :class="{'hidden':hidden}" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import { scrollTo } from '@/utils/scroll-to'
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 20
},
pageSizes: {
type: Array,
default() {
return [5,10, 20, 30, 50,100]
}
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
background: {
type: Boolean,
default: true
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
},
computed: {
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
},
pageSize: {
get() {
return this.limit
},
set(val) {
this.$emit('update:limit', val)
}
}
},
methods: {
handleSizeChange(val) {
this.$emit('pagination', { page: this.currentPage, limit: val })
if (this.autoScroll) {
scrollTo(0, 800)
}
},
handleCurrentChange(val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
if (this.autoScroll) {
scrollTo(0, 800)
}
}
}
}
</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>
然后在index页面引入组件开始使用
<template>
<!--分页-->
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
@pagination="getList"/>
</template>
export default {
components: { Pagination },
data() {
return {
listQuery: {
page: 1,
limit: 20
},
},
methods:{
fetchData(){
var vm = this
this.axios({
method: 'GET',
url: 'http://localhost:8070/xxx/xxxx?xxxID=' + id + '&pageNum=' + vm.listQuery.page + '&pageSize=' + vm.listQuery.limit
}).then(function(resp) {
console.log(resp.data)
//得到一个PageInfo对象
vm.total = resp.data.total//将pageInfo中的total对象给vm中的total
vm.list = resp.data.list//当前页的所有数据
}
}
}
到现在为止就可以实现分页功能！！！
收工，跑路！！！！