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中
配置类设置 @Configurationcom.github.penggle kaptcha 2.3.2
声明是配置类，能够被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，方便起见，本例采用此种方式
@Configuration
public class KaptchaConfig {
@Bean
public 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中 主逻辑
将生成验证码的接口注入
@Autowired Producer 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定义的函数
jQuery函数定义 var path
Javascript 语法，定义变量，路径拼接
将项目路径名在global.js文件内定义为全局变量，方便今后维护
var CONTEXT_PATH = “/community”; 由于要改变的路径url地址与原地址相同，且是静态图片，浏览器会误以为无需重新加载访问
为解决这个问题，对浏览器作善意的引导，将路径名后面添加随机参数，不影响访问，也不同于原url $("#kaptcha")
id属性选择器，根据id属性查询标签对象
扩展：常见选择器：
$(“#id 属性值”); id 选择器， 根据 id 查询标签对象$(“标签名”); 标签名选择器， 根据指定的标签名查询标签对象$(“.class 属性值”); 类型选择器， 可以根据 class 属性查询标签对象*选择器： 表示任意的， 所有的元素selector1， selector2 组合选择器： 合并选择器 1， 选择器 2 的结果并返回
attr(“src”, path)
attr(a, b) 方法，设置属性的值，将a的值设置为b
从而实现每次点击，将访问路径更新的操作
扩展：
attr() 可以设置和获取属性的值， 不推荐操作 checked、 readOnly、 selected、 disabled 等等
attr 方法还可以操作非标准的属性。 比如自定义属性： abc,bbj prop() 可以设置和获取属性的值,只推荐操作 checked、 readOnly、 selected、 disabled 等
测试结果
