页面跳转后提示信息

    我们在开发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 }将提示信息取出来。

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

页面跳转后提示信息

全站热榜