超详细 Java修改密码功能的实现（前端+后端）

最新推荐文章于 2024-08-12 10:34:55 发布

是阿哆哦

最新推荐文章于 2024-08-12 10:34:55 发布

阅读量2w

点赞数 20

分类专栏：蠢人日记文章标签： java

本文链接：https://blog.csdn.net/qq_41333410/article/details/123989873

版权

蠢人日记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细阐述了前端界面设计，包括旧密码、新密码和确认密码的输入验证，以及前端校验与后台校验流程。后端代码展示了Spring MVC中的密码修改API和安全策略。重点在于前端JavaScript验证和后端Java处理的实现细节。

摘要由CSDN通过智能技术生成

一、画面设计

说明：
① 旧密码、新密码、确认新密码三个输入框均为必填项；
② 新密码、确认新密码必须一致，且为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;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旧密码：
                    <input type="password" name="oldPassword" id="oldPassword" class="input"/>
                </div>
                <div style="margin-top: 20px;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新密码：
                    <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;
}