vue+vant+PageHelper前后端分页

手机端分页效果

分页代码前端，使用van-pagination

<van-pagination
  v-model="currentPage"
  :total-items="total"
  :items-per-page="perPage"
  :page-count="numberPage"
 @change="pageChange"
  force-ellipses
/>

<!--script代码-->
data(){

    return {
        currentPage:1,//默认是展示第一页
        total:0,//总记录数
        perPage:10,//每页展示10条
        numberPage:0,//总页数 初始为0，最后拿到数据后计算 要取整
        dataList:[],
    
    
    },
    methods:{
        pageChange(page){
            this.currentPage = page;
            this.getList();
        },
        getList(){
            
            //调用后端，传入currentPage，perPage参数，返回code，msg，data
            if(code==='1000'){
               this.total = data.total;
               this.numberPage = Math.ceil(data.total/this.perPage);
               this.dataList = data.list;
            }
        }
    }
}

分页组件样式修改【图一为效果样式】

.van-pagination__item {
	color: #e52639;
	background-color:#fff;
}
.van-pagination__item--active{
	color: #fff;
	background-color: #e52639;
}

页码进1取整

java后端代码

 PageHelper.startPage(currentPage, perPage);
 List<Test> list = entityDao.getList(test);
 return new Result.ok(new PageInfo<Test>list )