文章目录
1. 编写 Kaptcha 配置类环境准备配置类设置==@Configuration====@Bean====Producer接口====DefaultKaptcha====Config====Properties== 2. 生成验证码的请求设计思路生成动态验证码的请求设计传入参数主逻辑==response.setContentType("image/png")====ImageIO.write== 测试结果 3. jQuery实现jsp动态刷新jQuery函数声明==avascript:refresh_kaptcha()== jQuery函数定义==var path====$("#kaptcha")====attr("src", path)== 测试结果参考牛客网高级项目教程
1. 编写 Kaptcha 配置类
环境准备
导入kaptcha包，由于没有spring关连的包，需要自己配置到spring中<!--注册码配置--><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>
配置类设置
@Configuration
声明是配置类，能够被Spring识别用于指定当前类是一个 spring 配置类， 当创建容器时会从该类上加载注解。 获取容器时需要使用@Bean
作用:
该注解只能写在方法上，表明使用此方法创建一个对象，并且放入 spring 容器。用此方法==可以将其他jar包中的类注入到IOC容器中==相当于注册的bean，
属性:
name：给当前@Bean注解方法创建的对象指定一个名称(即 bean 的 id）。如果不指定，这里的返回值就Bean的类型，方法名就是默认的bean的id！
细节:
当我们使用注解配置方法时，如果方法有参数，spring框架会去容器中查找有没有可用的bean对象。使用方法查找的方式和Autowired注解的作用是一样的
Producer接口
主要实现这个接口，实现两个方法创建验证码文本字符串 createText()根据字符串创建验证码图片 createImage(String var1)package com.google.code.kaptcha;import java.awt.image.BufferedImage;public interface Producer {// 根据字符串创建验证码图片BufferedImage createImage(String var1);// 创建验证码字符串String createText();}
DefaultKaptcha
Producer的实现类，目的是实例化这个实现类也实现了Configurable接口，即可以通过读取配置，去设置这个实现类Config
Kaptcha的一个工具类，用来读取配置文件里的内容Properties
配置类，可以在配置文件中定义key，value也可以直接实例化配置类，在配置类中设置key，value，方便起见，本例采用此种方式@Configurationpublic class KaptchaConfig {@Beanpublic Producer kaptchaProducer() {// 配置类，相当于配置文件的作用Properties properties = new Properties();properties.setProperty("kaptcha.image.width", "100");properties.setProperty("kaptcha.image.height", "40");properties.setProperty("kaptcha.textproducer.font.size", "32");properties.setProperty("kaptcha.textproducer.char.string", "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"); // 验证码字符串所有字符集properties.setProperty("kaptcha.textproducer.char.length", "4"); // 字符串个数properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise"); // 验证码的干扰方式：无// 实例化Producer的实现类DefaultKaptcha kaptcha = new DefaultKaptcha();Config config = new Config(properties); // 读取配置文件内容kaptcha.setConfig(config); // 用配置类去设置实现类return kaptcha; // 返回生成验证码的实现类}}
2. 生成验证码的请求
设计思路
为设计动态刷新验证码，设计一个请求，专门生成随机字符串、图片
即，每次访问这个请求，服务器都会给浏览器生成一个新的验证码，实现动态刷新效果直接将字符串、图片写给浏览器
然后将这个请求应用到登录表单页面中
每次点击登录，都会重新刷新验证码或者在登录页面，点击刷新按钮，也可动态刷新验证码，需要用到jQuery实现动态JSP页面
生成动态验证码的请求设计
传入参数
response,要用response向浏览器写验证码session，因要在登录页面需要输入验证码验证，且验证码信息敏感，存入session中主逻辑
将生成验证码的接口注入
@AutowiredProducer kaptchaProducer;
生成验证码
将验证码存入session中
将服务器中生成的图片直接输出写给浏览器
response.setContentType(“image/png”)
写入前，先设置响应格式ImageIO.write
向浏览器直接写入图片的工具类，ImageIO.write(image, “png”, os);
OutputStream，用字节流写图片更好
/** 生成验证码图片网页*/@RequestMapping(path = "/kaptcha", method = RequestMethod.GET)public void getKaptcha(HttpServletResponse response, HttpSession session) {// 生成验证码String text = kaptchaProducer.createText();BufferedImage image = kaptchaProducer.createImage(text);// 将验证码存入session中session.setAttribute("kaptcha", text);// 将服务器中生成的图片直接输出写给浏览器response.setContentType("image/png");try {OutputStream os = response.getOutputStream();ImageIO.write(image, "png", os);} catch (IOException e) {logger.error("响应验证码失败：" + e.getMessage());}}
测试结果
3. jQuery实现jsp动态刷新
JavaScript 和查询（Query）
jQuery函数声明
avascript:refresh_kaptcha()
只要点击刷新验证码，会走jQuery定义的函数<div class="col-sm-4"><img th:src="@{/kaptcha}" style="width:100px;height:40px;" class="mr-2"/><a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a></div>
jQuery函数定义
var path
JavaScript 语法，定义变量，路径拼接将项目路径名在global.js文件内定义为全局变量，方便今后维护var CONTEXT_PATH = “/community”; 由于要改变的路径url地址与原地址相同，且是静态图片，浏览器会误以为无需重新加载访问 为解决这个问题，对浏览器作善意的引导，将路径名后面添加随机参数，不影响访问，也不同于原url$("#kaptcha")
id属性选择器，根据id属性查询标签对象
扩展：常见选择器： $(“#id 属性值”); id 选择器， 根据 id 查询标签对象$(“标签名”); 标签名选择器， 根据指定的标签名查询标签对象$(“.class 属性值”); 类型选择器， 可以根据 class 属性查询标签对象*选择器： 表示任意的， 所有的元素selector1， selector2 组合选择器： 合并选择器 1， 选择器 2 的结果并返回
<div class="col-sm-4"><img th:src="@{/kaptcha}" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/><a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a></div>
attr(“src”, path)
attr(a, b) 方法，设置属性的值，将a的值设置为b
从而实现每次点击，将访问路径更新的操作
扩展： attr() 可以设置和获取属性的值， 不推荐操作 checked、 readOnly、 selected、 disabled 等等 attr 方法还可以操作非标准的属性。 比如自定义属性： abc,bbj prop() 可以设置和获取属性的值,只推荐操作 checked、 readOnly、 selected、 disabled 等
<script>function refresh_kaptcha() {var path = CONTEXT_PATH + "/kaptcha?p=" + Math.random();$("#kaptcha").attr("src", path);}</script>
