五、菜单管理(2)---菜单页面呈现，数据添加、修改等！！！

た入场券 2023-03-01 08:37 6阅读 0赞

### 文章目录 ###

*   *  一、菜单添加页面呈现
     *   *  1.1 业务时序分析
         *  1.2 准备菜单编辑页面
         *  1.3 菜单编辑页面呈现
     *  二、菜单编辑页面上级菜单呈现
     *   *  2.1 业务时序分析
         *  2.2 服务端关键业务及代码实现
         *   *  2.2.1 Node对象
             *  2.2.2 Dao接口实现
             *  2.2.3 Mapper映射文件
             *  2.2.4 Service接口及实现类
             *  2.2.5 Controller类实现
         *  2.3 客户端关键业务及代码实现
         *   *  2.3.1ZTree结构定义
             *  2.3.2 ZTree数据呈现
     *  三、菜单数据添加实现
     *   *  3.1 数据基本架构分析
         *  3.2 服务端关键业务及代码实现
         *   *  3.2.1 Entity类定义
             *  3.2.2 DAO接口定义
             *  3.2.3 Mapper映射文件定义
             *  3.2.4 Service接口定义及实现
             *  3.2.5 Controller类定义
         *  3.3 客户端关键业务及代码实现
         *   *  3.3.1 页面cancel按钮事件处理
             *  3.3.2 页面Save按钮事件处理
     *  四、菜单修改页面数据呈现
     *   *  4.1 业务时序分析
         *  4.2 客户端关键业务及代码实现
         *   *  4.2.1 列表页面修改按钮事件处理
             *  4.2.2 编辑页面菜单数据呈现
     *  五、菜单数据更新实现
     *   *  5.1 业务时序分析
         *  5.2 服务端关键业务及代码实现
         *   *  5.2.1 DAO接口实现
             *  5.2.2 Mapper映射文件定义
             *  5.2.3 Service接口及实现
             *  5.2.4 Controller类定义
         *  5.3 客户端关键业务及代码实现
         *   *  5.3.1 编辑页面更新按钮事件处理
     *  六、总结
     *   *  6.1 重难点分析
         *  6.2 FAQ分析

## 一、菜单添加页面呈现 ##

### 1.1 业务时序分析 ###

添加页面加载时序分析，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]

### 1.2 准备菜单编辑页面 ###

首先准备菜单列表页面(/templates/pages/sys/menu\_edit.html)，然后在menu\_list.html页面中点击菜单添加时异步加载菜单编辑页面。

### 1.3 菜单编辑页面呈现 ###

*  **业务描述与设计实现**

菜单列表页面点击添加按钮时，异步加载菜单编辑页面。

*  **关键代码设计与实现**

第一步：菜单列表页面上，对添加按钮进行事件注册，关键代码如下：

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

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

## 二、菜单编辑页面上级菜单呈现 ##

### 2.1 业务时序分析 ###

在菜单编辑页面上，点击上级菜单时，其数据加载时序分析，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]

### 2.2 服务端关键业务及代码实现 ###

#### 2.2.1 Node对象 ####

*  **业务描述与设计实现**

定义值对象封装查询到的上级菜单id，name，parentId信息。

*  **关键代码设计与实现**

package com.cy.pj.common.vo;
    public class Node implements Serializable{ 
    	private static final long serialVersionUID = -6577397050669133046L;
     
    	private Integer id;
    	private String name;
    	private Integer parentId;
    	
    	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 Integer getParentId() { 
    		return parentId;
    	}
    	public void setParentId(Integer parentId) { 
    		this.parentId = parentId;
    	}
    	@Override
    	public String toString() { 
    		return "Node [id=" + id + ", name=" + name + ", parentId=" + parentId + "]";
    	}
    	
    }

#### 2.2.2 Dao接口实现 ####

*  **业务描述与设计实现**

基于请求获取数据库对应的菜单表中的所有菜单id,name,parentId，一行记录封装为一个Node对象，多个node对象存储到List集合

*  **关键代码设计与实现**

在SysMenuDao接口中添加，用于查询上级菜单相关信息。关键代码如下：

List<Node> findZtreeMenuNodes();

#### 2.2.3 Mapper映射文件 ####

*  **业务描述与设计实现**

基于SysMenuMapper中方法的定义，编写用于菜单查询的SQL元素。

*  **关键代码设计与实现**

在SysMenuMapper.xml中添加findZtreeMenuNodes元素，用于查询上级菜单信息。关键代码如下：

<select id="findZtreeMenuNodes"
            resultType="com.cy.pj.common.vo.Node">
        select id,name,parentId
        from sys_menus        
    </select>

#### 2.2.4 Service接口及实现类 ####

*  **业务描述与设计实现**

基于用户请求，通过数据层对象获取上级菜单相关信息。

*  **关键代码实现**

第一步：在SysMenuService接口中，添加查询菜单信息的方法。关键代码如下：

List<Node> findZtreeMenuNodes()

第二步：在SysMenuServiceImpl类中添加，查询菜单信息方法的实现。关键代码如下：

@Override
    public List<Node> findZtreeMenuNodes() { 
    	return sysMenuDao.findZtreeMenuNodes();
    }

#### 2.2.5 Controller类实现 ####

*  **业务描述与设计实现**

基于客户端请求,访问业务层对象方法,获取菜单节点对象,并封装返回。

*  **关键代码设计与实现**

@RequestMapping("doFindZtreeMenuNodes")
    public JsonResult doFindZtreeMenuNodes(){ 
    	return new JsonResult(
    	sysMenuService.findZtreeMenuNodes());
    }

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

#### 2.3.1ZTree结构定义 ####

*  **业务描述与设计实现**

本模块以开源JS组件方式实现ZTree结构信息的呈现。

*  **关键代码设计与实现**

在menu\_edit.html页面中定义用于呈现树结构的DIV组件（假如已有则无需定义）

#### 2.3.2 ZTree数据呈现 ####

*  **业务描述与设计实现**

引入zTree需要的JS，并，并基于JS中的定义的API初始化zTree中的菜单信息。

*  **关键代码设计与实现**

第一步：引入js文件

第二步：在menu\_edit.html中定义zTree配置信息(初始化zTree时使用)

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

第二步：定义异步加载zTree信息的函数，关键代码如下：

第三步：定义zTree中取消按钮事件处理函数，点击取消隐藏zTree。关键代码如下：

function doHideTree(){ 
    	 $("#menuLayer").css("display","none");
      }

第四步：定义zTree中确定按钮对应的事件处理处理函数。关键代码如下：

function doSetSelectNode(){ 
    	  //1.获取选中的节点对象
    	  var nodes=zTree.getSelectedNodes();
    	  if(nodes.length==1){ 	  
    var node=nodes[0];
    	  console.log(node);
    	  //2.将对象中内容,填充到表单
    	  $("#parentId").data("parentId",node.id);
    	  $("#parentId").val(node.name);
    }
    	  //3.隐藏树对象
    	  doHideTree();
      }

第五步：定义页面加载完成以后的事件处理函数：

$(document).ready(function(){ 
    	  $("#mainContentId")
    	  .on("click",".load-sys-menu",doLoadZtreeNodes)
          $("#menuLayer")
          .on("click",".btn-confirm",doSetSelectNode)
          .on("click",".btn-cancel",doHideTree)
      });

## 三、菜单数据添加实现 ##

### 3.1 数据基本架构分析 ###

用户在菜单编辑页面输入数据，然后异步提交到服务端，其简易数据传递基本架构，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]  
用户在菜单添加页面中填写好菜单数据，然后点击保存按钮，将用户填写的数据添加  
到数据库。其时序分析，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]

### 3.2 服务端关键业务及代码实现 ###

#### 3.2.1 Entity类定义 ####

*  **业务描述与设计实现**

定义持久化对象，封装客户端请求数据，并将数据传递到数据层进行持久化。

*  **关键代码设计与实现**

菜单持久层对象类型定义，关键代码如下：

public class SysMenu implements Serializable{ 
    	private static final long serialVersionUID = -8805983256624854549L;
    	private Integer id;
    	/**菜单名称*/
    	private String name;
    	/**菜单url: log/doFindPageObjects*/
    	private String url;
    	/**菜单类型(两种:按钮,普通菜单)*/
    	private Integer type=1;
    	/**排序(序号)*/
    	private Integer sort;
    	/**备注*/
    	private String note;
    	/**上级菜单id*/
    	private Integer parentId;
    	/**菜单对应的权限标识(sys:log:delete)*/
    	private String permission;
    	/**创建用户*/
    	private String createdUser;
    	/**修改用户*/
    	private String modifiedUser;
    	private Date createdTime;
    	private Date modifiedTime;
    	
    	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 getUrl() { 
    		return url;
    	}
    	public void setUrl(String url) { 
    		this.url = url;
    	}
    	public Integer getType() { 
    		return type;
    	}
    	public void setType(Integer type) { 
    		this.type = type;
    	}
    	public Integer getSort() { 
    		return sort;
    	}
    	public void setSort(Integer sort) { 
    		this.sort = sort;
    	}
    	public String getNote() { 
    		return note;
    	}
    	public void setNote(String note) { 
    		this.note = note;
    	}
    	public Integer getParentId() { 
    		return parentId;
    	}
    	public void setParentId(Integer parentId) { 
    		this.parentId = parentId;
    	}
    	public String getPermission() { 
    		return permission;
    	}
    	public void setPermission(String permission) { 
    		this.permission = permission;
    	}
    	public String getCreatedUser() { 
    		return createdUser;
    	}
    	public void setCreatedUser(String createdUser) { 
    		this.createdUser = createdUser;
    	}
    	public String getModifiedUser() { 
    		return modifiedUser;
    	}
    	public void setModifiedUser(String modifiedUser) { 
    		this.modifiedUser = modifiedUser;
    	}
    	public Date getCreatedTime() { 
    		return createdTime;
    	}
    	public void setCreatedTime(Date createdTime) { 
    		this.createdTime = createdTime;
    	}
    	public Date getModifiedTime() { 
    		return modifiedTime;
    	}
    	public void setModifiedTime(Date modifiedTime) { 
    		this.modifiedTime = modifiedTime;
    	}
    }

#### 3.2.2 DAO接口定义 ####

*  **业务描述与设计实现**

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

*  **关键代码设计与实现**

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

int insertObject(SysMenu entity);

#### 3.2.3 Mapper映射文件定义 ####

*  **业务描述与设计实现**

基于SysMenuDao中方法的定义，编写用于实现菜单添加的SQL元素。

*  **关键代码设计与实现**

在SysMenuMapper.xml中添加insertObject元素，用于写入菜单信息。关键代码如下：

<insert id="insertObject"
                parameterType="com.cy.pj.sys.entity.SysMenu">
              insert into sys_menus
              (name,url,type,sort,note,parentId,permission,
    createdTime,modifiedTime,createdUser,modifiedUser)
              values
              (#{ name},#{ url},#{ type},#{ sort},#{ note},#{ parentId},
    #{ permission},now(),now(),#{ createdUser},#{ modifiedUser})
     </insert>

#### 3.2.4 Service接口定义及实现 ####

*  **业务描述与设计实现**

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

*  **关键代码设计与实现**

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

int saveObject(SysMenu entity);

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

@Override
    public int saveObject(SysMenu entity) { 
    		//1.合法验证
    		if(entity==null)
    		throw new IllegalArgumentException("保存对象不能为空");
    		if(StringUtils.isEmpty(entity.getName()))
    		throw new IllegalArgumentException("菜单名不能为空");
    		//2.保存数据
    		int  rows=sysMenuDao.insertObject(entity);
    		//3.返回数据
    		return rows;
    	}

#### 3.2.5 Controller类定义 ####

*  **业务描述与设计实现**

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

*  **关键代码设计与实现**

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

@RequestMapping("doSaveObject")
    public JsonResult doSaveObject(SysMenu entity){ 
    	sysMenuService.saveObject(entity);
    	return new JsonRehlt("save ok");
    }

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

#### 3.3.1 页面cancel按钮事件处理 ####

*  **业务描述与设计实现**

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

*  **关键代码设计与实现**

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

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

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

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

#### 3.3.2 页面Save按钮事件处理 ####

*  **业务描述与设计实现**

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

*  **关键代码设计与实现**

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

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

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

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

function doGetEditFormData(){ 
    	  var params={ 
    	      type:$("form input[name='typeId']:checked").val(),
    		name:$("#nameId").val(),
    		url:$("#urlId").val(),
    		sort:$("#sortId").val(),
    		permission:$("#permissionId").val(),
    		parentId:$("#parentId").data("parentId")
    	  }
    	  return params;
      }

## 四、菜单修改页面数据呈现 ##

### 4.1 业务时序分析 ###

当在菜单列表页面中选中某条记录，然后点击修改按钮时，其业务时序分析如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]

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

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

*  **业务描述与设计实现**

点击页面修改按钮时，获取选中菜单记录，并异步加载编辑页面。

*  **关键代码设计与实现**

第一步：列表页面修改按钮事件注册，关键代码如下：

$(".input-group-btn")
    .on("click",".btn-update",doLoadEditUI);

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

第三步：获取用户选中记录的函数定义。关键代码如下：

function doGetCheckedItem(){ 
    	var tr=$("tbody input[type='radio']:checked")
    	       .parents("tr");
    	return tr.data("rowData");
    }

#### 4.2.2 编辑页面菜单数据呈现 ####

*  **业务描述与设计实现**

页面加载完成，在页面指定位置呈现要修改的数据。

*  **关键代码设计与实现**

第一步：页面加载完成以后，获取页面div中绑定的数据。关键代码如下：

$(function(){ 
          …
    	  //假如是修改
    	  var data=$("#mainContentId").data("rowData");
    	  if(data)doInitEditFormData(data);
      });

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

## 五、菜单数据更新实现 ##

### 5.1 业务时序分析 ###

当点击编辑页面更新按钮时，其时序分析如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]

### 5.2 服务端关键业务及代码实现 ###

#### 5.2.1 DAO接口实现 ####

*  **业务描述与设计实现**

负责将用户编辑页面提交到服务端的菜单数据，更新到数据库进行持久性存储。

*  **关键代码设计与实现**

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

int updateObject(SysMenu entity);

#### 5.2.2 Mapper映射文件定义 ####

*  **业务描述与设计实现**

基于SysMenuDao中updateObject方法的定义，编写用于实现菜单更新的SQL元素。

*  **关键代码设计与实现**

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

<update id="updateObject"
                parameterType="com.cy.pj.sys.entity.SysMenu">
             update sys_menus
             set
               name=#{ name},
               type=#{ type},
               sort=#{ sort},
               url=#{ url},
               parentId=#{ parentId},
               permission=#{ permission},
               modifiedUser=#{ modifiedUser},
               modifiedTime=now()
            where id=#{ id}
        </update>

#### 5.2.3 Service接口及实现 ####

*  **业务描述与设计实现**

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

*  **关键代码设计与实现**

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

int updateObject(SysMenu entity);

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

@Override
    public int updateObject(SysMenu entity) { 
    		//1.合法验证
    		if(entity==null)
    		throw new ServiceException("保存对象不能为空");
    		if(StringUtils.isEmpty(entity.getName()))
    		throw new ServiceException("菜单名不能为空");
    		
    		//2.更新数据
    		int rows=sysMenuDao.updateObject(entity);
    		if(rows==0)
    		throw new ServiceException("记录可能已经不存在");
    		//3.返回数据
    		return rows;
    }

#### 5.2.4 Controller类定义 ####

*  **业务描述与设计实现**

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

*  **关键代码设计与实现**

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

@RequestMapping("doUpdateObject")
    	public JsonResult doUpdateObject(
    SysMenu entity){ 
    		sysMenuService.updateObject(entity);
    		return new JsonResult("update ok");
    	}

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

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

*  **业务描述与设计实现**

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

*  **关键代码设计与实现**

编辑Save按钮对应的事件处理函数。关键代码如下：

## 六、总结 ##

### 6.1 重难点分析 ###

1.  菜单管理在整个系统中的定位(资源管理)；
2.  菜单数据的自关联查询实现（查询当前菜单以及这个菜单的上级菜单）；
3.  菜单管理中数据的封装过程（请求数据，响应数据)；
4.  菜单数据在客户端的呈现。(treeGrid，zTree)

### 6.2 FAQ分析 ###

1.  菜单表是如何设计的，都有哪些字段？
2.  菜单列表数据在客户端是如何展示的？（TreeGrid）
3.  菜单删除业务是如何处理的？
4.  菜单编辑页面中上级菜单数据的呈现方式？（zTree）
5.  常用表连接方式，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]: /images/20230209/a26548396f804be0ab5412b874a3168d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/0abf4cd9767048d48e79003e92a988dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]: /images/20230209/2e96eab7d02a41fdb993505081fefbf9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]: /images/20230209/01b756628eba40238e268108028127c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]: /images/20230209/7133621daf344c2b994725536c284d08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 5]: /images/20230209/1c8ec9a8e2894cdab92da3a8d5ad5691.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 6]: /images/20230209/35f8101035e847eea775d8faef570d14.png