PageHelp使用笔记

1.前端向后端传数据

前端必须要写对后端的端口号（例图：8089）

并且axios要写在方法体内

2.普通vue2要从后台获取图片路径

从后台拿来数据的时候把路径变成了字符串，需要用require才能把图片加载出来

3.引入pagehelper依赖

        <!--分页依赖-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.13</version>
        </dependency>

4.建立controller接口

 @GetMapping("/selectall")
    public PageInfo<Ebook> selectAll(Integer page , Integer size) {
        LOG.info("-----------------controller----------------");
        LOG.info("查询第{}页数据，每页{}条", page, size);
        //此时list中有pageinfo的信信息，同时也有想要查询的数据
        PageInfo<Ebook> list = ebookService.selectAll(page, size);
        LOG.info("查询到的数据为：{}", list.getList());
        LOG.info("总页数:{}",list);
        LOG.info("-----------------controller结束----------------");
        return list;
    }

5.同时在Service层完成分页

 public PageInfo<Ebook> selectAll(Integer page,Integer size){
       LOG.info("-----------------service----------------");
       LOG.info("查询所有电子书");
       //1.先开始分页
       PageHelper.startPage(page, size);
       //2.再查询数据
       List<Ebook> ebookList=ebookMapper.selectAll();
       //在创造该对象的同时，会将ebookList作为参数传递给PageInfo的构造函数
       PageInfo<Ebook> pageInfo = new PageInfo<>(ebookList);
       //将数据放入pageInfo自带的List中
       pageInfo.setList(ebookList);
       LOG.info("pageinfo:{}",pageInfo);
       LOG.info("分页总页数:{}",pageInfo.getPages());
       LOG.info("-----------------service结束----------------");
       //返回pageInfo
          return pageInfo;
    }

注意：返回值应该是pageinfo，我们可以把数据放在pageinfo里自带的List中，这样pageinfo中既有分页信息，又有所要查询的信息

6.前端中完成向后端的接口连接

selectpages(){
  this.$http.get('http://localhost:8089/selectall',{
     params:{
       page:this.Pages.page,
       size:this.Pages.size
     }
  }).then(resp=>{
    /* 对返回来的数据用.list获取想要查询的数据 */
    this.datas =resp.data.list
    /* 使用Pagestot接到总页数pages */
    this.Pagestot = resp.data.pages
   console.log("这是总页数：{}"+this.Pagestot)
    console.log(this.datas)
  })

}

7.页面设计

<!--  分页  -->
    <div>
      <button v-for="item in Pagestot" :key="item" @click="pageclic(item)" style="width: 20px;height: 20px;margin-left: 6px">{{item}}</button>
  </div>

点击进入相应页数

pageclic(page){
      this.Pages.page = page
      this.selectpages()
}

8.分页完成