网站建设中色无极,中国建设银行手机银行官方网站,景安网络网站建设教程,做网站一天忙吗大型纪录片#xff1a;学习若依源码#xff08;前后端分离版#xff09;之 “ 分页以及查询的功能实现” 前端部分后端部分结语 包括代码生成也好#xff0c;最原始的系统也好#xff0c;若依里每个页面只要有数据#xff0c;基本上就有分页的功能#xff0c;所以理解分… 大型纪录片学习若依源码前后端分离版之 “ 分页以及查询的功能实现” 前端部分后端部分结语 包括代码生成也好最原始的系统也好若依里每个页面只要有数据基本上就有分页的功能所以理解分页也是一个很重要的过程。今天我们就一起来学习一下他的分页代码和逻辑是怎么实现的。
前端部分
首先随便打开一个有分页功能的页面。找到它分页框对应的那块前端页面 这里用了elementUI的分页组件其中绑定了包括总数、总共页数以及每页大小。 在vue里面我们找到对应的查询请求参数为什么还有这么多其他的参数因为我们分页查询和查询本质上是一个意思我们带有条件的查询最后也是按照分页返回同样如果我们切换页数上面的查询框里有参数也会去根据参数做一个查询。 根据上图可以看到当我们输入搜索条件并点击查询的时候首先把页数设置为默认值1然后再去调用这个 getList() 方法。 现在再来看 getList() 方法心细的同学肯定也看到了在页面初始化的时候就会调用这个方法来返回数据了。这里的 this.loading true 是用于在加载时给一个加载效果一般在接下来的函数成功执行后的回调中会把它改为false
后端部分
根据前端的请求找到后端对应的方法 后端代码中有一个SecurityConfig类继承了WebSecurityConfigurerAdapter类用于配置安全相关的规则。这个类中定义了一些过滤器和拦截器用于处理前端发来的请求。 其中最重要的是JwtAuthenticationTokenFilter类继承了OncePerRequestFilter类用于解析请求头中的token信息并根据token信息获取用户信息和用户权限。如果token信息有效且用户有访问权限则放行请求如果token信息无效或用户无访问权限则拒绝请求并返回相应的错误信息。 最后如果请求被放行则会进入到对应的控制器和服务层进行业务逻辑处理。例如如果前端发送了一个分页查询用户列表的请求如“ /system/user/list?pageNum1pageSize105 ”则会被映射到StudentController类的List请求上。 这个方法会调用StudentService类的selectStudentList方法传入一个User对象和一个PageDomain对象作为参数。Student对象用于封装查询条件如用户名、手机号等PageDomain对象用于封装分页参数如当前页码、每页大小等。 PageHelper插件是一个基于MyBatis的分页插件它可以在执行SQL语句之前自动添加limit语句从而实现分页查询。这个方法会使用PageHelper插件来对数据库查询结果进行分页处理并返回一个PageInfo对象包含了分页信息和数据列表。 然后这个PageInfo对象会被转换成一个TableDataInfo对象并返回给前端。 前端收到这个对象后会使用Pagination组件来显示分页导航栏和数据表格。
结语
分页处理一方面可以提高我们浏览数据的效率符合我们浏览者的心理减少了大量数据存在的杂乱问题同时分页技术也可以降低带宽使用提高访问速度。
那么以上就是唐某的一些理解。这次的分享就到这里了。记得一键三连~( •̀ ω •́ )✧
