综合练习：验证码案例（1）总体设计

文章目录

综合练习：验证码案例（1）总体设计
- 观前提醒：
1.验证码介绍：
[2. Hutool工具介绍](#2. Hutool工具介绍)
- [引入 hutool包工具，我们使用 maven ，添加依赖：](#引入 hutool包工具，我们使用 maven ，添加依赖：)
- [使用 hutool工具，随机生成验证码代码：](#使用 hutool工具，随机生成验证码代码：)
[3. 验证码代码编写：](#3. 验证码代码编写：)
- [3.1 预期效果 & 准备工作：](#3.1 预期效果 & 准备工作：)
- [3.2 定义接口（接口文档描述）：](#3.2 定义接口（接口文档描述）：)
- - 第一个接口：生成验证码：
  - 第二个接口：检验验证码是否正确：
- [3.3 后端代码：](#3.3 后端代码：)
- [3.4 测试接口：](#3.4 测试接口：)
- - 第一个接口：生成验证码：
  - 第二个接口：检验验证码是否正确：
[4. 前端代码](#4. 前端代码)
[5. 运行效果：](#5. 运行效果：)
[6. 前端图形工具：bootstrap](#6. 前端图形工具：bootstrap)
[7. 总结：](#7. 总结：)

观前提醒：

这篇博客的代码，从我的 gitee 上可以下载：
https://gitee.com/mrbgvhbhjv/java-ee-course/tree/master/后端代码/review_captcha_20251031

1.验证码介绍：

验证码：随机字符 + 干扰信息。

随机字符：

数字 0~9
字母 a~z A~Z
汉字

随机字符，可以放在数组里，如果要用，随机拿出来四个，五个，就可以了。

生成验证码的代码，在 github 上，有很多开源的，gitee上也有，直接去搜索就行。

2. Hutool工具介绍

Hutool 核心资源汇总：

Hutool 官网：https://hutool.cn/

Hutool 参考文档：https://hutool.cn/docs/#/

Hutool 源码：https://github.com/dromara/hutool

引入 hutool包工具，我们使用 maven ，添加依赖：

依赖代码：

java 复制代码

        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-captcha</artifactId>
            <version>5.8.36</version>
        </dependency>

使用 hutool工具，随机生成验证码代码：

这是个示例，验证码还需要进行校验才行。

3. 验证码代码编写：

学会如何使用 hutool 工具之后，开始代码的编写。

3.1 预期效果 & 准备工作：

预期效果：

准备工作：

将我设计好的前端代码（static包），下载下来，放到 Springboot项目中的 resource文件下。

3.2 定义接口（接口文档描述）：

通过分析，我们需要设计两个接口：

生成验证码图片，返回验证码图片给前端
校验验证码是否正确

接口文档描述：

第一个接口：生成验证码：

第二个接口：检验验证码是否正确：

3.3 后端代码：

由于这块内容，需要讲解的东西，比较多，放到另一篇博客中：
综合练习：验证码案例（2）后端代码

3.4 测试接口：

第一个接口：生成验证码：

第二个接口：检验验证码是否正确：

输入 check方法的参数。

4. 前端代码

前端代码，后端开发不用关心怎么写的，能看懂就行。

所以，前端代码不做任何解释。

想知道前端代码的原理的，可以问 ai。

index.html 代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />


    <title>验证码</title>
    <style>
        #inputCaptcha {
            height: 30px;
            vertical-align: middle;
        }
        
        #verificationCodeImg {
            vertical-align: middle;
        }
        
        #checkCaptcha {
            height: 40px;
            width: 100px;
        }
    </style>
</head>

<body>
    <h1>输入验证码</h1>
    <div id="confirm">
        <input type="text" name="inputCaptcha" id="inputCaptcha">
        <img id="verificationCodeImg" src="/captcha/getcaptcha" style="cursor: pointer;" title="看不清？换一张" />
        <input type="button" value="提交" id="checkCaptcha">
    </div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $("#verificationCodeImg").click(function() {
            $(this).hide().attr('src', '/captcha/getcaptcha?dt=' + new Date().getTime()).fadeIn();
        });

        $("#checkCaptcha").click(function() {
            $.ajax({
                url: "/captcha/check",
                type: "post",
                data: {
                    lineCaptcha: $("#inputCaptcha").val()
                },
                success: function(result) {
                    if (result) {
                        location.href = "success.html";
                    } else {
                        alert("验证码错误，请重新输入。");
                    }
                }
            });
        });
    </script>
</body>

</html>