如何加载用户管理页面

点击用户管理就会跳转到system/user这个是数据从数据库sys_menu中获取的

 

如图可见左侧是tree 右边是list

/为默认数据会进入index

  

 获取用户列表

this.loading 为加载效果 true为开启

userList为列表数据

total为总条数

 listUser获取列表

query为参数

 

 根据请求去找后端代码

 先找前面一层 list为方法映射

 

 @PreAuthorize 为权限判断 （“@ss.hasPermi('system:user:list')”）验证是否有system：user：list的权限

 

 当前用户的信息存储在redis中

 ​​​​​​​*：*：*当前用户拥有所有权限

 startPage()这个方法使用来分页的

使用了pagehelper和mybatis实现分页

pagehelper的流程

可以单独设置分页参数 并单独存储入ThreadLoacl中 通过mybatis执行查询时 再通过拦截器 拦截sql语句 再把查询语句中添加分页参数 从而实现分页操作

PageHelper内部原理是将传入的页码和条数赋值给了Page对象，保存到了一个本地线程ThreadLoacl中

 

 

 

 PageDomain是专门用来获取分页信息

 

 getRequest获取请求

getParameter(name),从http请求中传入参数名获取参数值

PageDomain设置数据 封装返回

 

 

 

SqlUtil.escapeOrderBySql调用sql方法检查字符

 

reasonable对参数进行逻辑处理 保证参数的正确性 

pageNum = 0/-1 , pageNum = 1

 selectUserList可以直接查询 pagehelper拦截器会自动拦截形成分页

用户数据查询

@DataScope(deptAlias = "d", userAlias = "u")  是为了给表设置别名

sys_dept d ,sys_user u

将数据请求分页数据进行打包成repData格式再返回到前端

 后端返回的数据

rows和total分别赋给对应的数据

vue就会自动加载我们就可以看到效果了