实战SSM_O2O商铺_14【商铺注册】View层之验证码kaptcha组件
文章目录
- Kaptcha概述
- maven依赖
- web.xml配置Kaptcha对应的servlet，设置属性
- 页面
- shopoperation.html中定义组件
- common.js
- shopoperation.js使用
- spring-web.xml配置multipartResolver
- 控制层
- 封装校验验证码的工具类
- 控制层获取验证码做校验
- Github地址
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/javaee
http://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