当前位置：首页 > news >正文

PageHelper组件实现前端分页查询功能

news 2025/7/4 23:37:49

Hi~！这里是一颗小谷粒，很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~~
💥💥个人主页：一颗小谷粒
💥💥所属专栏：Web前端开发

💥💥博主微信：g2279605572

🚀本系列文章为个人学习笔记，在这里撰写成文一为巩固知识，二为记录我的学习过程及理解。文笔、排版拙劣，望见谅。

一、后端引入PageHelper插件

1.1 在 pom.xml 文件中添加依赖

1.2 在 application.yml 文件配置

1.3 在Service层调用

二、前端使用分页组件

2.1 使用ElementUI分页组件

2.2 前端分页代码解析

2.3 我的源码

一、后端引入PageHelper插件

1.1 在 pom.xml 文件中添加依赖

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

如图所示：

1.2 在 application.yml 文件配置

开启spring循环依赖支持，注意是在spring级配置：

  main:allow-circular-references: true #开始支持spring循环依赖

如图所示：

1.3 在Service层调用

    public PageInfo<Admin> admins(Admin admin){PageHelper.startPage(admin.getPageNo(), admin.getPageSize()); //1.会自动算出limit后面的开始位置List<Admin> admins =  adminDao.admins(admin);                 //2.重新发一条sql,查询总条数PageInfo<Admin> pageInfo = new PageInfo<>(admins);return pageInfo;}

如图所示：

二、前端使用分页组件

2.1 使用ElementUI分页组件

完整功能分页组件代码：

    <el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[100, 200, 300, 400]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination>methods: {handleSizeChange(val) {console.log(`每页 ${val} 条`);},handleCurrentChange(val) {console.log(`当前页: ${val}`);}}

前端分页组件完成的工作：

可以根据总条数和每页显示的条数，计算出总页数。
通过组件显示分页的样式。
通过组件可以改变当前页数和页数大小。

2.2 前端分页代码解析

2.3 我的源码

<template><div><div style="color: #2c9678"><h2>管理员管理</h2></div><br /><hr /><br /><el-card class="box-card"><!-- 查询条件--><el-row :gutter="20"><el-col :span="6"><el-input placeholder="请输入账号" v-model="form.account"></el-input></el-col><el-col :span="6"><el-radio label="男" v-model="form.gender">男</el-radio><el-radio label="女" v-model="form.gender">女</el-radio></el-col><el-col :span="6"><el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button></el-col></el-row><br /><el-button type="primary" icon="el-icon-plus">新增</el-button><el-table :data="tableData" border style="width: 100%"><el-table-column prop="account" label="账号" width="100"></el-table-column><el-table-column prop="gender" label="性别" width="100"></el-table-column><el-table-column prop="phone" label="电话" width="150"></el-table-column><el-table-column prop="admin.account" label="操作人"></el-table-column><el-table-column prop="operTime" label="操作时间" align="center"></el-table-column><el-table-column label="操作" fixed="right"><template slot-scope="scope"><el-button size="mini">编辑</el-button><el-button size="mini" type="danger">删除</el-button></template></el-table-column></el-table><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="form.pageNo" :page-sizes="[2, 4, 6, 10]" :page-size="2"layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination></el-card></div>
</template><script>export default {data() {return {tableData: [],total:0,form: {account: "",gender: "",pageNo: 1,pageSize: 2}}},methods: {search() {this.admins();},admins() {this.$http.post("adminCtl/admins", this.form).then((resp) => {this.tableData = resp.data.result.list;this.total = resp.data.result.total;})},handleSizeChange(val) { //当改变下拉框页数大小时触发this.form.pageSize = val;this.form.pageNo = 1;this.admins();},handleCurrentChange(val) { //当改变当前页数时触发this.form.pageNo = val;this.admins();}},mounted() {//向后端发送请求，查询管理员信息列表this.admins();}}
</script><style>
</style>

效果：