JavaWeb 期末大作业 管理系统 登录表单 实现修改密码

核心思路：新建一个修改密码页面，依然是用 Parsley 进行表单验证，需要设定三个Validator，一个是确定旧密码是否正确，一个是确定新密码和旧密码不同，一个是让两次确认密码一致。

后端则仅创建两个接口：

• checkPassword，通过传入的密码判断是否正确，用于第二个Validator
• user/modify，传入新的密码，将其修改，并顺手删去Session中的username 在确认旧密码/更新密码中，查表需要得到username，直接通过Session获取即可。

前端

表单：

<form id="form" data-parsley-validate="">  
  <div class="form-group">  
    <label for="old-password">旧密码</label>  
    <input type="password" class="form-control" name="oldpwd" id="old-password" placeholder="输入账号的原登录密码" required="" data-parsley-old-password="" data-parsley-trigger="focus">  
  </div>  
  <div class="form-group">  
    <label for="new-password">新密码</label>  
    <input type="password" class="form-control" name="newpwd" id="new-password" placeholder="输入新的密码" required="" data-parsley-trigger="change" data-parsley-not-equal="">  
  </div>  
  <div class="form-group">  
    <label for="confirm-password">确认新密码</label>  
    <input type="password" class="form-control" name="confirmpwd" id="confirm-password" placeholder="请确认新的密码" required="" data-parsley-trigger="change" data-parsley-confirm-password="">  
  </div>  
  <input type="submit" class="btn btn-primary" value="修改密码">  
</form>

parsley 校验：

$('#form').parsley().on('field:validated', function() {
    let ok = $('.parsley-error').length === 0;
    if(ok)
      console.log("校验通过")
    else
      console.log("校验不通过")
  }).on('form:submit', function() {
 
    submit()
    return false; // Don't submit form for this demo
  });
 
  window.ParsleyValidator.addValidator('confirmPassword', {
    requirementType: 'string',
    validateString: function(value, requirement) {
 
      return value === $('#new-password').val();
    }
  }).addMessage('zh-cn', 'confirmPassword', '两次输入的密码不一致')
          .addValidator('notEqual', {
            requirementType: 'string',
            validateString: function(value, requirement) {
              return value !== $('#old-password').val();
            },
            messages: {
              'zh-cn': '新密码不能和旧密码相同'
            }
          })
          .addValidator('oldPassword', {
            requirementType: 'string',
            validateString: function(value, requirement) {
              let response = true;
              $.ajax({
                url: '/user/checkPassword',
                type: 'post',
                dataType: 'json',
                async: false,
                data: {
                  password: value
                },
                success: function (data) {
                  console.log(data.success);
                  if(data.success)
                    response = true;
                  else
                    response = false;
                },
                error: function (data) {
                  console.log(data);
                  response = false;
                }
              });
              console.log("response:" + response);
              return response;
            },
            messages: {
              'zh-cn': '旧密码不正确'
            }
          },32)
 
 
 
  async function submit () {
    let password = $('#new-password').val();
    let data = {
      password: password
    }
    lightyear.loading('show');
    await axios.post('/user/modify', data, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }}).then(function (response) {
      console.log(response);
      if (response.data.success === true) {
        lightyear.loading('hide');
        lightyear.notify('修改成功!请重新登录', 'success');
        setTimeout(function() {
          window.location.href = '/login';
        }, 2000);
        // window.location.href = '/login';
      } else {
        // 假设ajax提交操作
        setTimeout(function() {
          lightyear.loading('hide');
          lightyear.notify(response.data.message, 'danger');
        }, 500)
      }
    }).catch(function (error) {
      console.log(error);
    });
    // return false; // Don't submit form for this demo
  }

后端

@PostMapping(value = "/user/modify", produces = "application/json;charset=UTF-8")  
@ResponseBody  
public Response modify(String password, HttpSession session) {  
    log.info("newPassword: " + password);  
    String username = (String) session.getAttribute("username");  
    Response response = userService.modifyUser(username, password);  
    if(response.isSuccess()) {  
        session.removeAttribute("username");  
    }    return response;  
}  
  
@PostMapping(value = "/user/checkPassword", produces = "application/json;charset=UTF-8")  
@ResponseBody  
public Response checkPassword(String password, HttpSession session) {  
    String username = (String) session.getAttribute("username");  
    log.info("username: " + username + ", password: " + password);  
    Response response = userService.authenUser(username, password);  
    if (response.isSuccess()) {  
        return Response.success("密码正确");  
    }    return Response.failure("旧密码错误");  
}