Mybatis-Plus实现分页的前后端

Mybatis-Plus实现分类的前后端
一。后端
1.配置分页设置类，返回的是一个分页拦截器，才能使用分页功能

@Configuration
@ConditionalOnClass(value = {PaginationInterceptor.class})
public class MybatisPlusIPageConfig {
   @Bean
   public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        return paginationInterceptor;
    }
}

2.分页代码

QueryWrapper queryWrapper = new QueryWrapper();
IPage<Question> iPage = new Page<>(3,5);//选出第三页，每页5个数据
iPage= questionMapper.selectPage(iPage,queryWrapper);
System.out.println(""+iPage.getRecords());//获取当前页的数据
System.out.println("获取total"+iPage.getTotal());//获取总数
System.out.println("前十个"+iPage.getSize());//获取每页个数
System.out.println(iPage.getPages());//获取总页数
System.out.println(iPage.getCurrent());//获取每页的个数

二。前端

选用element-ui的el-pagination组件,前端获取的是全部数据，跟上面写的分页函数无关

<el-pagination       
 @size-change="handleSizeChange" 
 @current-change="handleCurrentChange"
 :current-page="paginations.page_index" 
 :page-sizes="paginations.page_sizes"   
 :page-size="paginations.page_size"        
 :layout="paginations.layout"   
 :total="paginations.total">   
 </el-pagination>

data数据

 data() {  
   return {  
       tableData: [],  
       allTabledata: [],  
       search: "",
       paginations: {
        page_index: 1, //当前页
        total: 0, //总数
        page_size: 5, //一页显示多少
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper",
         }, 
     }; 
 },

处理方法

getQuestionBank() {  
    this.$http.get("url").then((res) => {
    this.allTableData = res.data.allData;            	
    console.log(this.allTableData);
    this.setPaginations();
    }).catch((err) => {          
    console.log(err)});
 },
 setPaginations() {     
      this.paginations.total = this.allTableData.length; //数据的数量
      this.paginations.page_index = 1; //默认显示第一页
      this.paginations.page_size = 5; //每页显示多少数据
      //显示数据
      this.tableData = this.allTableData.filter((item, index) => {                     
      		return index < this.paginations.page_size; 
            });
      },
    handleSizeChange: function (page_size) {      
      this.paginations.page_index = 1; //第一页
      this.paginations.page_size = page_size; //每页先显示多少数据
      this.tableData = this.allTableData.filter((item, index) => {        	 
      		return index < page_size;
      	    });
      },
      handleCurrentChange: function (page) {      // 跳转页数
      //获取当前页
      let index = this.paginations.page_size * (page - 1);
      //获取总数
      let allData = this.paginations.page_size * page;
      let tablist = [];
      for (let i = index; i < allData; i++) {    
        if (this.allTableData[i]) {          
      	     tablist.push(this.allTableData[i]); 
        }
        this.tableData = tablist; 
        }},
     }, 
    created() {
     this.getQuestionBank(); 
    },