我們在開發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 }將提示信息取出來。
至此,基本功能大致是完成了,但是後來發現一個問題:在重定向到主頁後,點擊後退在前進,“登錄成功”的提示信息還是會顯示出來。
另外,如果路過的兄弟姐妹們有更好的處理這種問題的方法,希望可以分享一下,大家互相學習。