验证码--代码

ANnianStriver

已于 2022-06-20 11:02:59 修改

阅读量1.6k

点赞数 2

分类专栏： JavaWeb 文章标签： java eureka webview

于 2022-06-20 11:01:18 首次发布

本文链接：https://blog.csdn.net/AN_NI_112/article/details/125367844

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

采用servlet+html+js

在进行之前要先导入好自己需要的pom依赖

没有这个依赖无法使用servlet(在原生javaweb开发时导入jar包)

    <!--servlet依赖-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
        </dependency>

这个直接采用注解@WebServlet，简化了web.xml的配置文件编写，提高了开发效率。

1、首先编写主要代码

@WebServlet("/CheckCode")
public class CheckCodeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }

    @Override
    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_BGR);

        // 2.美化图片
        // 2.1填充背景色
        Graphics g = image.getGraphics();// 画笔对象
        g.setColor(Color.pink);// 设置背景颜色
        g.fillRect(0,0,width,height);

        // 2.2画边框
        g.setColor(Color.BLUE);// 设置边框颜色
        g.drawRect(0,0,width - 1,height - 1);

        String str = "ABCDEFGHIJKLMNOPRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        // 生成随机角标
        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.BLACK);
        // 随机生成坐标点
        for (int i = 0; i < 10; 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());

    }
}

2、然后我们配置tomact

（基于原生的javaweb开发，这里还是使用的外入tomcat，在现在的先进开发技术当中，通过框架springboot内嵌tomcat【或者自己定义undertow服务器，引入pom进行开发】）

启动tomcat，输入接口/CheckCode

3、接着编写html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
    <script>
        /*
        分析:
            点击超链接，需要换一张
            1.给超链接和图片绑定单击事件
            2.重新设置图片的src属性值

         */
        window.onload = function (){
            // 1.获取图片对象
            let image = document.getElementById("checkCode");
            // 2.绑定单击事件
            image.onclick = function (){
                // 加时间错
                var date = new Date().getTime();
                image.src = "/day15/CheckCode?"+date;
            }

            // 3.获取超链接对象
            let a = document.getElementById("change");
            a.onclick = image.onclick;

        }
    </script>
</head>
<body>
    <img src="/day15/CheckCode" id="checkCode">
    <a id="change" href="#">看不清换一张</a>
</body>
</html>