Spring Boot项目学习之通用权限管理项目03

最新推荐文章于 2025-06-13 14:35:23 发布
最新推荐文章于 2025-06-13 14:35:23 发布
阅读量526 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： SpringBoot 文章标签： spring boot 学习 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pikcacho_pkq/article/details/127599913
本文基于Spring Boot和Java，继续完成用户管理页面的增删改功能。包括添加用户，涉及表单信息验证、加密工具类使用；修改用户，添加校验和更新请求；删除单个用户，通过用户ID删除；批量删除用户，在各层添加对应方法。最后给出测试效果和源码下载地址。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

继续接着上一篇，完成用户管理页面的增删改相关功能。

1.添加用户

在user文件夹添加add.html文件，用于填写新增用户信息。

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">帐号：<strong style="color:red">*</strong></label>
                            <div class="col-sm-8">
                                <input id="username" name="username" class="form-control" type="text" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">密码：<strong style="color:red">*</strong></label>
                            <div class="col-sm-8">
                                <input id="password" name="password" class="form-control" type="password" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">姓名：<strong style="color:red">*</strong></label>
                            <div class="col-sm-8">
                                <input id="realname" name="realname" class="form-control" type="text" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">性别：<strong style="color:red">*</strong></label>
                            <div class="col-sm-3">
                                <select class="form-control" id="sex" name="sex">
                                    <option value="1" selected>男</option>
                                    <option value="0">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" hidden>
                            <label class="col-sm-3 control-label">头像：</label>
                            <div class="col-sm-8">
                                <input id="avatar" name="avatar" class="form-control" type="text"
                                       value="/img/profile_small03.jpg">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">电话：<strong style="color:red">*</strong></label>
                            <div class="col-sm-8">
                                <input id="phone" name="phone" class="form-control" type="text" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">邮箱：<strong style="color:red">*</strong></label>
                            <div class="col-sm-8">
                                <input id="email" name="email" class="form-control" type="text" autocomplete="off">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">状态：</label>
                            <div class="col-sm-8">
                                <label class="radio-inline">
                                    <input type="radio" name="locked" value="0" checked/>
                                    正常
                                </label> <label class="radio-inline">
                                <input type="radio" name="locked" value="1" />
                                禁用
                            </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="button" class="btn btn-primary" onclick="save()">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script src="/js/plugins/validate/jquery.validate.extend.js"
        th:src="@{/js/plugins/validate/jquery.validate.extend.js}"></script>
<script type="text/javascript" src="/js/appjs/system/urmsUser/add.js"
        th:src="@{/js/appjs/system/urmsUser/add.js}">
</script>
</body>
</html>

接着需要添加add.js文件，主要功能包括获取填写信息，校验信息以及发起请求。

var prefix = ctx + "/user";


$().ready(function() {
    validateRule();
});



$.validator.setDefaults({
    submitHandler : function() {
        save();
    }
});
function save() {
    if($("#signupForm").valid()) {
        debugger;
        $.ajax({
            cache : true,
            type : "POST",
            url : prefix + "/save",
            data : $('#signupForm').serialize(),
            async : false,
            error : function(request) {
                parent.layer.alert("Connection error");
            },
            success : function(data) {
                if (data.code == 0) {
                    parent.layer.msg("操作成功");
                    parent.reLoad();
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);

                } else {
                    parent.layer.alert(data.msg)
                }

            }
        });
    }
}

// 验证规则
function validateRule() {
    var icon = "<i class='fa fa-times-circle'></i> ";
    $("#signupForm").validate({
        onsubmit: true,
        onkeyup: false,
        rules : {
            username : {
                required : true
            },
            password : {
                required : true
            },
            realname : {
                required : true
            },
            organizationName : {
                required : true
            },
            phone : {
                required : true
            },
            email : {
                required : true
            }
        },
        messages : {
            username : {
                required : icon + "请输入姓名"
            },
            password : {
                required : icon + "请输入密码"
            },
            realname : {
                required : icon + "请输入名称"
            },
            phone : {
                required : icon + "请输入电话"
            },
            email : {
                required : icon + "请输入邮箱"
            }
        },
        focusCleanup: true
    })
}
  • onsubmit:true 表示当提交时校验表单信息。
  • onkeyup: false 表示当按钮松开的时候校验表单信息。
  • rules 表示设置验证规则。
  • required : true 表示要验证的对象是否必填是。

通过 jQuery Validator 框架来对表单信息进行验证，可以尽量减少错误的表单提交，再加上准确的提示，这样就会有更好的用户体验感。

接着需要在主页面中为新增按钮添加点击事件，通过点击新增按钮跳转至添加用户页面，在main.js中添加add()方法。

function add() {
	layer.open({
		type : 2,
		title : '增加',
		maxmin : true,
		shadeClose : false, // 点击遮罩关闭层
		area : [ '800px', '520px' ],
		content : prefix + '/add' // iframe的url
	});
}

接着完成控制层跳转页面的功能。

    /**
     * 跳转至新增用户页面
     * @return
     */
    @GetMapping("/add")
    public String add(){
        return "user/add";
    }

新增用户一般需要对用户的部分信息进行加密，比如密码；所以这里添加加密工具类，先添加Shiro框架依赖。

<!-- Shiro 核心框架 -->
<dependency>
    <groupId>org.apache.shiro</groupId>
    <artifactId>shiro-core</artifactId>
    <version>1.5.3</version>
</dependency>

<!-- apache 提供的 common 包 -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.11</version>
        </dependency>

接着在创建工具类MD5Utils.java。

public class MD5Utils {

    // 加盐
    private static final String SALT = "picacho";
    // 算法名称
    private static final String ALGORITH_NAME = "md5";

    private static final int HASH_ITERATIONS = 2;

    public static String encrypt(String pwd){
        String newPwd = new SimpleHash(ALGORITH_NAME, pwd, ByteSource.Util.bytes(SALT), HASH_ITERATIONS).toHex();
        return newPwd;
    }
    
    public static String encrypt(String username, String pwd){
        String newPwd = new SimpleHash(ALGORITH_NAME, pwd, ByteSource.Util.bytes(username + SALT), HASH_ITERATIONS).toHex();
        return newPwd;
    }
}

最后新增添加用户的接口。

    /**
     * 新增用户
     * @param urmsUser
     * @return
     */
    @PostMapping("/save")
    @ResponseBody
    public R save(UrmsUser urmsUser){
        String salt = RandomStringUtils.randomAlphanumeric(30);
        urmsUser.setSalt(salt);
        String pwd = urmsUser.getPassword() + salt;
        
        urmsUser.setPassword(MD5Utils.encrypt(urmsUser.getUsername(), pwd));
        if(urmsUserService.insert(urmsUser) > 0){
            return R.ok();
        }
        return R.error();
    }

最后测试一下效果，查看添加用户功能。
在这里插入图片描述
在这里插入图片描述

2.修改用户

在user文件夹下添加edit.html，用于修改用户页面。

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <input id="userId" name="userId" th:value="${urmsUser.userId}"  type="hidden">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">帐号：<strong style="color:red">*</strong></label>
                            <div class="col-sm-8">
                                <input id="username" name="username" th:value="${urmsUser.username}" class="form-control" type="text" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">姓名：<strong style="color:red">*</strong></label>
                            <div class="col-sm-8">
                                <input id="realname" name="realname" th:value="${urmsUser.realname}" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">性别：<strong style="color:red">*</strong></label>
                            <div class="col-sm-3">
                                <select class="form-control" id="sex" name="sex">
                                    <option value="1" th:field="*{urmsUser.sex}">男</option>
                                    <option value="0" th:field="*{urmsUser.sex}">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">电话：</label>
                            <div class="col-sm-8">
                                <input id="phone" name="phone" th:value="${urmsUser.phone}" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">邮箱：</label>
                            <div class="col-sm-8">
                                <input id="email" name="email" th:value="${urmsUser.email}" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">状态：</label>
                            <div class="col-sm-8">
                                <label class="radio-inline">
                                    <input th:field="*{urmsUser.locked}" type="radio" name="locked" value="0" /> 正常
                                </label>
                                <label class="radio-inline">
                                    <input th:field="*{urmsUser.locked}" type="radio" name="locked" value="1" /> 禁用
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/appjs/system/urmsUser/edit.js"
        th:src="@{/js/appjs/system/urmsUser/edit.js}">
</script>
</body>
</html>

添加edit.js文件，用于校验信息和发送更新请求。

var prefix = ctx + "/user";

$().ready(function() {
    validateRule();
});

$.validator.setDefaults({
    submitHandler : function() {
        update();
    }
});
function update() {
    $.ajax({
        cache : true,
        type : "POST",
        url : prefix + "/update",
        data : $('#signupForm').serialize(),
        async : false,
        error : function(request) {
            parent.layer.alert("Connection error");
        },
        success : function(data) {
            if (data.code == 0) {
                parent.layer.msg("操作成功");
                parent.reLoad();
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);

            } else {
                parent.layer.alert(data.msg)
            }

        }
    });

}
function validateRule() {
    var icon = "<i class='fa fa-times-circle'></i> ";
    $("#signupForm").validate({
        rules : {
            name : {
                required : true
            }
        },
        messages : {
            name : {
                required : icon + "请输入名字"
            }
        }
    })
}

接着需要在主页面中为更新按钮添加点击事件，通过点击更新按钮跳转至更新用户页面，在main.js中添加edit()方法。

function edit(id) {
	layer.open({
		type : 2,
		title : '编辑',
		maxmin : true,
		shadeClose : false, // 点击遮罩关闭层
		area : [ '800px', '520px' ],
		content : prefix + '/edit/' + id // iframe的url
	});
}

接着完成控制层跳转页面的功能。

    /**
     * 跳转之更新用户界面
     * @param userId
     * @param model
     * @return
     */
    @GetMapping("/edit/{userId}")
    String edit(@PathVariable("userId") Integer userId,Model model){
        UrmsUser urmsUser = urmsUserService.get(userId);
        model.addAttribute("urmsUser", urmsUser);
        return "user/edit";
    }

最后新增更新用户的接口。

    /**
     * 更新用户
     * @param urmsUser
     * @return
     */
    @RequestMapping("/update")
    @ResponseBody
    public R update( UrmsUser urmsUser){
        urmsUserService.updateByPrimaryKeySelective(urmsUser);
        return R.ok();
    }

最后测试一下效果，查看更新用户功能。
在这里插入图片描述
在这里插入图片描述

3.删除单个用户

删除单个用户，主要通过用户ID删除指定的用户，在main.js文件中添加删除方法。

function remove(id) {
	layer.confirm('确定要删除选中的记录？', {
		btn : [ '确定', '取消' ]
	}, function() {
		$.ajax({
			url : prefix+"/remove",
			type : "post",
			data : {
				'userId' : id
			},
			success : function(r) {
				if (r.code==0) {
					layer.msg(r.msg);
					reLoad();
				}else{
					layer.msg(r.msg);
				}
			}
		});
	})
}

在控制层添加删除单个用户接口。

    /**
     * 根据用户ID删除用户
     * @param userId
     * @return
     */
    @PostMapping("/remove")
    @ResponseBody
    public R remove(Integer userId){
        if(urmsUserService.deleteByPrimaryKey(userId) > 0){
            return R.ok();
        }
        return R.error();
    }

最后测试一下效果，查看删除单个用户功能。
在这里插入图片描述
在这里插入图片描述

4.批量删除用户

在mapper层添加批量删除用户的方法，并在XML文件中添加sql实现。

    // 批量删除用户
    int batchRemove(Integer[] userIds);

  <delete id ="batchRemove">
    delete from urms_user where user_id in 
    <foreach item="userId" collection="array" open="(" separator="," close=")">
      #{userId}
    </foreach>
  </delete>

接着在service层添加批量删除方法。

    /**
     * 批量删除用户
     * @param userIds
     * @return
     */
    int batchRemove(Integer[] userIds);

    @Override
    public int batchRemove(Integer[] userIds){
       return urmsUserMapper.batchRemove(userIds);
    }

最后在controller层添加批量删除用户的接口。

    @PostMapping("/batchRemove")
    @ResponseBody
    public R remove(@RequestParam("ids[]") Integer[] userIds){
        urmsUserService.batchRemove(userIds);
        return R.ok();
    }

在main.js中添加批量删除的方法。

function batchRemove() {
	var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
	if (rows.length == 0) {
		layer.msg("请选择要删除的数据");
		return;
	}
	layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", {
		btn : [ '确定', '取消' ]
	// 按钮
	}, function() {
		var ids = new Array();
		// 遍历所有选择的行数据，取每条数据对应的ID
		$.each(rows, function(i, row) {
			ids[i] = row['userId'];
		});
		$.ajax({
			type : 'POST',
			data : {
				"ids" : ids
			},
			url : prefix + '/batchRemove',
			success : function(r) {
				if (r.code == 0) {
					layer.msg(r.msg);
					reLoad();
				} else {
					layer.msg(r.msg);
				}
			}
		});
	}, function() {

	});
}

最后测试一下效果，查看批量删除用户功能。
在这里插入图片描述
在这里插入图片描述
源码下载地址：源码下载

Spring Boot 权限管理范例项目
03-08
Spring boot的权限管理案例，包含SQL建表语句以及完整的项目结构。
springboot权限管理项目
zhf_123666的博客
07-09 432
项目具体效果图如下所示： 有需要的可以去 www.javastu.top 下载
SpringBoot实现权限管理系统完整指南（附源码）
最新发布
m0_66884848的博客
06-13 1144
本文介绍了基于RBAC模型的SpringBoot权限系统设计与实现。文章首先对比了ACL、RBAC和ABAC三种权限模型的特点及适用场景，重点阐述了RBAC模型的核心元素和类关系。随后详细说明了项目搭建过程，包括SpringBoot初始化、Maven依赖配置以及用户表和权限表的数据库设计。最后展示了安全配置类和JWT工具类的关键代码实现，涵盖密码加密、认证管理、权限控制和JWT令牌生成验证等功能。该系统采用JWT进行无状态认证，结合Spring Security实现基于角色的访问控制。
单体应用-SpringBoot-(3)权限控制
uiopmsn的博客
02-13 387
如题，实现思路如下： 定义用户，角色，权限，三者关联的实体类，定义用户-数据源的实体类。 定义各自的Repository，继承JpaRepository。spring jpa本身会自动生成标准的增删改查的方法供使用，也可以按规则定义类似findFirstByUserName(String userName);的方法，不需要自己实现，spring jpa会自动实现该方法。 更详细的参考Sp...
尚上优选SpringBoot微服务项目-----权限管理模块，为角色分配权限
weixin_56782530的博客
07-18 992
尚上优选-为角色分配权限这个功能是借鉴之前为用户分配角色功能进行开发的，要注意的是这个功能的查看角色的权限列表的实现方式和为用户分配角色功能查看角色列表的实现方式大同小异，但是在返回的类型上是有区别的，这里使用的方式是遍历所有的权限列表，将角色拥有的权限的select属性置为true并且使用PermissionHelper类进行封装成树状结构返回List类型数据。这里给大家提供一个思路，希望能帮助到大家！
SpringBoot3+Vue3 前后端分离项目实现基于RBAC权限访问控制-（1）权限管理
韶君的博客
06-17 2808
RBAC-权限管理
Spring Boot项目学习之通用权限管理项目02
10-30
在"通用权限管理项目02-分页"部分，我们关注的是如何在大量数据查询时有效地展示结果。在Web应用中，分页是提高用户体验的重要手段。Spring Data JPA提供了对分页的强大支持，通过`Pageable`接口，我们可以方便地...
基于Spring Boot的通用权限管理平台源码设计
10-09
本项目是一款精心设计的基于Spring Boot框架的通用权限管理平台源码，它不仅仅是一个简单的权限系统，而是一个集成了多种技术的综合性解决方案。 Spring Boot作为一个开源框架，能够简化基于Spring应用的初始搭建...
youlai-boot: Spring Boot 3 + Spring Security + Vue3 权限管理系统
05-04
youlai-boot 是【有来开源组织】基于Spring Boot 3 + Spring Security 6 + JWT + Mybatis-Plus + Redis + XXL-Job + Vue3 等主流技术栈搭建的前后端分离权限管理系统。 在线预览地址：http://vue3.youlai.tech 后端...
(源码)基于Spring Boot和Spring Cloud的通用权限管理系统.zip
11-21
本项目是一个基于Spring Boot和Spring Cloud框架的通用权限管理系统（UPMS），旨在提供一个灵活、可扩展的权限管理解决方案。系统采用领域驱动设计（DDD）和微服务架构，支持多模块开发，适用于各种企业级应用场景。...
springboot3整合SpringSecurity实现登录校验与权限认证（万字超详细讲解）
m0_74823094的博客
02-06 1207
用户提交登录请求Spring Security 将请求交给 UsernamePasswordAuthenticationFilter 过滤器处理。UsernamePasswordAuthenticationFilter 获取请求中的用户名和密码，并生成一个 AuthenticationToken 对象，将其交给 AuthenticationManager 进行认证。
spring boot 权限管理的几种方式
orton777的博客
05-27 6392
spring boot 权限
通用权限系统（三）- 通用权限系统项目搭建
及时当勉励，岁月不待人
10-30 523
通用权限系统（三）- 通用权限系统项目搭建
基于SpringBoot的后台权限管理系统
ywy的博客
10-26 1353
基于SpringBoot的后台权限管理系统，可作为脚手架，用于快速搭建项目。
th:include的使用
海涛高软
07-05 4436
th:include 和 th:replace 的区别
include封装的公共header，切换页面时如何保持正确的选中状态（多页面之间切换）
u011555620的专栏
05-27 646
1、前端页面 2、jq方法 //$(function(){}) 页面加载后执行，这样才能获取到标签内容 $(function(){ var urlstr = location.href; //当前浏览器地址 var urlstatus = false;//定义状态值 //循环导航a标签 $("#clearfix a").each(function(key) { console.log(urlstr); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

picacho_pkq

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值