Kaptcha概述

GitHub:
https://github.com/penggle/kaptcha

官网
http://code.google.com/p/kaptcha/

Kaptcha是基于SimpleCaptcha的开源项目。通过调整Kaptcha配置可以生成各种样式的验证码。

Kaptcha提供的功能如下：

验证码的字体
验证码字体的大小
验证码字体的字体颜色
验证码内容的范围
验证码图片的大小，边框，边框粗细，边框颜色
验证码的干扰线
验证码的样式

maven依赖

 <!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha --><dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency>

web.xml配置Kaptcha对应的servlet，设置属性

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"version="3.1" metadata-complete="true"><!-- 配置DispatcherServlet -->.........省略.........省略<!-- 为避免编码不一致,一般情况下都需要增加编码过滤器 -->.........省略.........省略<!-- 生成图片的Servlet --><servlet><servlet-name>Kaptcha</servlet-name><servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class><!-- 是否有边框 --><init-param><param-name>kaptcha.border</param-name><param-value>no</param-value></init-param><!-- 字体颜色 --><init-param><param-name>kaptcha.textproducer.font.color</param-name><param-value>red</param-value></init-param><!-- 图片宽度 --><init-param><param-name>kaptcha.image.width</param-name><param-value>135</param-value></init-param><!-- 使用哪些字符生成验证码 --><init-param><param-name>kaptcha.textproducer.char.string</param-name><param-value>ACDEFHKPRSTWX345679</param-value></init-param><!-- 图片高度 --><init-param><param-name>kaptcha.image.height</param-name><param-value>50</param-value></init-param><!-- 字体大小 --><init-param><param-name>kaptcha.textproducer.font.size</param-name><param-value>43</param-value></init-param><!-- 干扰线的颜色 --><init-param><param-name>kaptcha.noise.color</param-name><param-value>black</param-value></init-param><!-- 字符个数 --><init-param><param-name>kaptcha.textproducer.char.length</param-name><param-value>4</param-value></init-param><!-- 使用哪些字体 --><init-param><param-name>kaptcha.textproducer.font.names</param-name><param-value>Arial</param-value></init-param></servlet><!-- 映射的url --><servlet-mapping><servlet-name>Kaptcha</servlet-name><url-pattern>/Kaptcha</url-pattern></servlet-mapping></web-app>

页面

shopoperation.html中定义组件

/o2o/src/main/webapp/WEB-INF/html/shop/shopoperation.html
输入部分input ：设置id,便于js中操作

图片部分img ：设置id, 定义onClick事件,通过src属性，调用对应的servlet

                     <!-- 验证码  kapa--><li><div class="item-content"><div class="item-inner"><div class="item-title label">验证码</div><input type="text" id="j_kaptcha" placeholder="验证码"><div class="item-input"><img id="kaptcha_img" alt="点击更换" title="点击更换"onclick="changeVerifyCode(this)" src="../Kaptcha"> <!-- src是找到web.xml中 对应的servlet的名字 --></div></div></div></li>

最后引用自定义的common.js

<script type='text/javascript'src='../resources/js/common/common.js' charset='utf-8'></script>

common.js

/o2o/src/main/webapp/resources/js/common/common.js

点击触发更换验证码

function changeVerifyCode(img){img.src="../Kaptcha?" + Math.floor(Math.random() * 1000)
}

shopoperation.js使用

/o2o/src/main/webapp/resources/js/shop/shopoperation.js

通过html中设置的id值，获取输入属性，做了一层很弱的校验，并封装到formData中利用ajax发送到后台

 /*** submit按钮触发的操作*/$('#submit').click(function() {// 获取页面的值var shop = {};.........省略.........省略// 验证码var verifyCodeActual =$('#j_kaptcha').val();console.log('verifyCodeActual:'+verifyCodeActual);if(!verifyCodeActual){$.toast('请输入验证码');return;}// 接收数据var formData = new FormData();// 将数据封装到formData发送到后台formData.append('verifyCodeActual',verifyCodeActual);.........省略.........省略// 利用ajax提交$.ajax({url:registerShopUrl,type:'POST',data:formData,contentType:false,processData:false,cache:false,success:function(data){if(data.success){$.toast('提示信息:'+data.errMsg);}else{$.toast('提示信息:' + data.errMsg);}// 点击提交后 不管成功失败都更换验证码，防止重复提交$('#kaptcha_img').click();}});});

spring-web.xml配置multipartResolver

/o2o/src/main/resources/spring/spring-web.xml

我们的首页使用了文件上传，以及验证码（图片），multipart类型。 Spring需要multipartResolver来接收解析这部分流。如果不配置的话，无法获取到输入的验证码。

 <!-- 文件上传解析器 --><bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="utf-8"></property><property name="maxUploadSize" value="10485760000"></property><!-- 最大上传文件大小 --><property name="maxInMemorySize" value="10960"></property></bean>

控制层

封装校验验证码的工具类

package com.artisan.o2o.util;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger;
import org.slf4j.LoggerFactory;public class VerifyCodeUtil {private static final Logger logger = LoggerFactory.getLogger(VerifyCodeUtil.class);/*** * * @Title: verifyCode* * @Description:验证码校验* * @param request*            前端HttpServletRequest* @return* * @return: boolean*/public static boolean verifyCode(HttpServletRequest request) {// 图片中的验证码String verifyCodeExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);logger.debug("verifyCodeExpected:{}", verifyCodeExpected);// 用户输入的验证码String verifyCodeActual = HttPServletRequestUtil.getString(request,"verifyCodeActual");logger.debug("verifyCodeActual:{}", verifyCodeActual);if (verifyCodeActual == null|| !verifyCodeActual.equalsIgnoreCase(verifyCodeExpected)) {return false;}return true;}
}

控制层获取验证码做校验

在 ShopController#registerShop()中，首先进行验证码的校验工作，使用封装的工具类，如果输入错误，直接返回给前端，将错误结果放入modelMap中。

// 0. 验证码校验if (!VerifyCodeUtil.verifyCode(request)) {modelMap.put("success", false);modelMap.put("errMsg", "验证码不正确");return modelMap;}

Github地址

代码地址： https://github.com/yangshangwei/o2o

实战SSM_O2O商铺_14【商铺注册】View层之验证码kaptcha组件相关推荐

校园O2O商铺平台-店铺注册Service层和Controller层
店铺注册之Service层的实现正在更新店铺注册功能之Controller层的实现正在更新店铺注册功能之Controller层的改造正在更新
校园O2O商铺平台-店铺注册DAO层与图片处理
DAO层之新增店铺正在更新 DAO层之更新店铺正在更新 Thumbnailator图片处理和封装Util 正在更新 Dto之ShopExecution的实现正在更新
实战SSM_O2O商铺_15【商铺注册】View层+Controller层之图片上传
文章目录概述 Maven依赖文件上传解析器bean的配置页面 shopoperation.html增加上传组件 shopoperation.js Controller层 Github地址概述 ...
实战SSM_O2O商铺_13【商铺注册】View层之初始化页面数据
文章目录请求过程分析 DAO层的实现 AreaDao接口,Mapper映射文件及单元测试 ShopCategoryDao接口 ShopCategoryDao.xml Mapper映射文件单元测试 ...
实战SSM_O2O商铺_12【商铺注册】View层之前台页面
文章目录概述前端框架选择页面目录结构搭建商铺注册页面 JS部分 shopoperation.js common.js 乱码问题将页面迁到WEB-INF目录下 Controller层的编写访 ...
实战SSM_O2O商铺_11【商铺注册】Controller层的实现
文章目录概述结构 Maven依赖封装工具类HttPServletRequestUtil Controller控制层编写 Service层的改造单元测试 Github地址概述实战SSM_O2 ...
实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
文章目录概述 index.html index.js index.css Controller 调测修复问题头条图片展示修复一级类别商铺图片展示修复 Github地址概述在完成了后端实战 ...
实战SSM_O2O商铺_31【商品】商品添加之View层的实现
文章目录概述 productoperation.html productoperation.js 联调检查结果库表数据: 磁盘上的图片 Github地址概述在完成了实战SSM_O2O商铺_ ...
实战SSM_O2O商铺_27【商品类别】删除商品类别从Dao到View层的开发
文章目录概述 Dao层 ProductCategoryDao接口增加接口方法 ProductCategoryDao SQL映射文件闭环的单元测试 Servie层接口接口实现单元测试 Cont ...

实战SSM_O2O商铺_14【商铺注册】View层之验证码kaptcha组件

文章目录