springmvc下实现登录验证码功能示例
总体思路，简单讲，就是后台生成图片同时将图片信息保存在session，前端显示图片，输入验证码信息后提交表单到后台，取出存放在session里的验证码信息，与表单提交的验证码信息核对。
点击验证码图片时，通过jquery重新请求后台生成验证码图片方法，更换图片。
首先在后端controller里，有这样一个方法：
路径为http://localhost:8888/RiXiang_blog/login/captcha.form,访问这个路径便可以通过response写入图片。
@RequestMapping(value="/captcha",method=RequestMethod.GET)
@ResponseBody
publicvoidcaptcha(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException
{
CaptchaUtil.outputCaptcha(request,response);
}
CaptchaUtil是一个工具类，封装了验证码图片生成，和存储session功能。
代码如下：
packagecom.util;
importjava.awt.Color;
importjava.awt.Font;
importjava.awt.Graphics2D;
importjava.awt.image.BufferedImage;
importjava.io.IOException;
importjava.util.Random;
importjavax.servlet.ServletException;
importjavax.servlet.ServletOutputStream;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importcom.sun.image.codec.jpeg.JPEGCodec;
importcom.sun.image.codec.jpeg.JPEGImageEncoder;
/**
*@ClassName:CaptchaUtil
*@Description:关于验证码的工具类
*@author无名
*@date2016-5-7上午8:33:08
*@version1.0
*/
publicfinalclassCaptchaUtil
{
privateCaptchaUtil(){}
/*
*随机字符字典
*/
privatestaticfinalchar[]CHARS={'2','3','4','5','6','7','8',
'9','A','B','C','D','E','F','G','H','J','K','L','M',
'N','P','Q','R','S','T','U','V','W','X','Y','Z'};
/*
*随机数
*/
privatestaticRandomrandom=newRandom();
/*
*获取6位随机数
*/
privatestaticStringgetRandomString()
{
StringBufferbuffer=newStringBuffer();
for(inti=0;i<6;i++)
{
buffer.append(CHARS[random.nextInt(CHARS.length)]);
}
returnbuffer.toString();
}
/*
*获取随机数颜色
*/
privatestaticColorgetRandomColor()
{
returnnewColor(random.nextInt(255),random.nextInt(255),
random.nextInt(255));
}
/*
*返回某颜色的反色
*/
privatestaticColorgetReverseColor(Colorc)
{
returnnewColor(255-c.getRed(),255-c.getGreen(),
255-c.getBlue());
}
publicstaticvoidoutputCaptcha(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException
{
response.setContentType("image/jpeg");
StringrandomString=getRandomString();
request.getSession(true).setAttribute("randomString",randomString);
intwidth=100;
intheight=30;
Colorcolor=getRandomColor();
Colorreverse=getReverseColor(color);
BufferedImagebi=newBufferedImage(width,height,
BufferedImage.TYPE_INT_RGB);
Graphics2Dg=bi.createGraphics();
g.setFont(newFont(Font.SANS_SERIF,Font.BOLD,16));
g.setColor(color);
g.fillRect(0,0,width,height);
g.setColor(reverse);
g.drawString(randomString,18,20);
for(inti=0,n=random.nextInt(100);i<n;i++)
{
g.drawRect(random.nextInt(width),random.nextInt(height),1,1);
}
//转成JPEG格式
ServletOutputStreamout=response.getOutputStream();
JPEGImageEncoderencoder=JPEGCodec.createJPEGEncoder(out);
encoder.encode(bi);
out.flush();
}
}
前端获取验证码图片，要这样写：
…… <tr> <th>captcha</th> <td> <inputtype="text"id="captcha"name="captcha"class="text"maxlength="10"/> <imgid="captchaImage"src="captcha.form"/> </td> </tr>
img的src里写入路径，页面加载时就会访问http://localhost:8888/RiXiang_blog/login/captcha.form获取图片。
表单的提交和登录信息验证就不具体讲了。
点击更换验证码的js代码如下：
//更换验证码
$('#captchaImage').click(function()
{
$('#captchaImage').attr("src","captcha.form?timestamp="+(newDate()).valueOf());
});
可以看到后面加入时间戳作为参数，timestamp="+(newDate()).valueOf()。加入这个参数就可以实现重新访问后台方法。否则是无法刷新图像的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。