SpringBoot分页查询功能的实现方法
作者:Popuessing's?Jersey 时间:2023-07-14 02:22:21
前言:
学习了SpringBoot分页查询的两种写法,一种是手动实现,另一种是使用框架实现。现在我将具体的实现流程分享一下。
首先是手动实现分页查询:
先复习一下,SQL中的limit关键字,下面一行sql语句的意思是从第二个数据开始查,查询出两条数据
SELECT * FROM sys_user limit 1,2;
使用limit前一个参数pageNum是从第几个数据开始查,后一个参数pageSize是查询多少条数据,
注意数据库查询pageNum=0代表第一个数据。
那么在Springboot中该如何写呢?
controller:
// 分页查询
// 接口路径:/user/page?pageNum=1&pageSize=10
// @RequestParam接收
// limit第一个参数= (pageNum-1)+pageSize
@GetMapping("/page")
public List<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize){
pageNum = (pageNum-1);
return userMapper.selectPage(pageNum,pageSize);
}
}
mapper:
@Select("select * from sys_user limit #{pageNum},#{pageSize}")
List<User> selectPage(Integer pageNum, Integer pageSize);
这样就写好了,测试一下:
完善一下controller,添加查询 总条数的方法:
// 分页查询
// 接口路径:/user/page?pageNum=1&pageSize=10
// @RequestParam接收 前端url
// limit第一个参数= (pageNum-1)*pageSize
@GetMapping("/page")
public Map<String, Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize){
pageNum = (pageNum-1)*pageSize;
List<User> data = userMapper.selectPage(pageNum,pageSize);
Integer total = userMapper.selectTotal();
Map<String,Object> res = new HashMap<>();
res.put("data",data);
res.put("total",total);
return res;
}
接下来是关联前端分页和后台数据:
修改分页页面homeView:
使用fetch()请求分页数据
created() {
//请求分页数据
fetch("localhost:9090/user/page?pageNum=1&pageSize=2").then(res =>res.json()).then(res =>{
console.log(res)
})
},
fetch得到的是一个字符串数据,需要将其转换成Json格式,使用console.log()打印数据
@JsonIgnore忽略某一个属性的注解
修改前端页面表格数据:
表格数据对应数据库的属性
<el-table :data="tableData" 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
})
},
来源:https://blog.csdn.net/CoCo629vanilla/article/details/123819363
标签:springboot,分页,查询
0
投稿
猜你喜欢
pagehelper踩坑记之分页乱套问题解决
2021-11-14 14:19:34
springAop实现权限管理数据校验操作日志的场景分析
2023-11-23 10:00:27
C# 使用Fiddler捕获本地HttpClient发出的请求操作
2022-06-28 04:10:34
Android实现启动页倒计时效果
2021-07-26 20:50:14
Dwr3.0纯注解(纯Java Code配置)配置与应用浅析二之前端调用后端
2023-08-19 17:32:33
Android mvvm之LiveData原理案例详解
2023-09-29 11:49:26
Android中AsyncTask与handler用法实例分析
2023-12-04 00:01:52
Android中实现多行、水平滚动的分页的Gridview实例源码
2022-01-14 08:23:58
Android使用Scroll+Fragment仿京东分类效果
2022-11-17 16:56:48
java中单例模式讲解
2022-05-22 14:24:07
C#使用base64对字符串进行编码和解码的测试
2022-09-21 23:08:59
Java 守护线程_动力节点Java学院整理
2023-11-28 07:51:14
java 线程中start方法与run方法的区别详细介绍
2023-08-23 20:41:31
Mybatis如何传入多个参数的实现代码
2022-02-26 02:52:24
Android编程开发之TextView控件用法(2种方法)
2023-09-19 02:24:02
如何基于java实现Gauss消元法过程解析
2023-12-15 21:51:08
java mail使用qq邮箱发邮件的配置方法
2023-07-02 07:58:56
很简单的Java断点续传实现原理
2023-05-20 06:38:09
解决SpringBoot webSocket 资源无法加载、tomcat启动报错的问题
2021-07-28 05:06:42
Kotlin Flow常见场景下的使用实例
2023-01-30 10:46:25