java编写一个漂亮的验证码-蒲公英云

java编写一个漂亮的验证码

效果：
在这里插入图片描述

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"/> 
                <!--code是servlet的访问地址-->
                <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>