做淘宝客的的网站有什么要求吗,网站代码字体变大,海南行指专业网站开发,餐厅网站源码接上次博客#xff1a;JavaEE进阶#xff08;5#xff09;Spring IoCDI#xff1a;入门、IoC介绍、IoC详解#xff08;两种主要IoC容器实现、IoC和DI对对象的管理、Bean存储、方法注解 Bean)、DI详解#xff1a;注入方式、总结-CSDN博客
目录
配置文件作用
Sprin…接上次博客JavaEE进阶5Spring IoCDI入门、IoC介绍、IoC详解两种主要IoC容器实现、IoC和DI对对象的管理、Bean存储、方法注解 Bean)、DI详解注入方式、总结-CSDN博客
目录
配置文件作用
SpringBoot配置文件
配置文件的格式
properties 配置文件说明
properties 基本语法
读取配置文件
properties 缺点分析
yml 配置文件说明
yml 基本语法
yml 使用进阶
yml 配置不同数据类型及 null
yml 配置读取
配置对象
配置集合
配置Map
yml优缺点
综合性练习
验证码案例
Kaptcha 插件介绍
原理
引入依赖
生成验证码
添加配置项 Kaptcha详细配置
需求
准备工作
index.html
success.html
参考逻辑
约定前后端交互接口
实现服务器端代码
引入依赖
通过配置创建验证码生成器
验证码校验
调整前端页面代码
运行测试 配置文件作用
计算机系统中存在着大量的配置文件虽然绝大多数用户不直接与这些文件交互但它们在各种软件和应用中发挥着关键作用。无论是浏览器、微信、IDE集成开发环境还是智能手机都依赖于配置文件的存在。这些文件以不同的形式分布在计算机上例如在C:\Users、C:\Windows等文件夹下以及各种 .config、.xml 文件。
配置文件主要是为了解决硬编码带来的问题, 把可能会发生改变的信息, 放在一个集中的地方 当我们启动某个程序时应用程序从配置⽂件中读取数据并加载运行。
配置文件的作用和重要性
解决硬编码问题 主要作用之一是解决硬编码的问题。硬编码将数据直接嵌入到程序源代码中导致数据固定且不易修改。通过配置文件可以将可能发生变化的信息集中存储使得修改配置更加方便而不需要修改源代码。 硬编码Hard Coding是指直接将数据、配置或参数等值直接嵌入到程序或可执行对象的源代码中而不是通过外部配置文件或其他可变的机制进行设置。这种做法使得这些值变得固定不易修改而且需要修改源代码才能改变这些值。 以手机字体大小为例如果采用硬编码的方式开发者会在程序源代码中明确指定字体大小的数值。这样所有用户使用该应用时都将看到相同的字体大小而无法根据个人偏好进行调整。如果不同用户有不同的偏好他们将无法根据个人偏好调整字体大小。 集中管理配置信息 许多软件和系统需要配置信息例如路径、数据库连接、用户设置等。配置文件提供了一种集中管理这些信息的方式使得修改配置信息更加方便而不需要在整个代码库中查找和修改。
提高灵活性 配置文件使得应用程序的行为能够在不修改程序代码的情况下进行调整。这使得软件更具灵活性能够适应不同的使用场景和需求而无需重新编译和部署。
适应不同环境 不同的环境开发、测试、生产等可能需要不同的配置。通过使用不同的配置文件可以轻松地适应不同的环境需求而无需更改源代码。
用户和应用程序的交互 配置文件为用户提供了调整应用程序行为的手段例如更改界面样式、设置偏好等。用户可以通过修改配置文件而不是程序代码来个性化应用。
应用程序间的交互 在分布式系统中不同的应用程序可能需要相互通信和协作。通过配置文件可以配置不同应用程序之间的交互规则和参数实现更好的集成和协作。
简化部署和维护 将配置信息存储在文件中使得部署和维护过程更加简化。不同的配置文件可以轻松地用于不同的部署环境同时也方便备份和恢复。
综合而言配置文件在软件开发和计算机系统中扮演了重要的角色为软件提供了灵活性、可维护性和用户友好性。通过合理使用配置文件可以使得应用程序更易于开发、维护和升级。
SpringBoot配置文件
SpringBoot提供了强大的配置文件支持允许开发人员灵活地配置和管理应用程序的各种参数。配置文件的格式得到了SpringBoot的支持和定义这不仅有助于规范化项目的配置同时也为其他框架集成到SpringBoot提供了一种便捷的方式。
在配置文件中可以设置许多项目或框架的关键信息包括但不限于 项目的启动端口 开发人员可以轻松地指定应用程序监听的端口确保应用在启动时使用正确的端口进行通信。 数据库的连接信息 数据库是许多应用程序的核心组成部分而数据库连接信息通常包括用户名和密码等敏感信息。通过配置文件这些信息可以被安全地存储和管理。 第三方系统的调用密钥 集成到其他系统或服务时经常需要提供访问权限验证的密钥。将这些密钥放在配置文件中有助于在应用程序中轻松管理这些敏感信息。 用于发现和定位问题的日志信息 配置文件中可以定义各种日志参数包括常规日志和异常日志。这些日志对于开发人员在调试和解决问题时提供了宝贵的信息。
通过使用SpringBoot的配置文件开发人员可以集中管理应用程序的配置而不必硬编码这些参数从而增加了灵活性。这种方式还使得配置信息可以根据不同环境如开发、测试、生产进行调整而不必修改源代码。总体而言SpringBoot的配置文件功能为开发人员提供了更方便、可维护性更强的配置管理方式。
在Spring框架中Spring Boot的配置文件主要是通过application.properties或者application.yml来定义项目的配置信息。我们其实已经见过一些常见配置项
项目的启动端口
Spring Boot内置了Tomcat服务器默认端口号是8080。但由于电脑上8080端口可能被其他应用程序占用因此Spring Boot允许用户自定义端口号。通过在application.properties文件中设置如下配置可以指定项目的启动端口
server.port自定义端口号这样应用程序将使用指定的端口号进行监听确保不与其他应用程序发生冲突。
数据库连接信息
为了更方便简单地访问数据库出现了一些持久层框架它们对JDBC进行了更深层次的封装。这些框架允许用户通过简短的代码实现数据库访问。然而不同的应用程序通常需要访问不同的数据库因此这些持久层框架需要支持用户自定义配置数据库的连接信息。
在application.properties文件中可以设置数据库连接的相关信息例如
spring.datasource.urljdbc:mysql://localhost:3306/数据库名
spring.datasource.username数据库用户名
spring.datasource.password数据库密码
spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver这样开发人员可以轻松地配置应用程序连接到特定数据库的详细信息而不必在代码中硬编码这些参数。
总体而言通过application.properties文件Spring Boot提供了一个集中管理和灵活配置项目的途径使得我们能够轻松地自定义端口号和数据库连接信息以满足不同项目的需求。
配置文件的格式
在Spring Boot中配置文件是一种关键的组件用于定义应用程序的各种属性和设置。
这些配置文件主要有三种格式
application.propertiesapplication.ymlapplication.yaml
其中yml是yaml的缩写而在实际开发中yml格式的配置文件的使用频率最高。需要注意的是yaml和yml在使用方式上是相同的但在文件扩展名上有所不同而我们主要介绍yml文件的使用。
当Spring Boot应用程序启动时它会自动寻找并加载位于classpath路径下的application.properties、application.yaml或者application.yml文件。这样的自动加载机制使得配置文件的管理变得非常方便同时也为我们提供了更灵活的配置选项。
除了默认的加载路径外还可以通过使用spring.config.name属性来指定配置文件的路径和名称。这为项目中的多个配置文件提供了支持使得我们可以根据环境或其他条件选择合适的配置文件。例如我们可以通过spring.config.namecustom-config来指定加载名为custom-config.yml或custom-config.properties的配置文件。具体参考官方文档Core Features (spring.io)
以下是一个示例application.yml文件展示了如何配置一些常见的应用属性
# application.ymlserver:port: 8080spring:datasource:url: jdbc:mysql://localhost:3306/mydatabaseusername: rootpassword: passwordjpa:hibernate:ddl-auto: updateshow-sql: truemyapp:custom-property: custom-value在这个例子中我们通过server配置了服务器的端口使用了spring配置来定义数据库连接信息而myapp下则是自定义的应用属性。通过这种方式就可以灵活地管理和配置Spring Boot应用程序的各种参数和设置。 我们把 application.properties里面的代码注释掉然后 类比商品包装Spring Boot的配置文件可以看作是两种不同的包装properties 类型的配置文件就像是“老款包装”而yml 则是“新版包装”。默认情况下在创建Spring Boot项目时会采用 properties 格式的配置文件这主要是为了兼容性和传统。这种选择的原因可能是因为在仓库中还有大量使用老款包装的库存因此作为默认。
然而yml格式的配置文件被认为是“新版包装”更加现代且易读。如果用户对情况比较了解并希望使用更新的配置文件格式可以直接选择使用yml。这就好像用户可以选择购买商品时如果了解情况并喜欢新版包装那么商家就直接提供新版包装的产品。
因此当用户在创建Spring Boot项目时如果对配置文件格式有特定需求可以直接指定要使用的包装即选择 properties 或 yml就像在购物时选择商品包装一样。这样用户可以更加灵活地根据个人偏好或项目需求选择适当的配置文件格式。
那么如果我们让两个文件并存哪个更优先呢 特殊说明
理论上.properties 和 .yml 可以同时存在于一个项目中。当这两种配置文件并存时两个配置文件都会被加载。然而如果配置文件内容存在冲突那么以 .properties 为主也就是说.properties 的优先级更高。这意味着在存在冲突的情况下.properties 文件中的配置项会覆盖相同配置项在 .yml 文件中的设置。同一个配置项在两个配置文件都存在的情况下.properties 的优先级高于 .yml 文件不同的配置项在.properties 和 .yml 文件中配置都会生效。虽然理论上可以让 .properties 和 .yml 共存但在实际的业务中通常会选择一种统一的配置文件格式。这样的做法有助于更好地维护项目降低故障率。通过采用一致的配置文件格式开发团队能够更容易理解和管理配置减少因格式差异而引起的问题。因此为了项目的一致性和维护性通常会选择在一个项目中使用一种主要的配置文件格式。
properties 配置文件说明
properties 配置文件是最早期的配置文件格式也是创建 Spring Boot 项目时的默认配置文件。这种格式以键值对的形式存储配置信息每一行表示一个属性的设置。由于其简单直观的语法properties 配置文件在项目早期得到了广泛应用。
在 Spring Boot 的早期版本中使用 properties 格式的配置文件是主流这也符合许多传统 Java 项目的配置需求。然而随着时间的推移和开发者对更灵活、易读的配置的需求增加新一代的配置文件格式逐渐崭露头角其中以 yml 格式为代表。
尽管 properties 配置文件在默认设置中仍然保留但随着 Spring Boot 的演进更多项目和开发者转向使用 yml 格式的配置文件。这种趋势主要因为 yml 具有更为结构化和可读性强的语法使得配置信息更清晰、易维护从而提高了开发效率。不过properties 仍然在一些场景中得到应用特别是在传统项目或与其他系统集成时。
properties 基本语法
properties 配置文件的基本语法是采用键值对的形式其中键和值之间用等号 连接。以下是一个简单的示例展示了如何使用 properties 文件配置一些常见的项
# 配置项目端口号
server.port8080# 配置数据库连接信息
spring.datasource.urljdbc:mysql://127.0.0.1:3306/testdb?characterEncodingutf8
spring.datasource.usernameroot
spring.datasource.passwordroot在这个示例中
server.port8080 表示配置了应用程序的端口号为 8080。spring.datasource.urljdbc:mysql://127.0.0.1:3306/testdb?characterEncodingutf8 配置了数据库连接的URL。spring.datasource.usernameroot 和 spring.datasource.passwordroot 配置了数据库的用户名和密码。
此外可以使用 # 符号在配置文件中添加注释信息这对于提供配置项的说明或者添加一些备注非常有用。注释部分对应于配置文件中的说明而不会影响实际的配置。比如上述示例中的注释用于解释每个配置项的用途。
你也可以自定义配置 我们现在先学习语法和具体的使用更多配置信息会随着深入学习进行补充。如果你很感兴趣可以参考Common Application Properties (spring.io)
这些全是一些默认配置 你可能会很头大这要怎么学……
不用学用的时候现去查就行而且与其在官方文档查还不如直接百度。
我整理了几个application.yml文件的常用的配置项可以直接复制粘贴
# 数据源配置
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/mycnblog?characterEncodingutf8useSSLfalseusername: rootpassword: rootdriver-class-name: com.mysql.cj.jdbc.Driver# Spring MVC 配置
spring:mvc:favicon:enable: false# 多平台配置
spring:profiles:active: dev# Mybatis 配置
mybatis:# 设置 Mybatis 的 XML 文件保存路径mapper-locations: classpath:mapper/*Mapper.xml# Mybatis 配置configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmap-underscore-to-camel-case: true # 自动将数据库字段转为驼峰命名# 日志配置
logging:file:name: logs/springboot.log # 指定日志文件位置logback:rollingpolicy:max-file-size: 1KB # 设置日志文件大小file-name-pattern: ${LOG_FILE}.%d{yyyy-MM-dd}.%i # 指定日志文件名格式level:com:example:demo: debug # 设置特定包的日志级别为debug上述配置包含了常见的数据源配置、Spring MVC 配置、多平台配置、MyBatis 配置以及日志配置。注释部分提供了对各个配置项的简要解释。这样的配置文件已经可以满足常见的Spring Boot项目的需求同时你也可以根据实际情况进行调整和扩展。
读取配置文件
在Spring Boot项目中可以使用Value注解来主动读取配置文件中的内容。这个注解的使用方式是在类的字段上添加注解并使用${}的格式来引用配置文件中的属性值。
我们先创建一个新的Controller 启动之后去网页看看 现在我们通过Value注解来拿key1的值 再多增加一个 如果把 ${ } 去掉就代表赋值 它同时也是有一些校验的比如现在把key3改成字符串 在运行就不对了 properties 缺点分析
properties 配置文件以 key-value 的形式存储配置信息具有简单直观的语法。然而随着项目的复杂性增加properties 配置文件也会暴露一些缺点其中一些包括 缺乏层次结构properties 配置文件本身不支持层次结构所有配置项都是扁平的。这意味着在配置复杂的对象结构时需要使用复杂的命名规则来模拟层次结构导致配置文件变得冗长和难以维护。 person.nameJohn Doe
person.age30
person.address.cityNew York
person.address.zip10001冗余的信息 properties 配置文件中可能包含大量重复的信息尤其是在键的前缀相同的情况下。这可能导致配置文件变得臃肿并且当需要修改一组相关的配置项时可能需要在多个地方进行调整。 可读性差 随着配置项的增多properties 文件可能变得难以阅读和理解。复杂的结构和大量的键值对可能使得配置文件的维护变得繁琐。
相对于 properties yml 配置文件提供了更具层次结构和可读性的格式。通过使用缩进和冒号的方式yml 允许在配置文件中创建更复杂的数据结构减少了冗余的信息并提高了可读性。因此在需要处理复杂配置结构和提高配置文件可读性的情况下yml 格式通常更受开发者欢迎。
yml 配置文件说明
yml 是 YAML 是缩写YAMLYAML 的原意是 YAML Aint Markup Language这是一种自指的递归缩写。尽管 Yet Another Markup Language 也是 YAML 的一种解释翻译成中文就是“另一种标记语言”但官方的定义是 YAML Aint Markup Language。这个缩写旨在表达 YAML 不是一种传统的标记语言markup language而是一种数据序列化格式更注重数据的表达和易读性。强调 YAML 的设计目标和特性。是一种人类可读的数据序列化格式常被用于配置文件和数据交换的场景。
YAML 的跨平台性体现在它的语法规则和数据结构的表达方式上。YAML 的语法是清晰、简洁、易读的且不依赖于特定编程语言因此可以在不同的编程语言和平台之间进行交换和共享。
在实践中许多编程语言都有对 YAML 格式的解析和生成支持使得开发者可以在不同的平台上使用 YAML 文件进行配置。这种灵活性和跨平台性使 YAML 成为许多项目中配置文件的首选格式。
我们先来学习yml文件的基本语法和说明
yml 基本语法
yml 是树形结构的配置文件它的基础语法是key: valuekey 和 value 之间使用英文冒号加空格的方式组成空格不可省略 如果一个键值对中的值包含多个单词通过换行的缩进表示这种方式通常用于表示复杂的数据结构或长的文本块 description: |This is a multilinedescription that spansmultiple lines in YAML.基本结构 yml使用缩进来表示结构而不是像其他语言一样使用大括号。缩进的空格数目是有意义的通常是两个空格。 key1: value1
key2:subkey1: subvalue1subkey2: subvalue2键值对 键值对使用冒号 : 分隔表示键和值的关系。 name: John Doe
age: 30列表 使用连字符 - 表示列表中的每个元素。 fruits:- apple- orange- banana多行文本 使用 | 符号表示多行文本块保留换行符。 description: |This is a multilinetext block.注释 使用 # 符号表示注释。 # This is a comment
key: value引用 使用 符号创建锚点anchor使用 * 符号引用锚点。 defaults: defaultsusername: guestpassword: guestuser1: *defaults
user2:: *defaultspassword: secure_password这些是.yml文件的基本语法。YAML以人类可读的方式表示数据结构其简洁性和可读性使其成为配置文件和数据交换的常用格式。在Spring Boot项目中.yml文件通常用于配置应用程序的属性提供了一种更易读、更清晰的配置方式。
使用.yml连接数据库
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/dbname?characterEncodingutf8useSSLfalseusername: rootpassword: root使用.properties连接数据库
spring.datasource.urljdbc:mysql://127.0.0.1:3306/dbname?characterEncodingutf8useSSLfalse
spring.datasource.usernameroot
spring.datasource.passwordroot对比来看在这两个例子中配置的含义是相同的都是配置了Spring Boot应用程序连接到MySQL数据库的相关信息。主要的区别在于语法格式
.yml文件 使用缩进和冒号来表示层次结构和键值对。.properties文件 使用等号来表示键值对每个配置项在文件中占据一行。
在实际使用中选择.yml还是.properties通常取决于个人或团队的偏好以及项目的具体需求。
.yml文件相对更加易读和清晰特别适合配置文件较为复杂的情况。.properties文件则更加传统适用于简单的配置需求。
yml 使用进阶
yml 配置不同数据类型及 null
# 字符串
string:value: Hello# 布尔值true或false
boolean:value: truevalue1: false# 整数
int:value: 10# 浮点数
float:value: 3.14159# Null~代表null
null:value: ~# 空字符串
# 直接后面什么都不加就可以了, 但这种方式不直观, 更多的表示是使用引号括起来
empty:value: yml 配置读取
yml 读取配置的方式和 properties 相同使用 Value 注解即可 所以你会发现把.properties中的“ . ”改成换行缩进就是.yml文件格式。
注意事项value 值加单双引号
在 YAML 文件中对字符串的表示有一些注意事项尤其涉及到单引号和双引号。
字符串默认不用加上单引号或者双引号如果加英文的单双引号可以表示特殊的含义。
尝试在 application.yml 中配置如下信息
string:str1: Hello \n Spring Boot.str2: Hello \n Spring Boot.str3: Hello \n Spring Boot.从上述实例可以得出以下结论 字符串默认不需要加上单引号或者双引号 在 str1 中字符串 Hello \n Spring Boot. 没有加上任何引号它会被解释为一个普通字符串特殊字符 \n 会被当作两个字符。 单引号会转义特殊字符 在 str2 中字符串被单引号包裹导致 \n 失去特殊功能它会被解释为普通字符串中的两个字符而不是换行符。 双引号不会转义字符串里面的特殊字符 在 str3 中字符串被双引号包裹特殊字符 \n 会被保留其本身的含义即表示换行符。
注意这里的描述可能我们的第一反应相反。
此处的转义理解起来会有些拗口\n 本意表示的是换行。使用单引号会转义就是说\n 不再表示换行了而是表示一个普通的字符串。使用双引号不会转义\n 表示的是它本身的含义就是换行。
配置对象
我们还可以在 yml 中配置对象如下配置 或者是使用行内写法与上面的写法作用⼀致 这个时候就不能用 Value 来读取配置中的对象了此时要使用另⼀个注解 ConfigurationProperties 来读取具体实现如下 注意要加上Component 如果希望Student类成为Spring容器的一个Bean通常需要在这个类上添加Component注解以便Spring能够扫描并管理这个Bean。
调用类的实现如下 配置集合
配置⽂件也可以配置 list 集合如下所示
注意缩进
Dbtypes:name:- mysql- sqlserver- db2 集合的读取和对象⼀样也是使用 ConfigurationProperties 来读取的具体实现如下 访问集合的实现如下 空格绝对不可以省略否则此处将被当作一个对象
省略空格后没有报错但是含义完全改变 配置Map
配置文件也可以配置 map如下所示 或者是使用行内写法(与上面的写法作用⼀致也要空格) Map的读取和对象一样也是使⽤ ConfigurationProperties 来读取的具体实现如下 打印类的实现如下 yml优缺点
优点: 可读性高写法简单易于理解 YAML 使用缩进和简洁的语法结构使文件更加易读不需要像 XML 或 JSON 那样使用大量的符号和标记。 支持更多的数据类型 YAML 支持丰富的数据类型包括对象、数组、List、Map 等使其能够简单表达各种数据形态适用于多样化的应用场景。 跨编程语言支持 YAML 不仅在 Java 中得到广泛应用还能够在其他编程语言中使用如 Golang、Python、Ruby、JavaScript 等提供了更大的灵活性和通用性。
缺点: 不适合写复杂的配置文件 尽管 YAML 对于简单的配置文件表达十分方便但对于复杂配置文件的书写可能变得困难。与 properties 格式相比复杂配置的转换过程可能会花费更多精力可读性也会下降。 例如对于一份复杂的配置YAML 的可读性较差 keycloak:realm: demoresource: fm-cache-cloudcredentials:secret: d4589683-Oce7-4982-bcd3security:- authRoles:- usercollections:- name: ssologinurlpatterns:- /login/*而properties格式如下 keycloak.realm demo
keycloak.resource fm-cache-cloud
keycloak.credentials.secret d4589683-Oce7-4982-bcd3
keycloak.security[0].authRoles[0] user
keycloak.security[0].collections[0].name ssologinurl
keycloak.security[0].collections[0].patterns[0] /login/* 对格式有较强的要求 YAML 对缩进和格式有较强的要求一个空格的差异可能导致解析错误。这可能使得在编辑或处理 YAML 文件时更加容易出错需要维护者保持良好的格式规范。
总的来说YAML 适用于简单和中等复杂度的配置文件但在处理高度复杂的配置时可能会显得繁琐并降低可读性。在选择配置文件格式时需要根据具体的应用场景和需求权衡其优缺点。
综合性练习
验证码案例 随着对安全性要求的日益提升目前许多项目都广泛采用验证码作为一种重要的安全验证手段。验证码的形式多种多样其中更为复杂的图形验证码和行为验证码已经成为当前的主流趋势。随着技术的不断发展这些高级验证码不仅提升了安全性还为用户提供了更加可靠和有效的身份验证方式。
验证码的实现方式很多 网上也有比较多的插件或者工具包可以使用咱们选择使用Google的开源项目 Kaptcha来实现。
Kaptcha 插件介绍
Kaptcha是由Google推出的一款高度可配置的实用验证码生成工具。该工具以其灵活性和高度定制化而著称为开发者提供了生成验证码的便捷解决方案。通过Kaptcha用户可以根据具体需求调整验证码的各种参数包括但不限于验证码的外观、复杂性和大小等。这使得Kaptcha成为许多项目中首选的验证码生成工具之一为用户提供了一种可靠而安全的身份验证机制。
代码Google Code Archive - Long-term storage for Google Code Project Hosting.
网上有很多人甚至公司都基于Google的kaptcha进行了二次开发。
我们选择⼀个直接适配SpringBoot的 开源项目。
GitHub - oopsguy/kaptcha-spring-boot: Kaptcha Spring Boot Starter help you use Google Kaptcha with Spring Boot easier. 一个简单封装了 Kaptcha 验证码库的 Spring Boot Starter
但是这篇文章比较粗糙……所以我们下面先简单解释一下插件的使用然后再进行一个验证码程序的详细编写过程。
原理
验证码的生成可以在客户端进行也可以在服务器端进行。
对于普通的字符验证码后端通常分两个主要步骤。首先生成验证码的内容根据验证码内容以及干扰项等因素生成相应的图像并将图像返回给客户端。其次将验证码的内容存储起来以便在校验时取出进行比对。
在这个流程中kaptcha插件采取了将验证码内容存储在Session中的策略。这意味着生成的验证码内容会被存储在服务器端的Session对象中以确保安全性和一致性。在校验时系统会从Session中取出相应的验证码内容然后与用户输入的验证码进行比对以完成验证过程。这种方法有效地维护了验证码的状态和安全性为用户提供了可靠的身份验证机制。
引入依赖 dependencygroupIdcom.oopsguy.kaptcha/groupIdartifactIdkaptcha-spring-boot-starter/artifactIdversion1.0.0-beta-2/version
/dependency 生成验证码
该插件提供了两种方式生成验证码
1、通过代码来生成参考文档kaptcha-spring-boot/README_zh-CN.md at master · oopsguy/kaptcha-spring-boot · GitHub
2、仅通过配置文件来生成验证码推荐
我们接下来介绍的方法就是通过配置文件来生成验证码
添加配置项 # 应用服务 WEB 访问端口
server:port: 8080kaptcha:items:# home captchahome:path: /home/captchasession:key: HOME_KAPTCHA_SESSION_KEYdate: HOME_KAPTCHA_SESSION_DATE# admin captchaadmin:path: /admin/captchasession:key: ADMIN_KAPTCHA_SESSION_KEYdate: ADMIN_KAPTCHA_SESSION_DATE配置完之后就可以运行一下看看 访问一下这个URL 可以发现验证码已经出来了而且随着我们的刷新会进行更改。 看起来好像很神奇我们好像没有做什么工作但是验证码就已经出现了。
好吧总有人替你负重前行。
我们导入的依赖里面的jar包中有人帮你完成了代码编写的过程 感兴趣的可以看看源码代码量其实不多 1、最开始的是一个名为KaptchaConst的Java接口定义了一个常量AUTO_CONFIG_PREFIX其值为字符串kaptcha。这样的接口通常用于存放项目中使用的常量以提高代码的可维护性和可读性。在这里KaptchaConst接口定义了一个用于自动配置的前缀常量该前缀用于处理Kaptcha验证码生成库的自动配置属性。在其他部分的代码中可以通过引用KaptchaConst.AUTO_CONFIG_PREFIX来获取这个前缀以确保一致性和避免硬编码。
2、ConfigUtils类的目的是提供一组方法将Kaptcha的配置信息转换为Properties对象使得配置信息更易于处理和传递。这对于在应用程序中动态配置Kaptcha生成库的行为非常有用。
3、接下来是一个名为BaseProperties的抽象类用于定义Kaptcha验证码生成库的基本属性。该类包含了多个内部静态类每个静态类表示不同的配置项形成了一个层次结构。以下是主要的配置项和它们的含义
Border: 边框配置项包括是否启用边框enabled、边框颜色color、边框厚度thickness。Noise: 噪点配置项包括噪点颜色color和噪点实现类impl。Obscurificator: 扭曲器配置项包括扭曲器实现类impl。Producer: 生产器配置项包括生产器实现类impl。TextProducer: 文本生成器配置项包括文本生成器实现类impl、字符配置项character和字体配置项font。Background: 背景配置项包括背景实现类impl、背景颜色起始值colorFrom和背景颜色结束值colorTo。Word: 单词配置项包括单词实现类impl。Image: 图像配置项包括图像宽度width和图像高度height。
每个配置项都有相应的Getter和Setter方法用于获取和设置其属性值。这种结构使得可以灵活配置Kaptcha验证码生成库的各个方面使其适应不同的需求和场景。BaseProperties类的实例通常作为其他类的属性例如KaptchaProperties和ConfigUtils中的属性。
4、KaptchaAutoConfigure类没有直接继承BaseProperties类。相反它使用了KaptchaProperties类并通过EnableConfigurationProperties({KaptchaProperties.class})注解启用了对KaptchaProperties类的配置属性支持。这意味着KaptchaProperties类中的属性将会被映射到KaptchaAutoConfigure中以便在自动配置过程中使用。
虽然KaptchaAutoConfigure类没有直接继承BaseProperties类但它通过引用KaptchaProperties类间接地使用了BaseProperties类中定义的属性因为KaptchaProperties类继承了BaseProperties类。
KaptchaAutoConfigure类是一个Spring Boot自动配置类用于配置和初始化Kaptcha验证码生成库的相关组件。
Configuration: 表示这是一个配置类。EnableConfigurationProperties({KaptchaProperties.class}): 启用对KaptchaProperties类的配置属性支持使得可以在配置文件中配置Kaptcha的属性。Bean(name {kaptchaProps}): 定义了名为kaptchaProps的Bean该Bean用于将KaptchaProperties对象转换为Properties对象以便后续使用。Bean: 定义了名为defaultKaptcha的Bean该Bean用于创建并配置DefaultKaptcha对象作为Kaptcha验证码生成的默认实现。这里使用了ConfigUtils类中的方法将Properties对象应用到DefaultKaptcha中。ConditionalOnMissingBean({Producer.class}): 仅当不存在名为Producer的Bean时才创建defaultKaptcha Bean。这意味着如果应用程序已经定义了自己的Producer Bean则不会覆盖它。DependsOn({kaptchaProps}): 表示defaultKaptcha Bean依赖于kaptchaProps Bean。Bean: 定义了一个名为webConfig的Bean该Bean是ServletContextInitializer的实例用于在Web应用程序启动时注册Kaptcha的Servlet。这里使用了ServletRegisterInitializer类。
总体而言这个自动配置类负责将Kaptcha集成到Spring Boot应用程序中。它提供了默认的Kaptcha实现DefaultKaptcha并允许用户在配置文件中灵活地配置Kaptcha的各种属性。如果用户已经定义了自己的Producer Bean则默认的Kaptcha实现不会覆盖用户的定义。
5、然后是刚刚提到的继承自BaseProperties的KaptchaProperties类它用于配置Kaptcha验证码生成库的属性逐步解释一下代码的结构和含义
ConfigurationProperties(prefix kaptcha): 这是一个Spring Boot注解表明该类用于处理以kaptcha为前缀的配置属性。public class KaptchaProperties extends BaseProperties: KaptchaProperties类扩展了BaseProperties类说明它继承了一些基本的属性。private MapString, SingleKaptchaProperties items new HashMap();: 这里定义了一个Map类型的属性items用于存储不同类型的Kaptcha配置。每个配置由一个字符串键key和一个SingleKaptchaProperties对象值组成。public MapString, SingleKaptchaProperties getItems(): 提供了获取items属性的方法。public void setItems(MapString, SingleKaptchaProperties items): 提供了设置items属性的方法。public static class SingleKaptchaProperties extends BaseProperties: 定义了一个静态内部类SingleKaptchaProperties该类也扩展了BaseProperties类。private Session session new Session();: 在SingleKaptchaProperties类中定义了一个Session类型的属性session并初始化为new Session()。private String path;: 定义了一个字符串类型的属性path。对于Session类 private String key;: 定义了一个字符串类型的属性key。 private String date;: 定义了一个字符串类型的属性date。提供了相应的Getter和Setter方法用于获取和设置各个属性的值。
这个配置类的目的是为Kaptcha验证码生成库提供灵活的配置选项支持多种配置情况。其中KaptchaProperties类包含了一个Map每个条目对应一个特定类型的Kaptcha配置而SingleKaptchaProperties类则包含了该类型的详细配置信息包括Session类中的属性。
6、最后的一个类是一个ServletContextInitializer的实现类名为ServletRegisterInitializer。它的主要目的是在Servlet容器启动时向ServletContext注册Kaptcha验证码生成的Servlet。
让我解释一下该类的主要结构和功能 private static final String KAPTCHA_SERVLET_BEAN_NAME_SUBFFIX KapthcaServlet: 定义了一个常量用于生成Kaptcha验证码Servlet的Bean名称后缀。 Resource: 注解用于注入依赖。 private KaptchaProperties kaptchaProperties: 注入KaptchaProperties对象用于获取Kaptcha的配置信息。 Resource(name kaptchaProps): 注入名为kaptchaProps的Properties对象该对象通过ConfigUtils类将KaptchaProperties转换而来。 public void onStartup(ServletContext servletContext) throws ServletException: 实现了ServletContextInitializer接口的方法在Servlet容器启动时执行。该方法的主要逻辑如下 获取Kaptcha的不同配置项SingleKaptchaProperties。 遍历配置项为每个配置项创建相应的Kaptcha验证码Servlet并将其注册到ServletContext中。 使用addServlet方法注册Servlet其中Servlet的名称由配置项的键和常量后缀拼接而成。 使用addMapping方法为Servlet指定映射路径路径由配置项的path属性决定。 通过setInitParameter方法设置Servlet的初始化参数这些参数来自于kaptchaProps和subProps其中subProps是通过ConfigUtils类生成的。 注册完成后每个Kaptcha配置项对应的Servlet就可以在指定的路径上响应请求了。
总体而言ServletRegisterInitializer类负责在Servlet容器启动时注册Kaptcha验证码生成的Servlet并根据配置项提供灵活的配置选项。 Kaptcha详细配置
这里提供了每个配置项的说明和默认值
配置项配置说明默认值kaptcha.border图片边框合法值yesnoyeskaptcha.border.color边框颜色合法值r,g,b (and optional alpha) 或者 white, black, blueblackkaptcha.image.width图片宽度200kaptcha.image.height图片高度50kaptcha.producer.impl图片实现类com.google.code.kaptcha.impl.DefaultKaptchakaptcha.textproducer.impl文本实现类com.google.code.kaptcha.text.impl.DefaultTextCreatorkaptcha.textproducer.char.string文本集合验证码值从此集合中获取abcde2345678gfynmnpwxkaptcha.textproducer.char.length验证码长度5kaptcha.textproducer.font.names字体Arial, Courierkaptcha.textproducer.font.size字体大小40pxkaptcha.textproducer.font.color字体颜色合法值r,g,b 或者 white, black, blueblackkaptcha.textproducer.char.space文字间隔2kaptcha.noise.impl干扰实现类com.google.code.kaptcha.impl.DefaultNoisekaptcha.noise.color干扰颜色合法值r,g,b 或者 white, black, blueblackkaptcha.obscurificator.impl图片样式com.google.code.kaptcha.impl.WaterRipple, com.google.code.kaptcha.impl.FishEyeGimpy, com.google.code.kaptcha.impl.ShadowGimpykaptcha.background.impl背景实现类com.google.code.kaptcha.impl.DefaultBackgroundkaptcha.background.clear.from背景颜色渐变开始颜色light greykaptcha.background.clear.to背景颜色渐变结束颜色whitekaptcha.word.impl文字渲染器com.google.code.kaptcha.text.impl.DefaultWordRendererkaptcha.session.keySession KeyKAPTCHA_SESSION_KEYkaptcha.session.dateSession DateKAPTCHA_SESSION_DATE
但是这个配置具体还是以代码为准。
我们刚刚使用的就是 kaptcha.items 配置多个验证码生成器。
kaptcha.items 是一个包含验证码生成器配置信息的Map。在这个Map中每个key代表一个特定的验证码生成器的名称而对应的value则包括了该生成器的详细配置。这些配置可能涉及验证码的长度、字符集、字体样式、噪点类型等多个参数以确保生成的验证码符合特定的需求和标准。通过这样的映射关系系统能够灵活地选择和使用不同的验证码生成器并根据具体的场景需求进行定制化配置以提供更加安全和个性化的验证码生成服务。这种模块化的设计使得系统在验证码生成方面具有较高的可扩展性和定制性适应不同应用场景的需求。 如上我们配置了两个验证码这两个验证码都是可以应用的。
当然你也可以配置多个验证码。
为了使用 kaptcha.items 配置多个验证码生成器你可以按照以下方式扩展和完善配置。
在这里我仍然以两个验证码生成器home 和 admin为例提供详细的配置说明
kaptcha:items:# Configuration for home captcha generatorhome:path: /home/captcha # URL路径session:key: HOME_KAPTCHA_SESSION_KEY # Session中验证码的键date: HOME_KAPTCHA_SESSION_DATE # Session中验证码生成时间的键producer:impl: com.google.code.kaptcha.impl.DefaultKaptcha # 图片生成器实现类width: 200 # 图片宽度height: 50 # 图片高度textproducer:impl: com.google.code.kaptcha.text.impl.DefaultTextCreator # 文本生成器实现类char.string: abcde2345678gfynmnpwx # 文本集合char.length: 5 # 验证码长度font.names: Arial, Courier # 字体font.size: 40 # 字体大小font.color: black # 字体颜色char.space: 2 # 文字间隔noise:impl: com.google.code.kaptcha.impl.DefaultNoise # 干扰实现类color: black # 干扰颜色obscurificator:impl: com.google.code.kaptcha.impl.WaterRipple # 图片样式background:impl: com.google.code.kaptcha.impl.DefaultBackground # 背景实现类clear:from: light grey # 背景颜色渐变开始颜色to: white # 背景颜色渐变结束颜色word:impl: com.google.code.kaptcha.text.impl.DefaultWordRenderer # 文字渲染器# Configuration for admin captcha generatoradmin:path: /admin/captchasession:key: ADMIN_KAPTCHA_SESSION_KEYdate: ADMIN_KAPTCHA_SESSION_DATEproducer:impl: com.google.code.kaptcha.impl.DefaultKaptchawidth: 200height: 50textproducer:impl: com.google.code.kaptcha.text.impl.DefaultTextCreatorchar.string: abcde2345678gfynmnpwxchar.length: 5font.names: Arial, Courierfont.size: 40font.color: blackchar.space: 2noise:impl: com.google.code.kaptcha.impl.DefaultNoisecolor: blackobscurificator:impl: com.google.code.kaptcha.impl.WaterRipplebackground:impl: com.google.code.kaptcha.impl.DefaultBackgroundclear:from: light greyto: whiteword:impl: com.google.code.kaptcha.text.impl.DefaultWordRenderer学习完成之后我们就可以来做一个关于验证码的小项目了。
需求
界面如下图所示
页面生成验证码输入验证码点击提交验证用户输入验证码是否正确正确则进行页面跳转。 准备工作
创建项目引入SpringMVC的依赖包 把前端页面放在项目中 index.html
!DOCTYPE html
html langenheadmeta charsetutf-8title验证码/titlestyle#inputCaptcha {height: 30px;vertical-align: middle; }#verificationCodeImg{vertical-align: middle; }#checkCaptcha{height: 40px;width: 100px;}/style
/headbodyh1输入验证码/h1div idconfirminput typetext nameinputCaptcha idinputCaptchaimg idverificationCodeImg src/admin/captcha stylecursor: pointer; title看不清换一张 /input typebutton value提交 idcheckCaptcha/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscript$(#verificationCodeImg).click(function(){$(this).hide().attr(src, /admin/captcha?dt new Date().getTime()).fadeIn();});$(#checkCaptcha).click(function () {alert(验证码校验);});/script
/body/html
这前端代码是一个简单的验证码输入页面 HTML结构 !DOCTYPE html: 定义文档类型为HTML。html langen: 标明文档的语言为英语。head: 包含文档的元信息如字符集和页面标题。body: 包含页面的实际内容。 CSS样式设置了一些样式如输入框高度、垂直对齐方式等。 页面内容 h1输入验证码/h1: 页面标题提示用户当前页面的目的。div idconfirm: 包裹验证码输入相关元素的容器。 验证码相关元素 input typetext nameinputCaptcha idinputCaptcha: 用于输入验证码的文本框。img idverificationCodeImg src/admin/captcha stylecursor: pointer; title看不清换一张 /: 显示验证码图片的img标签。通过点击图片触发jQuery事件在点击时隐藏图片通过添加时间戳参数来强制浏览器刷新图片以获取新的验证码图片。 img idverificationCodeImg: 创建一个图片元素使用id属性为其指定一个唯一的标识符方便通过JavaScript或CSS进行操作。 src/admin/captcha: 设置图片的源路径为/admin/captcha这是验证码图片的获取路径它将相对于当前页面的 URL 进行解析此处可以是绝对路径、相对路径和网络路径。 也就是说我们下面配置的URL返回的是一个图片 stylecursor: pointer;: 添加样式将鼠标指针设置为手型以提示用户该图片可以点击。 title看不清换一张: 设置图片的标题这将在用户将鼠标悬停在图片上时显示。提示用户如果验证码不清晰可以点击图片来获取新的验证码。 input typebutton value提交 idcheckCaptcha: 提交按钮用于触发验证码校验。相关的jQuery事件 $(#verificationCodeImg).click(function(){$(this).hide().attr(src, /admin/captcha?dt new Date().getTime()).fadeIn();
});$(#verificationCodeImg).click(): 通过jQuery选择器选中id为verificationCodeImg的图片元素然后为其绑定一个点击事件。 $(this).hide(): 在点击事件中首先隐藏当前的验证码图片。 .attr(src, /admin/captcha?dt new Date().getTime()): 修改图片的src属性通过添加时间戳参数?dt new Date().getTime()以确保浏览器认为这是一个新的URL从而强制刷新验证码图片。 .fadeIn(): 将修改后的图片以淡入效果显示使新的验证码图片在页面中渐显出来。 jQuery脚本 引入jQuery库。$(#verificationCodeImg).click(): 给验证码图片添加点击事件通过隐藏当前图片、修改src属性添加时间戳参数、然后渐显显示新图片实现更换验证码的效果。$(#checkCaptcha).click(): 给提交按钮添加点击事件点击按钮时弹出一个提示框显示验证码校验。
总体而言这段前端代码实现了一个简单的验证码输入页面其中用户可以通过点击验证码图片来更换验证码点击提交按钮会触发一个提示框。
success.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title验证成功页/titlescriptconsole.log(Frontend: success.html loaded.); // 添加调试信息/script
/head
bodyh1验证成功/h1
/body
/html可以直接运行看看 点击图片就可以切换新的验证码。
你也可以通过更改配置来调整界面 参考逻辑
如果我们想自己实现一个验证码的程序并且希望使用类似Kaptcha的方式可以参考这个类的实现 //
// Source code recreated from a .class file by IntelliJ IDEA
// (powered by FernFlower decompiler)
//package com.google.code.kaptcha.servlet;import com.google.code.kaptcha.Producer;
import com.google.code.kaptcha.util.Config;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Date;
import java.util.Enumeration;
import java.util.Properties;
import javax.imageio.ImageIO;
import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class KaptchaServlet extends HttpServlet implements Servlet {private Properties props new Properties();private Producer kaptchaProducer null;private String sessionKeyValue null;private String sessionKeyDateValue null;public KaptchaServlet() {}public void init(ServletConfig conf) throws ServletException {super.init(conf);ImageIO.setUseCache(false);Enumeration? initParams conf.getInitParameterNames();while(initParams.hasMoreElements()) {String key (String)initParams.nextElement();String value conf.getInitParameter(key);this.props.put(key, value);}Config config new Config(this.props);this.kaptchaProducer config.getProducerImpl();this.sessionKeyValue config.getSessionKey();this.sessionKeyDateValue config.getSessionDate();}public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setDateHeader(Expires, 0L);resp.setHeader(Cache-Control, no-store, no-cache, must-revalidate);resp.addHeader(Cache-Control, post-check0, pre-check0);resp.setHeader(Pragma, no-cache);resp.setContentType(image/jpeg);String capText this.kaptchaProducer.createText();req.getSession().setAttribute(this.sessionKeyValue, capText);req.getSession().setAttribute(this.sessionKeyDateValue, new Date());BufferedImage bi this.kaptchaProducer.createImage(capText);ServletOutputStream out resp.getOutputStream();ImageIO.write(bi, jpg, out);}
}这个类是一个实现验证码生成的Servlet类主要用于生成Kaptcha验证码图片。以下是这个类的主要功能 初始化方法 (init): 在Servlet初始化时被调用。设置ImageIO的缓存使用为false确保验证码图片不会被缓存。通过获取初始化参数使用这些参数初始化 Config 对象。从 Config 对象中获取验证码生成器、会话键名和日期键名。 GET请求处理方法 (doGet): 处理HTTP GET请求用于生成验证码图片。设置HTTP响应头禁用缓存设置响应类型为JPEG。通过验证码生成器 (kaptchaProducer) 创建验证码文本和图片。将验证码文本和日期信息存储在会话中。将验证码图片写入响应输出流。 属性: props: 用于存储Servlet初始化参数的 Properties 对象。kaptchaProducer: 用于生成验证码图片的 Producer 对象。sessionKeyValue: 存储验证码文本的会话键名。sessionKeyDateValue: 存储验证码日期信息的会话键名。 构造方法:没有参数的构造方法。
这个类的作用是处理GET请求生成Kaptcha验证码图片并将验证码文本和日期信息存储在会话中。这是一个常见的用于实现验证码功能的Servlet类。
主要逻辑包括
初始化配置在 init 方法中通过获取Servlet初始化参数创建 Config 对象从中获取验证码生成器、会话键名和日期键名。生成验证码图片在 doGet 方法中设置HTTP响应头生成验证码文本和图片将验证码文本和日期信息存储在会话中并将验证码图片写入响应输出流。使用ImageIO生成图片使用 ImageIO 类来创建验证码图片并通过 ServletOutputStream 将图片写入响应输出流。
接下来我们只需要完成KaptchaController 类的编写工作然后结合导入的前面提到的 KaptchaServlet 类就可以构成一个简单的验证码程序。
我们的 KaptchaController 类主要用于验证码的校验而 KaptchaServlet 类则用于生成验证码图片。
关键的步骤如下 生成验证码使用 KaptchaServlet 类的 doGet 方法生成验证码图片并在其中将验证码文本和日期信息存储在会话中。 校验验证码 使用 KaptchaController 类的 check 方法获取用户输入的验证码并从会话中获取生成的验证码文本和日期信息。比对用户输入的验证码是否与生成的验证码一致并检查验证码是否过期。 前端交互 在前端页面中引用验证码图片的路径为 /admin/captcha。用户在页面上输入验证码并通过提交按钮触发 KaptchaController 的 check 方法进行验证。
总之在整个流程中用户在页面上看到的验证码图片和用户输入的验证码将经由我们的前端和后端协作实现。
约定前后端交互接口
需求分析 在前后端交互的过程中后端需要提供两个主要服务分别是
生成验证码并将生成的验证码返回给前端。校验用户输入的验证码是否正确。
接口定义 生成验证码 请求GET /admin/captcha响应图片内容用户通过浏览器发送一个GET请求至服务器路径为/admin/captcha。服务器在收到请求后生成一个验证码图片并将该图片的内容作为响应返回给浏览器。浏览器接收到响应后在页面上显示验证码图片。 校验验证码是否正确 请求 POST /admin/check参数captchaxn8d用户输入的验证码响应true 或 false用户在登录或提交表单时通过浏览器向服务器发送一个POST请求路径为/admin/check同时携带用户输入的验证码参数例如captchaxn8d。服务器收到请求后根据用户输入的验证码进行校验如果验证码正确则返回true表示验证成功否则返回false表示验证失败。
通过以上接口定义前端可以实现验证码的生成和校验功能增强系统的安全性和用户验证机制。
实现服务器端代码
引入依赖
如前
通过配置创建验证码生成器
如前
启动项目访问http://127.0.0.1:8080/admin/captcha显示验证码。
验证码校验 package com.example.captchademo;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpSession;
import java.util.Date;RequestMapping(/admin)
RestController
public class KaptchaController {private static final String KAPTCHA_SESSION_KEY KAPTCHA_SESSION_KEY;private static final String KAPTCHA_SESSION_DATE KAPTCHA_SESSION_DATE;private static final long TIME_OUT 60*1000;//一分钟, 毫秒数/*** 校验验证码是否正确* param inputCaptcha 用户输入的验证码* return*/RequestMapping(/check)public boolean check(String inputCaptcha, HttpSession session){//1. 判断输入的验证码是否为空//2. 获取生成的验证码//3. 比对 生成的验证码和输入的验证码是否一致//4. 确认验证码是否过期if (!StringUtils.hasLength(inputCaptcha)){return false;}//生成的验证码(正确的验证码)String saveCaptcha (String)session.getAttribute(KAPTCHA_SESSION_KEY);Date savaCaptchaDate (Date)session.getAttribute(KAPTCHA_SESSION_DATE);if (inputCaptcha.equalsIgnoreCase(saveCaptcha)){//不区分大小写if (savaCaptchaDate!null || System.currentTimeMillis()-savaCaptchaDate.getTime()TIME_OUT){return true;}}return false;}
}比对Session中存储的验证码是否和用户输入的⼀致
如果⼀致并且时间在⼀分钟以为就认为成功。 调整前端页面代码
修改 index.html
补充ajax代码点击提交按钮发送请求去服务端进行校验
$(#checkCaptcha).click(function () {// 发送Ajax请求校验验证码$.ajax({url: /admin/check, // 服务端校验验证码的接口路径type: post, // 请求类型为POSTdata: { inputCaptcha: $(#inputCaptcha).val() }, // 向服务端发送的数据包括用户输入的验证success: function (result) {// 请求成功的回调函数if (result) {// 如果服务端返回true表示验证码校验成功location.href success.html; // 重定向到success.html页面} else {// 如果服务端返回false表示验证码校验失败alert(验证码错误); // 弹出提示框提示用户验证码错误console.log(Frontend: Verification failed.); // 添加调试信息$(#inputCaptcha).val(); // 清空用户输入的验证码}},error: function (xhr, status, error) {console.log(Ajax Error:, xhr, status, error); // 输出Ajax请求错误信息}});
});
!DOCTYPE html
html langenheadmeta charsetutf-8title验证码/titlestyle#inputCaptcha {height: 30px;vertical-align: middle; }#verificationCodeImg{vertical-align: middle; }#checkCaptcha{height: 40px;width: 100px;}/style
/headbodyh1输入验证码/h1div idconfirminput typetext nameinputCaptcha idinputCaptchaimg idverificationCodeImg src/admin/captcha stylecursor: pointer; title看不清换一张 /input typebutton value提交 idcheckCaptcha/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscript$(#verificationCodeImg).click(function(){$(this).hide().attr(src, /admin/captcha?dt new Date().getTime()).fadeIn();});$(#checkCaptcha).click(function () {// 发送Ajax请求校验验证码$.ajax({url: /admin/check, // 服务端校验验证码的接口路径type: post, // 请求类型为POSTdata: { inputCaptcha: $(#inputCaptcha).val() }, // 向服务端发送的数据包括用户输入的验证success: function (result) {// 请求成功的回调函数if (result) {// 如果服务端返回true表示验证码校验成功location.href success.html; // 重定向到success.html页面} else {// 如果服务端返回false表示验证码校验失败alert(验证码错误); // 弹出提示框提示用户验证码错误console.log(Frontend: Verification failed.); // 添加调试信息$(#inputCaptcha).val(); // 清空用户输入的验证码}},error: function (xhr, status, error) {console.log(Ajax Error:, xhr, status, error); // 输出Ajax请求错误信息}});
});/script
/body/html运行测试
