SpringBoot分页查询功能的实现方法(springboot多条件分页查询)

网友投稿 1044 2022-07-27


目录前言:首先是手动实现分页查询:接下来是关联前端分页和后台数据:总结

前言:

学习了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 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 selectPage(Integer pageNum, Integer pageSize);

这样就写好了,测试一下:

完善一下controller,添加查询 总条数的方法:

// 分页查询

// 接口路径:/user/page?pageNum=1&pageSize=10

// @RequestParam接收 前端url

// limit第一个参数= (pageNum-1)*pageSize

@GetMapping("/page")

public Map findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize){

pageNum = (pageNum-1)*pageSize;

List data = userMapper.selectPage(pageNum,pageSize);

Integer total = userMapper.selectTotal();

Map 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忽略某一个属性的注解

修改前端页面表格数据:

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

修改前端数据内容:

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

})

},

分页函数:

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="pageNum"

KShjKivKsG :page-sizes="[2, 5, 10, 20]"

:page-size="pageSize"

layout="total, sizes, prev, pager, next, jumper"

:total="total">

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="pageNum"

KShjKivKsG :page-sizes="[2, 5, 10, 20]"

:page-size="pageSize"

layout="total, sizes, prev, pager, next, jumper"

:total="total">

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 findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize,@RequestParam String username){

pageNum = (pageNum-1)*pageSize;

List data = userMapper.selectPage(pageNum,pageSize,username);

Integer total = userMapper.selectTotal();

Map 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 selectPage(Integer pageNum, Integer pageSize,String username);

测试一下:

在前端绑定:

搜索

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

})

},

总结


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Spring Boot 多数据源处理事务的思路详解
下一篇:Java中List转Map List实现的几种姿势(java stream list转list)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~