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

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

一、后端引入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>

 效果： 

本次的分享就到此为止了，希望我的分享能给您带来帮助，创作不易也欢迎大家三连支持，你们的点赞就是博主更新最大的动力！如有不同意见，欢迎评论区积极讨论交流，让我们一起学习进步！有相关问题也可以私信博主，评论区和私信都会认真查看的，我们下次再见