验证码登录案例

<div class="container text-center">
    <form class="form-signin" action="/loginCheckCodeServlet" method="post">
        <h2 class="form-signin-heading">登录页面</h2>
        <input type="text"  name="username" class="form-control" placeholder="用户名" required autofocus>
        <input type="password"  name="password" class="form-control" placeholder="密码" required>
        验证码<input   style="width:130px;font-size:20px; margin-bottom: 15px;" type="text" name="code">
        <!--页面一加载就向checkCodeServlet发送请求-->
        <img src="/checkCodeServlet" alt="验证码" style="cosor:pointer"
        onclick = "changeCheckCode(this);"><br/>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
    </form>
    <script type="text/javascript">
        //自定义函数向checkedcodeServlet发送雁阵吗图片
            function changeCheckCode(obj) {
                //alert(1111);
                obj.src="/checkCodeServlet?"+new Date().getTime();
                //new().getTime()表示将系统时间变为毫秒值
            }
    </script>
</div>

package com.itheima.sh.web;

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;

/**
 *01创建一个可以存放图片的缓冲区BufferedImage作为画布;
 * 02通过画布获取到针对这个画布的画笔
 * 03:修改画布的背景颜色为白色
 * 04;设置画布的边框,画布的时候需要注意下,如果这里画布宽width和高height,就会超出画布就会看不见,所以
 * width和height分别为-1
 * 05:创建一个获取随机数的对象;
 * 06给画布上写数据
 * 07给画布是哪个画干扰线
 * 08:需要把画布中的内容给浏览器:
 */
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //定义一个画布的框和高
        int width = 120;
        int height = 30;
        //创建一个可以放图片的缓冲区,作为画布
        //bufferedImg.Type_Int_Rgb表示生成图片的类型
        BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);
        //通过画布获取针对这个画布的画笔
        Graphics g = bi.getGraphics();
        //修改画布的背景颜色,每次画笔的时候都给画指定颜色
        g.fillRect(0,0,width,height);
        //设置画布的边框
        //给画笔指定颜色
        g.setColor(Color.RED);
        //给画布画边框,如果这里写width height 就会超过画布,因为边框也会占用一个像素
        //.所以这里的宽度和高度都是-1
        g.drawRect(0,0,width-1,height-1);
        //创建一个获取随机数对象
        Random r = new Random();
        //给画布上画干扰线
        //循环控制画多条线
        for (int i = 0; i <5 ; i++) {
            g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
            //向画布上画干扰线
            g.drawLine(r.nextInt(width),r.nextInt(height),r.nextInt(width),r.nextInt(height));
        }
        //定义数据准备向画布中写数据
        String data = "abcdefghigklmnpqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ123456789";
        //创建字符串缓冲区
        StringBuilder sb= new StringBuilder();
        //循环控制画的四个字符
        for (int i = 0; i <4 ; i++) {
            //设置画笔的颜色,Color.Blue在这里固定了,值能设置蓝色,我们可以让颜色随机变化
            g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
            //设置字体font.ITALIE表示斜体
            g.setFont(new Font("宋体",Font.ITALIC,20));
            //给画布上写内容20表示x轴位置开始书写,25表示y轴书写的位置
            //g.drawString("哈哈哈哈",20,25)
            //data.charAt(0表示根据函数的参数进行查找字符
            //date.length()表示字符串的长度
            //r.nextInt()表示随机数,但是随机数的范围子啊0-date字符质安监的长度
            String  str  = data.charAt(r.nextInt(data.length()))+"";
            g.drawString(str,20*i,25);
            //将验证码内容拼接到字符串缓冲区中
            sb.append(str);
        }
        //验证码保存到session中
        request.getSession().setAttribute("checkcode",sb.toString());
        //将生成的验证码图片相应给浏览器
        ImageIO.write(bi,"JPG",response.getOutputStream());
    }
}