动吧旅游项目角色管理模块 part4

最新推荐文章于 2022-12-26 11:15:12 发布

weixin_47562812

最新推荐文章于 2022-12-26 11:15:12 发布

阅读量334

点赞数

分类专栏： springboot 文章标签： java spring boot

本文链接：https://blog.csdn.net/weixin_47562812/article/details/108121921

版权

springboot 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

角色管理设计说明

业务设计说明
本模块主要实现的是企业内部角色(岗位)的管理,可以在添加角色时,为角色分配资源访问权限,最后将角色再分配给用户
在这里插入图片描述

原型设计说明
基于用户需求，通过静态页面为用户呈现角色模块的基本需求。
当在主页点击角色管理时，呈现角色列表页面

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

在列表页面点击编辑按钮时，呈现角色编辑页面，如图
在这里插入图片描述
说明:假如客户对此原型进行了确认,后续则可以基于此原型进行研发。
API设计说明
角色管理业务后台API分层架构及调用关系如图

角色管理列表页面呈现

业务时序分析
在这里插入图片描述
服务端实现
检查PageController中是否有返回UI页面的方法，有则无需添加。

@RequestMapping("{module}/{moduleUI}")

public String doModuleUI(@PathVariable String moduleUI) {

                return "sys/"+moduleUI;

}

客户端实现
首先准备角色列表页面(/templates/pages/sys/role_list.html)，然后在starter.html页面中点击菜单管理时异步加载角色列表页面。
starter.html 页面

$(function(){
.......
     doLoadUI("load-role-id","role/role_list")

})

function doLoadUI(id,url){

         $("#"+id).click(function(){

                    $("#mainContentId").load(url);

    });

}

数据架构分析

角色列表页面加载完成，启动角色数据异步加载操作，本次角色列表页面要以分页形式呈现角色信息，其数据查询时，数据的封装及传递过程，如图
在这里插入图片描述
说明：本模块将从数据库查询到的角色数据封装到SysRole对象，一行记录一个SysRole对象。
角色数据分页查询时,其时序分析如图

构建实体对象（POJO）封装从数据库查询到的记录，一行记录映射为内存中一个的这样的对象。对象属性定义时尽量与表中字段有一定的映射关系，并添加对应的set/get/toString等方法，便于对数据进行更好的操作。

package com.cy.pj.sys.pojo;

import java.io.Serializable;
import java.util.Date;

import lombok.Data;

@Data
public class SysRole implements Serializable{
	 
	private static final long serialVersionUID = -1837179419435460607L;

	private Integer id;

     private String name;

     private String note;

     private Date createdTime;

     private Date modifiedTime;

     private String createdUser;

     private String modifiedUser;
}

SysRoleDao

package com.cy.pj.sys.dao;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import com.cy.pj.sys.pojo.SysRole;

@Mapper
public interface SysRoleDao {
	/** 
	* 基于角色进行角色信息的模糊查询 
	*/
 int getRowCount(String name);
 
 /**
  * 按条件分页查询角色记录
  * */
 List<SysRole> findPageObjects(

         @Param("name")String  name,

         @Param("startIndex")Integer startIndex,

         @Param("pageSize")Integer pageSize);
 
}

说明：

当DAO中方法参数多余一个时尽量使用@Param注解进行修饰并指定名字，然后再Mapper文件中便可以通过类似#{username}方式进行获取，否则只能通过#{arg0}，#{arg1}或者#{param1}，#{param2}等方式进行获取。
当DAO方法中的参数应用在动态SQL中时无论多少个参数，尽量使用@Param注解进行修饰并定义。
添加SysRoleMapper.xml映射文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="com.cy.pj.sys.dao.SysRoleDao">
  	 <sql id="queryWhereId">

          <where>

            <if test="name!=null and name!=''">

               name like concat("%",#{name},"%")

            </if>

          </where>

    </sql>
    <select id="getRowCount" resultType="int">

          select count(*)

          from sys_roles

          <include refid="queryWhereId"/>

     </select>
     <select id="findPageObjects" resultType="com.cy.pj.sys.pojo.SysRole">

         select *

         from sys_roles

         <include refid="queryWhereId"/>

          order by createdTime desc

         limit #{startIndex},#{pageSize}    

       </select>
  </mapper>

SysRoleService

package com.cy.pj.sys.service;

public interface SysRoleService {

         PageObject<SysRole> findPageObjects(

                         String name,Integer pageCurrent);

}

SysRoleServiceImpl

package com.cy.pj.sys.service.impl;

import org.springframework.util.StringUtils;

@Service

public class SysRoleServiceImpl implements SysRoleService {

    @Autowired

        private SysRoleDao sysRoleDao;

        @Override

        public PageObject<SysRole> findPageObjects(

                        String name,Integer pageCurrent) {

                //1.对参数进行校验

                if(pageCurrent==null||pageCurrent<1)

                throw new IllegalArgumentException("当前页码值无效");

                //2.查询总记录数并进行校验

                int rowCount=sysRoleDao.getRowCount(name);

                if(rowCount==0)

                throw new ServiceException("没有找到对应记录");

                //3.查询当前页记录

                int pageSize=2;

                int startIndex=(pageCurrent-1)*pageSize;

                List<SysRole> records=

                sysRoleDao.findPageObjects(name,

                startIndex, pageSize);

                //4.对查询结果进行封装并返回

                return new PageObject<>(pageCurrent, pageSize, rowCount, records);

        }

}

Controller类

@RequestMapping("doFindPageObjects")

public JsonResult doFindPageObjects(

                         String name,Integer pageCurrent) {

                 return new JsonResult(

                        sysRoleService.findPageObjects(name,

                                        pageCurrent));

         }

代码的改进：
1.提取共性，如果直接在service层try{} catch{}就没有事务的回滚
在这里插入图片描述

package com.cy.pj.common.web;
/**
 * 通过此工具类封装对参数，执行过程，结果等业务得校验
 * */
public class AssertUtil {
	public static void isArgumentValid(boolean statement,String msg) {
		//验证参数得有效性
		if(statement)
			throw new IllegalArgumentException(msg);
	}
	public static void isResultValid(boolean statement,String msg) {
		if(statement)
			throw new ServiceException(msg);
	}

}

2.明确服务端处理方式：
在这里插入图片描述
知识点：
1.转义加json格式，ObjectMapper是jackson文件的对象
a)将对象转化为字符串

b)将字符串转换为对象

客户端关键业务及代码实现
第一步：分页页面加载完成，向服务端发起异步请求，代码参考如下：

$(function(){

           //为什么要将doGetObjects函数写到load函数对应的回调内部。

           $("#pageId").load("doPageUI", doGetObjects)

});

第二步：定义异步请求处理函数，代码参考如下：

  function doGetObjects(){

           //debugger;//断点调试

           //1.定义url和参数

           var url="role/doFindPageObjects"

           var params={"pageCurrent":1};//pageCurrent=2

           //2.发起异步请求

         $.getJSON(url,params,function(result){

                    doHandleResponseResult(result);

                 }

           );//特殊的ajax函数

   }

第三步：定义回调函数，处理服务端的响应结果。代码如下：

function doHandleResponseResult (result){ //JsonResult

           if(result.state==1){//ok

                //更新table中tbody内部的数据

                doSetTableBodyRows(result.data.records);//将数据呈现在页面上

                //更新页面page.html分页数据

                doSetPagination(result.data); //此方法写到page.html中

            }else{

                alert(result.msg);

            }  

 }

第四步：将异步响应结果呈现在table的tbody位置。代码参考如下：

 function doSetTableBodyRows(records){

           //1.获取tbody对象，并清空对象

           var tBody=$("#tbodyId");

           tBody.empty();

           //2.迭代records记录，并将其内容追加到tbody

           for(var i in records){

                   //2.1 构建tr对象

                   var tr=$("<tr></tr>");

                   //2.2 构建tds对象

                   var tds=doCreateTds(records[i]);

                   //2.3 将tds追加到tr中

                   tr.append(tds);

                   //2.4 将tr追加到tbody中

                   tBody.append(tr);

           }

   }

第五步：创建每行中的td元素，并填充具体业务数据。代码参考如下：

 function doCreateTds(row,i){

           var tds=

       "<td>"+(parseInt(i)+1)+"</td>"+

           "<td>"+row.name+"</td>"+

       "<td>"+row.note+"</td>"+

       "<td>"+new Date(row.createdTime).toLocaleString()+"</td>"+

       "<td>"+new Date(row.modifiedTime).toLocaleString()+"</td>"+

       "<td>"+row.createdUser+"</td>"+

       "<td>"+row.modifiedUser+"</td>"+

       "<td><a class='btn-delete'>delete</a>"+

       "&nbsp;<a class='btn-update'>update</a></td>";

       return tds;

   }

角色管理删除操作实现

在这里插入图片描述
业务时序分析
基于用户在列表页面上选择的的用户记录ID，执行删除操作，本次删除业务实现中，首先要基于id删除角色菜单关系数据，然后基于id删除用户角色关系数据，最后删除角色自身信息，如图
在这里插入图片描述
dao接口：
第一步：在创建SysRoleMenuDao并定义基于角色id删除关系数据的方法，关键代码如下：

public interface SysRoleMenuDao {

        int deleteObjectsByRoleId(Integer roleId);

}

第二步：创建SysUserRoleDao并定义基于角色id删除关系数据的方法，关键代码如下：

public interface SysUserRoleDao {

        int deleteObjectsByRoleId(Integer roleId);

}

第三步：在SysRoleDao中添加基于菜单id删除角色记录的方法。代码参考如下：

int deleteObject(Integer id);

Mapper文件实现
第一步：创建SysRoleMenuMapper.xml文件并添加基于菜单id删除关系数据的元素，关键代码如下：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.cy.pj.sys.dao.SysRoleMenuDao">

 <delete id="deleteObjectsByRoleId"

             parameterType="int">

          delete from sys_role_menus

          where role_id=#{roleId}

        </delete>

</mapper>

第二步：在SysUserRoleMapper.xml文件中添加基于id删除用户角色关系数据的元素，关键代码如下：

<delete id="deleteObjectsByRoleId">

          delete from sys_user_roles

          where role_id=#{roleId}        

 </delete>

第三步：在SysRoleMapper.xml文件添加delete元素,基于角色id删除角色自身记录信息，关键代码如下：

<delete id="deleteObject">

       delete from sys_roles

       where id =#{id}

    </delete>

Service接口及实现类
第一步：在SysRoleService接口中，添加基于id进行角色删除的方法。关键代码如下：

int deleteObject(Integer id);

第二步：在SysRoleServiceImpl实现类中注入SysRoleMenuDao，SysUserRoleDao相关对象。关键代码如下：

private SysRoleMenuDao sysRoleMenuDao;

@Autowired

private SysUserRoleDao sysUserRoleDao;

@Override
	public int deleteObject(Integer id) {
		// TODO Auto-generated method stub
		//1.参数校验
		AssertUtil.isArgumentValid(id==null||id<0, "参数无效");
		//2.删除关系表中关系数据
		//2.1删除角色菜单关系数据
		sysRoleMenuDao.deleteObjectsByRoleId(id);
		//2.2删除用户角色关系数据
		sysUserRoleDao.deleteObjectsByRoleId(id);
		//3.删除角色自身信息
		int rows=sysRoleDao.deleteObject(id);
		//4.结果检验
		AssertUtil.isResultValid(rows==0, "记录可能已经不存在");
		
		return rows;
	}

Controller类实现
在角色控制层对象中，添加用于处理角色删除请求的方法。首先在此方法中通过形参接收客户端提交的数据，然后调用业务层对象执行删除操作，最后封装执行结果，并在运行时将响应对象转换为JSON格式的字符串，响应到客户端。

@RequestMapping("doDeleteObject")

public JsonResult doDeleteObject(Integer id){

                  sysRoleService.deleteObject(id);

                  return new JsonResult("delete ok");

}

客户端关键业务及代码实现
用户在页面上首先选择要删除的元素，然后点击删除按钮，将用户选择的记录id异步提交到服务端，最后在服务端执行角色的删除动作。
第一步：页面加载完成以后，在删除按钮上进行点击事件注册。关键代码如下：

...

$(".input-group-btn")

           .on("click",".btn-delete",doDeleteObject)

...

第二步：定义删除操作对应的事件处理函数。关键代码如下：

function doDeleteObject(){

           //1.获取选中的值(分页显示记录时在tr上要绑定id的值)

           var id=$(this).parents("tr").data("id");

           //2.构建参数对象

           var params={id:id};

           //3.异步请求执行删除

           var url="role/doDeleteObject";

           $.post(url,params,function(result){

                   if(result.state==1){

                           alert(result.message);

                           doGetObjects();

                   }else{

                           alert(result.message);

                   }

           })

   }

角色添加页面呈现

在这里插入图片描述
获取ZTree中选中的id,用toString()进行转化

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

准备角色编辑页面(/templates/pages/sys/role_edit.html)
角色编辑页面呈现
第一步：角色列表事件注册，关键代码如下：

$(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);

           });

   }

角色编辑页面事件处理
第一步：页面中引入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);

                    }

            });

}

角色数据添加实现
用户在角色编辑页面输入数据，然后异步提交到服务端，其简易数据传递基本架构，如图
在这里插入图片描述
角色数据保存时，数据时序图分析

DAO接口定义
SysRoleDao接口

int insertObject(SysRole entity);

SysRoleMenuDao接口

int insertObjects(

                        @Param("roleId")Integer roleId,

                        @Param("menuIds")Integer[] menuIds);

Mapper映射文件定义
第一步:在SysRoleMapper.xml中添加insertObject元素，用于写入菜单信息
useGeneratedKeys 表示使用insert操作的自增主键值
keyProperty表示将获取的自增主键值赋值给参数对象的id属性

<insert id="insertObject"  parameterType="com.cy.pj.sys.pojo.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中元素定义

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="com.cy.pj.sys.dao.SysRoleMenuDao">
  	<insert id="insertObjects">

         insert into sys_role_menus

         (role_id,menu_id)

         values

         <foreach collection="menuIds"

                  separator=","

                  item="item">

              (#{roleId},#{item})

         </foreach>

 </insert>
 <select id="findMenuIdsByRoleId"

              resultType="int">

            select menu_id

            from sys_role_menus

            where role_id=#{id}

  </select>
  	
  </mapper>

Service接口定义及实现
基于控制层请求，调用数据层对象将角色以及对应的菜单信息写入到数据库中。
第一步：在SysRoleService接口中，添加用于保存角色对象的方法。关键代码如下：

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

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

@Override
	public int saveObject(SysRole entity,Integer[] menuIds) {
		
		//1.参数有效性校验
		AssertUtil.isArgumentValid(entity==null, "保存对象不能为空");
		AssertUtil.isArgumentValid(StringUtils.isEmpty(entity.getName()), "角色名不能为空");
		AssertUtil.isArgumentValid(menuIds==null||menuIds.length==0, "必须为角色分配ID");
		//2.保存角色自身信息
		int rows=sysRoleDao.insertObject(entity);//执行完此语句会保存一份SysRole的id
		//3.保存角色菜单关系数据
		sysRoleMenuDao.insertObjects(entity.getId(), menuIds);
		return rows;
	}

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

@RequestMapping("doSaveObject")

@ResponseBody

public JsonResult doSaveObject(

                    SysRole entity,Integer[] menuIds){

                sysRoleService.saveObject(entity,menuIds);

return new JsonResult("save ok");    

}

客户端关键业务及代码实现
页面cancel按钮事件处理
第一步：事件注册（页面加载完成以后）

 $(".box-footer")

          .on("click",".btn-cancel",doCancel)

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

function doCancel(){

        var url="role/role_list";

        $("#mainContentId").load(url);  

  }

页面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;

    }

角色修改页面数据呈现

在这里插入图片描述

业务时序分析
点击角色列表页面的编辑按钮，其时序分析，如图
在这里插入图片描述
服务端关键业务及代码实现
服务端关键业务及代码实现
核心业务：在角色列表页面点击修改按钮时,基于id进行角色信息的查询,在查询角色信息时将角色信息与对应的菜单关系数据封装到到一个值对象，然后传递到客户端在修改页面进行呈现，如图
在这里插入图片描述
第一种实现方式，业务层多次单表查询：
resultType:用于查询过程中得简单数据映射：

在这里插入图片描述
第二种实现方案,数据层嵌套查询,业务层查一次（先查角色再查菜单)

resultMap是mybatis框架中用于实现高级映射得一个非常重要得元素，自定义设计映射规则的设计，例如字段的自定义映射，表嵌套查询映射，表关联查询映射
在这里插入图片描述

第三种方式：多表关联查询
构建实体类：

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;

        }

}

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

SysRoleMenuVo findObjectById(Integer id);

Mapper文件定义
第一步：在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>

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;

    }

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

@RequestMapping("doFindObjectById")

 public JsonResult doFindObjectById(Integer id){

            return new JsonResult(sysRoleService.findObjectById(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);

           });

   }

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

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);

         }

   }

角色数据更新实现

在这里插入图片描述
服务端关键业务及代码实现
DAO接口实现
在SysRoleDao接口中添加数据更新方法，关键代码如下

int updateObject(SysRole entity);

Mapper文件定义
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>

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;

  }

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

@RequestMapping("doUpdateObject")

public JsonResult doUpdateObject(SysRole entity,

String menuIds){

                  sysRoleService.updateObject(entity,menuIds);

 return new JsonResult("update ok");

客户端关键业务及代码实现
第一步：在角色编辑页面中定义获取角色编辑页面表单数据的函数，关键代码如下：

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);

                    }

            })

    }

知识点
1.让ztree中对应的菜单id为选中状态
在这里插入图片描述

在这里插入图片描述

部门管理模块的导入：

weixin_47562812

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动吧旅游项目角色管理模块 part4

角色管理设计说明业务设计说明本模块主要实现的是企业内部角色(岗位)的管理,可以在添加角色时,为角色分配资源访问权限,最后将角色再分配给用户原型设计说明基于用户需求，通过静态页面为用户呈现角色模块的基本需求。当在主页点击角色管理时，呈现角色列表页面在列表页面点击添加按钮时，呈现角色编辑页面,在列表页面点击编辑按钮时，呈现角色编辑页面，如图说明:假如客户对此原型进行了确认,后续则可以基于此原型进行研发。API设计说明角色管理业务后台API分层架构及调用关系如图角色管理列表页面呈
复制链接

扫一扫