2021-05-16 书城项目第六阶段：用户名的登录显示、用户的注销和验证码

6.1用户名的登录显示—编程关键：保存session域中的数据

6.2用户的注销—编程关键：销毁session域中的数据

6.2.1 在注销标签中编写logout地址

<div>
    <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;
    <a href="index.jsp">返回</a>
</div>

6.2.2 在UserServlet程序中编写logout方法注销session域，并重定向到首页。（不使用请求转发：防止重复注销）

protected void logOut(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //销毁session域中保留的关键信息
        req.getSession().invalidate();
        //重定向到首页
        resp.setContentType(req.getContextPath());
    }

6.3验证码

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

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

6.3.1 导入谷歌验证码的jar包

kapcha-2.3.2.jar

6.3.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>

6.3.3 在表单中使用img标签去显示验证码图片并使用它

<label>验证码：</label>
<input class="itxt" type="text" style="width: 120px;" name="code" id="code"/>
<img alt="" src="kaptcha.jpg" style="float: right; margin-right: 40px;width: 80px;height: 20px"> <br />

6.3.4 在服务器获取谷歌生成的验证码和客户端发送过来的验证码进行比较

protected void regist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //获取session中的验证码
        String token = (String)req.getSession().getAttribute(KAPTCHA_SESSION_KEY);
        //删除session中的验证码
        req.getSession().invalidate();

        //1.获取用户信息
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String email = req.getParameter("email");
        String code = req.getParameter("code");
        //2.先检查验证码是否正确
        if(token!=null && token.equalsIgnoreCase(code)) {
            //验证码正确：
            if(useService.existsUsername(username)){
                req.setAttribute("msg","用户名已经存在，请适当更改！");
                req.setAttribute("username",username);
                //用户名存在
                req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);

            }else{
                //用户名不存在
                useService.registUser(new User(null,username,password,email));
                req.getRequestDispatcher("/pages/user/regist_success.jsp").forward(req,resp);
            }

        }else {
            //验证码不正确：
            req.setAttribute("msg","验证码不正确，请重新输入");
            //  "/"表示： http://localhost:8080/book/ 映射到web目录下
            req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);

        }
    }

6.3.5 进行验证码的切换操作

$("#code_img").click(function () {
  // 在事件响应的 function 函数中有一个 this 对象。这个 this 对象，是当前  正在响应事件的 dom 对象
  // src 属性表示验证码 img 标签的 图片路径。它可读，可写
  // alert(this.src);
     this.src = "${basePath}kaptcha.jpg?h="+new Date();
			})