自制简单的验证码功能

考虑：写出一个验证码，首先要了解他的本质和目的，以及怎么实现；

首先验证码的本质就是图片；

目的：当然是防止恶意表单注册，导致数据库崩溃

我们可以考虑到的两种做法：1.在数据库中加入多张图片，随机出图

2.自制一个能随机生成数字，和一些干扰因素的图片

因为数据库中存入大量数据必然会导致其性能下降，且图片有限。所以第二种更安全一点。

①在Servlet中填入我们设计的图片代码

@WebServlet("/check")
public class CheckCodeServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.创建一个对象，在内存中设置图片（验证码图片对象）
        BufferedImage image = new BufferedImage(100, 50, BufferedImage.TYPE_INT_RGB);
        //2.美化图片
        //2.1填充背景色
        Graphics g = image.getGraphics();//画笔对象
        g.setColor(Color.CYAN);
        g.fillRect(0, 0, 100, 50);//也可设置int width=100,height=50;
        //2.2画边框
        g.setColor(Color.BLACK);
        g.drawRect(0, 0, 99, 49);

        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        //生成随机角标
        Random ran = new Random();
        for (int i = 1; i <= 5; i++) {
            int index = ran.nextInt(str.length());
            //获取字符
            char ch = str.charAt(index);//随机字符
            //2.3写验证码
            g.drawString(ch + "", 20 * i, 30);
        }
        for (int i = 1; i <= 8; i++) {

            //2.4画干扰线
            g.setColor(Color.RED);
            //随机生成坐标点
            int x1 = ran.nextInt(100);
            int x2 = ran.nextInt(100);
            int y1 = ran.nextInt(100);
            int y2 = ran.nextInt(100);
            g.drawLine(x1, x2, y1, y2);
        }


        //3.将图片输出到页面展示
        ImageIO.write(image, "jpg", resp.getOutputStream());
    }
}

②配合表单，实现图片的切换，以便更好的与用户交互

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function(){
            //1.获取图片对象
            var img = document.getElementById("checkCode");
            //2.绑定单击实践
            img.onclick = function () {
                //加时间戳（这个图片的路径和下面img路径一样，浏览器会缓存，因此需要改变此处地址，而加时间戳永远不会重复
                // 随机数也有可能重复）
            var date = new Date().getTime();
                // img.src="/check?"+Date;自己发现加个问号可以实现，点超链接可以自如更换，但点击图片时还是会出现bug，不能点两次
              img.src="/check?"+date;
            }
        }
    </script>
</head>
<body>
<input type="text">
<img id="checkCode" src="/check" ><br/>
<a id="change" href="">看不清，换一张</a>

</body>
</html>

实现后的效果

自制简单的验证码功能

推荐阅读