菜单修改模块及角色管理模块查询业务(PROJECT03_DAY02_01)

最新推荐文章于 2024-05-23 12:27:27 发布
最新推荐文章于 2024-05-23 12:27:27 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 笔记 文章标签： java spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47253919/article/details/120532653
版权

8. 菜单修改页面数据呈现

8.1 业务时序分析

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

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

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

  • 业务描述与设计实现

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

  • 关键代码设计与实现

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

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

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

function doLoadEditUI(){
	var title;
	if($(this).hasClass("btn-add")){
		title="添加菜单"
	}else if($(this).hasClass("btn-update")){
		title="修改菜单"
		//获取选中的记录数据
		var rowData=doGetCheckedItem();
		if(!rowData){
			alert("请选择一个");
			return;
		}
		$("#mainContentId").data("rowData",rowData);
	}
	var url="menu/menu_edit";
	$("#mainContentId").load(url,function(){
		$(".box-title").html(title);
	})
}

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

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

8.2.2 编辑页面菜单数据呈现

  • 业务描述与设计实现

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

  • 关键代码设计与实现

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

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

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

function doInitEditFormData(data){
	$(".typeRadio input[value='"+data.type+"']").prop("checked",true);
	$("#nameId").val(data.name);
	$("#sortId").val(data.sort);
	$("#urlId").val(data.url);
	$("#permissionId").val(data.permission);
	$("#parentId").val(data.parentName);
	$("#parentId").data("parentId",data.parentId);
}

9. 菜单数据更新实现

9.1 业务时序分析

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

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

9.2.1 DAO 接口实现

  • 业务描述与设计实现

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

  • 关键代码设计与实现

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

int updateObject(SysMenu entity);

9.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>

9.2.3 Service 接口及实现

  • 业务描述与设计实现

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

  • 关键代码设计与实现

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

int updateObject(SysMenu entity);

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

@Override
public int updateObject(SysMenu entity) {
	//1.参数校验
	if(entity==null)throw new IllegalArgumentException("保存对象不能为空");
	//..
	//2.更新菜单对象
	int rows=sysMenuDao.updateObject(entity);
	if(rows==0)throw new ServiceException("记录已经不存在");
	return rows;
}

9.2.4 Controller 类定义

  • 业务描述与设计实现

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

  • 关键代码设计与实现

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

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

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

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

  • 业务描述与设计实现

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

  • 关键代码设计与实现

编辑 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);
		}
	});
}

11. 总结

11.1 重难点分析

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

11.2 FAQ 分析

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

11.3 BUG 分析

  • 无效参数异常(IllegalArgumentException)，如图-19 所示：

在这里插入图片描述
图-19
问题分析 ：检查当前执行的业务，其结果映射配置，是否将 resultType 写成了resultMap。

  • 菜单编辑页面，上级菜单树结构呈现，如图-20 所示：

在这里插入图片描述
图-20
问题分析：检查查询结果中是否有 parentId，或映射对象 Node 中 parentId 是否写错。

  • 属性值注入失败，如图-21 所示：
    在这里插入图片描述
    图-21
    问题分析：检查 Spring 容器中是否有 SysMenuService 接口的实现类对象，因为在SysMenuController 中需要一个这样的对象。

1.角色管理设计说明

1.1 业务设计说明

本模块主要实现的是企业内部角色(岗位)的管理,可以在添加角色时,为角色分配资源
访问权限,最后将角色再分配给用户，图-1 所示：
在这里插入图片描述
图-1
基于对表的设计，其数据逻辑关系的展示，如图-2 所示：
在这里插入图片描述
图-2

  • 角色表设计脚本如下:
CREATE TABLE `sys_roles` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`name` varchar(100) DEFAULT NULL COMMENT '角色名称',
`note` varchar(500) DEFAULT NULL COMMENT '备注',
`createdTime` datetime DEFAULT NULL COMMENT '创建时间',
`modifiedTime` datetime DEFAULT NULL COMMENT '修改时间',
`createdUser` varchar(20) DEFAULT NULL COMMENT '创建用户',
`modifiedUser` varchar(20) DEFAULT NULL COMMENT '修改用户',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=46 DEFAULT CHARSET=utf8 COMMENT='角色';

菜单与角色的关系表脚本设计如下：

CREATE TABLE `sys_role_menus` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`role_id` int(11) DEFAULT NULL COMMENT '角色 ID',
`menu_id` int(11) DEFAULT NULL COMMENT 'ID',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='角色与菜单对应关系';

用户与角色关系表设计脚本如下:

CREATE TABLE `sys_user_roles` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` int(11) DEFAULT NULL COMMENT '用户 ID',
`role_id` int(11) DEFAULT NULL COMMENT '角色 ID',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='用户与角色对应关系';

1.2 原型设计说明

基于用户需求，通过静态页面为用户呈现角色模块的基本需求。
当在主页点击角色管理时，呈现角色列表页面，如图-3 所示。
在这里插入图片描述
图-3
在列表页面点击添加按钮时，呈现角色编辑页面, 如图-4 所示.
在这里插入图片描述
图-4
在列表页面点击编辑按钮时，呈现角色编辑页面，如图-5 所示。
在这里插入图片描述
图-5
说明:假如客户对此原型进行了确认,后续则可以基于此原型进行研发。

1.3 API 设计说明

角色管理业务后台 API 分层架构及调用关系如图-6 所示：
在这里插入图片描述
图-6
说明：分层目的主要将复杂问题简单化，实现各司其职，各尽所能。

2.角色管理列表页面呈现

2.1 业务时序分析

角色列表页面，其加载时序分析，如图-7 所示：
在这里插入图片描述
图-7

2.2 服务端实现

2.2.1 Controller 实现

  • 业务描述与设计实现

基于角色管理的请求业务，在 PageController 中添加返回角色页面相关方法。

  • 关键代码设计与实现

检查 PageController 中是否有返回 UI 页面的方法，有则无需添加。例如：

@RequestMapping("{module}/{moduleUI}")
public String doModuleUI(@PathVariable String moduleUI) {
	return "sys/"+moduleUI;
}

2.3 客户端实现

2.3.1 首页菜单事件处理

  • 业务描述与设计实现

首 先 准 备 角 色 列 表 页 面 (/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);
	});
}

其中，load 函数为 jquery 中的 ajax 异步请求函数。

2.3.2 角色列表页面

  • 业务描述与设计实现

本页面呈现角色信息时要以分页形式进行呈现。

  • 关键代码设计与实现：

参考 sys_role.html 文件内容。

3. 角色管理列表数据呈现

3.1 数据架构分析

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

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

3.2.1 Entity 类实现

  • 业务描述及设计实现

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

  • 关键代码分析及实现
package com.cy.pj.sys.entity;
import java.io.Serializable;
import java.util.Date;

@Data
public class SysRole implements Serializable{
	private static final long serialVersionUID = -356538509994150709L;
	private Integer id;
	private String name;
	private String note;
	private Date createdTime;
	private Date modifiedTime;
	private String createdUser;
	private String modifiedUser;
}

说明：通过此对象除了可以封装从数据库查询的数据，还可以封装客户端请求数据，实现层与层之间数据的传递。

3.2.2 Dao 接口实现

  • 业务描述及设计实现

通过数据层对象，基于业务层参数数据查询角色记录总数以及当前页面要呈现的角色信息。

  • 关键代码分析及实现：

第一步：定义角色数据层接口对象，通过将此对象保证给业务层以提供角色数据操作。代码如下：

@Mapper
public interface SysRoleDao {
}

第二步：在 SysRoleDao 接口中添加 getRowCount 方法用于按条件统计记录总数。代码如下：

long getRowCount(String name);

第三步：在 SysRoleDao 接口中添加 findPageObjects 方法，基于此方法实现当前页记录的数据查询操作。代码如下：

List<SysRole> findPageObjects(String name,Long startIndex,Integer pageSize);

3.2.3 Mapper 文件实现

  • 业务描述及设计实现

基于 Dao 接口创建映射文件，在此文件中通过相关元素(例如 select)描述要执行的
数据操作。

  • 关键代码设计及实现

第一步：在映射文件的设计目录中添加 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">
</mapper>

第二步：在映射文件中添加 sql 元素实现，SQL 中的共性操作，代码如下：

<sql id="queryWhereId">
	<where>
		<if test="name!=null and name!=''">
			name like concat("%",#{name},"%")
		</if>
	</where>
</sql>

第三步：在映射文件中添加 id 为 getRowCount 元素，按条件统计记录总数，代码如下：

<select id="getRowCount" resultType="long">
select count(*) from sys_roles
<include refid="queryWhereId"/>
</select>

第四步：在映射文件中添加 id 为 findPageObjects 元素，实现分页查询。代码如下：

<select id="findPageObjects" resultType="com.cy.pj.sys.entity.SysRole">
	select * from sys_roles
	<include refid="queryWhereId"/>
	order by createdTime desc
	limit #{startIndex},#{pageSize}
</select>

思考:
1.动态 SQL:基于用于需求动态拼接 SQL
2.SQL标签元素的作用是什么?对 SQL语句中的共性进行提取,以遍实现更好的复用.
3.Include 标签的作用是什么?引入使用 SQL标签定义的元素

3.2.4 Service 接口及实现类

  • 业务描述与设计实现

在角色分页查询中，业务层对象主要负责对业务数据进行校验，并借助数据层对象完成数据的分页查询操作。

  • 关键代码设计及实现

第一步：定义角色业务接口及方法，暴露外界对角色业务数据的访问，其代码参考如下：

package com.cy.pj.sys.service;
public interface SysRoleService {
	PageObject<SysRole> findPageObjects(String name,Long pageCurrent);
}

第二步：定义角色业务接口实现类，并添加角色业务数据分页查询操作的具体实现,其代码参考如下：

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,Long pageCurrent) {
	//1.对参数进行校验
	if(pageCurrent==null||pageCurrent<1)
		throw new IllegalArgumentException("当前页码值无效");
	//2.查询总记录数并进行校验
	long rowCount=sysRoleDao.getRowCount(name);
	if(rowCount==0)
		throw new ServiceException("没有找到对应记录");
	//3.查询当前页记录
	int pageSize=3;
	long startIndex=(pageCurrent-1)*pageSize;
	List<SysRole> records=
		sysRoleDao.findPageObjects(name,startIndex, pageSize);
	//4.对查询结果进行封装并返回
	return new PageObject<>(pageCurrent, pageSize,rowCount, records);
	}
}

3.2.5 Controller 类实现

  • 业务描述与设计实现

控制层对象主要负责请求和响应数据的处理，例如，本模块通过业务层对象执行业务逻辑，再通过 VO 对象封装响应结果(主要对业务层数据添加状态信息)，最后将响应结果转换为 JSON 格式的字符串响应到客户端。

  • 关键代码设计与实现

定义 Controller 类，并将此类对象使用 Spring 框架中的@RestController 注解进行标识，表示此类对象要交给 Spring 管理。然后基于@RequestMapping 注解为此类定义根路径映射。代码参考如下：

package com.cy.pj.sys.controller;
@RequestMapping("/role/")
@RestController
public class SysRoleController {
	@Autowired
	private SysRoleService sysRoleService;
}

在 Controller 类中添加菜单查询处理方法，代码参考如下：

@RequestMapping("doFindPageObjects")
public JsonResult doFindPageObjects( String name,Long pageCurrent) { 
	return new JsonResult( sysRoleService.findPageObjects(name, pageCurrent)); 
}
浩浩邶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
菜单功能实现（含需求分析，用户信息文档）
12-05
用户注册，登录，超级管理员添加角色，添加用户，实现删除，修改，打印等功能
角色绑定菜单（或功能）并实现用户菜单更改的思路
万能的编程语言
08-05 2697
背景：一个角色拥有多个菜单，一个菜单属于多个角色，一个用户拥有多个菜单，一个用户可拥有独立的菜单。 操作：在更改了角色绑定菜单后，需要对用户拥有的菜单做刷新，即：当一个角色拥有的菜单增加时，用户对应的菜单视情况新增；当角色拥有的菜单减少时，用户对应的菜单视情况减少。为什么要视情况呢？因为，当一个角色增加菜单时，用户拥有的其他角色包含了该菜单，或者直接拥有了该菜单，同理，减少时亦是如此。 实现思...
SpringBoot+layuimini实现角色权限菜单增删改查（layui扩展组件 dtree）
最新发布
m0_46590717的博客
05-23 665
SpingBoot 加layui实现角色资源菜单管理
前端后台根据角色改变路由菜单
Shining_F的博客
03-06 218
前端后台根据角色改变路由菜单
Vue项目 针对角色配置权限列表（菜单及页面功能）
Julia_0502的博客
05-26 3699
提示：关于使用 Vue 和 ElementUI 做后台管理系统的权限 Vue项目 针对角色配置权限列表（菜单及页面功能）前言一、角色与用户关系二、针对角色设置对应的权限列表1.实现效果2.权限维护页面3.页面实现逻辑说明总结 前言 现在很多管理系统都会需要权限管理，控制不同角色的菜单、页面功能、通过直接输入url跳转。此篇记录的是角色和用户的关系，以及给角色配置权限列表，如何根据权限列表控制菜单及页面功能请参考下篇 提示：以下是本篇文章正文内容，下面案例可供参考 一、角色与用户关系 该项目实现的是角
Python 14.商城项目 2-3_WEBPROJECT01_Day03_am.mp4
02-19
Python 14.商城项目 2-3_WEBPROJECT01_Day03_am.mp4
Python 18、商城项目续 3-1_WEBPROJECT02_Day03_am.mp4
02-22
Python 18、商城项目续 3-1_WEBPROJECT02_Day03_am.mp4
Python 18、商城项目续 1-1_WEBPROJECT02_Day01_am.mp4
02-22
Python 18、商城项目续 1-1_WEBPROJECT02_Day01_am.mp4
project03_java_人员管理系统_frogm1i_
10-01
在本项目"project03_java_人员管理系统_frogm1i_"中，我们将探讨如何使用Java编程语言构建一个人员管理系统，以实现对公司已有员工的有效管理和团队组建。此系统旨在优化人力资源分配，提升工作效率，便于管理层对...
Project.zip_DEMO_bbl_nbiot模块_sim7000c_高通
07-15
《高通平台NBIoT模块SIM7000C的二次开发详解》 在物联网(IoT)领域，NBIoT（窄带物联网）技术因其低功耗、广覆盖的特点，被广泛应用于各种远程通信场景。其中，SIM7000C是一款基于高通平台的NBIoT模块，其强大的功能...
角色管理(2)---角色添加、修改的页面呈现、数据实现
Daniel
07-23 2515
五、角色添加页面呈现 六、角色数据添加实现 七、角色修改页面数据呈现 八、角色数据更新实现 九、总结
后台管理项目之角色、权限、菜单、用户之间的关系（Vue+node.js+Mongodb）
窝窝头的博客
09-21 7027
一、首先创建角色（前提：存在菜单列表、权限列表） 1、首先此时已存在的菜单列表、权限列表（导航栏如下图） 2、然后在角色列表中，添加对应的角色，并为角色添加权限值、菜单值 3、接着打开用户列表，添加对应用户，并为...
用户·角色·权限·表的设计
u013595377的专栏
05-15 2万+
一．引言        因为做过的一些系统的权限管理的功能虽然在逐步完善，但总有些不尽人意的地方，总想抽个时间来更好的思考一下权限系统的设计。        权限系统一直以来是我们应用系统不可缺少的一个部分，若每个应用系统都重新对系统的权限进行设计，以满足不同系统用户的需求，将会浪费我们不少宝贵时间，所以花时间来设计一个相对通用的权限系统是很有意义的。 二．设计目标        设计一个
权限管理系统中的根据用户角色动态生成用户权限菜单树
热门推荐
dabai_cai的博客
10-03 4万+
权限管理系统中的根据用户角色动态生成用户权限菜单树 源码地址https://github.com/dabai-cai/thesis 暑假在工作室学习了基于RBAC的权限管理系统，学的比较浅显，记录下方便以后学习可以看。 一、首先讲讲我对RBAC的理解 关系：用户->角色->权限。 可...
菜单-角色-用户信息的展示
晴丶空
07-03 1089
上篇URL：https://mp.csdn.net/mdeditor/80751932 主要讲解了菜单树的实现，现在主界面如下： 报表工具使用百度的Echarts.js （后期优化，暂时显示一个样例） 进入今天的主题： 1，菜单信息的显示： 其他的部门信息和用户信息都和菜单信息的展示效果一样，都在操作栏添加删除和修改按钮，不过在部门(角色)在删除时，后台会做判断，假如该角...
从零开始写C# MVC框架之--- 设计用户、菜单、组织机构、角色等表
zhuyu19911016520
09-15 6279
框架使用的是Code First模式，我是直接新建：用户、菜单、组织机构、角色、角色菜单、角色用户实体类（User、Menu、Department、Role、RoleMenu、RoleUser） 再专门在PowerDesigner中单独设计了一下，更清晰的把表结构展示给大家 将表的字段和字段属性设置好后，把表设置到上下文中， public partial class Data
python settings模块_Python settings.PROJECT_ROOT属性代码示例
06-08
以下是一个示例代码，展示了如何在 Django 的 settings 模块中使用 PROJECT_ROOT 属性： ``` import os # Build paths inside the project like this: os.path.join(BASE_DIR, ...) BASE_DIR = os.path.dirname(os...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值