頁面跳轉後提示信息

    我們在開發web應用的時候,經常會遇到這種問題:當你登錄成功或失敗後,你希望給用戶提示一些信息,來提高用戶體驗。
    其中信息提示的效果還算好做,使用一些其他的插件(如toastr)就可以做的很優美。但其中的邏輯處理,後端控制可能需要仔細琢磨,今天我在寫一個登陸邏輯時碰到了這種邏輯問題,查閱了許多優秀的博客,最終還是大致解決了問題。
期望的效果:
1.登陸失敗,頁面仍然停留在登錄頁,且提示登陸失敗信息。(雖然是停留在原頁面,但實際上是頁面刷新後的效果,因爲這樣就不用處理一些表單驗證後重新進行失效的情況)
2.登陸成功,頁面重定向到項目主頁,且提示登陸成功。
具體實現:
1.登錄失敗的情況不難,後端直接返回當前頁面即可,不過返回的頁面需要增加一些提示性信息,方便頁面返回後在前端通過js把提示信息顯示出來。
    我採用的是jsp頁面,所以在controller中將錯誤信息放入request域中,然後在jsp頁面中將request域中的信息放入一個隱藏的元素內。到達前端後,js判斷該元素內是否有提示信息,如果有則調用toastr插件將信息提示出來,沒有則不做反應。
controller核心代碼:

public String login(HttpServletRequest request, RedirectAttributes redirectAttributes) {
	.....一堆驗證
	.....驗證成功後怎麼怎麼地
	//驗證失敗後
	request.setAttribute("message", "登陸失敗");
	return "login";
}

jsp頁面核心代碼:

<body>
	<%--設置消息隱藏,用於存放消息 ,value爲空時表示沒有提示消息,否則表示有。這個需要前端通過js顯示消息提示--%>
	<c:if test="${empty message }">
		<input type="text" id="message" class="sr-only" value="">	
	</c:if>
	<c:if test="${!empty message }">
		<input type="text" id="message" class="sr-only" value="${message }">	
	</c:if>
</body>
<script>
//這是jquery的調用方法,在頁面加載完後會執行該初始方法
	$(function(){
	<%--判斷是否有消息,有就提示出來 , toastr是一個不錯的消息提示插件,具體用法問度娘吧--%>
            var msg = $("#message").val();
            if(msg.length != 0){
            	toastr["info"](msg);
            	$("#message").val(""); <%--提示完後清空消息--%>
            }
	});
</script>

2.登錄成功,這時需要將頁面跳轉到主頁,然後顯示登錄成功信息給用戶。上述方法已經行不通了,因爲redirect是兩個請求,不是一個請求,所以即使你將提示信息放入request域,主頁面的那個請求域也無法收到。所以這時我們需要想一個能將提示信息傳入重定向頁面的方法,我用的是RedirectAttributes類的addFlashAttribute方法,他可以將數據傳入重定向的頁面,並且比較安全,具體的用法可以參考使用RedirectAttributes將數據傳入重定向的頁面
controller核心代碼:

public String login(HttpServletRequest request, RedirectAttributes redirectAttributes) {
	.....一堆驗證
	//驗證成功後
	redirectAttributes.addFlashAttribute("message", "登陸成功");
	return "redirect:main";
	//驗證失敗後
	....
}

jsp頁面代碼和上面一毛一樣,同樣可以在jsp頁面中用jstl標籤${message }將提示信息取出來。

至此,基本功能大致是完成了,但是後來發現一個問題:在重定向到主頁後,點擊後退在前進,“登錄成功”的提示信息還是會顯示出來。

另外,如果路過的兄弟姐妹們有更好的處理這種問題的方法,希望可以分享一下,大家互相學習。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章