java编写一个漂亮的验证码

淩亂°似流年 2022-02-19 05:52 280阅读 0赞

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvb2tpZXhpYW9NdV9h_size_16_color_FFFFFF_t_70]

PicCodeServlet .java代码：

/** 验证码 */
    @WebServlet(name = "PicCodeServlet", urlPatterns = "/code")
    public class PicCodeServlet extends HttpServlet { 
    
        private Random random = new Random();
    
        /** 写一个方法随机获取颜色 */
        private Color getRandomColor() { 
            //随机生成0-255之间整数
            int red = random.nextInt(256);
            int green = random.nextInt(256);
            int blue = random.nextInt(256);
            //参数：红，绿，蓝 (0-255)
            return new Color(red, green, blue);
        }
    
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            // 1. 创建缓存图片：指定宽
            int width = 90, height = 30;
            //参数：宽，高，图片模式
            BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            // 2. 获取画笔对象
            Graphics graphics = img.getGraphics();
            // 3. 设置画笔颜色
            graphics.setColor(Color.WHITE);
            // 4. 填充矩形区域
            graphics.fillRect(0, 0, width, height);
            // 5. 从字符数组中随机得到字符
            char[] arr = { 'A', 'B', 'C', 'D', 'N', 'E', 'W', 'b', 'o', 'y','l','c','q',
                    '0', '1', '2', '3', '4', '5', '6','7','8','9'};
            // 6. 循环4次，画4个字符
            for (int i = 0; i < 4; i++) { 
                int index = random.nextInt(arr.length);
                char c = arr[index];  //随机得到一个字符
                // 7. 设置字的颜色为随机
                graphics.setColor(getRandomColor());
                // 8. 设置字体，大小为18。参数：字体，样式，大小
                graphics.setFont(new Font(Font.DIALOG, Font.BOLD + Font.ITALIC, 19));
                // 9. 将每个字符画到图片，x增加，y不变。
                //参数：画字符，x位置，y位置。把c从字符转成字符串
                graphics.drawString(String.valueOf(c), 10 + (i * 20), 20);
            }
            for (int i = 0; i < 8; i++) { 
                // 10. 线的位置是随机的，x范围在width之中，y的范围在height之中。
                int x1 = random.nextInt(width);
                int y1 = random.nextInt(height);
                int x2 = random.nextInt(width);
                int y2 = random.nextInt(height);
                // 11. 画8条干扰线，每条线的颜色不同
                graphics.setColor(getRandomColor());
                graphics.drawLine(x1, y1, x2, y2);
            }
            // 12. 将缓存的图片输出到响应输出流中
            //参数：图片对象，图片格式，输出流
            ImageIO.write(img, "jpg", response.getOutputStream());
    
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
            this.doPost(request, response);
        }
    }

<!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>登录页面</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
      </head>
      <body>
        <div class="container" style="max-width:400px">
    	    <h3 style="text-align: center">用户登录</h3>
    	    <form action="login" method="post" >
    	    	<div class="form-group">
    	    		<label for="name">用户名：</label>
    	    		<input type="text" name="name" class="form-control" id="name" placeholder="请输入用户名">
    	    	</div>
    	    	<div class="form-group">
    	    		<label for="password">密码：</label>
    	    		<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
    	    	</div>
    			<div class="form-inline">
    	    		<label for="vcode">验证码：</label>
    	    		<input type="text" name="vcode" class="form-control" id="vcode" placeholder="验证码" style="width: 70px" maxlength="4"/> 
                    
    				<img src="code" style="width: 90px; height: 30px; cursor: pointer;" title="看不清，点击刷新" id="picCode">
                    <script type="text/javascript"> //图片的点击事件 document.getElementById("picCode").onclick = function () { this.src = "code?n=" + new Date().getTime(); //从服务器再次读取验证码 }; </script>
    	    	</div>
    	    	<div style="text-align: center; padding-top: 20px;">
    		    	<input type="submit" value=" 登 录 " class="btn btn-primary"/>
    	    	</div>
    	    </form>
    	    </div>
      </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Jvb2tpZXhpYW9NdV9h_size_16_color_FFFFFF_t_70]: /images/20220219/d865d58566084ccd8f872fe6a0e5a45e.png