vue结合springboot添加分页支持

前端代码

分页组件

<el-pagination
  @current-change="findPage"
  @size-change="findSize"
  small
  background
  prev-text="上一页"
  next-text="下一页"
  style="margin: 15px 0px"
  layout="prev, pager, next,jumper,total,sizes"
  :page-size="size"
  :current-page="pageNow"
  :page-sizes="[2,4,6,8,10]"
  :total="totals">
</el-pagination>

js代码

        data() {
            return {
                tableData:[],
                search:'',
                totals:0,
                size:6,
                pageNow:1,
            }
        },
        methods:{
            findPage(page){//处理分页
                console.log(page);
                this.page= page;
                this.findAll(page,this.size)
            },
            findSize(size){  //处理每页显示记录发生变化的方法
                console.log(size);
                this.size=size;
                this.findAll(this.page,size);
            },
              //查找所有
            findAll(page,size){
                page = page?page:this.pageNow;
                size = size?size:this.size;
                this.$http.get("http://localhost:8989/book/findByPage?                                                                   pageNow="+page+"&pageSize="+size).then(res=>{
                    console.log(res.data);
                    this.tableData=res.data.books;
                    this.totals=res.data.totals;
                })
            },
           created() {
           this.findAll();
        }

后端代码

dao层

    //分页查询
     List<Book> findByPage(@Param("start")Integer start, @Param("rows")Integer rows);

     //查询总条数
     Long findTotals();

mapper文件

    <!--    分页查询-->
     <select id="findByPage" resultType="Book">
          select * from book limit #{start},#{rows}
     </select>

     <!--    查询总条数-->
     <select id="findTotals" resultType="Long">
         select count(id) from book
     </select>

service层

    //分页查询
     List<Book> findByPage(Integer pageNow, Integer rows);
     //查询总条数
     Long findTotals();

serviceImpl层

    @Override
     public List<Book> findByPage(Integer pageNow, Integer rows) {
         int start = (pageNow-1)*rows;
         return bookDAO.findByPage(start,rows);
     }

     @Override
     public Long findTotals() {
         return bookDAO.findTotals();
     }

controller层

    //分页查询
     @GetMapping("findByPage")
     public Map<String,Object> findByPage(Integer pageNow, Integer pageSize){
         Map<String,Object> results = new HashMap<>();
         pageNow = pageNow == null?1:pageNow;  //避免空指针
         pageSize = pageSize == null?4:pageSize;  //避免空指针
         List<Book> books=service.findByPage(pageNow,pageSize);
         Long totals = service.findTotals();
         results.put("books",books);
         results.put("totals",totals);
         return results;
     }

每次只需要把实体类 Book 换成新的实体类

//后端controller层方法
results.put("books",books);
results.put("totals",totals);
//前端代码 findAll 方法
this.tableData=res.data.books;
this.totals=res.data.totals;