尚硅谷JavaWeb笔记——书城项目（第六阶段：验证码登陆与订单系统）

梦里梦外; 2022-11-01 10:54 173阅读 0赞

### 文章目录 ###

*  第六阶段-验证码登陆与订单系统
 *   *  登陆：显示用户名
     *  登出：注销用户
     *  表单重复提交之验证码
     *   *  谷歌验证码
         *  验证码的切换——刷新验证码

# 第六阶段-验证码登陆与订单系统 #

## 登陆：显示用户名 ##

需求，对于已经成功登陆过的用户信息，当用户访问其他页面时应当针对性提供用户信息。

解决思路：如果用户成功登陆，就在`UserServlet`把登陆时**成功获取的用户Dao**保存至`session`中，故应当在`login`方法中写如下代码：

if (loginUser == null) { 
      // 把错误信息，和回显的表单项信息，保存到Request域中
      request.setAttribute("msg", "用户或密码错误！");
      request.setAttribute("username", username);
      // 跳回登录页面
      request.getRequestDispatcher("/pages/user/login.jsp").forward(request, response);
    } else { 
      // 登录 成功
    
      ⭐️// 将用户数登陆信息保存至session中
      request.getSession().setAttribute("user",loginUser);
    
      //跳到成功页面login_success.html
      request.getRequestDispatcher("/pages/user/login_success.jsp").forward(request, response);
    }

然后在其他页面中例如`login_success`增加

<span>欢迎<span class="um_span">${ sessionScope.user.username}</span>欢迎光临尚硅谷书城</span>

以及在首页中需要针对`session`中是否包含用户信息来选择性的展示页面

<%--        如果用户还没有登陆 显示包含注册和登陆的菜单  --%>
    <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/cart/cart.jsp">购物车</a>
      <a href="pages/order/order.jsp">我的订单</a>
    
      <a href="userServlet?action=logout">注销</a>  
    </c:if>
    <a href="pages/manager/manager.jsp">后台管理</a>
    <a href="index.jsp">返回</a>

未登陆时的主页

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TfhEb2la-1614146292322)(/Users/gaojunsong/Library/Application Support/typora-user-images/Java学习/JAVAWeb/image-20210219224404789.png)\]][img-TfhEb2la-1614146292322_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219224404789.png]

成功登陆时的主页

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mgTOu3kr-1614146292324)(/Users/gaojunsong/Library/Application Support/typora-user-images/Java学习/JAVAWeb/image-20210219224332849.png)\]][img-mgTOu3kr-1614146292324_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219224332849.png]

## 登出：注销用户 ##

在上一部分提到，用户是否成功登陆的关键就是当前Session中是否有`user`的信息，因此当用户点击注销后，访问`userServlet`中的`logout`方法，该方法删除`session`中的`user`信息，在将请求转发至主页`index.jsp`即可。

protected void logout(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ 
      // 销毁session中的用户登陆信息
      request.getSession().invalidate();
      // 重定向至首页（注意路径问题）
      response.sendRedirect(request.getContextPath());
    }

注意：这里使用的是**响应重定向**，告诉先前的请求直接去访问`index.jsp`

\*\*这里附上一个请求转发与响应重定向的区别的[博客][Link 1]

## 表单重复提交之验证码 ##

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bE5ZsC2C-1614146292325)(/Users/gaojunsong/Library/Application Support/typora-user-images/Java学习/JAVAWeb/image-20210219212040174.png)\]][img-bE5ZsC2C-1614146292325_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219212040174.png]

后面两种情况的解决方法——验证码

**验证码利用session技术解决表单重复提交问题**

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XEsmRiVt-1614146292329)(/Users/gaojunsong/Library/Application Support/typora-user-images/Java学习/JAVAWeb/image-20210219212724126.png)\]][img-XEsmRiVt-1614146292329_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219212724126.png]

### 谷歌验证码 ###

使用步骤如下

**Step1：导入jar包：captcha-2.3.2.jar**

**Step2：在web.xml中配置用于生成验证码的Servlet程序，代码如下所示。这里最好写成`.jpg`的样式，这样看起来更像图片**

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

**Step3：在表单中使用img标签去显示验证码并使用**

效果图：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TDnEjQ08-1614146292330)(/Users/gaojunsong/Library/Application Support/typora-user-images/Java学习/JAVAWeb/image-20210219215104626.png)\]][img-TDnEjQ08-1614146292330_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219215104626.png]

**Step4：在服务器获取谷歌生成的验证码和客户端发送过来的验证码比较使用**

@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
      // 获取Session中的验证码
      String token = (String) req.getSession().getAttribute(KAPTCHA_SESSION_KEY);
      // 删除 Session中的验证码
      req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);
    
    
      String code = req.getParameter("code");
      // 获取用户名
      String username = req.getParameter("username");
    
      if (token != null && token.equalsIgnoreCase(code)) { 
        System.out.println("保存到数据库：" + username);
        resp.sendRedirect(req.getContextPath() + "/ok.jsp");
      } else { 
        System.out.println("请不要重复提交表单");
      }
    }

### 验证码的切换——刷新验证码 ###

需要给验证码**绑定好单击事件**

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

上述代码中，由于个别浏览器会对相同请求地址**自动生成缓存信息**，因此需要**加上时间戳**避免缓存产生

关于客户端与服务器验证码地址缓存的说明：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k3IjRnxB-1614146292332)(/Users/gaojunsong/Library/Application Support/typora-user-images/Java学习/JAVAWeb/image-20210219222918132.png)\]][img-k3IjRnxB-1614146292332_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219222918132.png]

出现的问题一：当没有用idea连接数据库时，可能会出现无法访问数据库的情况

出现的问题二：项目的out.artifacts中一直保持着旧的的编译内容

解决方案：删除对应的artifacts，然后在idea中重新构建Artifacts

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTgxOA_size_16_color_FFFFFF_t_70][]

[img-TfhEb2la-1614146292322_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219224404789.png]: /images/20221024/f580549c423846f9bf9148172cfee2f6.png
[img-mgTOu3kr-1614146292324_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219224332849.png]: /images/20221024/b4b809f8707f479bac658102f6fb4899.png
[Link 1]: https://blog.csdn.net/csdn_inside/article/details/88965294
[img-bE5ZsC2C-1614146292325_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219212040174.png]: /images/20221024/0f36f6c800b0469095cc9aee4e71b707.png
[img-XEsmRiVt-1614146292329_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219212724126.png]: /images/20221024/81184ac334df47df89f572295f3b9864.png
[img-TDnEjQ08-1614146292330_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219215104626.png]: /images/20221024/edbe387112574eefbf524142daf10a39.png
[img-k3IjRnxB-1614146292332_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210219222918132.png]: /images/20221024/36ff825ec5924b6f90bcc9b1aec170f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTgxOA_size_16_color_FFFFFF_t_70]: /images/20221024/4ce9af05951342918906168a044863b0.png