mybatis-plus分页与vue结合

mybatis-plus插件分页部分可以参照Mybatis-Plus插件-分页查询
部分，废话不多说，直接上代码

后端

 /**
     * 分页查询数据
     * @return
     */
    @RequestMapping("/selectPageText")
    public List<Singer> selectPageText (@RequestParam("index") Integer index){
        Page<Singer>page=new Page<>(index,5);
        IPage<Singer>iPage=singerService.selectPageText(page);

        List<Singer>list=iPage.getRecords();
        return list;
    }

/**
     * 查询个总数据的条数
     * @return
     */
    @GetMapping("/selecount")
    public Integer selecount(){
        return singerService.count();
    }

前端

created() {
    const _this=this;
    const index=1;
    /*获取分页数据*/
    axios.get('http://localhost:8181/singer/selectPageText',{params:{index}}).then(function (resp){
      console.log(resp)
      const gg=resp.data.length
      for(var i=0;i<gg; i++ ){
       if (resp.data[i].sex==true){
         resp.data[i].sex="男"
       }
        if (resp.data[i].sex==false){
          resp.data[i].sex="女"
        }
      }
      for(var i=0;i<gg; i++ ){
        resp.data[i].birth=resp.data[i].birth.substr(0,10);
      }
      _this.tableData= resp.data;

    })
    /*获取总数据的条数，进行分页*/
    axios.get('http://localhost:8181/singer/selecount').then(function (resp){
      _this.total=resp.data
    })

  }

我这里是采用两个去请求，因为在第一个请求数据的时候，我只能获取到后端分页好的数据和分页后的数据个数。额，因为我还没有想到用后端的第一个方法获取总的数据的条数并传给前端，所以就又写了一个方法来获取总数据的条数

data(){
tableData:null,//表格数据
total:null,//分页总条数
}

• vue分页插件

<el-pagination
        background
        layout="prev, pager, next"
        :page-size="5"
        :total="total"
        @current-change="page"
        >
    el-pagination>

• 分页，向后台请求数据

page(currentPage ){
      const _this=this;
      const index=currentPage;
     axios.get('http://localhost:8181/singer/selectPageText',{params:{index}}).then(function (resp){
       console.log(resp)
       const gg=resp.data.length
       for(var i=0;i<gg; i++ ){
         if (resp.data[i].sex==true){
           resp.data[i].sex="男"
         }
         if (resp.data[i].sex==false){
           resp.data[i].sex="女"
         }
       }
       for(var i=0;i<gg; i++ ){
         resp.data[i].birth=resp.data[i].birth.substr(0,10);
       }
       _this.tableData= resp.data;
     })
    }