【学习】若依源码（前后端分离版）之 “ 分页以及查询的功能实现”

大型纪录片：学习若依源码（前后端分离版）之 “ 分页以及查询的功能实现”

前端部分
后端部分
结语

包括代码生成也好，最原始的系统也好，若依里每个页面只要有数据，基本上就有分页的功能，所以理解分页也是一个很重要的过程。今天我们就一起来学习一下他的分页代码和逻辑是怎么实现的。

前端部分

首先随便打开一个有分页功能的页面。找到它分页框对应的那块前端页面

这里用了elementUI的分页组件，其中绑定了包括总数、总共页数以及每页大小。

在vue里面我们找到对应的查询请求参数，为什么还有这么多其他的参数？因为我们分页查询和查询本质上是一个意思，我们带有条件的查询，最后也是按照分页返回；同样如果我们切换页数上面的查询框里有参数也会去根据参数做一个查询。

根据上图可以看到，当我们输入搜索条件并点击查询的时候，首先把页数设置为默认值1，然后再去调用这个 " getList() " 方法。

现在再来看 " getList() " 方法，心细的同学肯定也看到了，在页面初始化的时候就会调用这个方法来返回数据了。这里的 " this.loading = true " ；是用于在加载时，给一个加载效果（一般在接下来的函数成功执行后的回调中会把它改为false）

后端部分

根据前端的请求找到后端对应的方法

后端代码中有一个SecurityConfig类，继承了WebSecurityConfigurerAdapter类，用于配置安全相关的规则。这个类中定义了一些过滤器和拦截器，用于处理前端发来的请求。

其中最重要的是JwtAuthenticationTokenFilter类，继承了OncePerRequestFilter类，用于解析请求头中的token信息，并根据token信息获取用户信息和用户权限。如果token信息有效且用户有访问权限，则放行请求；如果token信息无效或用户无访问权限，则拒绝请求，并返回相应的错误信息。

最后，如果请求被放行，则会进入到对应的控制器和服务层进行业务逻辑处理。例如，如果前端发送了一个分页查询用户列表的请求，如“ /system/user/list?pageNum=1&pageSize=105 ”，则会被映射到StudentController类的List请求上。

这个方法会调用StudentService类的selectStudentList方法，传入一个User对象和一个PageDomain对象作为参数。Student对象用于封装查询条件，如用户名、手机号等；PageDomain对象用于封装分页参数，如当前页码、每页大小等。

PageHelper插件是一个基于MyBatis的分页插件，它可以在执行SQL语句之前，自动添加limit语句，从而实现分页查询。这个方法会使用PageHelper插件来对数据库查询结果进行分页处理，并返回一个PageInfo对象，包含了分页信息和数据列表。然后，这个PageInfo对象会被转换成一个TableDataInfo对象，并返回给前端。前端收到这个对象后，会使用Pagination组件来显示分页导航栏和数据表格。