Cookie和Session-学习笔记04【Session之验证码案例】

分手后的思念是犯贱 2022-10-29 13:26 152阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [Cookie和Session-学习笔记01【Cookie\_快速入门、Cookie\_细节】][Cookie_Session-_01_Cookie_Cookie]
> 2.  [Cookie和Session-学习笔记02【Cookie案例、JSP改造Cookie案例】][Cookie_Session-_02_Cookie_JSP_Cookie]
> 3.  [Cookie和Session-学习笔记03【Session快速入门、Session细节】][Cookie_Session-_03_Session_Session]
> 4.  [Cookie和Session-学习笔记04【Session之验证码案例】][Cookie_Session-_04_Session]

**目录**

第7节 Session之验证码案例

案例\_验证码\_需求&分析

案例\_验证码\_代码实现

将验证码存入session

案例\_验证码\_细节处理

细节处理1：美化页面

细节处理2：一次性 验证码

代码总览

案例效果

代码1-login.jsp

代码2-LoginServlet.java

代码3-CookieTest.java

代码4-CheckCodeServlet.java

代码5-success.jsp

--------------------

# 第7节 Session之验证码案例 #

## 案例\_验证码\_需求&分析 ##

> 1. 案例需求：  
>     1. 访问带有验证码的登录页面login.jsp  
>     2. 用户输入用户名，密码以及验证码。  
>         \* 如果用户名和密码输入有误，跳转登录页面，提示：用户名或密码错误；  
>         \* 如果验证码输入有误，跳转登录页面，提示：验证码错误；  
>         \* 如果全部输入正确，则跳转到主页success.jsp，显示：用户名,欢迎您。  
> 2. 分析：...

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][] 登录案例

## 案例\_验证码\_代码实现 ##

### login.jsp页面效果 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

### 将验证码存入session ###

> ![20210215122557694.png][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]  ![20210215123257171.png][]  ![20210215123312191.png][]
> 
> ![20210215123330166.png][]

## 案例\_验证码\_细节处理 ##

### 细节处理1：美化页面 ###

> ![20210215123510358.png][]

### 细节处理2：一次性 验证码 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

### 代码总览 ###

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

### 案例效果 ###

> **用户名：zhangsan、密码：123**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]
> 
> ![20210215124842898.png][]

### 代码1-login.jsp ###

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>login</title>
        <script>
            window.onload = function () {
                document.getElementById("img").onclick = function () {
                    this.src = "/day16/checkCodeServlet?time=" + new Date().getTime();
                }
            }
        </script>
        <style>
            div {
                color: red;
            }
        </style>
    </head>
    <body>
        <form action="/day16/loginServlet" method="post">
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="password"></td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td><input type="text" name="checkCode"></td>
                </tr>
                <tr>
                    <td colspan="2"><img id="img" src="/day16/checkCodeServlet"></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" value="登录"></td>
                </tr>
            </table>
        </form>
        <div>
            <%=request.getAttribute("cc_error") == null ? "" : request.getAttribute("cc_error")%>
        </div>
        <div>
            <%=request.getAttribute("login_error") == null ? "" : request.getAttribute("login_error") %>
        </div>
    </body>
    </html>

### 代码2-LoginServlet.java ###

package cn.itcast.servlet;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    import java.io.IOException;
    
    @WebServlet("/loginServlet")
    public class LoginServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1.设置request编码
            request.setCharacterEncoding("utf-8");
            //2.获取参数
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            String checkCode = request.getParameter("checkCode");
            //3.先获取生成的验证码
            HttpSession session = request.getSession();
            String checkCode_session = (String) session.getAttribute("checkCode_session");
            //删除session中存储的验证码
            session.removeAttribute("checkCode_session");
            //3.先判断验证码是否正确
            if (checkCode_session != null && checkCode_session.equalsIgnoreCase(checkCode)) {
                //忽略大小写进行比较
                //验证码正确
                //判断用户名和密码是否一致
                if ("zhangsan".equals(username) && "123".equals(password)) {//需要调用UserDao查询数据库
                    //登录成功
                    //存储信息，用户信息
                    session.setAttribute("user", username);
                    //重定向到success.jsp
                    response.sendRedirect(request.getContextPath() + "/success.jsp");
                } else {
                    //登录失败
                    //存储提示信息到request
                    request.setAttribute("login_error", "用户名或密码错误");
                    //转发到登录页面
                    request.getRequestDispatcher("/login.jsp").forward(request, response);
                }
            } else {
                //验证码不一致
                //存储提示信息到request
                request.setAttribute("cc_error", "验证码错误");
                //转发到登录页面
                request.getRequestDispatcher("/login.jsp").forward(request, response);
            }
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }

### 代码3-CookieTest.java ###

package cn.itcast.cookie;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.Cookie;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.net.URLDecoder;
    import java.net.URLEncoder;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    
    /**
     * 在服务器中的Servlet判断是否有一个名为lastTime的cookie
     * 1. 有：不是第一次访问
         * 1. 响应数据：欢迎回来，您上次访问时间为:2018年6月10日11:50:20
         * 2. 写回Cookie：lastTime=2018年6月10日11:50:01
     * 2. 没有：是第一次访问
         * 1. 响应数据：您好，欢迎您首次访问
         * 2. 写回Cookie：lastTime=2018年6月10日11:50:01
     */
    
    @WebServlet("/cookieTest")
    public class CookieTest extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //设置响应的消息体的数据格式以及编码
            response.setContentType("text/html;charset=utf-8");
            //1.获取所有Cookie
            Cookie[] cookies = request.getCookies();
            boolean flag = false;//没有cookie为lastTime
            //2.遍历cookie数组
            if (cookies != null && cookies.length > 0) {
                for (Cookie cookie : cookies) {
                    //3.获取cookie的名称
                    String name = cookie.getName();
                    //4.判断名称是否是：lastTime
                    if ("lastTime".equals(name)) {
                        //有该Cookie，不是第一次访问
                        flag = true;//有lastTime的cookie
                        //设置Cookie的value
                        //获取当前时间的字符串，重新设置Cookie的值，重新发送cookie
                        Date date = new Date();
                        SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
                        String str_date = sdf.format(date);
                        System.out.println("编码前：" + str_date);
                        //URL编码
                        str_date = URLEncoder.encode(str_date, "utf-8");
                        System.out.println("编码后：" + str_date);
                        cookie.setValue(str_date);
                        //设置cookie的存活时间
                        cookie.setMaxAge(60 * 60 * 24 * 30);//一个月
                        response.addCookie(cookie);
                        //响应数据
                        //获取Cookie的value，时间
                        String value = cookie.getValue();
                        System.out.println("解码前：" + value);
                        //URL解码：
                        value = URLDecoder.decode(value, "utf-8");
                        System.out.println("解码后：" + value);
                        response.getWriter().write("<h1>欢迎回来，您上次访问时间为:" + value + "！</h1>");
                        break;
                    }
                }
            }
            if (cookies == null || cookies.length == 0 || flag == false) {
                //没有，第一次访问
                //设置Cookie的value
                //获取当前时间的字符串，重新设置Cookie的值，重新发送cookie
                Date date = new Date();
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
                String str_date = sdf.format(date);
                System.out.println("编码前：" + str_date);
                //URL编码
                str_date = URLEncoder.encode(str_date, "utf-8");
                System.out.println("编码后：" + str_date);
                Cookie cookie = new Cookie("lastTime", str_date);
                //设置cookie的存活时间
                cookie.setMaxAge(60 * 60 * 24 * 30);//一个月
                response.addCookie(cookie);
                response.getWriter().write("<h1>您好，欢迎您首次访问！</h1>");
            }
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }

### 代码4-CheckCodeServlet.java ###

package cn.itcast.servlet;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.awt.*;
    import java.awt.image.BufferedImage;
    import java.io.IOException;
    import java.util.Random;
    
    @WebServlet("/checkCodeServlet")
    public class CheckCodeServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            int width = 100;
            int height = 50;
            //1.创建一对象，在内存中图片(验证码图片对象)
            BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            //2.美化图片
            //2.1 填充背景色
            Graphics g = image.getGraphics();//画笔对象
            g.setColor(Color.PINK);//设置画笔颜色
            g.fillRect(0, 0, width, height);
            //2.2画边框
            g.setColor(Color.BLUE);
            g.drawRect(0, 0, width - 1, height - 1);
            String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";
            //生成随机角标
            Random ran = new Random();
            StringBuilder sb = new StringBuilder();
            for (int i = 1; i <= 4; i++) {
                int index = ran.nextInt(str.length());
                //获取字符
                char ch = str.charAt(index);//随机字符
                sb.append(ch);
                //2.3写验证码
                g.drawString(ch + "", width / 5 * i, height / 2);
            }
            String checkCode_session = sb.toString();
            //将验证码存入session
            request.getSession().setAttribute("checkCode_session", checkCode_session);
            //2.4画干扰线
            g.setColor(Color.GREEN);
            //随机生成坐标点
            for (int i = 0; i < 10; i++) {
                int x1 = ran.nextInt(width);
                int x2 = ran.nextInt(width);
                int y1 = ran.nextInt(height);
                int y2 = ran.nextInt(height);
                g.drawLine(x1, y1, x2, y2);
            }
            //3.将图片输出到页面展示
            ImageIO.write(image, "jpg", response.getOutputStream());
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request, response);
        }
    }

### 代码5-success.jsp ###

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <h1><%=request.getSession().getAttribute("user")%>,欢迎您</h1>
    </body>
    </html>

> 加油~   ヾ(◍°∇°◍)ﾉﾞ

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[Cookie_Session-_01_Cookie_Cookie]: https://blog.csdn.net/weixin_44949135/article/details/113808721
[Cookie_Session-_02_Cookie_JSP_Cookie]: https://blog.csdn.net/weixin_44949135/article/details/113810551
[Cookie_Session-_03_Session_Session]: https://blog.csdn.net/weixin_44949135/article/details/113814152
[Cookie_Session-_04_Session]: https://blog.csdn.net/weixin_44949135/article/details/113815003
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/37263fb9c35e45d0ae732a72ea3c9922.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/863839b999d341c2bababc4d91cb213a.png
[20210215122557694.png]: /images/20221024/6ab245ed7a8448fcacd8ba5b3da24310.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/85044e9e68ec41e7a75c2914197c1889.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210215123205683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210215123257171.png]: https://img-blog.csdnimg.cn/20210215123257171.png
[20210215123312191.png]: /images/20221024/89c7b51921b7444b996bd40b02cadccf.png
[20210215123330166.png]: /images/20221024/e6f9dab1dea7433ba6803c2b8076538f.png
[20210215123510358.png]: /images/20221024/357afbd4a1704cd9b98c102833f5caca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/5547e105e8534923ac65f3188b8026bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/ee878b85907548e581479762105e5f69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/1ea6394b5bf449268684222cdbe27a5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/d483536a6ccd489cb43a7b56f5cedc77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/8b763af0f8cb4002b14ba88de8ff4ed1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/d24d0991cf404dfaaa20097c569764c0.png
[20210215124842898.png]: /images/20221024/da662776287e4196986bbd07df68ea08.png