通过使用Mybatis插件来实现数据的分页功能

本是古典何须时尚 2023-10-12 19:13 29阅读 0赞

#### 目录 ####

*  背景
 *  一、SpringBoot的后端
 *   *  1、手动拼接SQL来实现
     *  2、使用Mybatis插件来实现
 *  二、Vue-cli的前端:
 *   *  请求响应跟踪
 *  三、在使用Mybatis插件进行多表查询(表数大于2)出现的问题
 *   *  1. SQL解决
     *  2.后端查询方式改变成嵌套查询
 *  四、 分页总结

## 背景 ##

分页:

> 1.  如果一次性的查询全部数据, 响应时间就太长了, 使得浏览器, java虚拟机都有延迟, 用户使用上就会容易出现卡顿:
> 2.  所以就要降低数据库的压力, 使用分页来显示, 一次显示一部分数据

例子:

> 假设有五条数据, 每一页都显示两条

实现分页要知道:

> 1.  每页多少条数据
> 2.  当前的页数
> 3.  一共多少页数据(可以通过ElementUI来实现自动计算)

## 一、SpringBoot的后端 ##

### 1、手动拼接SQL来实现 ###

> 可以由前端将当前的页数传到后端
> 
> 由后端将需要展示的数据返回前端

**Controller层**

![在这里插入图片描述][d394895213374a6e9767993733a01fe6.png]  
Mapper文件(在不使用Mybatis插件, 使用limit分页)![1c2ba1a11be84739b60e7656eb9525d6.png][]

### 2、使用Mybatis插件来实现 ###

> 使用Mybatis插件:
> 
> 1.  可以自动为我们的SQL添加limit语句
> 2.  还可以再发送一条语句来获取总条数  
>     (前端需要**总条数**来计算总页数)

1.  首先要导入依赖

<dependency>
    			<groupId>com.github.pagehelper</groupId>
    			<artifactId>pagehelper-spring-boot-starter</artifactId>
    			<version>1.2.5</version>
    		</dependency>

1.  配置spring文件  
    ![在这里插入图片描述][81aa26d396654b8fb7fdca5ed06abc15.png]
2.  使用对应类将总页数, 与数据封装到对象PageInfo里  
    **在Service层里**

![在这里插入图片描述][7d81c953c0a44bc9a365ccaedf943043.png]

## 二、Vue-cli的前端: ##

接收后端发来的数据信息

> ![在这里插入图片描述][2fb48a4545204d95b5eb9dfc8e52b84b.png]

分页组件

> ![在这里插入图片描述][0a11d33eea7f4e5f8ace3b17806a7ef2.png]  
> ![在这里插入图片描述][28ad72f9e17e4279bb97a8bf0811140f.png]  
> 具体说明  
> ![在这里插入图片描述][89a48002978b4390afdb736164114630.png]

函数说明

> ![在这里插入图片描述][80690667e4a747029d2f89c92a7156b8.png]

--------------------

### 请求响应跟踪 ###

> **请求**  
> ![在这里插入图片描述][02e42c93c7974073beb5297056f11801.png]

> 响应  
> ![在这里插入图片描述][c85aa8460de6437c9c4b73a85a20aaf1.png]

## 三、在使用Mybatis插件进行多表查询(表数大于2)出现的问题 ##

> 在Mybatis插件进行分页时, 如果数据时多张表进行的联表查询, 插件会出错

> 比如:  
> 说一个领导有两个职位, 他返回的数据将会是两个相同的领导的数据, 不是一条领导数据对应两个职位  
> ![在这里插入图片描述][ff4fd9d85d3c453ba3f35411bb366312.png]  
> 这里通过mybatis查询出来的total会是两条, id是1与2  
> 而我们希望查询出来是一条, 所以要嵌套查询, **不能一次性联表查询多张表**

**后端mapper文件**

> ![在这里插入图片描述][9558cffade2e47d19f443cf059cce517.png]  
> ![在这里插入图片描述][7ab036557e064b04a48b0930a1600326.png]  
> 本来应该是一个人, 对应两个职位, mybatis是封装好了的, 但是用了分页插件之后, 就会出现  
> ![在这里插入图片描述][274dd7e77810448ab6afffb6a0ee3a42.png]

> **因为使用mybatis分页插件之后就总会发送一条查询数据总数的SQL语句,  
> 将total放进PageInfo对象发送给前端 , 下面用日志打印出来**![在这里插入图片描述][05658a0ab6dc4b6799a585918d6a563a.png]

> 这种原因我们可以在sql解决也可以改变查询方式来解决

### 1. SQL解决 ###

直接给查询语句添加 group\_concat(职位),将两条记录直接合成一条记录  
![在这里插入图片描述][50fa3adff2eb439780a531792790f0c9.png]  
**结果就是种类型:** ![在这里插入图片描述][8c4236f0716945cf94ddc1122ff58527.png]

### 2.后端查询方式改变成嵌套查询 ###

**mapper文件**

> ![在这里插入图片描述][7bd80fe046314f2c8c02c902b78ed9f0.png]

**前端再根据v-for将结果循环出来:**  
![在这里插入图片描述][72f00280e36f4c10a8f1a044285aaaa8.png]

**效果就会是 :**  
![在这里插入图片描述][be876675aff2409cb6904cc6346f1d8b.png]

## 四、 分页总结 ##

1.  实现分页, 需要在查询数据时候就将limit拼接进SQL
2.  用Mybatis插件来自动拼接, 并且查询数据的总数给前端
3.  前端用ElementUI组件接收展示
4.  mybatis本来可以自己将数据封装,类似于 group\_concat()的的效果, 但是**如果是多张表查询(大于2 )就要使用嵌套查询**, 不然达不到想要的效果

[d394895213374a6e9767993733a01fe6.png]: https://img-blog.csdnimg.cn/d394895213374a6e9767993733a01fe6.png
[1c2ba1a11be84739b60e7656eb9525d6.png]: https://img-blog.csdnimg.cn/1c2ba1a11be84739b60e7656eb9525d6.png
[81aa26d396654b8fb7fdca5ed06abc15.png]: https://img-blog.csdnimg.cn/81aa26d396654b8fb7fdca5ed06abc15.png
[7d81c953c0a44bc9a365ccaedf943043.png]: https://img-blog.csdnimg.cn/7d81c953c0a44bc9a365ccaedf943043.png
[2fb48a4545204d95b5eb9dfc8e52b84b.png]: https://img-blog.csdnimg.cn/2fb48a4545204d95b5eb9dfc8e52b84b.png
[0a11d33eea7f4e5f8ace3b17806a7ef2.png]: https://img-blog.csdnimg.cn/0a11d33eea7f4e5f8ace3b17806a7ef2.png
[28ad72f9e17e4279bb97a8bf0811140f.png]: https://img-blog.csdnimg.cn/28ad72f9e17e4279bb97a8bf0811140f.png
[89a48002978b4390afdb736164114630.png]: https://img-blog.csdnimg.cn/89a48002978b4390afdb736164114630.png
[80690667e4a747029d2f89c92a7156b8.png]: https://img-blog.csdnimg.cn/80690667e4a747029d2f89c92a7156b8.png
[02e42c93c7974073beb5297056f11801.png]: https://img-blog.csdnimg.cn/02e42c93c7974073beb5297056f11801.png
[c85aa8460de6437c9c4b73a85a20aaf1.png]: https://img-blog.csdnimg.cn/c85aa8460de6437c9c4b73a85a20aaf1.png
[ff4fd9d85d3c453ba3f35411bb366312.png]: https://img-blog.csdnimg.cn/ff4fd9d85d3c453ba3f35411bb366312.png
[9558cffade2e47d19f443cf059cce517.png]: https://img-blog.csdnimg.cn/9558cffade2e47d19f443cf059cce517.png
[7ab036557e064b04a48b0930a1600326.png]: https://img-blog.csdnimg.cn/7ab036557e064b04a48b0930a1600326.png
[274dd7e77810448ab6afffb6a0ee3a42.png]: https://img-blog.csdnimg.cn/274dd7e77810448ab6afffb6a0ee3a42.png
[05658a0ab6dc4b6799a585918d6a563a.png]: https://img-blog.csdnimg.cn/05658a0ab6dc4b6799a585918d6a563a.png
[50fa3adff2eb439780a531792790f0c9.png]: https://img-blog.csdnimg.cn/50fa3adff2eb439780a531792790f0c9.png
[8c4236f0716945cf94ddc1122ff58527.png]: https://img-blog.csdnimg.cn/8c4236f0716945cf94ddc1122ff58527.png
[7bd80fe046314f2c8c02c902b78ed9f0.png]: https://img-blog.csdnimg.cn/7bd80fe046314f2c8c02c902b78ed9f0.png
[72f00280e36f4c10a8f1a044285aaaa8.png]: https://img-blog.csdnimg.cn/72f00280e36f4c10a8f1a044285aaaa8.png
[be876675aff2409cb6904cc6346f1d8b.png]: https://img-blog.csdnimg.cn/be876675aff2409cb6904cc6346f1d8b.png