角色管理(2)---角色添加、修改的页面呈现、数据实现

五、角色添加页面呈现

5.1 业务时序分析

点击角色列表上的添加按钮，其时序分析，如图所示：

5.2 准备角色编辑页面

准备角色编辑页面(/templates/pages/sys/role_edit.html)

5.3 角色编辑页面呈现

• 业务描述与设计实现

在角色列表页面中点击添加按钮时，呈现角色编辑页面。

• 关键代码设计与实现

第一步：角色列表事件注册，关键代码如下：

$(document).ready(function(){
    ...	
	$(".input-group-btn")
    .on("click",".btn-add",doLoadEditUI);
});

第二步：定义角色列表页面添加按钮的事件处理函数，关键代码如下：

//异步加载编辑页面
 function doLoadEditUI(){
	   var title;
	   //hasClass函数用于判定对象中是否包含某个样式
	   if($(this).hasClass("btn-add")){
		 title="角色添加"; 
	   }else{
		 title="角色修改";
	   }
	   loadPageUI(url);
  }

   function loadPageUI(title){
	   $("#mainContentId")
		  .load("role/role_edit",function(){
			  $(".box-title").html(title);
	   }); 
   }

5.3 角色编辑页面事件处理

• 业务描述与设计实现

角色编辑页面加载完成，异步加载菜单信息并呈现在页面上。

• 关键代码设计与实现

第一步：页面中引入zTree相关JS
第二步：页面上定义zTree初始配置

var zTree; 
var setting = {
   	data : {
   	    simpleData : {
   			enable : true,
   			idKey : "id",  //节点数据中保存唯一标识的属性名称
   			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
   			rootPId : null  //根节点id
   		}
   	},
   	check:{
   		enable:true,
   		nocheckInherit:true
   	}
}

第三步：异步加载菜单信息并进行呈现。

function doLoadSysMenus(){
    	var url="menu/doFindZtreeMenuNodes"
    	$.getJSON(url,function(result){
    		if(result.state==1){
    		zTree=$.fn.zTree.init(
    		$("#menuTree"),setting,result.data); 
    		}else{
    		alert(result.message);
    		}
    	});
}

六、角色数据添加实现

6.1 数据基本架构分析

用户在角色编辑页面输入数据，然后异步提交到服务端，其简易数据传递基本架构，如图所示：

角色数据保存时，数据时序图分析，如图所示：

6.2 服务端关键业务及代码实现

6.2.1 DAO接口定义

• 业务描述与设计实现

负责将用户提交的角色数据，持久化到数据库。

• 关键代码设计与实现

在SysRoleDao接口中定义数据持久化方法：

int insertObject(SysRole entity);

SysRoleMenuDao接口中方法定义（不存在则创建）

int insertObjects(
			@Param("roleId")Integer roleId,
			@Param("menuIds")Integer[] menuIds);

6.2.2 Mapper映射文件定义

• 业务描述与设计实现

基于SysRoleDao中方法的定义，编写用于实现角色添加的SQL元素。

• 关键代码设计与实现

第一步:在SysRoleMapper.xml中添加insertObject元素，用于写入菜单信息。其中useGeneratedKeys 表示使用insert操作的自增主键值，keyProperty表示将获取的自增主键值赋值给参数对象的id属性，关键代码如下：

    <insert id="insertObject"
            parameterType="com.cy.pj.sys.entity.SysRole"
useGeneratedKeys="true"
keyProperty="id">
         insert into sys_roles 
         (id,name,note,createdTime,modifiedTime,
         createdUser,modifiedUser) 
         values
         (null,#{name},#{note},now(),now(),
         #{createdUser},#{modifiedUser})
    </insert>

第二步:在SysRoleMenuMapper中元素定义，关键代码如下：

<insert id="insertObjects">
         insert into sys_role_menus
         (role_id,menu_id)
         values 
         <foreach collection="menuIds" 
                  separator=","
                  item="item">
              (#{roleId},#{item})
         </foreach>
 </insert>

6.2.3 Service接口定义及实现

• 业务描述与设计实现

基于控制层请求，调用数据层对象将角色以及对应的菜单信息写入到数据库中。

• 关键代码设计与实现

第一步：在SysRoleService接口中，添加用于保存角色对象的方法。关键代码如下：

int saveObject(SysRole entity,Integer[]menuIds);

第二步：在SysRoleServiceImpl类中，实现菜单保存操作。关键代码如下：

@Override
public int saveObject(SysRole entity, Integer[] menuIds) {
	//1.参数有效性校验
	if(entity==null)
		throw new IllegalArgumentException("保存对象不能为空");
	if(StringUtils.isEmpty(entity.getName()))
		throw new IllegalArgumentException("角色名不允许为空");
	if(menuIds==null||menuIds.length==0)
		throw new ServiceException("必须为角色分配权限");
	//2.保存角色自身信息
	int rows=sysRoleDao.insertObject(entity);
	//3.保存角色菜单关系数据
	sysRoleMenuDao.insertObjects(entity.getId(), menuIds);
	//4.返回业务结果
	return rows;
}

6.2.4 Controller类定义

• 业务描述与设计实现

接收客户端提交的菜单数据，并对其进行封装，然后调用业务层对象进行业务处理，最后将业务层处理结果响应到客户端。

• 关键代码设计与实现

定义Controller方法，借助此方法处理保存角色数据请求和响应逻辑。关键代码如下：

@RequestMapping("doSaveObject")
@ResponseBody
public JsonResult doSaveObject(
    		SysRole entity,Integer[] menuIds){
    	    sysRoleService.saveObject(entity,menuIds);
return new JsonResult("save ok");    
}

6.3 客户端关键业务及代码实现

6.3.1 页面cancel按钮事件处理

• 业务描述与设计实现

点击页面cancel按钮时，加载菜单那列表页面。

• 关键代码设计与实现

第一步：事件注册（页面加载完成以后）

  $(".box-footer")
	  .on("click",".btn-cancel",doCancel)

第二步：事件处理函数定义

  function doCancel(){
	var url="role/role_list";
	$("#mainContentId").load(url);  
  }

6.3.2 页面Save按钮事件处理

• 业务描述与设计实现

点击页面save按钮时，将页面上输入的菜单信息提交到服务端。

• 关键代码设计与实现

第一步：事件注册（页面加载完成以后）。

  $(".box-footer")
	  .on("click",".btn-save",doSaveOrUpdate)

第二步：Save按钮事件处理函数定义。关键代码如下：

function doSaveOrUpdate(){
	  //1.获取表单数据
	  var params=doGetEditFormData();	  
	  //2.异步提交表单数据
	  var insertUrl="role/doSaveObject";
	  $.post(insertUrl,params,function(result){
		  if(result.state==1){
			  alert(result.message);
			  doCancel();
		  }else{
			  alert(result.message);
		  }
	  });
  }

第三步：表单数据获取及封装函数定义。关键代码如下：

//获取表单数据
    function doGetEditFormData(){
    	var params={
    		name:$("#nameId").val(),
    		note:$("#noteId").val()
    	}
    	//获取选中的node节点
    	var menuIds=[];
    	var  checkedNodes=zTree.getCheckedNodes(true);//zTree
    	for(var i in checkedNodes){
        console.log(checkedNodes[i]);
    		menuIds.push(checkedNodes[i].id)
    	}
    	params.menuIds=menuIds.toString();//(1,2,3,4,5)
    	return params;
    }

七、角色修改页面数据呈现

7.1 业务时序分析

点击角色列表页面的编辑按钮，其时序分析，如图所示：

7.2 服务端关键业务及代码实现

核心业务： 在角色列表页面点击修改按钮时,基于id进行角色信息的查询,在查询角色信息时将角色信息与对应的菜单关系数据封装到到一个值对象，然后传递到客户端在修改页面进行呈现，如图所示：

7.2.1 VO定义

• 业务描述及设计实现

构建值对象（VO），用于封装从数据库查询到的角色菜单记录，并添加对应的set/get/toString等方法，便于对数据进行更好的操作。

• 关键代码分析及实现

package com.cy.pj.sys.vo;
import java.util.List;
import com.cy.pj.sys.entity.SysRole;
/**
 * VO：通过此对象封装角色以及角色对应的菜单id
 * @author ta
 */
public class SysRoleMenuVo implements Serializable{
private static final long serialVersionUID = 3609240922718345518L;
	private Integer id;
	private String name;
	private String note;
	/**角色对应的菜单id*/
	private List<Integer> menuIds;
public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id= id;
	}	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
public String getNote() {
		return note;
	}
	public void setName(String note) {
		this.note = note;
	}
 
	public List<Integer> getMenuIds() {
		return menuIds;
	}
	public void setMenuIds(List<Integer> menuIds) {
		this.menuIds = menuIds;
	}
}

7.2.2 DAO接口定义

• 业务描述与设计实现

负责基于id执行角色数据的查询操作。

• 关键代码设计与实现

在SysRoleDao接口中定义数据持久化方法：

SysRoleMenuVo findObjectById(Integer id);

7.2.3 Mapper文件定义

• 业务描述与设计实现

基于SysRoleDao中findObjectById方法的定义，在映射文件中添加对应的角色查询元素。

• 关键代码设计与实现

第一步：在SysRoleMapper.xml中添加findObjectById元素，关键代码如下：

   <select id="findObjectById"
           resultMap="sysRoleMenuVo">
           select id,name,note
           from sys_roles
           where id=#{id}        
   </select>

第二步：在SysRoleMapper.xml中添加第一步中resultMap属性定义的结果映射元素，关键代码如下：

   <!-- resultMap一般用于自定义映射或一些关联查询中 -->
   <resultMap type="com.cy.pj.sys.vo.SysRoleMenuVo" 
              id="sysRoleMenuVo">
        <!-- 假如基于id做再次执行查询，又希望将id值存储到值对象，
                           可以对id进行专门映射 -->
        <id property="id" column="id"/>
        <!-- collection一般应用于one2many查询 -->
        <collection property="menuIds"
                    select="com.cy.pj.sys.dao.SysRoleMenuDao.findMenuIdsByRoleId"
                    column="id">
        </collection>
   </resultMap>

第三步：在SysRoleMenuMapper.xml中添加第二步中collection元素内部select属性对应的查询元素。关键代码如下：

  <select id="findMenuIdsByRoleId"
              resultType="int">
            select menu_id
            from sys_role_menus
            where role_id=#{id} 
  </select>

7.2.4 Service接口定义及实现

• 业务描述与设计实现

基于控制层请求，调用数据层方法，查询对应的角色及相关信息。

• 关键代码设计与实现

第一步：在SysRoleService接口中，添加基于id查询对应角色及相关信息的方法。关键代码如下：

SysRoleMenuVo findObjectById(Integer id) ;

第二步：在SysRoleService接口对应的实现类SysRoleServiceImpl中添加findObjectById的具体实现。关键代码如下：

@Override
    public SysRoleMenuVo findObjectById(Integer id) {
    	//1.合法性验证
    	if(id==null||id<=0)
    	throw new IllegalArgumentException("id的值不合法");
    	//2.执行查询
    	SysRoleMenuVo result=sysRoleDao.findObjectById(id);
  	//3.验证结果并返回
    	if(result==null)
    	throw new ServiceException("此记录已经不存在");
    	return result;
    }

7.2.5 Controller类定义

• 业务描述与设计实现

基于控制层请求，调用数据层方法，查询对应的角色及相关信息。

• 关键代码设计与实现

在SysRoleController类中定义基于角色ID查询角色的方法。关键代码如下：

@RequestMapping("doFindObjectById")
 public JsonResult doFindObjectById(Integer id){
    	return new JsonResult(sysRoleService.findObjectById(id));
 }

7.3 客户端关键业务及代码实现

7.3.1 列表页面修改按钮事件处理

• 业务描述与设计实现

在角色修改按钮上进行事件注册，点击页面修改按钮时，基于角色id向服务端发起异步请求获取角色相关数据，然后加载修改页面。

• 关键代码设计与实现

第一步：页面加载完成，进行修改按钮事件注册，关键代码如下：

$(function(){
      …
	  //假如是修改
		$(".input-group-btn")
.on("click","btn-update",doLoadEditUI);
  });

第二步：修改按钮事件处理函数定义或修改，关键代码如下：

function doLoadEditUI(){
	  //定义页面标题(内容可能是添加角色也可能是修改角色)
	  var title;
	  //判定要执行的操作(是添加还是修改)
	  if($(this).hasClass("btn-add")){
		title="添加角色"; 
		doLoadPageUI(title);
	  }else{
		title="修改角色";
		//获取当前行的id值
		var id=$(this).parents("tr").data("id");
		//根据id查找记录，判定记录是否存在
		var url="role/doFindObjectById";
		var data={"id":id};
		$.getJSON(url,data,function(result){
			if(result.state==1){
			$("#mainContentId").data("data",result.data)
			loadPageUI(title);
			}else{
			 alert(result.message);
			}
		});
	  }
}   

第三步：定义或修改加载编辑页面的方法。关键代码如下：

   function doLoadPageUI(title){
	   $("#mainContentId")
		  .load("role/role_edit",function(){
			  $(".box-title").html(title);
	   }); 
   }

7.3.2 编辑页面菜单数据呈现

• 业务描述与设计实现
  页面加载完成，获取编辑页面数据，然后在页面指定位置进行数据呈现数据。
• 关键代码设计与实现
  第一步：在角色编辑页面中，菜单数据加载完成以后，获取角色编辑页面中需要的表单数据，然后进行页面数据初始化。关键代码如下：

function doLoadSysMenus(){
    	var url="menu/doFindZTreeNodes"
    	$.getJSON(url,function(result){
    		if(result.state==1){
    		zTree=$.fn.zTree.init(
    		$("#menuTree"),setting,result.data);
    		var data=$("#mainContentId").data("data");
        	if(data){
        		doInitEditFormData(data);
        	}
    		}else{
    		alert(result.message);
    		}
    	})
}

第三步：定义编辑页面数据初始化方法。关键代码如下：

function doInitEditFormData(data){
    	$("#nameId").val(data.name);
    	$("#noteId").val(data.note);
    	//展开所有节点
	zTree.expandAll(true);
	//勾选角色所拥有的菜单
	var menuIds = data.menuIds;
	   for(var i=0; i<menuIds.length; i++) {
			//获取key为id值为menuIds[i]的节点
			var node = zTree.getNodeByParam("id",menuIds[i]);
			//选中当前节点
			zTree.checkNode(node,true,false);
	 }
   }

八、角色数据更新实现

8.1 业务时序分析

点击角色编辑页面的更新按钮，其时序分析，如图所示：

8.2 服务端关键业务及代码实现

8.2.1 DAO接口实现

• 业务描述与设计实现

获取角色编辑页面数据，然后异步提交到服务端，将角色信息以及角色对应的菜单关系数据更新到数据库。

• 关键代码设计与实现

在SysRoleDao接口中添加数据更新方法，关键代码如下：

int updateObject(SysRole entity);

8.2.2 Mapper文件定义

• 业务描述与设计实现

基于SysRoleDao中updateObject方法的定义，编写用于实现角色更新的SQL元素。

• 关键代码设计与实现

在SysRoleMapper.xml中添加updateObject元素，用于更新菜单信息。关键代码如下：

<update id="updateObject"
            parameterType="com.cy.pj.sys.entity.SysRole">  
       update sys_roles
         set
           name=#{name},
           note=#{note},
           modifiedUser=#{modifiedUser},
           modifiedTime=now()
        where id=#{id}
    </update>

8.2.3 Service接口及实现

• 业务描述与设计实现

基于控制层请求，对数据进行校验并调用数据层对象将角色信息以及角色菜单关系数据更新到数据库中。

• 关键代码设计与实现

第一步：在SysRoleService接口中，添加用于更新角色对象的方法。关键代码如下：

int updateObject(SysRole entity,Integer[] menuIds)

第二步：在SysRoleServiceImpl类中，实现更新角色操作。关键代码如下：

@Override
public int updateObject(SysRole entity,Integer[] menuIds) {
    	//1.合法性验证
    	if(entity==null)
        throw new IllegalArgumentException("更新的对象不能为空");
    	if(entity.getId()==null)
    	throw new IllegalArgumentException("id的值不能为空");
    	
    	if(StringUtils.isEmpty(entity.getName()))
    	throw new IllegalArgumentException("角色名不能为空");
    	if(menuIds==null||menuIds.length==0)
    	throw new IllegalArgumentException("必须为角色指定一个权限");
    	
    	//2.更新数据
    	int rows=sysRoleDao.updateObject(entity);
    	if(rows==0)
        throw new ServiceException("对象可能已经不存在");
    	sysRoleMenuDao.deleteObjectsByRoleId(entity.getId());
    	sysRoleMenuDao.insertObject(entity.getId(),menuIds);
    	//3.返回结果
    	return rows;
  }

8.2.4 Controller类定义

• 业务描述与设计实现

首先接收客户端提交的角色数据，并对其进行封装，然后调用业务层对象对角色信息进行更行更新，最后将业务层处理结果响应到客户端。

• 关键代码设计与实现

在SysRoleController类中定义更新角色的方法。关键代码如下：

@RequestMapping("doUpdateObject")
public JsonResult doUpdateObject(SysRole entity,
Integer[] menuIds){
		  sysRoleService.updateObject(entity,menuIds);
 return new JsonResult("update ok");

8.3 客户端关键业务及代码实现

8.3.1 编辑页面更新按钮事件处理

• 业务描述与设计实现

点击页面save按钮时，将页面上输入的角色编辑信息提交到服务端。

• 关键代码设计与实现

第一步：在角色编辑页面中定义获取角色编辑页面表单数据的函数，关键代码如下：

 function doSaveOrUpdate(){
	  //1.获取表单数据
	  var params=doGetEditFormData();
var rowData=$("#mainContentId").data("rowData");
	  //2.定义url
	  var insertUrl="menu/doSaveObject";
	  var updateUrl="menu/doUpdateObject";
	  var url=rowData?updateUrl:insertUrl;
	  if(rowData)params.id=rowData.id;
	  //3.异步提交数据
	  $.post(url,params,function(result){
		  if(result.state==1){
			  alert(result.message);
			  doCancel();
		  }else{
			  alert(result.message);
		  }
	  });
  }

第二步：定义或修改提交编辑页面表单数据方法，关键代码如下：

//点击保存按钮时执行此方法
    function doSaveOrUpdate(){//insert/update
    	//获取表单数据
    	var params=doGetEditFormData();
        //假如当前页面.container-fluid对象上绑定着值说明是修改
    	var data=$("#mainContentId").data("data");
    	if(data){
    		params.id=data.id;//修改时表单数据中需要添加id
    	}
    	//根据当前页面上是否绑定着值来定义url
    	var insertUrl="role/doSaveObject";
    	var updateUrl="role/doUpdateObject";
    	var url=data?updateUrl:insertUrl;
    	
    	//异步提交数据
    	$.post(url,params,function(result){
    		if(result.state==1){
    		alert(result.message);
    		doCancel();
    		}else{
    		alert(result.message);
    		}
    	})
    }

九、总结

9.1 重难点分析

1. 角色数据的删除操作？（关系表中数据的删除）
2. 一对多数据的保存?(保存角色的同时也要保存角色和菜单的关系数据)
3. 一对多数据的查询映射?(基于角色id查询角色信息并将对应的菜单信息也查询出来)

9.2 FAQ分析

1. 角色与菜单之间是什么关系？（Many2Many）
2. 角色与用户之间是什么关系？（Many2Many）
3. 描述一下角色删除业务的实现？
4. 描述一下角色添加业务的实现？
5. 描述一下角色更新业务的实现？
6. 角色和菜单的关系数据如何更新？