第五阶段-尚硅谷书城案例登录注册的优化和验证码

1.显示登录的用户信息

如下图：登录后将用户信息显示出来


登录成功后，将用户的信息放入 Session域中

else {
            //登录 成功
            //保存用户登录的信息到 session 域中
            req.getSession().setAttribute("user",loginUser);
            //跳转到 login_success.jsp
            req.getRequestDispatcher("/pages/user/login_success.jsp").forward(req,resp);
        }

在 login_sucess_menu.jsp 获取session域中的用户名

修改首页登录界面：

当没用户登录时显示：

当有用户登录时显示：

实现：
用 <c:if></c:if>判断 用户是否登录

<%-- 如果用户还没有登录，显示  【登录 和注册的菜单】--%>
				<c:if test="${empty sessionScope.user}">
					<a href="pages/user/login.jsp">登录</a> |
					<a href="pages/user/regist.jsp">注册</a>
				</c:if>
				<%-- 如果用户登录成功，显示  【欢迎 和我的订单、注销】--%>
				<c:if test="${not empty sessionScope.user}">
					<span>欢迎<span class="um_span">${sessionScope.user.username}</span>光临尚硅谷书城</span>
					<a href="pages/order/order.jsp">我的订单</a>
					<a href="userServlet?action=logout">注销</a>&nbsp;&nbsp;
				</c:if>

2.注销登录：

1. 销毁 session 域中的用户信息
2. 重定向回首页

 protected void logout(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.销毁 Session 中 用户登录的信息
        req.getSession().invalidate();
        //2.重定向到首页
        resp.sendRedirect(req.getContextPath());
    }

tip: invalidate() 是直接删除 session域中的所有信息

修改首页中的 注销 a标签的跳转界面 并调用销毁的方法

<a href="userServlet?action=logout">注销</a>&nbsp;&nbsp;

3.表单重复提交之 ----验证码

表单重复提交有三种常见的情况：

1. 提交完表单。服务器使用请求转发进行页面跳转。这个时候，用户按下功能键 F5，就会发起最后一次的请求。造成表单重复提交问题。解决方法：使用重定向进行跳转
2. 用户正常提交服务器，但是由于网络延迟等原因，迟迟未收到服务器的响应，这个时候，用户以为提交失败，就会着急，然后多点了几次提交操作，也会造成表单重复提交。
3. 用户正常提交服务器。服务器也没有延迟，但是提交完成后，用户回退浏览器。重新提交。也会造成表单重复提交。

解决思路图：

3.1、谷歌 kaptcha 图片验证码的使用

谷歌验证码 kaptcha 使用步骤如下：

1. 导入谷歌验证码的 jar包
   
2. 在 web.xml 中去配置用于生成验证码的 Servlet 程序

    <servlet>
        <servlet-name>KaptchaServlet</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>KaptchaServlet</servlet-name>
        <url-pattern>/kaptcha.jpg</url-pattern>
    </servlet-mapping>

在 regist.jsp 界面 修改 图片的跳转页面

									<label>验证码：</label>
									<input class="itxt" name="code" type="text" style="width: 100px;height: 15px;"
										   id="code" />
									<img id="code_img" alt="" src="kaptcha.jpg" style="float: right; margin-right: 50px;width: 100px;height: 28px;">

在 UserServlet 中 regist 界面 获取验证码再删除验证码

  protected void regist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取Session中的验证码
        String token = (String) req.getSession().getAttribute(KAPTCHA_SESSION_KEY);
        //删除 Session中的验证码
        req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);
}

运行结果：

刷新验证码：
点击验证码图片验证码能够刷新

给验证码绑定单击事件，点击验证码 刷新页面，再给刷新的页面加入 时间戳，保证每次刷新验证码都不同

<script type="text/javascript">
		//页面加载完成之后
		$(function () {
			//给验证码绑定一个单击事件
			$("#code_img").click(function () {
				//在事件响应的function 函数中有一个 this 对象。这个this对象，是当前正在响应事件的dom对象
				//src 属性表示验证码img标签的 图片路径。它可读，可写

				this.src = "${basepath}kaptcha.jpg?d=" + new Date();
			});
</script>