springboot实现分页显示,springboot分页查询mybatis

前言：

学习了跳羚分页查询的两种写法，一种是手动实现，另一种是使用框架实现。现在我将具体的实现流程分享一下。

首先是手动实现分页查询：

先复习一下，SQL中的限制关键字，下面一行结构化查询语言语句的意思是从第二个数据开始查，查询出两条数据

　　SELECT * FROM sys_user limit 1，2；使用限制前一个参数页次是从第几个数据开始查，后一个参数页面大小是查询多少条数据，

　　注意数据库查询pageNum=0代表第一个数据。

　　那么在跳羚中该如何写呢？

　　controller：

　　//分页查询//接口路径：/用户/页面？pageNum=1 pagesize=10//@ request param接收//限制第一个参数=(pageNum-1)pageSize @ get mapping(/page )public ListUser find page(@ request param Integer pageNum，@ request param Integer pageSize){ pageNum=(pageNum-1)；返回userMapper.selectPage(pageNum，pageSize)；} }mapper：

　　@ Select( Select * from sys _ user limit # { pageNum }，# { pageSize } )ListUser Select page(Integer pageNum，Integer pageSize)；这样就写好了，测试一下：

　　完善一下controller，添加查询总条数的方法：

　　//分页查询//接口路径：/用户/页面？pageNum=1 pagesize=10//@ request param接收前端url//限制第一个参数=(pageNum-1)* pageSize @ get mapping(/page )public MapString，Object find page(@ request param Integer pageNum，@ request param Integer pageSize){ pageNum=(pageNum-1)* pageSize；列出用户数据=用户映射器。选择页面(pageNum，pageSize)；整数总计=用户映射器。select total()；MapString，Object RES=new HashMap()；res.put(数据，数据);res.put(合计，合计);返回res}

接下来是关联前端分页和后台数据：

修改分页页面homeView：

　　使用获取()请求分页数据

　　created() { //请求分页数据fetch( localhost :9090/user/page？pageNum=1 pagesize=2’).然后(res=res.json()).然后(RES={ console。log(RES)} }，获取得到的是一个字符串数据，需要将其转换成数据格式，使用console.log()打印数据

　　@JsonIgnore忽略某一个属性的注解

　　修改前端页面表格数据：

　　表格数据对应数据库的属性

　　El-table :数据= tableed

　　ata" border stripe :header-cell-class-name="headerBg"> <el-table-column prop="id" label="ID" width="80"> </el-table-column> <el-table-column prop="username" label="用户名" width="140"> </el-table-column> <el-table-column prop="nickname" label="昵称" width="120"> </el-table-column> <el-table-column prop="email" label="邮箱"> </el-table-column> <el-table-column prop="phone" label="电话"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column>修改前端数据内容：

data() { return { tableData: [], //表格的值默认为空数组 total: 0, //查询条数默认为0 msg: "hello 阿晴", collapseBtnClass: el-icon-s-fold, isCollapse: false, sideWidth: 200, logoTextShow: true, headerBg: headerBg } },

渲染页面：

created() { //请求分页数据 fetch("http://localhost:9090/user/page?pageNum=1&pageSize=2").then(res =>res.json()).then(res =>{ console.log(res) this.tableData = res.data this.total = res.total }) },

分页函数：

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination> load() { fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize=" + this.pageSize) .then(res => res.json()).then(res => { console.log(res) this.tableData = res.data this.total = res.total }) }, handleSizeChange(pageSize){ console.log(pageSize) this.pageSize = pageSize this.load() }, handleCurrentChange(pageNum){ console.log(pageNum) this.pageNum = pageNum this.load() } }

实现分页功能：

　　模糊查询：

　　controller：

@GetMapping("/page") public Map<String, Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize,@RequestParam String username){ pageNum = (pageNum-1)*pageSize; List<User> data = userMapper.selectPage(pageNum,pageSize,username); Integer total = userMapper.selectTotal(); Map<String,Object> res = new HashMap<>(); res.put("data",data); res.put("total",total); return res; }

mapper：

@Select("select * from sys_user where username like concat(%, #{username}, %) limit #{pageNum},#{pageSize}") List<User> selectPage(Integer pageNum, Integer pageSize,String username);

测试一下：

　　在前端绑定：

<div style="margin: 10px 0"> <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="username"></el-input> <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5"></el-input> <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input> <el-button class="ml-5" type="primary" @click="load">搜索</el-button></div>

 data() { return { tableData: [], total: 0, pageNum: 1, pageSize: 2, username: "", msg: "hello 阿晴", collapseBtnClass: el-icon-s-fold, isCollapse: false, sideWidth: 200, logoTextShow: true, headerBg: headerBg } },

load() { fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize=" + this.pageSize+"&username="+this.username) .then(res => res.json()).then(res => { console.log(res) this.tableData = res.data this.total = res.total }) },

总结

到此这篇关于SpringBoot分页查询功能实现的文章就介绍到这了,更多相关SpringBoot分页查询内容请搜索盛行IT以前的文章或继续浏览下面的相关文章希望大家以后多多支持盛行IT！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

springboot实现分页显示,springboot分页查询mybatis

目录

前言：

首先是手动实现分页查询：

接下来是关联前端分页和后台数据：

总结

相关文章阅读