SpringBoot+Vue el-pagination使用Pagehelper分页插件

 

先看看效果图

 

 

 

 

 前台：

 

 

 currentPage: 1,
 pagesize:10,
 total:1,

控件

 <el-pagination
            :total="total" 
            :page-sizes="[10, 20, 30]"
            layout="total, sizes, prev, pager, next, jumper" 
           :page-size="pageSize"
           :current-page="currentPage" 
           @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>

前台方法

 //查询数据方法
 userGetAll()
      { 
       var Params = {currentPage :this.currentPage,pagesize:this.pagesize};  
       requestall(Params).then(resp=>{ 
          this.usertabledata=resp.page.list; 
          this.total = resp.page.total; 
        })
      },

   handleSizeChange(val) {

      this.pagesize = val;

      this.currentPage = 1;

      this.userGetAll();

      },

   handleCurrentChange(val) {

       this.currentPage = val;

       this.userGetAll();  

     },

 

 后台

appliaction.yml

# 分页配置，针对mysql
pagehelper:
  helper-dialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count=countSql

 

 

pom.xml

<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <!-- 特别注意版本问题, 看到评论以后得以纠正 -->
            <version>1.2.10</version>
 </dependency>

 

接收方法

  @PostMapping("/getall")
    public  Object getall(int  currentPage, int pagesize)
        {
        //使用分页插件,核心代码就这一行
        Page<Object> p = PageHelper.startPage(currentPage, pagesize);//最重要的一步
         List<User> allGoods = userLoginServices.queryAll();//调用查询方法一定要放在startPage后面，不然分页不了
        PageInfo<User> pageInfo = new PageInfo<User>(allGoods,pagesize);
        Map<String,Object> data=new HashMap<>();
        data.put("page",pageInfo);
        return data;
    }

 

网上有很多方法，一起勉励！