springMVC-11-验证码
springMVC-11-验证码
导入依赖
<!--Kaptcha 验证码依赖 前面已导过servlet-api需排除-->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
<exclusions>
<exclusion>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
在web.xml中为com.google.code.kaptcha.servlet.KaptchaServlet
注册
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>cap</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.char.length</param-name>
<param-value>4</param-value>
</init-param>
<init-param>
<!--字符内容范围-->
<param-name>kaptcha.textproducer.char.string</param-name>
<param-value>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</param-value>
</init-param>
<init-param>
<!--验证码底色, 用RGB数值指定-->
<param-name>kaptcha.background.clear.to</param-name>
<param-value>211,229,237</param-value>
</init-param>
<init-param>
<!--把验证码的码值存放在session中, 相当于 session.setAttribute("captcha","验证码")-->
<param-name>kaptcha.session.key</param-name>
<param-value>captcha</param-value>
</init-param>
</servlet>
<!--这个验证码配置就不需要全部的url都配置了-->
<servlet-mapping>
<servlet-name>cap</servlet-name>
<url-pattern>/captcha</url-pattern>
</servlet-mapping>
有了这个配置之后
我们下一步就是把这个验证码请求放到正常jsp界面中
jsp界面
<form action="${pageContext.request.contextPath}/kaptcha">
<img id="captchaImg" src="${pageContext.request.contextPath}/captcha" style="width: 100px" onclick="refresh()">
<input type="text" name="captcha"><br>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
function refresh() {
var i = document.getElementById("captchaImg");
/**
* 有时候发送请求,浏览器会直接读取缓存数据,不会去请求后台数据,比如http://localhost:8080/test/login/index,
* 请求一次之后,再次发送请求的时候,由于url请求没有发生变化,浏览器会自动读取缓存。这一点会给开发带来一些麻烦。
* 添加时间戳参数使得每次请求地址都不一样, 防止浏览器缓存
*/
//虽然此处还传入了一个时间戳,但是在control中可以不对这个参数进行获取,control不需要任何改变
i.src = "${pageContext.request.contextPath}/captcha?"+new Date().getTime();
//注意这里没有return false,说明这个点击一方面更改了url,一方面又进行了访问
}
</script>
control中:(通过 realCap.equalsIgnoreCase(captcha) 可以设置不检验大小写)
@RequestMapping(value = "/kaptcha",produces = "text/html;charset=UTF-8")
public String getKaptcha(String captcha,HttpSession session){
//比对
String realCaptcha = (String)session.getAttribute("captcha");
if (captcha.equals(realCaptcha)){
return "验证码通过";
}
return "验证码未通过";
}
结果:出现这个界面