mybatis-plus分页与vue结合_mybatisplus分页vue-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44542401/article/details/117412901

本文介绍了如何将mybatis-plus的分页功能与Vue.js前端结合使用。在后端，利用mybatis-plus进行分页查询，前端通过两次请求获取分页数据和总条数。在Vue中，采用分页插件实现前端页面的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
     })
    }