生成图片验证码
- 首先要添加一个jar包。
“kaptcha-2.3.2.jar”是一个java开源的验证码工具包,kaptcha 是一个非常实用的验证码生成工具。有了它,你可以生成各种样式的验证码,因为它是可配置的。kaptcha工作的原理是调用com.google.code.kaptcha.servlet.KaptchaServlet,生成一个图片。同时将生成的验证码字符串放到 HttpSession中。)
kaptcha-2.3.2.jar下载 - Springmvc-servlet.xml 添加配置,创建验证码bean。
<!-- 配置验证码属性 -->
<bean id="config" class="com.google.code.kaptcha.util.Config">
<constructor-arg>
<props>
<prop key="kaptcha.textproducer.char.length">4</prop>
<prop key="kaptcha.image.width">150</prop>
<prop key="kaptcha.image.height"></prop>
</props>
</constructor-arg>
</bean>
<!-- 生成验证码对象 -->
<bean id="producer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
<property name="config" ref="config"></property>
</bean>
- 创建验证码Controller自动装配验证码对象
@Autowired
private DangDangUserService userservice;
//自动装配验证码对象
@Autowired
private Producer producer;
//获取验证码
@RequestMapping("/validateCode")
public void validateCode(HttpSession session,HttpServletResponse response) {
//获取验证码字符串
String kaptcha = producer.createText();
//保留验证码,存储在session中
session.setAttribute("kaptcha", kaptcha);
//把字符串加干扰线装进图片
BufferedImage image = producer.createImage(kaptcha);
//然后用流的方式把图片响应给请求端
try {
ImageIO.write(image,"jpg",response.getOutputStream());
} catch (IOException e) {
e.printStackTrace();
}
}
- 准备前端页面
全局首次加载验证码
//全局加载
$(function(){
//加载验证码
$("#imgVcode").attr("src","${pageContext.request.contextPath}/user/validateCode.do");
});
刷新加载验证码
<tr>
<td valign="top" class="w1">验证码:</td>
<td>
<img class="yzm_img" id='imgVcode' src="#" />
<input name="code" type="text" id="txtVerifyCode" class="yzm_input" onblur="checkVerifyCode()"/>
<div class="text_left t1">
<p class="t1">
<span id="vcodeValidMsg">请输入图片中的四个字母,不区分大小写。</span> <span
id="number.info" style="color:red"></span> <a
href="javascript:void(0)"
onclick="document.getElementById('imgVcode').src='${pageContext.request.contextPath}/user/validateCode.do?time='+(new Date()).getTime();">看不清楚?换个图片</a>
</p>
<a style="color:red;" id="codeInfo"></a>
</div>
</td>
</tr>