一、前端编写
1、进入网址,引入依赖
https://mvnrepository.com/artifact/com.github.penggle/kaptcha/2.3.2
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
2、在web.xml 编写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>
<servlet-mapping>
<servlet-name>Kaptcha</servlet-name>
<url-pattern>/Kaptcha</url-pattern>
</servlet-mapping>
3、HTML中编写验证码
红框中的名字是web.xml中servlet的名字
4、编写changeVerifyCode()方法
由于验证码功能有很多地方可能用到,所以单独写一个JS
function changeVerifyCode(img) {
img.src="../Kaptcha?" + Math.floor(Math.random()*100);//0-100的整数
}
5、在HTML中引入common.js
<script type="text/javascript" src='../resources/js/common/common.js' charset="utf-8"></script>
6、shopoperation.js中编写
点击提交后更换验证码,通过click 调用changeVerifyCode()方法
二、后端验证输入验证码是否正确
1、在util包下编写工具类
/**
* 判断验证码是否符合预期
* @author shawn
*
*/
public class CodeUtil {
public static boolean checkVerifyCode(HttpServletRequest request) {
//实际的验证码
String verifyCodeExcepted = (String)request.getSession().getAttribute(
com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
//输入的验证码
String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
if(verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExcepted)) {
return false;
}
return true;
}
}
2、在ShopManagementController引入验证码工具类
3、通过modelMap传到前端