一、maven中加入jar
<!-- github.penggle-kaptcha验证码工具 --><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>
二、新建一个spring配置文件spring-kaptcha.xml，加入以下配置
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:p="http://www.springframework.org/schema/p"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd"><description>kaptcha Configuration</description><!-- 配置验证码信息 --><bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> <property name="config"> <bean class="com.google.code.kaptcha.util.Config"> <constructor-arg> <props> <prop key="kaptcha.border">no</prop> <prop key="kaptcha.textproducer.font.color">black</prop> <prop key="kaptcha.image.width">85</prop> <prop key="kaptcha.image.height">42</prop> <prop key="kaptcha.textproducer.font.size">30</prop> <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop><prop key="kaptcha.session.key">code</prop> <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop><prop key="kaptcha.background.clear.from">92,189,170</prop><prop key="kaptcha.background.clear.to">92,189,170</prop><prop key="kaptcha.textproducer.char.length">4</prop> <prop key="kaptcha.textproducer.font.names">彩云,宋体,楷体,微软雅黑</prop> </props> </constructor-arg> </bean> </property> </bean> </beans>
三. Controller的实现
/*** Created by HONGLINCHEN ON 2017/11/13 9:12* 验证码* @param request* @param response* @return*/@GetMapping(value = "/captchaImage")public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {// 禁止服务器端缓存response.setDateHeader("Expires", 0);// 设置标准的 HTTP/1.1 no-cache headers.response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");// 设置IE扩展 HTTP/1.1 no-cache headers (use addHeader).response.addHeader("Cache-Control", "post-check=0, pre-check=0");// 设置标准 HTTP/1.0 不缓存图片response.setHeader("Pragma", "no-cache");// 返回一个 jpeg 图片，默认是text/html(输出文档的MIMI类型)response.setContentType("image/jpeg");// 为图片创建文本String capText = captchaProducer.createText();// 将文本保存在session中，这里就使用包中的静态变量吧request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);// 创建带有文本的图片BufferedImage bi = captchaProducer.createImage(capText);ServletOutputStream out = response.getOutputStream();// 图片数据输出ImageIO.write(bi, "jpg", out);String kaptchaExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);System.err.println("登录的验证码是："+kaptchaExpected);try {out.flush();} finally {out.close();}return null;}
四、jsp中使用方法不需要引入任何js的css
<dd class="val_icon"><div class="checkcode"><input type="text" id="J_codetext" name="checkCode" placeholder="验证码" maxlength="4" class="login_txtbx"><img class="J_codeimg" src="${gmf}/captchaImage" id="kaptchaImage" /> </div><input type="button" value="点击,换一张" class="ver_btn" onclick="$(this).prev().find('img').click()"></dd>
五、js中的实现
/*** 验证码更改*/$(function() {$('#kaptchaImage').click(function() {$(this).attr('src', baselocation + '/captchaImage?' + Math.floor(Math.random() * 100));})});
