解决springboot+vue+mybatis中，将后台数据分页显示在前台，并且根据页码自动跳转对应页码信息

mapper文件这样写
从每次开始查询的位置，到每页展示的条数，

    
        select * from bookss limit  #{startIndex},#{pageSize}
    

dao、service、serviceimpl略
看controller
关键在这边，传入的page和size是从前台改变页码到指定页

    @GetMapping("/findAll/{page}/{size}")
    public Map findAll(@PathVariable("page") Integer Page,@PathVariable("size") Integer size) {

 //查询所有的书籍信息

    @GetMapping("/findAll/{page}/{size}")
    public Map findAll(@PathVariable("page") Integer Page,@PathVariable("size") Integer size) {

        //准备数据 通过这两个参数，可以算出start   计算方法 start=size(page-1)
        int currentPage = Page;//当前是第几页
        int pageSize = size; //页面大小

        Map map = new HashMap();
        map.put("startIndex",(currentPage-1)*pageSize);
        map.put("pageSize",pageSize);
        List booklist =  bookService.queryBookList(map);
        HashMap result = new HashMap<>();
        Long totals = bookService.findTotals();
        result.put("books",booklist);
        result.put("totals",totals);
        return result;


    }

此外还要向前台传输查询到的所有的数量的个数，目的是计算根据总条数和页面大小计算出分几页。
mapper

    
        select count(*) from bookss
    

dao中的方法

    //查询总数
    Long findTotals();

关键部分代码：

• 这个是请求地址，页面首次加载展示的信息，默认从1开始，页面展示6条信息
• const _this = this区分对象
• resp.data.books获取后台的数据
• resp.data.totals获取后台的数据
• _this.tableData，前台数据变量
• prop="address"和后台的属性一致，获取哪个属性的信息

   created(){
      const _this = this
      axios.get('http://localhost:8181/book/findAll/1/6').then(function (resp) {
         _this.tableData = resp.data.books
        _this.total = resp.data.totals
      })
    }

分页

• :page-size="6"：自定义页面展示几条数据
• :total="total"：查询到的数据总数
  通过这两个数据就可以计数出有几个页面

动态改变页面展示信息

   page(currentPage){
        const _this = this
        axios.get('http://localhost:8181/book/findAll/'+currentPage+'/6').then(function (resp) {
          _this.tableData = resp.data.books
          _this.total = resp.data.totals
        })
      }