springmvc+spring+maven项目中的修改密码的实现

最新推荐文章于 2025-06-16 17:23:29 发布

原创最新推荐文章于 2025-06-16 17:23:29 发布 · 7.1k 阅读

CC 4.0 BY-SA版权

本文详细介绍了在Spring MVC+Spring+Maven项目中如何实现密码修改功能。首先，从前端角度出发，展示了创建updatePassword.jsp页面的代码，包括修改密码的界面和相关验证功能。接着，阐述了mainMenuController.jsp中处理修改密码状态和打开修改窗口的逻辑。最后，讲解了后端实现，包括UserManageService.java、UserManageServiceImpl.java以及UserManageController.java中的相关方法，实现了前后台交互的密码更新过程。

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

springmvc+spring+maven项目中的修改密码的实现

一、前端实现，描述即点击修改密码字段，跳出修改密码界面。

1）实现先创建修改密码的jsp前台界面代码updatePassword.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<body>

	<!-- 修改密码模型 -->

	<div class="modal" id="changePwdModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    	<div class="modal-dialog modal-md"> 

			<div class="modal-content">

				<div class="modal-header">

					<button type="button" class="close" 

						data-dismiss="modal" aria-hidden="true">&times;</button>

					<h4>修改密码</h4>

				</div>

				<div class="modal-body">

					<form class="form-horizontal" >

						<div class="form-group">

							<label class="col-sm-3 control-label">新密码:</label>

							<div class="col-sm-6">

								<input type="password" class="form-control" id="changePassword" 

									placeholder="请输入新密码">

							</div>

							<div style="margin-top:5px" id="changeAlert" name="changeAlert"></div>

						</div>

						<div class="form-group">

							<label for="inputPassword" class="col-sm-3 control-label">确认密码:</label>

							<div class="col-sm-6">

								<input type="password" class="form-control" id="checkPassword" placeholder="请确认修改密码">

							</div>

							<div style="margin-top:5px" id="checkAlert" name="checkAlert"></div>

						</div>

					</form>

				</div>

				<div style="background:#F0F7FC" class="modal-footer">		

					<button type="button" class="btn btn-primary" style="margin-left:20px" data-dismiss="modal">取消</button>

					<button type="button" class="btn btn-primary" id="updatePassword">确认</button>

				</div>

			</div>

		</div>

	</div>hsa

</body>

</html>

2)在mainMenuController.jsp中实现修改密码状态，打开窗口等命令的实现。

//设置修改面膜的按钮可用状态，只有当所有参数都选择并且错误信息框里面为空白的时候设置为可用

function setUpdatePasswordBtnStatue() {

	if (!isEmpty($("#changePassword").val()) && !isEmpty($("#checkPassword").val())

			&& isEmpty($("#changeAlert").html()) && isEmpty($("#checkAlert").html())) {

		$("#updatePassword").attr("disabled", false);

	}else{

		$("#updatePassword").attr("disabled", true);

}

}

//修改密码鼠标移动改变字体颜色的问题

$("#updatePwd").mouseover(function() {

	$("#updatePwdFont").addClass('mouse-on-title');

	$(this).css("cursor","pointer");

}).mouseout(function() {

	$("#updatePwdFont").removeClass('mouse-on-title');

	$(this).css("cursor","default");

});

/**

 * 打开修改密码窗口

*/

$('#updatePwd').bind('click',function(){

	$("#checkPassword").removeClass("warning");

	$("#changePassword").removeClass("warning");

	$("#changeAlert").html("");

	$("#checkAlert").html("");

	$('#changePwdModal').modal('show');

	$("#updatePassword").attr("disabled", true);

	//清空密码输入框

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

	//清空密码确认输入框

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

});

/**

 * 修改密码相关check

*/

$("#changePassword").bind("input propertychange", function(){

	$("#changeAlert").html("");

	$("#changePassword").removeClass("warning");

	var changePassword = $("#changePassword").val();

	var checkPassword = $("#checkPassword").val();

	if (isEmpty(changePassword) && isEmpty($("#changeAlert").html())) {

		$("#changeAlert").html("<font color='red'>请输入修改密码</font>");

		$("#changePassword").addClass("warning");

}

	if (changePassword.length < 6 || changePassword.length>30){

		$("#changeAlert").html("<font color='red'>密码位数应为6~30</font>");

		$("#changePassword").addClass("warning");

}

	if ($.trim(changePassword) == $.trim(checkPassword) && !isEmpty(changePassword)) {

		$("#checkAlert").html("");

		$("#checkPassword").removeClass("warning");

}

	//判断按钮可用性

	setUpdatePasswordBtnStatue();		

});

/**

 * 确认密码相关check

*/

$("#checkPassword").bind("input propertychange", function(){

	$("#checkPassword").removeClass("warning");

	$("#checkAlert").html("");

	var changePassword = $("#changePassword").val();

	var checkPassword = $("#checkPassword").val();

	if (isEmpty(checkPassword) && isEmpty($("#checkAlert").html())) {

		$("#checkAlert").html("<font color='red'>请输入确认密码</font>");

		$("#checkPassword").addClass("warning");

}

	if ($.trim(changePassword) != $.trim(checkPassword)) {

		$("#checkAlert").html("<font color='red'>两次密码不一致</font>");

		$("#checkPassword").addClass("warning");

}

	//判断按钮可用性

	setUpdatePasswordBtnStatue();		

});

/**

 * 更新密码

*/

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

	var changePassword = $("#changePassword").val();

	var checkPassword = $("#checkPassword").val();

	$.ajax({

		url : "../userManage/changePassword.do", 

		data : $.param({

			password : checkPassword

}),

		type : "post",

		async : true,

		beforeSend : function() {

			// alert("请求前的处理");

},

		success : function(data) {

			//  alert("请求成功时处理");

			if(data.result){

				bootbox.alert("修改密码成功");

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

			}else{

				bootbox.alert("修改密码失败");

}

},

		complete : function(data) {

			// alert("请求完成的处理");

},

		error : function() {

			bootbox.alert("修改密码出现异常");

}

});

});

3)然后在main.jsp中加入修改密码的id(对应/mainMenuController.js中打开修改密码窗口的代码id)，然后在这里面导入<%@include file="../include/updatePassModal.jsp"%>

<script src="<%=basePath%>js/mainMenuController.js"></script>

二、后台实现修改密码

1)UserManageService.java

/**

	 * 修改用户密码

	 * @param cloudDiskUser

	 * @return

*/

int updatePassword(CloudDiskUser cloudDiskUser);	

2)实现层UserManageServiceImpl.java

@Override

	public int updatePassword(CloudDiskUser cloudDiskUser) {

    	int result = -1;

		try {

			result = cloudDiskUserMapper.updateCloudDiskUserInfo(cloudDiskUser);

		} catch (Exception e) {

			logger.error("修改密码异常：" + e.getMessage());

}

		return result;

}

3)controller前后台交互的实现UserManageController.java

/**

	 * @param request

	 * @return  修改密码成功与否

*/

	@ResponseBody

	@RequestMapping("/changePassword")

	public Map<String, Object> updatePassword(HttpServletRequest request,

			@RequestParam(value = "password", required = false) String password) {

		Map<String, Object> result = new HashMap<String, Object>();

		String loginUserId = RequestUtils.getSessionKeyValue(request, "userId");

		CloudDiskUser cloudDiskUser = new CloudDiskUser();

		cloudDiskUser.setUserid(loginUserId);

		cloudDiskUser.setPassword(password);

		cloudDiskUser.setCreatedate(DateUtils.getSystemTime());

		int updateResult = userManageService.updatePassword(cloudDiskUser);

		if (updateResult == 1) {

			result.put("result", true);

		} else {

			result.put("result", false);

}

		return result;

}

}