动吧后台管理页面的用户管理页面

用户管理页面

1.    当用户点击用户用户管理时,启动starter.html页面注册的点击事件

同时页面跳转到user_list.html, user_list.htm页面加载完成后开始执行函数.

加载分页信息”doPageUI”,page.html

执行doGetObjects函数

传入路径url="user/doFindPageObjects";该路径对应的方法

var pageCurrent=$("#pageId").data("pageCurrent");

获取id为pageid的pageCurrent的值并赋予给pageCurrent

pageCurrent为当前页  继续执行dogetObjects函数

if(!pageCurrent)pageCurrent=1;

判断当前页码是否正常,

var params={"pageCurrent":pageCurrent};

定义params并且赋值,内容为上面传过来的pageCurrent;

params.username=$("#searchNameId").val().trim();这一行为搜索功能提供服务,获取searchNameId对应的用户输入的值,并且不能为空格(trim()方法)

传入url.参数(params),执行回调函数

url:执行Controller层下的SysUserController类下的doFindObjects方法

方法执行,寻找SysUserService接口的findPageObjects()方法

 

接口里没有具体方法,去找接口的实现类,

将客户端(浏览器)传过来的参数(username,pageCurrent)进行参数校验,根据username参数进行查询并进行校验,执行userDao的getRowCount()方法,将浏览器的username传入,

 

根据@Mapper注解,寻找相应的xml文件,执行相应sql语句.

<sql></sql>标签将sql语句中相同的部分进行封装,提高代码的重用性.查询结果为行数,如果用户没有输入名字,就查询所有的行数,如果输入行数,就进行模糊查询,根据条件来查询行数.

将查询结果返回给rowCount,并进行校验,

定义每一页有多少条数据

int pageSize=2;

定义开始位置((pageCurrent-1)*pageSize)总页数减1除以每一页多少数据.

调用sysUserDao的findPageObjects方法,

匹配SysUserMapper.xml文件根据方法名寻找SysUserMapper.xml文件对应的id执行相应sql语句.

典型的分页查询,startIndex是查询页开始位置,pageSize是每一页有多少条数据,

将查询到的结果返回赋值给records.类型为List集合,泛型为<SysUserDeptVo>

SysUserDeptVo类为封装数据创建,使用@Data注解,利用lombok插件,不用手写手写属性的get和set方法.

对查询结果进行封装并返回,

类型为PageObject

PageObject类为封装当前页.页面大小.总记录.总页数.当前页记录创建

Controller层接收到impl返回的数据.将数据以JsonResult对象的形式返回,

JsonResult类,为了封装查询结果创建的类

                                                                                                                                                                                         

客户端的user_list获得服务端查询到的结果,将结果赋值给回调函数,执行回调函数  doHandleResponseResult(result)

根据服务端传过来的参数进行判断,如果参数为0,则调用异常方法

如果传过来的参数中的state为1

执行doSetTableBodyRows(result.data.records);

函数,并且带参数records

获取tBody对象,然后清空内容

使用迭代data内容将数据写到tbody中,写入以后返回doHandleResponseResult()函数,继续执行doSetPagination(result.data);函数doSetPagination函数page.html里,

同时注册点击事件,

处理分页事件

同时注册添加修改的点击事件

注册搜索按钮的点击事件

注册操作按钮

到此为止,用户页面查询并且显示到页面上执行完毕!!!!!!

修改过程详解

首先选择一个用户,单击修改按钮,由于之前已经注册过修改按钮的点击事件,所以淡季后页面会进行跳转,但是修改需要数据的回显,所有需要获取客户端选中用户的ID值,定义相关函数,执行js语句

 

判定点击的对象,定义一个title常量,var title 然后执行判断语句,如果点击内容为"btn-update",则将title赋值为修改用户,如果点击内容为"btn-add",则将title赋值为添加用户,修改用户执行doGetCheckedId函数

获取选中行数的ID然后执行doFindObjectById函数,将获取到的ID和title传入函数,

定义参数params,赋值id 定义URL为user/doFindObjectById

执行SysUserService里的findObjectById方法,传入参数ID,返回值为map集合key value格式分别为String Object ,

由于行SysUserService是接口,所以具体的方法需要找它的实现类.

将获得到的参数进行判断,检验参数的合法性.如果数据合法,执行SysUserDao里的findRoleByUserId方法,SysUserDao执行对应的sql语句.

将查询结果返回.类型为SysUserDeptVo(前面的封装数据类),根据查询结果进行判断是否数据库中有此用户名,

假如用户名存在,执行行SysUserRoleDao里的findRoleIdsByUserId方法,同样需要调用对应sql语句,

这里用到了数据库中的两张表,一张用户表,sys_users,一张用户和部门关系表sys_user_roles,因为修改用户时需要会用到部门的相关数据.

将查询到的数据赋值给List类型的roleids

将查询到的两个数据进行封装,

然后将map集合返回给浏览器(客户端),将参数传入并且执行回调函数

首先判断服务器传过来的值是否合理

如果数据合理,将start.html文件中id="mainContentId"的section获取,然后执行doLoadPage函数

函数中定义需要访问html文件的对应url

修改starter.html文件中的id="mainContentId"的section重写,替换为user_edit.html文件.并将title传入,页面将会进行跳转,内容为选择中的用户的信息的修改页面

现在来看user_edit(用户添加和修改页面)的详细事件的注册与相关函数的调用,

Ztree学习网站(免费开源)http://www.treejs.cn/

用户进入修改页面后就可以根据需求修改用户的信息,修改时所属部门的修改需要用到ztree(依靠 jQuery 实现的多功能 “树插件”。)相关函数

树上的内容为服务器通过sql语句查询出的结果,相关代码如下,

同样的数据判断.......

由于sql语句比较简单,所以使用了注解的方式.等Controller层中的所有相关语句全部执行完毕,获得一个返回值,返回值类型为JsonResult对象,然后将数据回显到我们的树结构上.当把需要修改的信息全部修改完毕后,点击Save按钮,执行Save按钮的点击事件.

选中标签 获取标签中的属性(data),定义参数params获取表单数据.

        表单上所有数据获取以后,执行判断语句如果是新增页面,rowData的值为undefind,三目运算结果为insertUrl,如果是修改页面,容我Data有内容,所以会执行updateUrl,.判断成功后执行异步请求,利用三元运算符判断需要执行的URL.这里我们是修改所以执行修改的相关方法.现在我们具备相关的URL 和参数,开始执行回调函数,将内容保存到数据库.

熟悉的参数判断......用户角色关系信息执行顺序为先删除在新增.

数据保存结束.执行数据清空进行页面跳转.修改业务已经完成

新增用户和删除用户不再描述!!!!!!!!

用户操作

点击事件之前已经注册.点击按钮后开始执行函数

通过点击获取当前行的相关属性的值.三元表达式进行判断.定义参数,定义sql语句

还是判断!!!!

如果是2.3.1版本可以不用写@Param

 

获取点击对象.回调函数,进行判断,结果正常执行 下一个函数.

修改按钮的内容.业务结束