SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）

系列文章目录

1. 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）
2. Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）
3. Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）
4. SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）
5. SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）
6. SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（六）
7. SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
8. SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客（八）
9. Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）
10. SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
11. Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）
12. SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客（十二）
13. SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）
14. SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）
15. SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客（十五）
16. SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）
17. SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客（十七）
18. SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
19. 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）
20. SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客（二十）
21. SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）
22. SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
23. SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）

---

项目资源下载

1. GitHub下载地址
2. Gitee下载地址
3. 项目MySql数据库文件

---

---

前言

  今天博客的主要内容包括：使用Sql实现分页查询、跨域问题的解决、将数据渲染至前端、动态分页功能的实现、根据用户名进行模糊查询的动态分页等内容。分页功能非常常用，经常可以应用到其他地方，还有模糊检索等内容都是Web应用常见内容。下面就开始今天的内容！

---

一、使用Sql实现分页查询

1. 首先在UserMapper.java中新建两个Sql语句，分别用来完成分页功能和统计个数功能
   
2. 然后在UserController中通过Sql进行分页和个数统计功能的实现，并返回结果
   
3. 然后使用Postman进行测试，我们发现不仅实现了分页功能也实现了数据个数统计功能，注意要启动后台服务器
   

二、跨域问题的解决

1. 因为数据在后台，又要将数据拿到前端，所以要在HomeView.vue的中加入如下代码，为了去拿到我们的后台分页查询数据
   
2. 但是我们的项目分别由前端服务器和后端服务器构成，处于不同的端口，当它们传输数据时，就会产生跨域问题，当我们进行分页查询时，要将后端的数据传输到前端，当我们测试刚才写好的分页功能的时候（分别启动前端和后台服务器，看控制台即可），由于跨域问题会报错，报错内容如下所示：
   
3. 为了解决这个问题，我们需要进行SpringBoot的跨域设置。这个问题比较好解决，我们只需要新建config/CorsConfig.java，加入以下代码就可以解决跨域问题

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 解决前端跨域问题
 */
@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
    
}

4. 然后我们将前端服务器和后台服务器都启动，测试是否实现了跨域间的数据传输，打开控制台我们发现前端已经拿到了后台的数据
   

三、将数据渲染至前端

1. 首先在User.java中将password设置注解，目的是不显示用户密码
   
2. 然后删除HomeView.vue中的初始化数据，并设置tableData为默认的空数组
   
3. 然后将表格字段与我们分页查询的内容一一对应
   
4. 然后将后台查询到的数据渲染给前端的表格
   
5. 然后我们需要修改以下几个地方来将后台查询到的数据个数传输给前端服务器
   ①：首先将total 初始化为0
   
   ②：然后将total变为变量，由后台数据传入
   
   ③：最后将从后台查询到的total赋值给前端的total
   
6. 最后刷新一下前端服务器，我们可以看到后台数据已经成功传输到前端服务器上
   

四、动态分页功能的实现

1. 因为我们之前是将页码和数据个数写死，不适用于业务需求，所以我们需要根据实时数据以实现动态分页功能。首先在HomeView.vue中初始化分页需要用到的参数
   
2. 修改当前页码、每页个数、当前页个数
   
3. 设置动态分页请求
   
4. 现在如果我们测试还不能实现分页的功能，因为我们没有将值赋给我们要查询的链接，所以我们需要如下几步，目的是将我们要去往的页码和数据个数传输给我们要查询的数据链接
   ①：首先将数据库查询操作封装
   
   ②：然后调用load()以实现请求分页查询数据
   
   ③：然后加入如下两个函数，目的是获取我们实时的页码和数据个数
   
   ④：最后将我们的实时数据赋值给数据查询链接，以实现动态分页请求
   
5. 最后我们测试一下，发现实现了动态分页查询的功能
   
   

五、根据用户名进行模糊查询的动态分页

1. 为了实现可以根据用户名进行模糊查询，我们首先在UserMapper.java中修改如下几处代码
   
2. 然后在UserController.java中修改如下几处，目的是可以根据传进来的用户名进行模糊分页查询
   
3. 最后使用Postman进行测试，我们发现可以实现根据用户名进行模糊分页查询
   
4. 现在已经得到数据了，下面就是将数据渲染到前端中，我们需要在HomeView.vue中进行以下几步
   ①：首先将姓名搜索框绑定一个参数
   
   ②：然后将此参数初始化
   
   ③：然后将此参数拼接到数据链接中
   
   ④：最后将搜索框绑定获取数据的函数
   
5. 最后我们可以去前端测试一下，我们模糊搜索有关用户名中包括“a”的数据，可以看到我们已经实现了根据用户名的模糊分页查询
   

---

总结

  那么我们到此为止就完成了这篇博文的内容了，现在我们不仅可以实现前端后台的数据交互了，还可以实现分页/模糊查询，这对后面的功能实现有很大的帮助。我们下篇博文见！