目录
学习目标：
用户的增删改查以及Ztree的学习
学习内容：
用户的增删改查
根据思路书写代码即可
添加角色
1.参数校验
角色名称 非空，名称唯一
2.设置参数的默认值
是否有效
创建时间
修改时间
3.执行添加操作，判断受影响的行数
修改角色
1.参数校验
角色ID 非空，且数据存在
角色名称 非空，名称唯一
2.设置参数的默认值
修改时间
3.执行更新操作，判断受影响的行数
删除角色
1.参数校验
角色ID 非空，数据存在
2.设置相关参数的默认
是否有效 0（删除记录）
修改时间 系统默认时间
3.执行更新操作，判断受影响的行数
dao层
public interface RoleMapper extends BaseMapper<Role, Integer> {
// 查询所有的角色列表
// 只需要id与roleName,所以可以使用map来接收
public List<Map<String, Object>> queryAllRoles(Integer userId);
//根据角色名查询角色记录
public Role selectByRoleName(String roleName);
}<!-- 通过角色名查询角色记录 -->
<select id="selectByRoleName" parameterType="string" resultType="com.xxxx.crm.vo.Role">
select
<include refid="Base_Column_List"></include>
from
t_role
where
is_valid = 1
and
role_name = #{roleName}
</select>
<!--多条件查询-->
<select id="selectByParams" parameterType="com.xxxx.crm.query.RoleQuery" resultType="com.xxxx.crm.vo.Role">
select
<include refid="Base_Column_List"/>
from
t_role
<where>
is_valid = 1
<if test="roleName != null and roleName != ''">
and role_name like concat('%',#{roleName},'%')
</if>
</where>
</select>
<!-- 查询所有的角色列表 -->
<select id="queryAllRoles" parameterType="int" resultType="java.util.Map">
SELECT
r.id,
r.role_name AS roleName,
CASE
WHEN IFNULL(temp.id,0) = 0 THEN ''
ELSE 'selected'
END
AS 'selected'
FROM
t_role r
LEFT JOIN ( SELECT r.id FROM t_role r LEFT JOIN t_user_role ur ON r.id = ur.role_id WHERE user_id = #{userId} ) temp ON r.id = temp.id
WHERE
r.is_valid = 1
</select>service层
@Service
public class RoleService extends BaseService<Role, Integer> {
@Resource
private RoleMapper roleMapper;
/**
* 查询所有角色列表
*
* @param userId
* @return java.util.List<java.util.Map < java.lang.String, java.lang.Object>>
* @author QQ星
* @Date 2022/3/21 21:14
*/
public List<Map<String, Object>> queryAllRoles(Integer userId) {
return roleMapper.queryAllRoles(userId);
}
/**
* 添加角色
* 1. 参数校验
* 角色名称 非空，名称唯一
* 2. 设置参数的默认值
* 是否有效
* 创建时间
* 修改时间
* 3. 执行添加操作，判断受影响的行数
*
* @param role
* @return void
* @author QQ星
* @Date 2022/3/23 20:46
*/
@Transactional(propagation = Propagation.REQUIRED)
public void addRole(Role role) {
/* 1.参数校检 */
//非空
AssertUtil.isTrue(StringUtils.isBlank(role.getRoleName()), "角色名不能为空！");
//名称唯一
Role temp = roleMapper.selectByRoleName(role.getRoleName());
AssertUtil.isTrue(temp != null, "用户角色名重复");
/* 2.设置参数的默认值 */
//是否有效
role.setIsValid(1);
//创建时间
role.setCreateDate(new Date());
//修改时间
role.setUpdateDate(new Date());
/* 3.执行添加操作，判断受影响的行数 */
AssertUtil.isTrue(roleMapper.insertSelective(role) != 1, "角色添加失败！");
}
/**
* 修改角色
* 1.参数校验
* 角色ID 非空，且数据存在
* 角色名称 非空，名称唯一
* 2.设置参数的默认值
* 修改时间
* 3.执行更新操作，判断受影响的行数
*
* @param role
* @return void
* @author QQ星
* @Date 2022/3/23 21:17
*/
@Transactional(propagation = Propagation.REQUIRED)
public void updateRole(Role role) {
/* 1.参数校检 */
checkUpdateRoleParams(role);
/* 2.设置参数的默认值 */
role.setUpdateDate(new Date());
/* 3.执行更新操作，判断受影响的行数 */
AssertUtil.isTrue(roleMapper.updateByPrimaryKeySelective(role) != 1, "角色跟新失败");
}
/**
* 删除角色
* 1.参数校验
* 角色ID 非空，数据存在
* 2.设置相关参数的默认
* 是否有效 0（删除记录）
* 修改时间 系统默认时间
* 3.执行更新操作，判断受影响的行数
*
* @param roleId
* @return void
* @author QQ星
* @Date 2022/3/23 21:34
*/
@Transactional(propagation = Propagation.REQUIRED)
public void deleteRole(Integer roleId) {
/* 1.参数校检 */
//角色ID 非空，数据存在
AssertUtil.isTrue(roleId == null, "查找不到对应的角色");
Role role = roleMapper.selectByPrimaryKey(roleId);
AssertUtil.isTrue(null == role, "待删除记录不存在！");
/* 2.设置相关参数的默认 */
//是否有效 0（删除记录）
role.setIsValid(0);
//修改时间 系统默认时间
role.setUpdateDate(new Date());
/* 3.执行更新操作，判断受影响的行数 */
AssertUtil.isTrue(roleMapper.updateByPrimaryKeySelective(role) < 1, "用户删除失败");
}
/**
* 参数校检
*
* @param role
* @return void
* @author QQ星
* @Date 2022/3/23 21:33
*/
private void checkUpdateRoleParams(Role role) {
// 角色ID 非空，且数据存在
AssertUtil.isTrue(role.getId() == null || roleMapper.selectByPrimaryKey(role.getId()) == null, "查找不到对应的角色");
//角色名称 非空，名称唯一
AssertUtil.isTrue(StringUtils.isBlank(role.getRoleName()), "角色名不能为空！");
Role temp = roleMapper.selectByRoleName(role.getRoleName());
//判断角色记录是否存在（如果不存在，表示可使用；如果存在，且角色ID与当前更新的角色ID不一致，表示角色名称不可用）
AssertUtil.isTrue(temp != null && (!temp.getId().equals(role.getId())), "用户角色名已存在,不可使用");
}
}
controller层
@Controller
@RequestMapping("role")
public class RoleController extends BaseController {
@Resource
private RoleService roleService;
/**
* 查询所有角色列表
*
* @param userId
* @return java.util.List<java.util.Map < java.lang.String, java.lang.Object>>
* @author QQ星
* @Date 2022/3/21 20:28
*/
@RequestMapping("queryAllRoles")
@ResponseBody
public List<Map<String, Object>> queryAllRoles(Integer userId) {
return roleService.queryAllRoles(userId);
}
/**
* 多条件分页查询
*
* @param roleQuery
* @return java.util.Map<java.lang.String, java.lang.Object>
* @author QQ星
* @Date 2022/3/23 20:41
*/
@GetMapping("list")
@ResponseBody
public Map<String, Object> selectByParams(RoleQuery roleQuery) {
return roleService.queryByParamsForTable(roleQuery);
}
/**
* 进入页面
*
* @param
* @return java.lang.String
* @author QQ星
* @Date 2022/3/23 20:41
*/
@RequestMapping("index")
public String index() {
return "role/role";
}
/**
* 进入添加或者修改界面
*
* @param request
* @param roleId
* @return java.lang.String
* @author QQ星
* @Date 2022/3/23 20:58
*/
@RequestMapping("toAddOrUpdateRolePage")
public String toAddOrUpdateRolePage(HttpServletRequest request, Integer roleId) {
//Id不为空进入修改操作
if (roleId != null) {
//根据ID查询角色
Role role = roleService.selectByPrimaryKey(roleId);
//把角色数据属性和值到请求与域中
request.setAttribute("role", role);
}
return "role/add_update";
}
/**
* 添加角色
*
* @param role
* @return com.xxxx.crm.base.ResultInfo
* @author QQ星
* @Date 2022/3/23 20:47
*/
@PostMapping("add")
@ResponseBody
public ResultInfo addRole(Role role) {
roleService.addRole(role);
return success("角色添加成功！");
}
/**
* 跟新角色
*
* @param role
* @return com.xxxx.crm.base.ResultInfo
* @author QQ星
* @Date 2022/3/23 21:32
*/
@PostMapping("update")
@ResponseBody
public ResultInfo updateRole(Role role) {
roleService.updateRole(role);
return success("角色修改成功！");
}
/**
* 删除角色
*
* @param roleId
* @return com.xxxx.crm.base.ResultInfo
* @author QQ星
* @Date 2022/3/23 21:38
*/
@PostMapping("delete")
@ResponseBody
public ResultInfo deleteRole(Integer roleId) {
roleService.deleteRole(roleId);
return success("角色删除成功！");
}
}
前端JS(role界面)
layui.use(['table','layer'],function(){
var layer = parent.layer === undefined ? layui.layer : top.layer,
$ = layui.jquery,
table = layui.table;
/**
* 加载数据表格
*/
var tableIns = table.render({
id:'roleTable'
// 容器元素的ID属性值
,elem: '#roleList'
// 容器的高度 full-差值
,height: 'full-125'
// 单元格最小的宽度
,cellMinWidth:95
// 访问数据的URL（后台的数据接口）
,url: ctx + '/role/list'
// 开启分页
,page: true
// 默认每页显示的数量
,limit:10
// 每页页数的可选项
,limits:[10,20,30,40,50]
// 开启头部工具栏
,toolbar:'#toolbarDemo'
// 表头
,cols: [[
// field：要求field属性值与返回的数据中对应的属性字段名一致
// title：设置列的标题
// sort：是否允许排序（默认：false）
// fixed：固定列
{type:'checkbox', fixed:'center'}
,{field: 'id', title: '编号', sort: true, fixed: 'left'}
,{field: 'roleName', title: '角色名称', align:'center'}
,{field: 'roleRemarker', title: '角色备注', align:'center'}
,{field: 'createDate', title: '创建时间', align:'center'}
,{field: 'updateDate', title: '修改时间', align:'center'}
,{title:'操作',templet:'#roleListBar', fixed: 'right', align:'center', minWidth:150}
]]
});
/**
* 搜索按钮的点击事件
*/
$(".search_btn").click(function () {
/**
* 表格重载
* 多条件查询
*/
tableIns.reload({
// 设置需要传递给后端的参数
where: { //设定异步数据接口的额外参数，任意设
// 通过文本框，设置传递的参数
roleName: $("[name='roleName']").val() // 角色名称
}
,page: {
curr: 1 // 重新从第 1 页开始
}
});
});
/**
* 监听头部工具栏
*/
table.on('toolbar(roles)',function (data) {
// 判断lay-event属性
if (data.event == "add") { // 添加操作
// 打开添加/更新角色的对话框
openAddOrUpdateRoleDialog();
} else if (data.event == "grant") { // 授权操作
// 获取数据表格选中的记录数据
var checkStatus = table.checkStatus(data.config.id);
// 打开授权的对话框
openAddGrantDialog(checkStatus.data);
}
});
/**
* 监听行工具栏
*/
table.on('tool(roles)',function (data) {
// 判断lay-event属性
if (data.event == "edit") { // 修改角色
// 打开添加/更新角色的对话框
openAddOrUpdateRoleDialog(data.data.id);
} else if (data.event == "del") {
// 删除角色
deleteRole(data.data.id);
}
});
/**
* 打开添加/更新角色的对话框
*/
function openAddOrUpdateRoleDialog(roleId) {
var title = "<h3>角色管理 - 角色添加</h3>"
var url = ctx + "/role/toAddOrUpdateRolePage";
// 如果roleId不为空，则表示修改角色
if (roleId != null && roleId != '') {
title = "<h3>角色管理 - 角色更新</h3>";
url += "?roleId=" + roleId;
}
layui.layer.open({
title:title,
content:url,
area:["500px","400px"],
type:2,
maxmin:true
});
}
/**
* 删除角色
* @param roleId
*/
function deleteRole(roleId) {
// 弹出确认框，询问用户是否确认删除
layer.confirm('确定要删除该记录吗？',{icon:3, title:"角色管理"}, function (index) {
// 关闭确认框
layer.close(index);
// 发送ajax请求，删除记录
$.ajax({
type:"post",
url:ctx + "/role/delete",
data:{
roleId:roleId
},
success:function (result) {
// 判断删除结果
if (result.code == 200) {
// 提示成功
layer.msg("删除成功！",{icon:6});
// 刷新表格
tableIns.reload();
} else {
// 提示失败
layer.msg(result.msg, {icon:5});
}
}
});
});
}
/**
* 打开授权页面
*/
function openAddGrantDialog(data) {
// 判断是否选择了角色记录
if (data.length == 0) {
layer.msg("请选择要授权的角色！",{icon:5});
return;
}
// 只支持单个角色授权
if (data.length > 1) {
layer.msg("暂不支持批量角色授权！",{icon:5});
return;
}
var url = ctx + "/module/toAddGrantPage?roleId="+data[0].id;
var title = "<h3>角色管理 - 角色授权</h3>";
layui.layer.open({
title:title,
content:url,
type:2,
area:["600px","600px"],
maxmin: true
});
}
});
前端界面(添加修改界面)
layui.use(['form', 'layer', 'formSelects'], function () {
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer,
$ = layui.jquery;
var formSelects = layui.formSelects;
/**
* 表单Submit监听
*/
form.on('submit(addOrUpdateRole)', function (data) {
// 提交数据时的加载层 （https://layer.layui.com/）
var index = top.layer.msg("数据提交中,请稍后...",{
icon:16, // 图标
time:false, // 不关闭
shade:0.8 // 设置遮罩的透明度
});
// 得到所有的表单元素的值
var formData = data.field;
// 请求的地址
var url = ctx + "/role/add"; // 添加操作
// 判断是否是更新操作 （判断隐藏域域中是否存在角色ID）
var roleId = $("[name='id']").val();
if (roleId != null && roleId != '') {
// 修改操作
url = ctx + "/role/update";
}
$.post(url, formData, function (result) {
// 判断操作是否执行成功 200=成功
if (result.code == 200) {
// 成功
// 提示成功
top.layer.msg("操作成功！",{icon:6});
// 关闭加载层
top.layer.close(index);
// 关闭弹出层
layer.closeAll("iframe");
// 刷新父窗口，重新加载数据
parent.location.reload();
} else {
// 失败
layer.msg(result.msg, {icon:5});
}
});
// 阻止表单提交
return false;
});
/**
* 关闭弹出层
*/
$("#closeBtn").click(function () {
// 当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
parent.layer.close(index); // 再执行关闭
});
});角色的授权功能
需要把角色对应的所有权限拿出来,由于表格太抽象了,所以决定采用树形结构来显示
zTree的学习
搭建最简单的树
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zTree</title>
<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css">
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ztree.core.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
<script type="text/javascript">
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [
{name:"test1", open:true, children:[
{name:"test1_1"}, {name:"test1_2"}]},
{name:"test2", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</html>
简易的JSON格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zTree使用简单的JSON数据</title>
<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css">
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ztree.core.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
<script type="text/javascript">
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
// 使用简单的JSON数据格式
data: {
simpleData: {
enable: true
}
}
};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [
{ id:1, pId:0, name:"父节点1 - 展开", open:true},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
{ id:2, pId:0, name:"父节点2 - 折叠"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</html>
勾选框勾选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zTree使用简单的JSON数据</title>
<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css">
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.ztree.core.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
<script type="text/javascript">
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
//开启复选框
check: {
enable: true
},
// 使用简单的JSON数据格式
data: {
simpleData: {
enable: true
}
}
};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [
{ id:1, pId:0, name:"父节点1 - 展开", open:true,checked:true},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:111, pId:11, name:"叶子节点111"},
{ id:112, pId:11, name:"叶子节点112"},
{ id:113, pId:11, name:"叶子节点113"},
{ id:114, pId:11, name:"叶子节点114"},
{ id:12, pId:1, name:"父节点12 - 折叠"},
{ id:121, pId:12, name:"叶子节点121"},
{ id:122, pId:12, name:"叶子节点122"},
{ id:123, pId:12, name:"叶子节点123"},
{ id:124, pId:12, name:"叶子节点124"},
{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
{ id:2, pId:0, name:"父节点2 - 折叠"},
{ id:21, pId:2, name:"父节点21 - 展开", open:true},
{ id:211, pId:21, name:"叶子节点211"},
{ id:212, pId:21, name:"叶子节点212"},
{ id:213, pId:21, name:"叶子节点213"},
{ id:214, pId:21, name:"叶子节点214"},
{ id:22, pId:2, name:"父节点22 - 折叠"},
{ id:221, pId:22, name:"叶子节点221"},
{ id:222, pId:22, name:"叶子节点222"},
{ id:223, pId:22, name:"叶子节点223"},
{ id:224, pId:22, name:"叶子节点224"},
{ id:23, pId:2, name:"父节点23 - 折叠"},
{ id:231, pId:23, name:"叶子节点231"},
{ id:232, pId:23, name:"叶子节点232"},
{ id:233, pId:23, name:"叶子节点233"},
{ id:234, pId:23, name:"叶子节点234"},
{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</html>
反思
开始抓紧时间,加快进度,虽然第三模块开始运用到很多新的知识,但是也是需要尽快的给他消化,然后得抓紧弄完毕设开始为找工作努力了
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
