Java EE 进阶：6.SpringBoot 配置文件（第二弹）

CoderYanger2026-11-03 10:28

目录

6.综合性练习

[6.1 验证码案例](#6.1 验证码案例)

[6.1.1 需求](#6.1.1 需求)

[6.1.2 准备工作](#6.1.2 准备工作)

[6.1.3 约定前后端交互接口](#6.1.3 约定前后端交互接口)

需求分析

接口定义

1.生成验证码

2.校验验证码是否正确

[6.1.4 Hutool工具介绍](#6.1.4 Hutool工具介绍)

[6.1.5 实现服务端代码](#6.1.5 实现服务端代码)

1.引入依赖

2.实现验证码

测试环节

3.校验验证码

[6.1.6 调整前端页面代码](#6.1.6 调整前端页面代码)

[6.1.7 运行测试](#6.1.7 运行测试)

小结

7.总结（课件内容）

8.代码分享

书接上文：Java EE 进阶：6.SpringBoot 配置文件（第一弹）~~

6.综合性练习

6.1 验证码案例

随着安全性的要求越来越高, 目前项目中很多都使用了验证码, 验证码的形式也是多种多样, 更复杂的图形验证码和行为验证码已经成为了更流行的趋势.

验证码其实并不难，像上面的验证码就是：验证码=字符串＋干扰元素

字符串：0~9、a~z、A~Z、汉字......

干扰元素：x 轴 y 轴 任意两点之间随便连个直线、曲线、圆形......

像下面这些验证码更是简单，搞个图片集，在 x 轴上就可以操作完成👇

验证码的实现方式很多, 可以前端实现, 也可以后端实现. 网上也有比较多的插件或者工具包可以使用,咱们选择使用 Hutool 提供的小工具来实现

而且现在前后端也不怎么去写验证码了，因为现在验证码都是开源的了，人家都写好了，咱们直接拿来调用就行了~~

比如：https://gitee.com/LongbowEnterprise/SliderCaptcha#http://longbowenterprise.gitee.io/slidercaptcha/

我们这里就主要是 Hutool 去弄了：简介 | Hutool

6.1.1 需求

界面如下图所示

  1. 页面生成验证码

  2. 输入验证码, 点击提交, 验证用户输入验证码是否正确, 正确则进行页面跳转

6.1.2 准备工作

创建项目，引入 SpringMVC 的依赖包，把前端页面放在项目中（课件中提供）

码云地址：JavaEE进阶课程资料包

此时我们运行程序发现页面是这样的👇

6.1.3 约定前后端交互接口

需求分析

后端需要提供两个服务

  1. 生成验证码, 并返回验证码

  2. 校验验证码是否正确

接口定义
1.生成验证码

请求:

java 复制代码 
请求URL: /captcha/getCaptcha

响应: 验证码图片内容

浏览器给服务器发送一个 /captcha/getCaptcha 这样的请求, 服务器返回一个图片, 浏览器显
示在页面上

2.校验验证码是否正确

请求: /captcha/check

java 复制代码 
请求URL: /captcha/check
请求参数: captcha=xn8d

captcha : 用户输入的验证码

响应:

java 复制代码 
true

根据用户输入的验证码, 校验验证码是否正确. true: 验证成功. false: 验证失败.

6.1.4 Hutool工具介绍

咱们课程中验证码的实现, 使用Hutool提供的小工具来实现

Hutool是一个Java工具包类库，对文件、流、加密解密、转码、正则、线程、XML等JDK方法进行封装，组成各种Util工具类.

Hutool是一个小而全的Java工具类库，通过静态方法封装，降低相关API的学习成本，提高工作效率，使Java拥有函数式语言般的优雅，让Java语言也可以"甜甜的".

Hutool官网: Hutool🍬一个功能丰富且易用的Java工具库，涵盖了字符串、数字、集合、编码、日期、文件、IO、加密、数据库JDBC、JSON、HTTP客户端等功能。

Hutool参考文档: Hutool参考文档

Hutool源码: GitHub - chinabugotech/hutool: 🍬A set of tools that keep Java sweet. · GitHub

6.1.5 实现服务端代码

1.引入依赖
XML 复制代码 
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-captcha</artifactId>
    <version>5.8.22</version>
</dependency>

然后把 hutool-http 改为 hutool-captcha👇

注意：这里一开始没引入版本的时候是报错的，博主这里引入版本号之后又删下去了才不报错~~

接下来需要给它版本号，因为这个并没有被 SpringBoot 集成，所以版本号需要我们去写，但是我们并不知道版本号是啥，这时候就需要去 Maven 仓库中去查了

当然，我们也可以在 API 这里直接看到👇

可以看到版本号是 5.8.48👇

加入版本号，依赖就引入完成了👇

2.实现验证码
测试环节

直接使用它的代码进行测试👇

根据API生成验证码, 并进行测试

java 复制代码 
package com.bit.captcha;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: CoderYanger
 * Date: 2026-11-01
 * Time: 16:10
 */
public class CaptchaTest {
    public static void main(String[] args) {
        //定义图形验证码的长和宽
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);

//图形验证码写出，可以写出到文件，也可以写出到流
        lineCaptcha.write("d:/line.png");
    }
}

运行成功👇

这时我们根据它的输出路径，在 D 盘中就能找到刚刚生成的图片👇

这就生成完毕了，用起来非常简单~~

当然，我们也可以获取到它的 code👇

我们改为 打印👇

java 复制代码 
public class CaptchaTest {
    public static void main(String[] args) {
        //定义图形验证码的长和宽
        LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);

//图形验证码写出，可以写出到文件，也可以写出到流
        lineCaptcha.write("d:/line.png");
        //输出code
        System.out.println(lineCaptcha.getCode());
    }
}

再生成一次👇

验证码项目演示-写到浏览器中

上述视频中生成的验证码对于前端页面有点大，我们适当调整一下👇

java 复制代码 
ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(100, 50);

但是这就属于硬编码了，不太方便，我们接下来尝试将其放到配置文件中~~

验证码配置项对应的Java对象👇

java 复制代码 
package com.bit.captcha.model;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: CoderYanger
 * Date: 2026-11-01
 * Time: 17:29
 */
@ConfigurationProperties(prefix = "captcha")
@Configuration
@Data
public class CaptchaProperties {
    private Integer width;
    private Integer height;
}

配置文件👇

java 复制代码 
#spring.application.name=spring-captcha-demo
#将上面 properties 文件中的默认内容自行转成下面的
spring:
  application:
    name: spring-captcha-demo
captcha:
  width: 100
  height: 50

调整Controller代码👇

java 复制代码 
package com.bit.captcha.controller;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import com.bit.captcha.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;


/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: CoderYanger
 * Date: 2026-11-01
 * Time: 16:58
 */
@RequestMapping("/captcha")
@RestController
public class CaptchaController {
    @Autowired//把配置文件的内容注入进来
    private CaptchaProperties captchaProperties;

    @RequestMapping("/getCaptcha")
    public void getCaptcha(HttpServletResponse response){
        try {
            //生成验证码
            ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(captchaProperties.getWidth(),captchaProperties.getHeight());
            //此时我们想把生成的验证码写到浏览器中，需要 response
            captcha.write(response.getOutputStream());
        } catch (IOException e) {
            throw new RuntimeException(e);
        }//我们此时来运行试试效果~~
    }
}
3.校验验证码
java 复制代码 
package com.bit.captcha.controller;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import com.bit.captcha.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;


/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: CoderYanger
 * Date: 2026-11-01
 * Time: 16:58
 */
@RequestMapping("/captcha")
@RestController
public class CaptchaController {
    @Autowired//把配置文件的内容注入进来
    private CaptchaProperties captchaProperties;

    private String code;
    @RequestMapping("/getCaptcha")
    public void getCaptcha(HttpServletResponse response){
        try {
            //生成验证码
            ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(captchaProperties.getWidth(),captchaProperties.getHeight());
            code=captcha.getCode();
            //此时我们想把生成的验证码写到浏览器中，需要 response
            captcha.write(response.getOutputStream());
        } catch (IOException e) {
            throw new RuntimeException(e);
        }//我们此时来运行试试效果~~
    }
    @RequestMapping("/check")
    public boolean check(String captcha){
        if(code.equals(captcha))
    }
}

但是写到这里就出现问题了，我们知道 HttpServletResponse 是无状态的，那么在多个用户访问的时候就会出现问题，当张三来访问的时候 code=1234，然后李四也来访问了，此时 code又变成了 5678，此时张三在 check 方法部分输入 1234，就显示错误了~~

当时我们是怎么解决这个问题的？？我们为了去保存用户信息，去存储不同用户不同的值，使用的是 session~~

所以我们可以把 code 放到 session 中，代码就变成了👇

java 复制代码 
code=captcha.getCode();
//存储到session中
session.setAttribute("key",code);
//同时也要记录时间，时间过去太久就不校验了，直接返回 false
session.setAttribute("date",new Data());

那么此时对于 时间 和 code 又是硬编码了，所以我们还是使用配置文件👇

java 复制代码 
#spring.application.name=spring-captcha-demo
#将上面 properties 文件中的默认内容自行转成下面的
spring:
  application:
    name: spring-captcha-demo
captcha:
  width: 150
  height: 50
  session:
    key: CAPTCHA_SESSION_KEY
    date: CAPTCHA_SESSION_DATE

验证码配置项对应的Java对象👇

java 复制代码 
@ConfigurationProperties(prefix = "captcha")
@Configuration
@Data
public class CaptchaProperties {
    private Integer width;
    private Integer height;
    private Session session;
    
    @Data
    public static class Session{//直接使用内部类的方式
        private String key;
        private String date;
    }
}

此时的 Controller 代码👇

java 复制代码 
package com.bit.captcha.controller;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import com.bit.captcha.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;
import java.util.Date;


/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: CoderYanger
 * Date: 2026-11-01
 * Time: 16:58
 */
@RequestMapping("/captcha")
@RestController
public class CaptchaController {
    @Autowired//把配置文件的内容注入进来
    private CaptchaProperties captchaProperties;
    //定义过期时间
    private final static Long VALID_TIME=30*60*1000L;//30min

    private String code;
    //生成验证码
    @RequestMapping("/getCaptcha")
    public void getCaptcha(HttpSession session,HttpServletResponse response){
        try {
            //生成验证码
            ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(captchaProperties.getWidth(),captchaProperties.getHeight());
            code=captcha.getCode();
            //存储到session中
            session.setAttribute(captchaProperties.getSession().getKey(),code);
            //同时也要记录时间，时间过去太久就不校验了，直接返回 false
            session.setAttribute(captchaProperties.getSession().getDate(),new Date());
            //此时我们想把生成的验证码写到浏览器中，需要 response
            captcha.write(response.getOutputStream());
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

    /**
     * 验证用户输入的验证码是否正确
     * @param captcha：用户输入的验证码
     * @param session
     * @return false:校验失败,true:验证成功
     */
    @RequestMapping("/check")
    public boolean check(String captcha,HttpSession session){
        //这边就可以从session中去取了
        if(!StringUtils.hasLength(captcha)){
            return false;
        }
        //验证 验证码
        String code=(String)session.getAttribute(captchaProperties.getSession().getKey());
        Date date=(Date)session.getAttribute(captchaProperties.getSession().getDate());
        //验证码正确且没有过期，具体逻辑需要看需求
        if(captcha.equalsIgnoreCase(code)&&date!=null&&
                System.currentTimeMillis()-date.getTime()<VALID_TIME){
            return true;
        }
        return false;
    }
}

测试后端代码👇发现没有问题

验证码项目-后端代码测试

答疑：为什么配置文件上写上👇就报错？？

java 复制代码 
null: 
  value: ~

而写成👇就不报错？？

java 复制代码 
null.value: ~

其实上述报错日志写的很清晰了，那是因为 null 是一个关键字，而合在一起写的时候，就认为 null.value 这个整体是 key 了，所以不报错~~

其实上述后端代码运行的时候，咱们通过 Fiddler 抓包就能发现这是一个 .PNG 文件👇

而这正是浏览器自动正确解析的结果，但是并不是每个浏览器都能够正确解析的，所以我们一般情况下为了确保正确解析出来，会在代码中设置 ContentType，我们希望它返回的是一个图片，注意，这这些代码我们一般给写在最上面（你使用 response 之前），而不是最下面，否则不生效的👇

java 复制代码 
    //生成验证码
    @RequestMapping("/getCaptcha")
    public void getCaptcha(HttpSession session,HttpServletResponse response){
        response.setContentType("image/jpeg");//设置希望返回的类型
        //response.setCharacterEncoding("utf-8");//设置编码格式也在这里
        try {
            //......
    }

6.1.6 调整前端页面代码

修改 index.html👇

html 复制代码 
<img id="verificationCodeImg" src="/admin/captcha" style="cursor: pointer;" title="看不清？换一张" />

这一行的 URL 可以是绝对路径，也可以是相对路径，或者是网络路径，而此时我们后端生成的图片就是以网络路径显示的，所以此处改为后端对应的网络路径👇

html 复制代码 
    <img id="verificationCodeImg" src="/captcha/getCaptcha" style="cursor: pointer;" title="看不清？换一张" />

启动服务后，重新访问，此时我们的图片就能正常显示了👇

但是这里会有个问题：我要是连续点两次刷新的话，这个图片不会变化，但实际上我们希望它是跟着刷新两次的，这是为什么？？

这是因为浏览器会有一些缓存，我们需要去做一些禁止缓存的东西，咱们使用的是 get 请求，这就涉及到 get 请求和 post 请求的区别了，理论上 get 请求是 幂等性的，因为它是从浏览器中获取资源，我们认为获取资源是不会发生变化的，所以浏览器会进行缓存，而如果它认为资源没有发生变化，那么这时候它可能就不请求了~~

关于这里的处理有两种方式：前端处理 和 后端处理

后端处理👇

java 复制代码 
response.setContentType("image/jpeg");//设置希望返回的类型
        //一般情况下，这个处理是前端做，后端不做
        response.setHeader("Progma","No-cahce");//加上这一行
//        response.setCharacterEncoding("utf-8");//设置编码格式

前端处理👇网上随便搜一下：meta progam nocahe，然后加上下面的代码

html 复制代码 
<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" />

补充 ajax 代码，点击提交按钮，发送请求去服务端进行校验

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

6.1.7 运行测试

验证码项目运行测试

在前端代码中，这里还有一个知识点给大家提一下👇

javascript 复制代码 
    $("#verificationCodeImg").click(function(){
      $(this).hide().attr('src', '/captcha/getCaptcha?dt=' + new Date().getTime()).fadeIn();
    });

给这个图片加了一个点击事件，就是我每次点击的时候希望它去请求我们的验证码

后面跟了一个参数 dt，给这个 dt 赋值了一个当前的时间，其目的也是为了防止缓存的，上述加完👇只是说页面不缓存了

html 复制代码 
<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" />

但是这里却是针对每次请求的，每次的 dt 都不一样，浏览器一看第一次 dt 为1，第二次 dt 为2......就不敢缓存了，所以说防止浏览器缓存的方式有很多种~~

答疑：为什么后端代码中的 Session 内部类要加上 static？？

那我们把 static 去掉试试看👇

java 复制代码 
    @Data
    public class Session{//直接使用内部类的方式
        private String key;
        private String date;
    }

启动服务，并刷新页面👇

我们发现这时候它不认识 getKey() 了，找不到了~~

我们如果把这个 Session 类挪出来放在外面的话，不加 static 👇

java 复制代码 
@Data
public class Session {
    private String key;
    private String date;
}

我们发现它是可以运行的，页面也没有问题👇

这就说明写在内部类的话 static 是不能省略的~~

为什么？？因为在这里👇

@Configuration 表示我们把这个对象交给 Spring 进行管理了，那 Spring 就会帮我们 new 这个对象了，但是如果是普通内部类的话，Spring 是 new 不了的，赋值时是拿不了的，但是加上 static 之后那就跟 Spring 没关系了，只是写在这里一样而已，这个内部类跟在外面就一样了

这也就说明我们的内部类是不能交给 Spring 进行管理的，但是静态内部类可以，这也是我们加上 static 的原因

简单点说就是，普通内部类不能 IoC，但是静态内部类可以~~

小结

配置项可以是第三方的，也可以是自定义的

配置项分为两种格式：properties 和 yml

properties：单词和单词之间使用点来分割，key 和 value 之间使用等号分割，类型不用管，直接去写，后端使用不同类型去接收

yml：格式是 key: value，这个空格不可省略，单词和单词之间使用冒号+换行去分割，并且 key 不能重复，相同 key 必须放在一起，且各个级别要对齐

yml 可以和 properties 共存，但一个项目中建议使用一种配置类型文件.

7.总结（课件内容）

  1. properties 是以 key=value 的形式配置的键值类型的配置文件, yml 使用的是树形配置方式.

  2. 读取配置文件内容, 使用 @Value 注解, 注解内使用" ${} "的格式读取.

  3. yml 层级之间使用换行缩进的方式配置, key 和 value 之间使用": "(英文冒号)加空格的方式设置, 并且空格不可省略.

  4. properties 为早期并且默认的配置文件格式, 其配置存在一定的冗余数据, 使用 yml 可以很好的解决数据冗余的问题, 但不适合复杂配置.

  5. yml 可以和 properties 共存，但一个项目中建议使用一种配置类型文件.

8.代码分享

CaptchaController.java

java 复制代码 
package com.bit.captcha.controller;

import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.ShearCaptcha;
import com.bit.captcha.model.CaptchaProperties;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.IOException;
import java.util.Date;


/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: CoderYanger
 * Date: 2026-11-01
 * Time: 16:58
 */
@RequestMapping("/captcha")
@RestController
public class CaptchaController {
    @Autowired//把配置文件的内容注入进来
    private CaptchaProperties captchaProperties;
    //定义过期时间
    private final static Long VALID_TIME=30*60*1000L;//30min

    private String code;
    //生成验证码
    @RequestMapping("/getCaptcha")
    public void getCaptcha(HttpSession session,HttpServletResponse response){
        response.setContentType("image/jpeg");//设置希望返回的类型
        //一般情况下，这个处理是前端做，后端不做
        response.setHeader("Progma","No-cahce");
//        response.setCharacterEncoding("utf-8");//设置编码格式
        try {
            //生成验证码
            ShearCaptcha captcha = CaptchaUtil.createShearCaptcha(captchaProperties.getWidth(),captchaProperties.getHeight());
            code=captcha.getCode();
            //存储到session中
            session.setAttribute(captchaProperties.getSession().getKey(),code);
            //同时也要记录时间，时间过去太久就不校验了，直接返回 false
            session.setAttribute(captchaProperties.getSession().getDate(),new Date());
            //此时我们想把生成的验证码写到浏览器中，需要 response
            captcha.write(response.getOutputStream());
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

    /**
     * 验证用户输入的验证码是否正确
     * @param captcha：用户输入的验证码
     * @param session
     * @return false:校验失败,true:验证成功
     */
    @RequestMapping("/check")
    public boolean check(String captcha,HttpSession session){
        //这边就可以从session中去取了
        if(!StringUtils.hasLength(captcha)){
            return false;
        }
        //验证 验证码
        String code=(String)session.getAttribute(captchaProperties.getSession().getKey());
        Date date=(Date)session.getAttribute(captchaProperties.getSession().getDate());
        //验证码正确且没有过期，具体逻辑需要看需求
        if(captcha.equalsIgnoreCase(code)&&date!=null&&
                System.currentTimeMillis()-date.getTime()<VALID_TIME){
            return true;
        }
        return false;
    }
}

CaptchaProperties.java

java 复制代码 
package com.bit.captcha.model;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: CoderYanger
 * Date: 2026-11-01
 * Time: 17:29
 */
@ConfigurationProperties(prefix = "captcha")
@Configuration
@Data
public class CaptchaProperties {
    private Integer width;
    private Integer height;
    private Session session;

    @Data
    public static class Session{//直接使用内部类的方式
        private String key;
        private String date;
    }
}

application.yml

java 复制代码 
#spring.application.name=spring-captcha-demo
#将上面 properties 文件中的默认内容自行转成下面的
spring:
  application:
    name: spring-captcha-demo
captcha:
  width: 150
  height: 50
  session:
    key: CAPTCHA_SESSION_KEY
    date: CAPTCHA_SESSION_DATE
#null.value: ~
#null:
#  value: ~

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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    
    $("#verificationCodeImg").click(function(){
      $(this).hide().attr('src', '/captcha/getCaptcha?dt=' + new Date().getTime()).fadeIn();
    });

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

  </script>
</body>

</html>

success.html

java 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证成功页</title>
</head>
<body>
    <h1>验证成功</h1>
</body>
</html>
相关推荐
文丑颜不良啊1 小时前
LeetCode1681~1700题目解析
java·leetcode
code_slave(码畜)1 小时前
微服务架构落地：慢 SQL 治理与连接池调优 —— 守住数据库的最后一道防线
数据库·spring boot·sql·spring cloud·微服务·架构
愚农搬码1 小时前
电子表单、动态表单、表单设计器和表单引擎到底有什么区别？
java·后端
CarIise1 小时前
Spring 框架AOP与 XML 基础
java·开发语言
m0_639906941 小时前
SpringBoot 实现大模型统一调度网关｜对接 OpenAI、Claude 协议差异与适配方案
java·spring boot·spring
雪芽蓝域zzs1 小时前
第 1 章：IDEA 全局配置 Maven + 新建 SpringBoot3 Maven 项目
java·maven·intellij-idea
代码什么用1 小时前
Maven&Nexus
java·maven
顧棟1 小时前
OpenAPI 网关：鉴权 + 流量治理 一体化设计方案与实现
java·spring boot·设计模式
Rain的Java大神之路1 小时前
「设计一个在线文档协同编辑系统」：从 WebSocket、OT/CRDT 到快照回放，一篇讲透这道面试顶流题
java·后端·面试
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04几个好用的ip纯净度检测网站05苹果iPA游戏软件资源下载网站06如何新建文件夹？ 电脑新建文件夹的4种方法07蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接08昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战09Dify：一站式AI应用开发平台全解析与Windows部署指南10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新