简单验证码生成（基于HTML+Servlet）

叁歲伎倆 2023-10-07 11:14 37阅读 0赞

#### 目录 ####

*   *  1.需求介绍
     *  2.代码实现
     *  3.运行结果

### 1.需求介绍 ###

本文是一个 基于Servlet+HTML实现的简单的验证码生成案例 ，高级的验证码也都是通过基础的验证码实现上改进过来的，此案例可帮助了解生成验证码的原理。

### 2.代码实现 ###

**Servlet代码**

package com.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.YELLOW);//画笔颜色
            g.fillRect(0,0,width,height);
    
            //2.2画边框
            g.setColor(Color.RED);
            g.drawRect(0,0,width-1,height-1);
    
            String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            //创建随机数
            Random ran = new Random();
    
            for (int i = 1; i <=4 ; i++) {
        
                int index = ran.nextInt(str.length());
                //获取字符
                char ch = str.charAt(index);//随机字符
    
                //2.3写验证码
                g.drawString(ch+"",width/5*i,height/2);
    
    
            }
            //2.4画干扰线
            g.setColor(Color.GREEN);
            //生成随机坐标点
            for (int i = 1; i <=5 ; 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);
        }
    }

**HTML代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>验证码</title>
    </head>
    <script>
        window.onload = function () {
         
            //1.获取图片对象
            var img = document.getElementById("checkCode");
            //2.绑定单击事件
            img.onclick = function () {
         
             //加时间戳
            var date = new Date().getTime();
            img.src = "/day04/checkCodeServlet?"+date;//保证验证码每次访问都会刷新
        }
        }
    
    </script>
    <body>
    
        <img id="checkCode" src="/day04/checkCodeServlet" />
        <a id="change" href="">看不清换一张</a>
    
    </body>
    </html>

### 3.运行结果 ###

**每次点击图片都会自动切换另一张验证码**  
![在这里插入图片描述][20200317115449209.png]

![在这里插入图片描述][20200317115458380.png]

[20200317115449209.png]: https://img-blog.csdnimg.cn/20200317115449209.png
[20200317115458380.png]: https://img-blog.csdnimg.cn/20200317115458380.png