springBoot项目中使用Vue+Element实现pageHelper分页

导入pagehelper依赖

        
            com.github.pagehelper
            pagehelper-spring-boot-starter
            1.4.1
        

在springboot的配置文件里面配置pagehelper配置

##部分配置
pagehelper.helper-dialect=mysql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true
pagehelper.params=count=countSql

现在就可以使用分页插件了 下面是各个层的代码

//dao层  只需要一个查询所有方法
List selAll();

//xml
select * from xxx

//service

PageInfo queryInvitations(int pageNum, int pageSize);

//service实现类
@Override
    public PageInfo queryInvitations(int pageNum, int pageSize) {
        //使用分页插件
        PageHelper.startPage(pageNum,pageSize);
        //获取
        List invitations = invitationMapper.selAll();
        return new PageInfo(invitations);
    }

//controller
@RequestMapping("selAll")
    public PageInfo getInvitationList(@RequestParam int pageNum, @RequestParam int pageSize) throws Exception {
        // 调用业务逻辑,返回数据
        PageInfo invitationPageInfo =                             invitationService.queryInvitations(pageNum, pageSize);
        System.out.println(invitationPageInfo);
        return invitationPageInfo;
    }

前端就是用的elementui的分页，以及前端的代码

export default {

  data() {
    return {
      obj:[],
      tableData: {
        id: '',
        title: '',
        summary: '',
        author: '',
        createtime: '',
        inputmsg: ''
      },
      input:'',
      total:0,
      params: {
        page: 1,
        size: 3,
      },
    }
  },
  created() {
    this.getInvitationList();
  },
methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.size = val;
      this.getInvitationList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
      this.getInvitationList();
    },
    getInvitationList(){
      axios.get('http://localhost:8081/selAll', {  //params参数必写 , 如果没有参数传{}也可以
        params: {
          pageNum: this.params.page,
          pageSize: this.params.size,
          title: this.input
        }
      }).then((res)=>{
        console.log(res.data)
        let ins = res.data
        this.obj = ins.list
        this.total=ins.total
      })
    }
}
}