PageHelper分页的前后端整体实现

实现的效果

前端：

1. 添加div

    <div class="block" align="center">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
          </el-pagination>
      </div>

2. data return 中添加变量

    pageInfo: [],
    count: 0,
    pageSize: 1,

3. 刷新页面时请求

    mounted: function () {
        var _this = this
        axios.get('http://localhost:8761/face/getAllUser/1/1').then(res => {
            if (res !== null) {
            this.count = res.data.total
            this.pageInfo = res.data
            _this.tableData = res.data.list
            } else {
            alert('查询失败')
            }
        }).catch(res => {
            console.log(res)
        })
    }

4. 在methods中添加handleSizeChange、handleCurrentChange方法

    handleSizeChange (val) {
          this.pageSize = val
          var _this = this
          axios.get('http://localhost:8761/face/getAllUser/1/' + this.pageSize).then(res => {
          if (res !== null) {
            this.count = res.data.total
            this.pageInfo = res.data
            _this.tableData = res.data.list
          } else {
              alert('查询失败')
          }
          }).catch(res => {
          console.log(res)
          })
      },
      handleCurrentChange (val) {
          var _this = this
          axios.get('http://localhost:8761/face/getAllUser/' + val + '/' + this.pageSize).then(res => {
          if (res !== null) {
            this.count = res.data.total
            this.pageInfo = res.data
            _this.tableData = res.data.list
          } else {
              alert('查询失败')
          }
          }).catch(res => {
          console.log(res)
          })
      }

后端：

1. 注册PageHelper类到容器中

    @Bean
    public PageHelper pageHelper() {
        PageHelper pageHelper = new PageHelper();
        Properties properties = new Properties();
        // 设置为true时，会将RowBounds第一个参数offset当成pageNum页码使用
        properties.setProperty("offsetAsPageNum","true");
        // 查询总条数
        properties.setProperty("rowBoundsWithCount","true");
        /**
	         * 配置合理分页，如果为turn,pageNum<1会查询第一页，
	         * 如果pageNum>pages会查询最后一页,为false则返回空
         */
        properties.setProperty("reasonable","true");
        // 数据库方言
        properties.setProperty("dialect","mysql");
        pageHelper.setProperties(properties);
        return pageHelper;
    }

2. controller中的方法

    @RequestMapping(value = "/getAllUser/{pageNum}/{pageSize}" ,method = RequestMethod.GET)
    @CrossOrigin(origins = "*",maxAge = 3600)
    public PageInfo<User> getAllUser(@PathVariable int pageNum,@PathVariable int pageSize) {
        PageHelper.startPage(pageNum,pageSize);
	    List<User> userList = userService.findAll();
        return new PageInfo<>(userList);
    }