生成登录验证码,点击更换验证码图片

验证码最终效果:

在这里插入图片描述
在这里插入图片描述
直接上代码:

1、 service层代码

/*
* 生成验证码 并将验证码转化为图片的业务
* */
public class VerificationCodeService {

    public VerificationCodeService() {
    }

    // 生成验证码字符串 -- 随机数
    public String createRandomCode() {
        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";//所有随机数字符串集合
        //Random类 产生指定范围内的随机数
        Random random = new Random();

        StringBuilder sb = new StringBuilder();
        //随机截取4个字符
        for(int i =0 ;i < 4; i++){//4个随机数
            //包括开头不包括结尾 从0到str.length()-1里面随机产生一个整数
            int index = random.nextInt(str.length());//从0到str.length()不包括最后一个 右边开区间
            char randomStr = str.charAt(index);//安装随机产生的值获取字符
            sb.append(randomStr);//StringBuilder拼接字符串

        }
        return sb.toString();
    }


    //  将生成的随机字符串验证码转化为图片
    public BufferedImage changeStringToImage(String code) {
        Random rd = new Random();
        //创建一个画布
        BufferedImage image = new BufferedImage(75, 28, BufferedImage.TYPE_INT_RGB);
        //创建画笔
        Graphics g = image.getGraphics();
        //给画笔设置颜色(绘制随机验证码的时候的验证码颜色)
        g.setColor(new Color(240,240,240));  //#00000   FFFFFF
        //设置验证码的 背景色
        g.fillRect(0, 0, 75, 28);
        // 设置字体
        g.setFont(new Font("宋体",Font.BOLD,16));

        g.setColor(new Color(0,0,0));  //#00000   FFFFFF
        // g.drawString(checkCodeStr, 20, 20);
        for (int i = 0; i <4 ; i++) {
            //画字符
            g.setColor(new Color(rd.nextInt(120),rd.nextInt(120),rd.nextInt(120)));
            g.drawString(code.charAt(i)+"", 16*i + rd.nextInt(16), 15 + rd.nextInt(10) );
            if(i % 2 == 0) {//画线
                g.setColor(new Color(rd.nextInt(120), rd.nextInt(120), rd.nextInt(120)));
                g.drawLine(rd.nextInt(75), rd.nextInt(28), rd.nextInt(75), rd.nextInt(28));
            }
        }
        return image;
    }
}

2、servlet层


/* 生成验证码显示成图片的servlet */
@WebServlet("/ImageCodeSevlet")
public class ImageCodeSevlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1:创建一个验证码的业务
        VerificationCodeService vcs = new VerificationCodeService();
        //2:生产一个随机的4个字符组成的字符串
        String code =  vcs.createRandomCode();
        System.out.println(code);
        //3:将字符串转成图片
        //BufferedImage类将图片生成到内存中,然后直接发送给浏览器
        BufferedImage image =  vcs.changeStringToImage(code);
        //4:使用OutputStream写到浏览器
        System.out.println(image);
        ImageIO.write(image,"jpeg",response.getOutputStream());//参1,内存中的图片  参2,格式  参3,字节输出流
    }
}

3、界面

<html>
  <head>
    <title>登录</title>
  </head>
  <body>
      <form action="/Login/login" method="post">
        <table>
            <td>请输入验证码:<input type="text" id="imagecode" width="20px"/>
            <td><img id="image" src="ImageCodeSevlet" alt="点击刷新验证码"></td>
          </tr>
        </table>
        <input type="submit" value="登录">
      </form>
      <script type="application/javascript">
        var image = document.getElementById("image");
        /* 点击图片刷新验证码 */
        image.onclick = function(){
          image.src = "ImageCodeSevlet?time="+new Date();//加一个时间戳
        }
      </script>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_40542534/article/details/108503921