页面跳转后提示信息

    我们在开发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方法,他可以将数据传入重定向的页面,并且比较安全,具体的用法可以参考<kbd>使用RedirectAttributes将数据传入重定向的页面</kbd>。
controller核心代码:

public String login(HttpServletRequest request, RedirectAttributes redirectAttributes) {
	.....一堆验证
	//验证成功后
	redirectAttributes.addFlashAttribute("message", "登陆成功");
	return "redirect:main";
	//验证失败后
	....
}

jsp页面代码和上面一毛一样,同样可以在jsp页面中用jstl标签${message }将提示信息取出来。

至此,基本功能大致是完成了,但是后来发现一个问题:在重定向到主页后,点击后退在前进,“登录成功”的提示信息还是会显示出来。

另外,如果路过的兄弟姐妹们有更好的处理这种问题的方法,希望可以分享一下,大家互相学习。

全部评论

相关推荐

躺尸修仙中:因为很多92的也去卷中小厂,反正投递简历不要钱,面试不要钱,时间冲突就推,不冲突就面试积累经验
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务