无锡新区网站建设,中国城乡建设经济研究所 网站,丰收路网站建设,网站建设怎么插图片Hi~#xff01;这里是一颗小谷粒#xff0c;很荣幸您能阅读我的文章#xff0c;诚请评论指点#xff0c;欢迎欢迎 ~~#x1f4a5;#x1f4a5;个人主页#xff1a;一颗小谷粒#x1f4a5;#x1f4a5;所属专栏#xff1a;Web前端开发 #x1f4a5;#x1f4a5;博主… 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依赖 --dependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper-spring-boot-starter/artifactIdversion1.2.5/version/dependency
如图所示 1.2 在 application.yml 文件配置
开启spring循环依赖支持注意是在spring级配置 main:allow-circular-references: true #开始支持spring循环依赖
如图所示 1.3 在Service层调用 public PageInfoAdmin admins(Admin admin){PageHelper.startPage(admin.getPageNo(), admin.getPageSize()); //1.会自动算出limit后面的开始位置ListAdmin admins adminDao.admins(admin); //2.重新发一条sql,查询总条数PageInfoAdmin pageInfo new PageInfo(admins);return pageInfo;}
如图所示 二、前端使用分页组件 2.1 使用ElementUI分页组件 完整功能分页组件代码 el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[100, 200, 300, 400]:page-size100layouttotal, sizes, prev, pager, next, jumper:total400/el-paginationmethods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}} 前端分页组件完成的工作 可以根据总条数和每页显示的条数计算出总页数。通过组件显示分页的样式。通过组件可以改变当前页数和页数大小。 2.2 前端分页代码解析 2.3 我的源码
templatedivdiv stylecolor: #2c9678h2管理员管理/h2/divbr /hr /br /el-card classbox-card!-- 查询条件--el-row :gutter20el-col :span6el-input placeholder请输入账号 v-modelform.account/el-input/el-colel-col :span6el-radio label男 v-modelform.gender男/el-radioel-radio label女 v-modelform.gender女/el-radio/el-colel-col :span6el-button typeprimary iconel-icon-search clicksearch()查询/el-button/el-col/el-rowbr /el-button typeprimary iconel-icon-plus新增/el-buttonel-table :datatableData border stylewidth: 100%el-table-column propaccount label账号 width100/el-table-columnel-table-column propgender label性别 width100/el-table-columnel-table-column propphone label电话 width150/el-table-columnel-table-column propadmin.account label操作人/el-table-columnel-table-column propoperTime label操作时间 aligncenter/el-table-columnel-table-column label操作 fixedrighttemplate slot-scopescopeel-button sizemini编辑/el-buttonel-button sizemini typedanger删除/el-button/template/el-table-column/el-tableel-pagination size-changehandleSizeChange current-changehandleCurrentChange:current-pageform.pageNo :page-sizes[2, 4, 6, 10] :page-size2layouttotal, sizes, prev, pager, next, jumper :totaltotal/el-pagination/el-card/div
/templatescriptexport 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();}}
/scriptstyle
/style 效果 本次的分享就到此为止了希望我的分享能给您带来帮助创作不易也欢迎大家三连支持你们的点赞就是博主更新最大的动力如有不同意见欢迎评论区积极讨论交流让我们一起学习进步有相关问题也可以私信博主评论区和私信都会认真查看的我们下次再见
