文章目录
前端部分
在这里我所使用的部分是ruoyi后台系统管理中的登录日志部分
前端源码
其中这部分首先会先从这个getList里面先从后端获取到当前表单中的数据,然后用vue.js方法中的sync的方法进行双向绑定和监听将数据实时传给子组件。
前端获取数据的方法
此处的addDataRange方法在main.js中定义在全局中所以可以直接使用
addDAteRange方法
详细请看注释,这段代码的主要做用其实就是为了简化在搜索时处理日期范围的逻辑。通过传入不同的参数,可以在参数对象中设置不同的属性名,并添加相应的日期范围。这在涉及到搜索条件中的日期选择时非常有用。
此搜索方法写在分页中的区别和不写在分页中的区别
此方法写在分页中是为了在点击下一页的时候再次进行数据的搜索或者说是筛选,如果说此方法没有写在这里面那么每当我点击下一页的时候就需要再点击一次搜索才会进行筛选,否则会全部数据都显示出来
这边是已经选好的时间
如果说是不选择的话那么就一直是undefind,那么如果在点击分页的时候如果说不同时先调用此方法,那么就会将所有的数据都调用出来。
路由
当addDataRange方法返回一个正确的search之后会调用list方法
在这边会把url以及他的请求方法全都包装成一个函数
query作为请求的参数传递给服务器。就是为了获取到登录日志列表
以上所有的东西都会包装给request然后对后端进行请求。
后端部分
这是后端部分请求get的代码,==@RequestMapping(“/monitor/logininfor”)==意味着意味着在访问该控制器的任何方法时,都需要在 URI 中包含 “/monitor/logininfor”
startPage()方法讲解
从下图可以找到进入startPage方法,也就是图二,里面先获取到当前前端页面的信息之后,再获取到相应的页数以及数据量;然后通过pageDomain.getOrderBy()获取到对象的排序信息然后再通过escapeOrderBySql做出相应的排序处理。
注意:这边的Boolean reasonable = pageDomain.getReasonable();
做了一个合理化分页的工作。
合理化分页(举例):假设你的总记录数是 100,每页显示 10 条记录。如果用户请求第 11 页,启用合理化分页时,PageHelper 会将页码调整为第 10 页(最后一页),而不是抛出异常。这可以提高用户体验,避免因为页码超出范围而导致的错误(如果说不需要这个合理化分页可以在 MyBatis 的分页插件 PageHelper 中,找到 reasonable 的配置项,把true改成false就行)
合理化分页代码:
这一句话其实就是为了用于查询登录信息的列表
getDataTable()方法讲解
此代码是先创建一个TableDataInfo的实列对象rspData,获取到的数据是图中的list,然后就是成功后返回一个成功的状态码以及成功的信息,以及将相应的数据放入rspData中。
此处是TableDataInfo类
this 是一个关键字,用于引用当前对象,其实在这里构造了两个方法:
public PageInfo(List list)这是一个构造方法,接受一个列表作为参数。
public PageInfo(List list, int navigatePages)这是另一个构造方法,接受两个参数,一个是列表,另一个是导航页数。而 8 是硬编码的默认导航页数。
构造方法是在对象实例化(创建对象)的时候自动调用的。当使用 new PageSerializable(…) 语句创建 PageSerializable 对象时,构造方法就会执行。在这个构造方法内部,会完成对象的初始化工作。所以在构造方法的时候就对total进行了一个初始化。
前端参数为pageNum=2&pageSize=10 请求对应的后端Log
前端打印:
后端打印:
在这里我们可以看到后端部分打印了一堆值,意思是从名为 sys_logininfor 的表中选择列 info_id, user_name, ipaddr, login_location, browser, os, status, msg, login_time 的数据。
结果按 info_id 降序排列。LIMIT ?, ? 表示分页查询,其中 ? 是占位符,会被具体的参数值替代,这个具体的值其实就是你传过去的pageNum=2和pageSize=10 ,会被这两个值代替。