easyui+ssm+shiro做的登錄註冊修改密碼審覈用戶(四)

easyui+ssm+shiro做的登錄註冊修改密碼審覈用戶(四)

修改密碼頁面的具體實現步驟

修改密碼：根據輸入原賬號和原密碼來判斷是否存在改用戶，若存在，再輸入新密碼和確認密碼，這兩個要一致，下面還要有個返回登錄頁面的a標籤

根據這張效果圖，我們可以需要一個form表單用來傳遞參數，參數一共有兩個，還有兩個按鈕

修改密碼的form表單代碼如下，前端通過ajax把name值傳給後臺

<div class="form-bottom" style="height:400px;">
	<form id="updatePwdForm" action="" method="post" class="login-form" target="iframe">
		<div class="form-group">
			<input type="text" class="form-control" name="username" id="usernameId"  placeholder="請輸入原賬號" required="true" style="margin-left:3px;">
		</div>			                     
		<div class="form-group">
			<input type="password" class="form-control" name="password" id="pwdId" placeholder="請輸入舊密碼" required="true" style="margin-left:3px;">
	    </div>
		<div class="form-group">
			<input type="password" class="form-control" name="newPwd" id="newPwdId" placeholder="請輸入新密碼" required="true" style="margin-left:3px;">
		</div>
		<div class="form-group">
			<input type="password" class="form-control" name="cfgPwd" id="cfgPwdId" onchange="confirmPwd()"  placeholder="請再次確認密碼" required="true" style="margin-left:3px;">
		</div>
		<div class="box-footer" style="padding-top:10px;">                   	
			  <button id="savePassWord" type="submit" class="btn" onclick="doUpdatePwd()">保存密碼</button>
			  <p></p>
			   <a style='color:blue' href='javascript:void(0)' title='返回登錄頁面' onclick='returnLogin()'><span style="font-size:16px;">返回登錄頁面</span></a>
		</div>
			                        
	</form> 
	<iframe id="iframe" name="iframe" style="display:none;"></iframe>
</div>

第二步：根據保存密碼按鈕的 οnclick="doUpdatePwd()" 的方法修改用戶密碼信息，根據用戶賬號，用戶密碼，用戶新密碼這三個參數來修改密碼，

        var username = $("#usernameId").val();        根據用戶賬號id獲取用戶賬號
        var password = $("#pwdId").val();                  根據用戶密碼id獲取用戶密碼
        var newPwd = $("#newPwdId").val();             根據用戶新密碼id獲取用戶新密碼

判斷這三個是否爲空，爲空直接return，不爲空就使用ajax傳參，在註冊的時候再做判斷，如果原賬號錯誤會彈出提示原賬號錯誤，請重新輸入   如果是原密碼錯誤會彈出提示原密碼錯誤，請重新輸入，如果輸入都正確就會彈出 "保存成功"

        var t = "false";		
	function doUpdatePwd(){	
		var username = $("#usernameId").val();
		var password = $("#pwdId").val();
		var newPwd = $("#newPwdId").val();
		if(username==''){
			return;
		}
		if(password==''){
			return;
		}
		if(newPwd==''){
			return;
		}
		$.ajax({
		 	dataType: false,
			type : "post", 
                        url : "${ctx}/shiroUpdatePwd", 
                        data : {"userName" : username , "password" : password , "newPwd" : newPwd},
                        async: false,
                        success : function(data) {
                           if(data == "201"){
                                $.messager.alert('溫馨提示','原密碼錯誤，請重新輸入!',"error");
                           }
                           if(data == "500"){
                 	            $.messager.alert('溫馨提示','原賬號錯誤，請重新輸入!',"error");
                           }
                           if(data == "200"){	
                 $.messager.alert('溫馨提示','保存成功!');
                           }
                     },
                           error : function(){
                         }  
		    })  
    }

判斷兩次輸入的密碼是否一致，不一致則彈出提示   “兩次輸入密碼不一致，請重新輸入”

/* 驗證新密碼和確認密碼是否一致 */
function confirmPwd(){
        var password =  $("#newPwdId").val();
        var repassword = $("#cfgPwdId").val();		 
        if(password == repassword) {
    	    t="ture";
	    }else {
		    $.messager.alert('溫馨提示',"兩次輸入密碼不一致，請重新輸入",'error');
		    t="false";
	    } 
    }

效果如下圖：

寫後臺接口之前要先在spring-shiro.xml和ShiroService裏面加上shiro配置，如果不加的話絕對進不了後臺，這是因爲shiro框架在登錄之前做了限制

ShiroService的初始化權限

    /**
	 * 初始化權限
	 */
 
	public Map<String, String> loadFilterChainDefinitions() { // 權限控制map.從數據庫獲取
		Map<String, String> filterChainDefinitionMap = new LinkedHashMap<String, String>();
		
		filterChainDefinitionMap.put("/findUserByUserNamePassword", "anon");
		filterChainDefinitionMap.put("/find", "anon");
		filterChainDefinitionMap.put("/findUserByName", "anon");
		filterChainDefinitionMap.put("/selUser", "anon");
		filterChainDefinitionMap.put("/register", "anon");
		filterChainDefinitionMap.put("/shiroRegister", "anon");
		filterChainDefinitionMap.put("/updatePwd", "anon");
		filterChainDefinitionMap.put("/sysUser/**", "anon");
		filterChainDefinitionMap.put("/login", "anon");
		filterChainDefinitionMap.put("/error/**", "anon");
		filterChainDefinitionMap.put("/kickout", "anon");
		filterChainDefinitionMap.put("/logout", "logout");
		filterChainDefinitionMap.put("/css/**", "anon");
		filterChainDefinitionMap.put("/js/**", "anon");
		filterChainDefinitionMap.put("/img/**", "anon");
		filterChainDefinitionMap.put("/libs/**", "anon");
		filterChainDefinitionMap.put("/favicon.ico", "anon");
		filterChainDefinitionMap.put("/verificationCode", "anon");
 
		List<Permission> permissionList = permissionService.selectAll(1);
		for (Permission permission : permissionList) {
			if (StringUtils.isNotBlank(permission.getUrl()) && StringUtils.isNotBlank(permission.getPerms())) {
				String perm = "perms[" + permission.getPerms() + "]";
				filterChainDefinitionMap.put(permission.getUrl(), perm + ",kickout");
			}
		}
		filterChainDefinitionMap.put("/**", "user,kickout");
		return filterChainDefinitionMap;
	}

spring-shiro.xml的配置

<!-- 6. 配置ShiroFilter,id必須和web.xml中的DelegatingFilterProxy中的相同 -->
    <bean id="shiroFilter" class="org.apache.shiro.spring.web.ShiroFilterFactoryBean">
        <property name="securityManager" ref="securityManager"/>
        <property name="loginUrl" value="/login"/>
        <property name="successUrl" value="/home"/>
        <property name="unauthorizedUrl" value="/error"/>
        <property name="filterChainDefinitions">
            <value>
            	/selUser anon
            	/findUserByUserNamePassword anon
            	/find anon
            	/findUserByName anon
                /login =  anon	
                /shiroRegister = anon	
                /shiroLogin = anon
                /register = anon
                /shiroUpdatePwd = anon
                /logout = logout
                /updatePwd = anon
                /editUser = anon
                /sysUser/** = anon
                /resource/** = anon
                
                #everything else requires authentication:
                /** = authc
            </value>
        </property>
    </bean>

配置好這兩個之後就算沒有登錄也可以跳轉到指定的修改密碼頁面

    /**
	 * 加載修改密碼頁面
	 * @return
	 */
	@RequestMapping("/updatePwd")
	public String toUpdatePwdPage(){
		return "/security/updatepwd";
	}

 寫了這個之後，還要再到login.jsp頁面寫個修改密碼的跳轉方法

//修改方法
function updatePwd(){
	location.href = "${ctx}/updatePwd";
}

第三步：修改密碼的後臺接口

把從前端用Ajax傳遞過來的參數放到updatePwd方法的參數中去，前後端如果name不一致可以用@RequestParam進行接收

直接return  userService的updatePwd方法,傳userName,password,newPwd參數

    /**
	 *修改用戶密碼
	 * @param username
	 * @param password
	 * @param request
	 * @return
	 */
	@RequestMapping("/shiroUpdatePwd")
	@ResponseBody
	public String updatePwd(@RequestParam String userName,@RequestParam String password, @RequestParam String newPwd) {
		  return userService.updatePwd(userName, password, newPwd);
	}

修改密碼的service實現方法

改方法的業務邏輯如下：

先調用userDao裏面的根據用戶名查詢用戶的方法，如果用戶爲空直接返回字符串500，else if用戶不爲空，就把修改好的密碼用shiro加密方法加密，再判斷如果 !user.getPassword().equals(pwd); 原密碼與當前加密的密碼不相等,就直接返回字符串201,如果是其他的情況，就把修改好的新密碼用MD5加密，然後設置密碼爲新加密的密碼，調用userDao的updateUserPwd方法

/**
* 修改用戶密碼
*/
@Override
public String updatePwd(String userName,String password,String newPwd) {
	User user = userDao.findUserByName(userName);
	if(user == null){
		System.out.println("原賬號錯誤");
			return "500";
		}else if(user != null){
			String pwd = jiami(userName,password);
					
		if(!user.getPassword().equals(pwd)){
			System.out.println("原密碼錯誤");
			return "201";
		}else{
                        // 將用戶名和新密碼封裝爲UsernamePasswordToken對象
			UsernamePasswordToken token = new UsernamePasswordToken(userName,newPwd);
                            //MD5加密密碼
				String hashAlgorithName = "MD5";
				Object credentials = newPwd;
				Object salt = ByteSource.Util.bytes(userName);
				int hashIterations = 1024;
				Object result = new SimpleHash(hashAlgorithName,credentials,salt,hashIterations);
                            //設置密碼爲新加密的密碼
				user.setPassword(String.valueOf(result));
                            //設置用戶名
				user.setUserName(userName);
				/*HashMap<String,String> para1=new HashMap<String,String>();
				para1.put("userName", userName);
				para1.put("newPwd", String.valueOf(result1));*/
                            //調用userDao的updateUserPwd方法根據id和密碼修改用戶密碼
				userDao.updateUserPwd(user.getId(),String.valueOf(result));
				return "200";
			}
					
		}
		return "";
}

修改密碼的UserDao接口

參數：id和password

    /**
	 * 修改用戶密碼
	 * @param username
	 * @param ordpPassword
	 * @param password
	 */
	int updateUserPwd(@Param("id") String id,@Param("password")String password);

修改密碼的UserMapper.xml

根據用戶id修改用戶密碼，parameterType是java.lang.String類型

<!-- 修改用戶密碼 -->
	<update id="updateUserPwd" parameterType="java.lang.String">
		update SYS_USER
		set
		PASSWORD=#{password}
		where
		ID=#{id}
	</update>

解決form表單一保存就自動刷新的問題

在form表單上加個 target="iframe" 的屬性，在form表單外面加個<iframe id="iframe" name="iframe" style="display:none;"></iframe>

<form id="updatePwdForm" action="" method="post" class="login-form" target="iframe">
<form>


<iframe id="iframe" name="iframe" style="display:none;"></iframe>

修改密碼頁面的完整jsp代碼

<%@page import="java.net.InetAddress"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="com.yhzn.common.util.ConfigUtil"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<%
	String hostAddress = "";
	try{
		InetAddress address = InetAddress.getLocalHost();
		hostAddress = address.getHostAddress();
	}catch(Exception e){
		e.printStackTrace();    
	}
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh">

    <head>
  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
    <title><%=ConfigUtil.getConfig("companyName") %></title>
	<meta name="description" content="User login page" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <!-- CSS -->
		<link rel="stylesheet"
			href="${ctx}/resource/plugins1/assets/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet"
			href="${ctx}/resource/plugins1/assets/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet"
			href="${ctx}/resource/plugins1/assets/css/form-elements.css">
		<link rel="stylesheet"
			href="${ctx}/resource/plugins1/assets/css/style.css">
		<link rel="stylesheet" type="text/css" href="${ctx }/resource/plugins/easyui-me/columns.css">
		<link rel="stylesheet" type="text/css" href="${ctx }/resource/plugins/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="${ctx }/resource/plugins/easyui-me/style.css">
		<link rel="stylesheet" href="${ctx }/resource/plugins/validform/Validform.css" />
		<script src="${ctx }/resource/plugins/easyui/jquery.min.js"></script>
		<script src="${ctx }/resource/plugins/easyui/jquery.easyui.min.js"></script>
		<script src="${ctx }/resource/plugins1/assets/bootstrap/js/bootstrap.min.js"></script>
		<script src="${ctx }/resource/plugins1/assets/js/jquery.backstretch.min.js"></script>
		<script type="text/javascript" src="${ctx }/resource/plugins/validform/Validform_v5.3.2_min.js"></script>
		
		<style type="text/css">
			.form-control:{
				margin-top:10px;
			}
		</style>
    </head>
    <body>
        <!-- Top content -->
        <div class="top-content">
        	
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1><strong><%=ConfigUtil.getConfig("companyName") %></strong></h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                        	<div class="form-top">
                        		<div class="form-top-left">
                        			<h3>修改密碼</h3>
                        		</div>
                        		<div class="form-top-right">
                        			<i class="fa fa-key"></i>
                        		</div>
                            </div>
                            <!-- easyui-combotree -->
                            <div class="form-bottom" style="height:400px;">
			                    <form id="updatePwdForm" action="" method="post" class="login-form" target="iframe">
									<div class="form-group">
							              <input type="text" class="form-control" name="username" id="usernameId"  placeholder="請輸入原賬號" required="true" style="margin-left:3px;">
			                        </div>			                     
			                    	<div class="form-group">
							              <input type="password" class="form-control" name="password" id="pwdId" placeholder="請輸入舊密碼" required="true" style="margin-left:3px;">
			                        </div>
			                        <div class="form-group">
							               <input type="password" class="form-control" name="newPwd" id="newPwdId" placeholder="請輸入新密碼" required="true" style="margin-left:3px;">
			                        </div>
			                        <div class="form-group">
							              <input type="password" class="form-control" name="cfgPwd" id="cfgPwdId" onchange="confirmPwd()"  placeholder="請再次確認密碼" required="true" style="margin-left:3px;">
			                        </div>
			                        <div class="box-footer" style="padding-top:10px;">
			                        	
			                        	 <button id="savePassWord" type="submit" class="btn" onclick="doUpdatePwd()">保存密碼</button>
			                        	<p></p>
			                        	<a style='color:blue' href='javascript:void(0)' title='返回登錄頁面' onclick='returnLogin()'><span style="font-size:16px;">返回登錄頁面</span></a>
			                        </div>
			                        
			                    </form>
			                    
			                    <iframe id="iframe" name="iframe" style="display:none;"></iframe>
		                    </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
        <script>
        	jQuery(document).ready(function() {
	
		    /*
		     *   全屏背景圖
		    */
		    $.backstretch("resource/plugins1/assets/img/backgrounds/33.jpg");
		    
		    /*
		        Form validation
		    */
		    $('.login-form input[type="text"], .login-form input[type="password"], .login-form textarea').on('focus', function() {
		    	$(this).removeClass('input-error');
		    });
		    
		});
		
     	function returnLogin(){
     		window.location.href="${ctx}/login"
     	}
		
		
		var t = "false";		
		function doUpdatePwd(){
			 var username = $("#usernameId").val();
			 var password = $("#pwdId").val();
			 var newPwd = $("#newPwdId").val();
			 if(username==''){
			 	return;
			 }
			 if(password==''){
			 	return;
			 }
			 if(newPwd==''){
			 	return;
			 }
		 	$.ajax({
		 		 dataType: false,
				 type : "post", 
                 url : "${ctx}/shiroUpdatePwd", 
                 data : {"userName" : username , "password" : password , "newPwd" : newPwd},
                 async: false,
                 success : function(data) {
                 	 if(data == "201"){
                 		$.messager.alert('溫馨提示','原密碼錯誤，請重新輸入!',"error");
                 	}
                 	if(data == "500"){
                 		$.messager.alert('溫馨提示','原賬號錯誤，請重新輸入!',"error");
                 	}
                 	if(data == "200"){
                 		
                 		$.messager.alert('溫馨提示','保存成功!');
                 	}
                 },
                 error : function(){
                 }  
			})  
		}

		/* 驗證新密碼和確認密碼是否一致 */
		function confirmPwd(){
			var password =  $("#newPwdId").val();
    		var repassword = $("#cfgPwdId").val();
    			 
    		if(password == repassword) {
    			t="ture";
			 }else {
				 $.messager.alert('溫馨提示',"兩次輸入密碼不一致，請重新輸入",'error');
				 t="false";
			 } 
		}
		
        </script>

    </body>

</html>