六、模块实现：角色管理模块（3）

最新推荐文章于 2023-11-07 16:42:17 发布

gjq246

最新推荐文章于 2023-11-07 16:42:17 发布

阅读量1.7k

点赞数

分类专栏： spring boot 项目实训

本文链接：https://blog.csdn.net/gjq246/article/details/100558160

版权

spring boot 项目实训专栏收录该内容

10 篇文章 3 订阅

订阅专栏

1. 角色管理模块
  1. 角色model类

在包“com.example.demo.model”中的“Role”类已经创建好，参见6.2.1。

在包“com.example.demo.model”中再新建一个“UserRole”类（因为需要用到用户角色关联表，所以用户角色model先创建好），代码如下：

package com.example.demo.model;

import com.baomidou.mybatisplus.annotations.TableId;

import com.baomidou.mybatisplus.annotations.TableName;

@TableName("t_sys_role_user")//数据库对应表名，关联表

public class UserRole {

@TableId

private String id;//@TableId表示主键，与字段名称大小写一致

private String sys_user_id;//与字段名称大小写一致

private String sys_role_id;//与字段名称大小写一致

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getSys_user_id() {

return sys_user_id;

}

public void setSys_user_id(String sys_user_id) {

this.sys_user_id = sys_user_id;

}

public String getSys_role_id() {

return sys_role_id;

}

public void setSys_role_id(String sys_role_id) {

this.sys_role_id = sys_role_id;

}

1. 1. 角色vo类

在包“com.example.demo.vo”中新建一个“RoleVO”类（如果自己添加类时，只须定义好属性，然后利用eclipse的生成getter和setter功能，直接生成代码），代码如下：

package com.example.demo.vo;

public class RoleVO {

private String id;

private String name;

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

1. 1. 角色mapper类以及xml文件

在包“com.example.demo.mapper”中新建一个“RoleMapper”接口，代码如下：

package com.example.demo.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.baomidou.mybatisplus.mapper.BaseMapper;

import com.baomidou.mybatisplus.plugins.pagination.Pagination;

import com.example.demo.model.Role;

import com.example.demo.vo.RoleVO;

@Mapper

public interface RoleMapper extends BaseMapper<Role>{

List<RoleVO> selectRoleListPage(Pagination page ,RoleVO roleVO);

}

在“src/main/resources”中的“mapper”文件夹中，新建一个文件，命名为“RoleMapper.xml”，代码如下：

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

<!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

SELECT

r.id as id,

r.name as name

FROM

t_sys_role r

WHERE 1=1

and r.name like concat('%',#{name},'%')

</if>

</select>

</mapper>

在包“com.example.demo.mapper”中再新建一个“UserRoleMapper”接口，代码如下：

package com.example.demo.mapper;

import org.apache.ibatis.annotations.Mapper;

import com.baomidou.mybatisplus.mapper.BaseMapper;

import com.example.demo.model.UserRole;

@Mapper

public interface UserRoleMapper extends BaseMapper<UserRole>{

}

1. 1. 角色service类

在包“com.example.demo.service”中新建一个“RoleService”类，代码如下：

package com.example.demo.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import org.springframework.transaction.annotation.Transactional;

import org.springframework.util.StringUtils;

import com.baomidou.mybatisplus.mapper.EntityWrapper;

import com.baomidou.mybatisplus.plugins.Page;

import com.example.demo.mapper.RoleMapper;

import com.example.demo.mapper.UserRoleMapper;

import com.example.demo.model.Role;

import com.example.demo.model.User;

import com.example.demo.model.UserRole;

import com.example.demo.util.Convert;

import com.example.demo.util.SnowflakeIdWorker;

import com.example.demo.vo.DataTableResult;

import com.example.demo.vo.RoleVO;

@Service

public class RoleService {

@Autowired

private RoleMapper roleMapper;// 注入mapper进行数据操作

@Autowired

private UserRoleMapper userRoleMapper;// 注入mapper进行数据操作

// 对于执行数据修改的方法加上事务处理

@Transactional

public int delete(String ids) {

// ids,逗号隔开的主键

List<String> listid = Convert.toListStrArray(ids);

return roleMapper.deleteBatchIds(listid);

}

public Role selectById(String id) {

// roleMapper.selectOne(role),selectOne可以按照其他字段来查询一条记录

return roleMapper.selectById(id);

}

// 对于执行数据修改的方法加上事务处理

@Transactional

public int updateById(Role role) {

return roleMapper.updateById(role);

}

// 对于执行数据修改的方法加上事务处理

@Transactional

public int insert(Role role) {

// 添加雪花主键id

role.setId(SnowflakeIdWorker.getUUID());

int n = roleMapper.insert(role);

// n=1/0; //事务测试

return n;

}

/**

* 采用集成的查询方法

* @param username

* @return

public List<Role> selectList() {

EntityWrapper<Role> wrapper = new EntityWrapper<Role>();

// wrapper.like("username", username);//可以多个条件

return roleMapper.selectList(wrapper);

}

/**

* 返回用户拥有的角色

* @param user

* @return

public List<UserRole> selectUserRole(User user){

EntityWrapper<UserRole> wrapper = new EntityWrapper<UserRole>();

wrapper.eq("sys_user_id", user.getId());//可以多个条件

return userRoleMapper.selectList(wrapper);

}

// 对于执行数据修改的方法加上事务处理

@Transactional

public void assignRoles(User user,String ids) {

//1.清除原有分配

EntityWrapper<UserRole> wrapper = new EntityWrapper<UserRole>();

wrapper.eq("sys_user_id", user.getId());//可以多个条件

userRoleMapper.delete(wrapper);

//2.重新插入角色

if(!StringUtils.isEmpty(ids)) {

List<String> listrid = Convert.toListStrArray(ids);

SnowflakeIdWorker idWorker = new SnowflakeIdWorker(0, 0);

for(String rid:listrid) {

UserRole uRole=new UserRole();

uRole.setId(String.valueOf(idWorker.nextId()));

uRole.setSys_user_id(user.getId());

uRole.setSys_role_id(rid);

userRoleMapper.insert(uRole);

}

/**

* 分页查询

* @param role

* @return

public DataTableResult selectRoleListPage(RoleVO roleVO,int start,int length,String orderField,String orderDir) {

Page<RoleVO> page = null;

//排序

if(!StringUtils.isEmpty(orderDir)&&!StringUtils.isEmpty(orderField)) {

if(orderDir.equals("asc")) {

page = new Page<>(start/length + 1, length,orderField,true);// 当前页，每页总条数构造 page 对象

}else {

page = new Page<>(start/length + 1, length,orderField,false);// 当前页，每页总条数构造 page 对象

}

}else {

page = new Page<>(start/length + 1, length,"id",false);//默认id降序

}

page.setRecords(roleMapper.selectRoleListPage(page, roleVO));

DataTableResult result = new DataTableResult();

result.setRecordsTotal(page.getTotal());

result.setRecordsFiltered(page.getTotal());

result.setData(page.getRecords());

return result;

}

这个service除了基本的增删改查和分页查询之外，还扩展了查询用户的角色以及用户的角色分配功能，注意理解代码。

1. 1. 角色controller类

在包“com.example.demo.controller”中新建一个“RoleController”类，代码如下：

package com.example.demo.controller;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.util.StringUtils;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.example.demo.model.Role;

import com.example.demo.model.User;

import com.example.demo.model.UserRole;

import com.example.demo.service.RoleService;

import com.example.demo.vo.DataTableResult;

import com.example.demo.vo.Json;

import com.example.demo.vo.RoleVO;

import com.example.demo.vo.ZTreeNode;

@Controller

@RequestMapping("/RoleController")

public class RoleController {

private final Logger logger = LoggerFactory.getLogger(this.getClass());

private String prefix = "admin/role";// 页面的路径

@Autowired

private RoleService roleService;// 注入业务层的service

// 未加入@ResponseBody用来返回数据给页面

@RequestMapping("view")

public String view(Model model) {

return prefix + "/view";

}

// @ResponseBody，直接通过js异步返回数据给页面

@RequestMapping("list")

@ResponseBody

public DataTableResult list(HttpServletRequest request, RoleVO roleVO) {

// DataTableResult返回给datatables控件的数据格式

DataTableResult result = new DataTableResult();

// 获取分页参数

int start = Integer.parseInt(request.getParameter("start"));

int length = Integer.parseInt(request.getParameter("length"));

// 获取排序字段

String orderIdx = request.getParameter("order[0][column]");

// 获取排序字段名

String orderField = request.getParameter("columns[" + orderIdx + "][name]");

// 获取排序方式，降序desc或者升序asc

String orderDir = request.getParameter("order[0][dir]");

result = roleService.selectRoleListPage(roleVO, start, length, orderField, orderDir);

// result.setDraw(roleVO.getDraw());

return result;

}

// @ResponseBody，直接通过js异步返回数据给页面

@RequestMapping("insert")

@ResponseBody

public Json insert(Role role) {

Json j = new Json();

if(roleService.insert(role)>0) {

j.setSuccess(true);

j.setMsg("添加成功！");

}else {

j.setSuccess(false);

j.setMsg("添加失败！");

}

return j;

}

// @ResponseBody，直接通过js异步返回数据给页面

@RequestMapping("update")

@ResponseBody

public Json updateById(Role role) {

Json j = new Json();

if(roleService.updateById(role)>0) {

j.setSuccess(true);

j.setMsg("修改成功！");

}else {

j.setSuccess(false);

j.setMsg("修改失败！");

}

return j;

}

// @ResponseBody，直接通过js异步返回数据给页面

@RequestMapping("select")

@ResponseBody

public Json selectById(Role role) {

Json j = new Json();

j.setSuccess(true);

j.setObj(roleService.selectById(role.getId()));

return j;

}

// @ResponseBody，直接通过js异步返回数据给页面

@RequestMapping("delete")

@ResponseBody

public Json delete(HttpServletRequest request) {

Json j = new Json();

String ids = request.getParameter("ids");

if (!StringUtils.isEmpty(ids)) {

j.setSuccess(true);

j.setObj("成功删除" + roleService.delete(ids) + "条记录");

} else {

j.setSuccess(false);

j.setMsg("没有需要删除的记录！");

}

return j;

}

/**

* 获取树形结构

**/

@RequestMapping("tree")

@ResponseBody

public List<ZTreeNode> getTreeList(HttpServletRequest request, User user) {

List<Role> roleList = roleService.selectList();

List<UserRole> userRoleList = roleService.selectUserRole(user);// 按照回传的用户id查询角色

List<ZTreeNode> list = new ArrayList<ZTreeNode>();

for (Role p : roleList) {

ZTreeNode zt = new ZTreeNode();

zt.setId(p.getId());

zt.setName(p.getName());

zt.setOpen(true);

zt.setIsParent(true);

// 查询是否已经分配了角色

for (UserRole r : userRoleList) {

if (r.getSys_role_id().equals(p.getId())) {

zt.setChecked(true);

break;

}

list.add(zt);

}

return list;

}

// @ResponseBody，直接通过js异步返回数据给页面

@RequestMapping("role")

@ResponseBody

public Json role(HttpServletRequest request, User user) {

Json j = new Json();

String ids = request.getParameter("ids");

if (!StringUtils.isEmpty(user.getId())) {

roleService.assignRoles(user, ids);

j.setSuccess(true);

j.setObj("分配角色成功！");

} else {

j.setSuccess(false);

j.setMsg("用户id为空！");

}

return j;

}

这个controller用到了树形结构数据ZTreeNode，把数据组装成树形结构需要的格式返回给前端，role方法利用前端树形结构返回的选中id值（以逗号隔开进行拼接）进行用户的角色分配。

1. 1. 角色管理界面

添加权限管理界面，在“admin”文件夹中新建一个文件夹“role”，在“role”文件夹-> 右键->new->file，输入“view.html”（这里的路径主要是由controller的转发方法决定，保持一致即可），代码如下：

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

rel="stylesheet">

rel="stylesheet">

<link

th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}"

rel="stylesheet">

th:href="@{/static/css/plugins/ztree/zTreeStyle/zTreeStyle.css}"

type="text/css">

rel="stylesheet">

</head>

</a> <a class="dropdown-toggle" data-toggle="dropdown"

href="table_data_tables.html#"> <i class="fa fa-wrench"></i>

</a>

</ul>

</a>

</div>

<i class="fa fa-plus"></i> 添加

</button>

<i class="fa fa-remove"></i> 删除

</button>

</div>

</select>

</div>

<input id="keyword" type="search" class="form-control"

placeholder="关键字" />

</div>

<i class="fa fa-search"></i> 搜索

</button>

</div>

<table class="table table-striped table-bordered table-hover"

id="table">

<thead>

<tr>

<th style="padding-left: 10px;"><input type="checkbox"

id="cb_selectAll" class="input-lg"

style="width: 20px; height: 20px;" /></th>

</tr>

</thead>

</table>

</div>

<div class="modal fade" data-backdrop="static" id="modal" tabindex="-1"

role="dialog" aria-hidden="true">

<span aria-hidden="true">×</span><span class="sr-only">Close</span>

</button>

</div>

<label class="col-sm-3 control-label"><font

color="#FF0000">*</font>角色名称：</label>

<input type="hidden" name="id" id="id"> <input

class="form-control" type="text" name="name" id="name"

placeholder="请输入角色名称"> <span

class="help-block m-b-none"></span>

</div>

</form>

</div>

</div>

<div class="modal fade" data-backdrop="static" id="authormodal"

tabindex="-1" role="dialog" aria-hidden="true">

<span aria-hidden="true">×</span><span class="sr-only">Close</span>

</button>

</div>

</div>

</form>

</div>

</div>

<script

th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}"></script>

<!-- 前端直接导出excel有一定的缺陷，使用后台导出功能更强大

后台导出：阿里巴巴项目组提供了easyexcel工具类，github地址：https://github.com/alibaba/easyexcel -->

<script

th:src="@{/static/js/plugins/ztree/jquery.ztree.excheck.min.js}"></script>

//表格行中的按钮点击事件

function edit(id){

//异步获取数据

$.ajax({

type: "get",

data: {

id:id,//第一个id为参数名，第二个为参数值

url: "/RoleController/select",//后台处理地址

success: function (data) {

//console.log(data);

if(data.success){

//设置数据

$("#id").val(data.obj.id);//修改数据必须有主键值

$("#name").val(data.obj.name);

$("#modaltitle").text("修改角色");

$("#modal").modal("show");

}else{

toastr.error(data.msg, '错误!');

}

}); // end ajax

}//end edit

//表格行中的按钮点击事件

function author(id){

//异步获取数据

$.ajax({

type: "get",

data: {

id:id,//第一个id为参数名，第二个为参数值

url: "/PermissionController/tree",//后台处理地址

success: function (data) {

//ztree

var setting = {

check: {

enable: true

data: {

simpleData: {

enable: true

}

};

$.fn.zTree.init($("#tree"), setting, data);

$("#roleid").val(id);//通过隐藏input保存角色id

$("#authormodal").modal("show");

}

}); // end ajax

}

$(document).ready(function () {

var datatable = $('#table').DataTable({

"processing": true,

"serverSide": true,

"ajax": {

url: "/RoleController/list",

type:"post",

data: function (d) {

//把字段名和关键词发送给controller进行查询，自动映射到vo模型的相应属性中

d[$('#searchfield').val()]=$('#keyword').val()

}

"language": {

"lengthMenu": "每页 _MENU_ 行",

"info": "从 _START_ 到 _END_，共 _TOTAL_ 记录",

"zeroRecords": "没有找到记录",

"infoEmpty": "暂无记录",

"infoFiltered": "(从 _MAX_ 条记录过滤)",

"paginate": {

"previous": "上一页",

"next": "下一页",

"processing": "正在加载..."

"autoWidth": false,

"pageLength": 2,

"lengthChange": false,

"searching": false,

"columns": [

{"data":"id","orderable": false,

"render": function ( data, type, full, meta ) {

return '<input type="checkbox" value="'+data+'" class="input-lg" style="width:20px;height:20px;" />';

}

{"data":"id","name":"id"},

{"data":"name","name":"name"},

//有排序功能必须指定name为字段名称

{"data":"id","orderable": false,

"render": function ( data, type, full, meta ) {

return '<button id="btn_edit" class="btn btn-primary btn-sm" οnclick="edit(\''+data+'\')"><i class="fa fa-edit"></i> 查看修改</button> <button id="btn_author" class="btn btn-primary btn-sm" οnclick="author(\''+data+'\')"><i class="glyphicon glyphicon-list-alt"></i> 分配权限</button>';

}

"order": [

[1, 'desc']

]//默认排序

});

$("#btn_search").click(function(){

datatable.ajax.reload();//根据关键词重新加载数据

});

//全选

$("#cb_selectAll").click(function(){

if ($("#cb_selectAll").get(0).checked) {

$("#table tbody :checkbox").prop("checked", true);

}else{

$("#table tbody :checkbox").prop("checked", false);

}

});

//toastr选项

toastr.options = {

"positionClass": "toast-bottom-center",

}

//删除

$("#btn_del").click(function(){

//获取选中的复选框

var checkboxlist=$("#table tbody :checked");

if(checkboxlist.length>0){

if(!confirm("您确定删除数据吗？"))

{

return;

}

}else{

toastr.error("请选择要删除的记录。", '错误!');

return;

}

var ids="";

$.each(checkboxlist, function(n, cb) {

ids+=cb.value+",";

});

if(ids.length>0){

ids=ids.substring(0,ids.length-1);

}

//异步删除数据

$.ajax({

type: "post",

data: {

ids:ids,//第一个ids为参数名，第二个为参数值

url: "/RoleController/delete",//后台处理地址

success: function (data) {

if(data.success){

toastr.success(data.msg, '删除成功！');

datatable.ajax.reload(null, false);//刷新当前页

}else{

toastr.error(data.msg, '错误!');

}

});

});//end btn_del

$("#btn_add").click(function(){

//清空数据

$("#name").val("");

//validator.resetForm();//重置验证

$("#modaltitle").text("添加角色");

$("#modal").modal("show");

});//end add

//不用改，以下为修改jQuery Validation插件兼容Bootstrap的方法，没有直接写在插件中是为了便于插件升级

$.validator.setDefaults({

highlight: function (element) {

$(element).closest('.form-group').removeClass('has-success').addClass('has-error');

success: function (element) {

element.closest('.form-group').removeClass('has-error').addClass('has-success');

errorElement: "span",

errorPlacement: function (error, element) {

if (element.is(":radio") || element.is(":checkbox")) {

error.appendTo(element.parent().parent().parent());

} else {

error.appendTo(element.parent());

}

errorClass: "help-block m-b-none",

validClass: "help-block m-b-none"

});

//end setDefaults

// validate form setting

var icon = "<i class='fa fa-times-circle'></i> ";

validator=$("#form").validate({

rules: {

name: {

required: true,

minlength: 1

messages: {

name: {

required: icon + "请输入您的角色名",

minlength: icon + "角色名必须1个字符以上"

}

});//end validate

$("#btn_save").click(function(){

if($("#form").valid()){

//save

if($("#modaltitle").text()=="添加角色"){

//add

//异步添加数据

$.ajax({

type: "post",

data: {

name:$("#name").val(),

url: "/RoleController/insert",//后台处理地址

success: function (data) {

if(data.success){

toastr.success(data.msg, '添加成功！');

$("#modal").modal('hide');

datatable.ajax.reload(null, false);//刷新当前页

}else{

toastr.error(data.msg, '错误!');

}

}); // end ajax

}else{

//update

//异步修改数据

$.ajax({

type: "post",

data: {

id:$("#id").val(),//主键，从隐藏input获取到

name:$("#name").val(),

url: "/RoleController/update",//后台处理地址

success: function (data) {

if(data.success){

toastr.success(data.msg, '修改成功！');

$("#modal").modal('hide');

datatable.ajax.reload(null, false);//刷新当前页

}else{

toastr.error(data.msg, '错误!');

}

}); // end ajax

}

});//end btn_save

$("#btn_authorsave").click(function(){

var treeObj = $.fn.zTree.getZTreeObj("tree");

var nodes = treeObj.getCheckedNodes(true);

ids="";

for(i=0;i<nodes.length;i++){

if(i<nodes.length - 1){

ids = ids + nodes[i].id + ",";

}else{

ids = ids + nodes[i].id;

}

//console.log(ids);

$.ajax({

type: "post",

data: {

id:$("#roleid").val(),

ids:ids

url: "/PermissionController/author",//后台处理地址

success: function (data) {

if(data.success){

toastr.success("分配权限成功！", '成功');

$("#authormodal").modal("hide");

}

}); // end ajax

});//end btn_authorsave

});//end ready

</script>

</body>

</html>

点击角色管理菜单的效果：

应用调用的接口实现了，所以用户管理界面中的角色分配功能也可以使用了：

gjq246

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录