1 点击修改密码跳转
1.1 前端加入注解/user/updatePwd
<li><a href="/user/updatePwd">修改密码</a></li>
1.2 跳转到密码修改页面
UserController类里:
//跳转到密码修改页面
@GetMapping("/updatePwd")
public String updatePwd(){
return "web/password";
}
2 检查原密码
2.1 前端ajax传原密码
给原密码输入框添加 id=“oldPwd”
添加span标签span id=“sp1”
前端password.html:
<script>
$(document).ready(function (){
checkOldPassword();
})
function checkOldPassword(){
//给原密码输入框添加失去焦点事件
$("#oldPwd").blur(function () {
var oldPassword = $("#oldPwd").val();
if (oldPassword == null || oldPassword === '') {
alert("原密码不能为空!");
return;
}
//发送ajax请求
$.post("/user/checkOldPassword",{"oldPassword":oldPassword},function (data){
if (data.state == 1) {
$("#sp1").html(data.message);
$("#sp1").css("color", "green");
} else {
$("#sp1").html(data.message);
$("#sp1").css("color", "red");
}
},"json");
});
}
</script>
2.2 UserController类/user/checkOldPassword
通过注解/user/checkOldPassword跳转到服务端UserController类:
//检查原密码
@PostMapping("/checkOldPassword")
@ResponseBody
public JsonResult checkOldPassword(String oldPassword,HttpServletRequest request){
HttpSession session = request.getSession();
Integer uid = (Integer) session.getAttribute("uid");
User user = userService.findUserByUid(oldPassword,uid);
//因为前端页面没有用到user对象的数据,可以不将user的数据转成json格式返回给前端
return new JsonResult(1,"原密码验证通过");
}
PS:JsonResult是一个用来封装返回客户端的JSON 数据格式的工具类
public class JsonResult {
private int state;//表示状态 0 表示失败 1 表示成功
private String message;//表示返回客户端的消息
private Object data;//表示封装具体的数据返回给客户端
public JsonResult() {
}
public JsonResult(int state, String message, Object data) {
this.state = state;
this.message = message;
this.data = data;
}
public JsonResult(int state, String message) {
this.state = state;
this.message = message;
}
public int getState() {
return state;
}
public void setState(int state) {
this.state = state;
}
public String getMessage() {
return message;
}
//将类业务层的异常信息 可以通过e.getMessage(); 给 message属性赋值
public void setMessage(Throwable e) {
this.message = e.getMessage();
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
2.3 UserMapper.java和UserMapper.xml里的findUserByUid
用户模块持久层接口UserMapper.java
//检查原密码,需要根据当前uid查询当前数据信息
User findUserByUid(@Param("uid") Integer uid);
UserMapper.xml
<!--根据uid查询当前用户信息-->
<select id="findUserByUid" resultType="User">
select uid,username,password,salt,is_delete isDelete from tb_user
where uid=#{uid}
</select>
2.4 用户模块的业务层
用户模块的业务层接口userService的findUserByUid(oldPassword,uid)
//根据uid查询当前用户信息
User findUserByUid(String oldPassword,Integer uid);
业务层UserServiceImpl implements UserService
@Override
public User findUserByUid(String oldPassword,Integer uid){
//对参数的判断
if (oldPassword == null||StringUtils.isEmpty(oldPassword)){
throw new ServiceException("原密码不能为空");
}
if (uid == null){
throw new ServiceException("会话超时,请重新登录!");
}
User user = userMapper.findUserByUid(uid);
if (user == null) {
throw new ServiceException("数据可能被管理员删除!");
}
if (user.getIsDelete() == 1) {
throw new ServiceException("数据可能被管理员删除!");
}
String salt = user.getSalt();
String password = user.getPassword();
//将oldPassword 和 salt 加密
String md5PWD = getMd5PWD(oldPassword,salt);
if (!md5PWD.equals(password)){
throw new ServiceException("原密码错误!");
}
return user;
}
2.5 效果
3 检查新密码和确认密码是否一致
3.1 前端
给新密码添加id=“newPwd”
确认密码添加id=“confirmPwd”
确认密码下添加span标签span id=“sp2”
在$(document).ready(function (){ })里添加函数checkNewAndConformPwd();
函数checkNewAndConformPwd():
function checkNewAndConformPwd(){
//给确认密码添加失去焦点事件
$("#confirmPwd").blur(function (){
var newPwd = $("#newPwd").val();
var confirmPwd = $("#confirmPwd").val();
if (newPwd != confirmPwd){
$("#sp2").html("两次密码输入不一致");
$("#sp2").css("color", "red");
}else {
$("#sp2").html("两次密码输入验证通过");
$("#sp2").css("color", "green");
}
});
}
3.2 效果
4 执行修改密码
4.1 前端
给修改按钮条件id=“updateBtn”
在$(document).ready(function (){ })里添加函数doUpdatePwd();
函数doUpdatePwd():
function doUpdatePwd(){
//给修改按钮添加事件
$("#updateBtn").click(function (){
//再一次对表单数据进行有效验证
var oldPwd = $("#oldPwd").val();
var newPwd = $("#newPwd").val()
var confirmPwd = $("#confirmPwd").val();
if (oldPwd == null || oldPwd ===''){
alert("原密码不能为空")
return ;
}
if (newPwd == null || newPwd ===''){
alert("新密码不能为空")
return ;
}
if (confirmPwd == null || confirmPwd ===''){
alert("确认密码不能为空")
return ;
}
//发送ajax请求
$.post("/user/doUpdatePwd",{"newPwd":newPwd},function (data){
if (data.state == 1){
alert(data.message);
//清空localStorage绑定的数据
localStorage.clear();
//密码修改成功跳转登录页面
location.href="/user/login";
}else {
alert(data.message);
}
},"json");
});
}
4.2 UserController类/user/doUpdatePwd
通过注解/user/doUpdatePwd跳转到服务端UserController类:
//执行密码更新
@PostMapping("/doUpdatePwd")
@ResponseBody
public JsonResult doUpdatePwd(String newPwd,HttpSession session){
Integer uid = (Integer) session.getAttribute("uid");
int row = userService.updatePwd(uid,newPwd);
return new JsonResult(1,"密码更新成功");
}
4.3 UserMapper.java和UserMapper.xml里的updatePassword
用户模块持久层接口UserMapper.java
//增删改 返回值 受影响的行数
int updatePassword(@Param("uid") Integer uid,
@Param("newPwd") String newPwd,
@Param("salt") String salt,
@Param("modifyUser") String modifyUser);
UserMapper.xml
<!--根据uid执行更新操作-->
<update id="updatePassword">
update tb_user set password=#{newPwd},salt=#{salt},modified_User=#{modifyUser},
modifyTime=now() where uid=#{uid}
</update>
4.4 用户模块的业务层
用户模块的业务层接口userServiced的updatePwd(uid,newPwd)
//执行密码更新操作
int updatePwd(Integer uid,String newPwd);
业务层UserServiceImpl implements UserService
@Override
public int updatePwd(Integer uid,String newPwd){
//对参数判断
if (uid == null){
throw new ServiceException("会话超时,请重新登录!");
}
if (newPwd == null||StringUtils.isEmpty(newPwd)){
throw new ServiceException("新密码不能为空");
}
//根据uid查找当前用户信息,找到username
User user = userMapper.findUserByUid(uid);
//找到用户名
String username = user.getUsername();
//生成一个盐值
String salt = UUID.randomUUID().toString();
//加密
String md5PWD = getMd5PWD(newPwd,salt);
int row = userMapper.updatePassword(uid,md5PWD,salt,username);
if (row<0){
throw new ServiceException("更新密码失败!");
}
return row;
}