列表分页，前台vue ,后台java

前台直接引用Element组件
官网地址：
https://element.faas.ele.me/#/zh-CN/component/pagination

前台代码：
画出列表

      <el-table
        :data="tableData"
        stripe
        style="width: 100%;margin-top: 20px;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="id" type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="offset"
        :page-sizes="[10, 50, 100]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :page-count="lastPage"
      ></el-pagination>

然后定义好你的变量
写一下需要的方法

export default {
  data() {
    return {
      id: "",
      name: "",
      age: "",
      offset: "0", //起始行数
      limit: "10",
      currentPage4: 1,
      lastPage: "", //列表总页数
      
    };
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.getSelect();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.offset = (val - 1) * this.limit;
      this.getSelect();
      console.log(`当前页: ${val}`);
    },
    getSelect() {
      const params = {
        offset: this.offset,
        limit: this.limit
      };
       //调用后台接口
      this.$axios.post("/", params).then(res => {
        console.log(res);
        this.isDisabled = false;
        if (res.status === 200) {
          _this.tableData = res.data.list;
          this.lastPage = res.data.lastPage;//此处给最后一页赋值
        }
      });
    },
   }

后台：
引入分页插件

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>

注意要在application.yml配置文件里配置下数据库类型

#分页插件会自动检测当前的数据库链接，自动选择合适的分页方式
pagehelper:
  helperDialect: PostgreSQL
  reasonable: true
  supportMethodsArguments: false
  params: count=countSql

然后写接口

//引入包
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
//方法内部
PageHelper.offsetPage(Integer.parseInt(params.get("offset")), Integer.parseInt(params.get("limit")));
// list是你查数据库查出来的数据;
return new PageInfo<>(list);

另外：
前台传给 你的如果是Array类型，后台要用jsonArray获取
jsonArray里面可以是各种类型
jsonArray.getString(0);
jsonArray.getJsonObject(0).get(“key”);