6、项目第六阶段——用户名登录显示和注册验证码

第六阶段——用户名登录显示和注册验证码

1、登陆—显示用户名

UserServlet 程序中保存用户登录的信息

UserServlet程序中：

//保存用户登录信息到Session域中
req.getSession().setAttribute("user",loginUser);

修改 login_succuess_menu.jsp：

还要修改首页 index.jsp 页面的菜单

2、登出—注销用户

1、销毁 Session 中用户登录的信息（或者销毁 Session）

2、重定向到首页（或登录页面）。

UserServlet 程序中添加 logout 方法

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

}

修改login_succuess_menu.jsp中【注销】的菜单地址

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

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

​ 一：提交完表单。服务器使用请求转来进行页面跳转。这个时候，用户按下功能键 F5，就会发起最后一次的请求。 造成表单重复提交问题。解决方法：使用重定向来进行跳转

​ 二：用户正常提交服务器，但是由于网络延迟等原因，迟迟未收到服务器的响应，这个时候，用户以为提交失败， 就会着急，然后多点了几次提交操作，也会造成表单重复提交。

​ 三：用户正常提交服务器。服务器也没有延迟，但是提交完成后，用户回退浏览器。重新提交。也会造成表单重复 提交。

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

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

4. 1、导入谷歌验证码的 jar 包

​ kaptcha-2.3.2.jar

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

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

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

@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("请不要重复提交表单");
    }
}

4.5、在书城项目中使用验证码进行登录

(1)导jar包

(2)web.xml配置

(3)在pages/user/regist中修改验证码

(4)在UserServlet中添加验证码验证功能

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


        //  1、获取请求的参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String email = req.getParameter("email");
        String code = req.getParameter("code");

        User user = WebUtils.copyParamToBean(req.getParameterMap(), new User());

//
       if (token !=null&&token.equalsIgnoreCase(code)) {

//        3、检查 用户名是否可用
            if (userService.existsUsername(username)) {
                System.out.println("用户名[" + username + "]已存在!");

                // 把回显信息，保存到Request域中
                req.setAttribute("msg", "用户名已存在！！");
                req.setAttribute("username", username);
                req.setAttribute("email", email);

//        跳回注册页面
                req.getRequestDispatcher("/pages/user/regist.jsp").forward(req, resp);
            } else {
                //      可用
//                调用Sservice保存到数据库
                userService.registUser(new User(null, username, password, email));
//
//        跳到注册成功页面 regist_success.jsp
                req.getRequestDispatcher("/pages/user/regist_success.jsp").forward(req, resp);
            }
        } else {
            // 把回显信息，保存到Request域中
            req.setAttribute("msg", "验证码错误！！");
            req.setAttribute("username", username);
            req.setAttribute("email", email);

            System.out.println("验证码[" + code + "]错误");
            req.getRequestDispatcher("/pages/user/regist.jsp").forward(req, resp);
        }

    }

5、切换验证码：

即点击验证码照片会刷新出一个新的验证码

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


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