0004.用户修改密码

今天找到款做思维导图的好软件，Xmind，简单易上手。官网：https://www.xmind.cn/  。下面的图也是用Xmind做的。

用户修改密码的页面逻辑：

先给页面显示用户名的区域加个按钮菜单，本来想用EasyUI实现的，调了好久样式也没有和页面风格搭的，就直接写了....写完感觉画面有股原始的粗犷美:

<li><a href="#" id="login_user" >${loginUser.username }</a></li>
<li><a id="edit_pwd_btn" style="display:none;color:white">修改密码</a></li>
						<script type="text/javascript">
							//显示下拉操作菜单
							$("#login_user").click(function(){
								//判断菜单是否打开状态
								if($("#edit_pwd_btn").is(":hidden")){
							    	$("#edit_pwd_btn").show();
							    }else{
							    	$("#edit_pwd_btn").hide();
							    }
							});
						</script>

效果图：

给页面添加个修改密码的隐藏窗口：

<!-- 修改密码窗口 -->
	<div id="edit_pwd_window"  hidden="true" border="false" closeable="true"
			style="z-index:999;padding: 10px; background: #fff; border: 1px solid #ccc;position:absolute;left:50%;top:30%;">
    	<form id="edit_pwd_form" action="${pageContext.request.contextPath }/UserAction_editPassword.action" method="post">
	                <table cellpadding=3>
	                    <tr>
	                        <td>新密码：</td>
	                        <td><input id="new_password" name="newPassword" type="password" required="true" /></td>
	                    </tr>
	                    <tr>
	                        <td>确认密码：</td>
	                        <td><input id="new_confirm_password" type="password" required="true" /></td>
	                    </tr>
	                </table>
	                <br>
	              <div align="center">
	              	<button id="edit_pwd_cancel" οnclick="closeEditPwdWindow()">取消</button>   
	              	<button id="edit_pwd_submit" >确认</button> 
	              </div>
        </form>

然后给“修改密码”绑定弹窗事件：

<script type="text/javascript">
							//绑定修改密码按钮事件
							$("#edit_pwd_btn").click(function(){
								$("#edit_pwd_window").show();
							});
							//关闭密码窗口
							function closeEditPwdWindow(){
								$("#edit_pwd_window").hide();
							}
							//给确认修改密码按钮绑定事件
							$("#edit_pwd_submit").click(function(){
								//校对密码
								var pwd = $("#new_password").val();
								var repwd = $("#new_confirm_password").val();
								if(pwd.length<6 || pwd.length>32 || repwd.length<6 || repwd.length>32 ){
									alert("密码长度不符合规则");
									//取消提交操作
									return false;
								}
								if(pwd != repwd){//密码不一致
									alert("两次输入的密码不一致");
									//取消提交操作
									return false;
								}
								//关闭修改窗口
								closeEditPwdWindow();
								//提交表单
								$("#edit_pwd_form").submit();
							});
						</script>

展示一下美工看了会流泪的效果图：

页面搞定。

服务器的处理逻辑：

Action中editPassword代码：

	/**
	 * 修改密码
	 */
	public String editPassword(){
		//获取当前用户
		User loginUser = (User) ServletActionContext.getRequest().getSession().getAttribute("loginUser");
		userService.editPassword(loginUser, newPassword);
		return "success";
	}

Service的editPassword实现：

	/**
	 * 修改密码
	 */
	public void editPassword(User loginUser, String newPassword) {
		//加密明文密码
		String md5_password = MD5Utils.getMd5(newPassword);
		//加密后的新密码赋给user
		loginUser.setPassword(md5_password);
		userDao.update(loginUser);
		
	}

Dao的update方法，因为前端校验没有用ajax请求校验新密码和现有密码是否一致，所以这里用模板类的saveOrUpdate方法：

	/**
	 * 修改用户密码/资料
	 */
	public void update(User user) {
		this.getHibernateTemplate().saveOrUpdate(user);
	}

------------------------------------------------------------------------------------------------------------------------------

做完发现效果不理想，想了一下还是改用ajax发送请求比较合理。遇到点问题，ajax请求后台获取不到session值，先搁置一下。