Java验证码初使用

咸鱼不咸鱼

已于 2023-04-13 20:29:17 修改

阅读量65

点赞数 1

分类专栏： Java 文章标签： java servlet 开发语言

于 2023-04-12 21:29:59 首次发布

本文链接：https://blog.csdn.net/weixin_53903929/article/details/130117158

版权

Java 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

验证码初识

为什么需要验证码？

验证码的本质是图片，目的是为了防止恶意表单注册

实现步骤

创建对象，在内存中图片(验证码图片对象)
美化图片
将图片输出到页面展示

代码实现

@WebServlet("/checkCodServlet")
public class CheckCodServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        /*
            实现步骤:
            1.创建对象，在内存中图片(验证码图片对象)
            2.美化图片
            3.将图片输出到页面展示
         */
        int width = 100;
        int height = 50;
        //1.创建对象，在内存中图片(验证码图片对象)
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        /*
            2.美化图片
                2.1 填充背景颜色
                2.2 话边框
                2.3 写验证码
                2.4 画干扰线
         */
        Graphics graphics = image.getGraphics();// 画笔对象
        graphics.setColor(Color.pink);// 设置画笔颜色
        graphics.fillRect(0,0,width,height);// 0,0坐标点 左上角开始 rect:矩形

        graphics.setColor(Color.blue);
        graphics.drawRect(0,0,width-1,height-1);

        String str = "ABCDEFGHIJKLMNOPQSTUVWXYZabcefghijklmnopqstuvwxyz0123456789";// 验证码字符串
        // 生成随机角标
        Random random = new Random();
        // 生成4个
        for (int i = 1; i <= 4 ; i++) {
            int index = random.nextInt(str.length());
            // 获取字符
            char ch = str.charAt(index);
            graphics.drawString(ch+"",width/5*i,height/2);
        }
        // 干扰线
        graphics.setColor(Color.green);
        // 随机生成坐标点
        // 生成10个
        for (int i = 0; i < 10; i++) {
            int x1 = random.nextInt(width);
            int x2 = random.nextInt(width);
            int y1 = random.nextInt(height);
            int y2 = random.nextInt(height);
            graphics.drawLine(x1,y1,x2,y2);
        }
        /*
            参数一:图片对象
            参数二:后缀名，输出到页面或文件中使用
            参数三:输出流
         */
        //3.将图片输出到页面展示
        ImageIO.write(image,"jpg",resp.getOutputStream());
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

测试

在这里插入图片描述

实现验证码切换

分析

点击超链接或者图片，需要换一张

步骤

给超链接和图片绑定单击事件
重新设置图片的src属性值

代码示例

测试一：实现不了切换的功能，因为浏览器中存在缓存，一直是第一次运行的结果，故想要每一次都有切换的效果，引入时间戳。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script>
    // 页面加载完成之后获取
    window.onload = function() {
      // 1. 获取图片对象
      var img = document.getElementById("checkCode");
      // 2. 绑定点击事件
      img.onclick = function () {
          img.src = "checkCodServlet";
      }
    }
  </script>
  <body>
    <img id="checkCode" src="checkCodServlet">
    <a id="change" href="">看不清换一张</a>
  </body>
</html>

测试二：加入时间戳

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script>
    // 页面加载完成之后获取
    window.onload = function() {
      // 1. 获取图片对象
      var img = document.getElementById("checkCode");
      // 2. 绑定点击事件
      img.onclick = function () {
          var date = new Date().getTime();
          img.src = "checkCodServlet?"+date;
      }
    }
  </script>
  <body>
    <img id="checkCode" src="checkCodServlet">
    <a id="change" href="">看不清换一张</a>
  </body>
</html>

测试三：给超链接加点击事件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script>
    // 页面加载完成之后获取
    window.onload = function() {
      // 1. 获取图片对象
      var img = document.getElementById("checkCode");
      // 2. 绑定点击事件
      img.onclick = function () {
          let date = new Date().getTime();
          img.src = "checkCodServlet?"+date;
      }
      var aImg = document.getElementById("change");
      aImg.onclick = function () {
        let date = new Date().getTime();
        img.src = "checkCodServlet?"+date;
      }
    }
  </script>
  <body>
    <img id="checkCode" src="checkCodServlet">
    <%--javascript:void(0):取消超链接效果--%>
    <a id="change" href="javascript:void(0)">看不清换一张</a>
  </body>
</html>