超详细 Java修改密码功能的实现（前端+后端）
一、画面设计说明：① 旧密码、新密码、确认新密码三个输入框均为必填项；② 新密码、确认新密码必须一致，且为6-16位字母、数字或者符号其中任意两种的组合；③ 修改成功后，保存按钮不可点击；④ 清空按钮，清楚输入框中内容和提示信息。1、初始画面2、前端校验画面3、后台校验画面4、清空画面二、前端代码1、changePw.html<body><div class="message-c
·
一、画面设计
说明：
① 旧密码、新密码、确认新密码三个输入框均为必填项；
② 新密码、确认新密码必须一致，且为6-16位字母、数字或者符号其中任意两种的组合；
③ 修改成功后，保存按钮不可点击；
④ 清空按钮，清楚输入框中内容和提示信息。
1、初始画面
2、前端校验画面
3、后台校验画面
4、清空画面
二、前端代码
1、changePw.html
<body>
<div class="message-content">
<div class="message-top" style="height: 3rem">
<div class="message-title" id="menuName">修改密码</div>
</div>
<div class="message-list">
<div>
<input type="hidden" id="userCode" th:value="${userCode}"/>
<div style="margin-right: 10px">
<div style="margin-top: 20px;">
旧密码：
<input type="password" name="oldPassword" id="oldPassword" class="input"/>
</div>
<div style="margin-top: 20px;">
新密码：
<input type="password" name="newPassword" id="newPassword" class="input"/>
</div>
<div style="margin-top: 20px;">
确认新密码：
<input type="password" name="reNewPassword" id="reNewPassword" class="input"/>
</div>
<div style="margin-top: 20px;text-align: center;">
<span class="errorMsg" style="color:red" id="errorMsg"></span>
<span class="successMsg" style="color:green" id="successMsg"></span>
</div>
<div style="margin-top: 40px;text-align: center;">
<input class="button" type="button" value="保存" id="save" style="margin-right:30px;width: 60px; height:30px;"></input>
<input class="button" type="button" value="清空" id="clear" style="width: 60px; height:30px;"></input>
</div>
</div>
</div>
</div>
</div>
</body>
2、changePw.js
$(function(){
//清空按钮
$("#clear").click(function(){
$("#oldPassword").val("");
$("#newPassword").val("");
$("#reNewPassword").val("");
$("#errorMsg").text("");
$("#successMsg").text("");
$("#save").attr("disabled",false);
$("#save").attr("style","margin-right:30px;width: 60px; height:30px;opacity:1");
}
);
//保存按钮
$("#save").click(function(){
var oldPassword = $("#oldPassword").val();
var newPassword = $("#newPassword").val();
var reNewPassword = $("#reNewPassword").val();
var password=/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[_*&^%$#@!?=+<>]+$)(?!^[^A-z0-9]+$)^.{6,16}$/;
if (oldPassword == "") {
$("#errorMsg").text("旧密码不能为空！");
}else if (newPassword == "") {
$("#errorMsg").text("新密码不能为空！");
}else if (reNewPassword == "") {
$("#errorMsg").text("确认新密码不能为空！");
}else if (newPassword != reNewPassword) {
$("#errorMsg").text("新密码必须一致！");
} else if (!password.exec(trim(newPassword))) {
$("#errorMsg").text("密码必须为6-16位的字母、数字或符号任意两种的组合!");
}else{
var userCode = $("#userCode").val();
$.ajax({
url: "../user/savePwd",
type: "POST",
// contentType: "application/json; charset=utf-8",
data: {
userCode: userCode,
oldPassword: oldPassword,
newPassword: newPassword
},
dataType: 'text',
success: function (data) {
if(data == 1){
console.log("密码修改成功！");
$("#errorMsg").text("");
$("#successMsg").text("密码修改成功，请重新登陆！");
$("#save").attr("disabled",true);
$("#save").attr("style","margin-right:30px;width: 60px; height:30px;opacity:0.5");
} else if (data == 3){
$("#successMsg").text("");
$("#errorMsg").text("输入的旧密码错误！");
} else if (data == 4){
$("#successMsg").text("");
$("#errorMsg").text("当前用户不存在，请重新登录！");
} else {
$("#successMsg").text("");
$("#errorMsg").text("密码修改失败，请联系管理员！");
}
},
error: function (msg) {
$("#successMsg").text("");
$("#errorMsg").text("密码修改失败，请联系管理员！");
}
})
}
}
);
})
3、changePw.css
body {
background-color: #f2f2f2;
min-width:360px;
}
.message-content .message-top {
height: 5rem;
margin-left: 1rem;
}
.message-content .message-top .message-title {
border-width: 0px;
height: 3rem;
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
font-weight: 700;
font-style: normal;
font-size: 16px;
color: #434343;
line-height: 3rem;
text-indent: 1rem;
}
.button {
background-color: rgba(0, 153, 204, 1);
font: 14px "微软雅黑";
color: #FFF;
border: 0;
height: 30px;
width: 60px;
left: 20px;
border-radius: 5px;
cursor: pointer;
}
三、后端代码
1、修改画面展示方法
/**
* 修改密码
* @param request
* @param userCode
* @param menuName
* @return
*/
@RequestMapping(value = "/changePw")
public ModelAndView changePw(WebRequest request, String userCode, String menuName) {
ModelAndView mav = new ModelAndView("userSetting/changePw");
String socketId = userCode;
if(!StringUtils.isEmpty(socketId) && socketId.split("\\|").length > 1){
userCode = socketId.split("\\|")[1];
}
mav.addObject("socketId", socketId);
//页面标题
mav.addObject("menuName",menuName);
mav.addObject("userCode",userCode);
mav.addObject("systemTitle", systemTitle);
return mav;
}
2、保存密码处理方法
@RequestMapping(value = "/savePwd",method = RequestMethod.POST)
@ResponseBody
public int savePwd(String userCode, String oldPassword, String newPassword) {
int updateFlag = 0;
String socketId = userCode;
if(!StringUtils.isEmpty(socketId) && socketId.split("\\|").length > 1){
userCode = socketId.split("\\|")[1];
}
MD5UtilController md5Util=new MD5UtilController();
if(oldPassword == null || newPassword == null){
return 0;
}
String old = md5Util.getMD5(oldPassword.getBytes());
String newP = md5Util.getMD5(newPassword.getBytes());
List<LoginDto> user=userService.selectUserByUserId(userCode);
if(user != null && user.size() > 0){
String pwd = user.get(0).getPassword();
if(pwd != null && old.equals(pwd)){
try {
// 成功返回1
updateFlag = userService.savePwd(userCode,newP);
} catch (Exception e) {
// 不成功返回0，数据库回滚
updateFlag = 2;
}
}else{
// 旧密码错误
updateFlag = 3;
}
} else {
// 用户不存在
updateFlag = 4;
}
return updateFlag;
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
16
0- 0
已为社区贡献1条内容
所有评论(0)