SpringMvc实现验证码

本文介绍了在SpringMvc框架下如何实现验证码功能。通过在login.jsp页面增加验证码输入和生成部分,然后在Controller中处理对应的请求,调用ImageUtil生成验证码的Java类,最终在页面上展示验证码。

1 前言

验证码一般都通过Servlet可直接实现,网上也有很多开源的验证码项目,如果开发框架是SpringMvc,那么就需要做相应的修改,具体实现如下。

2 login.jsp

login.jsp页面需要增加提供验证码输入和产生验证码的地方,大致如下

<div class="lg-username input-item clearfix">
    <i class="iconfont">&#xe664;</i>
    <input type="text" placeholder="输入四位验证码" name="captcha" id="captcha" onkeypress="onInputKeyup();" style="width:105px;" />
        <img src="checkCaptchaCode.do" id="createCheckCode" onclick="changeCaptcha();" align="middle" style="width:150px;"/>  
</div>

其中,id=”captcha”为验证码输入框,id=”createCheckCode”为产生验证码的图片。如上是通过”checkCaptchaCode.do”获取验证码的,checkCaptchaCode.do详细在controller中

3 Controller

Controller的具体代码如下:

//生成验证码图片  
    @ResponseBody
    @RequestMapping(value = "/checkCaptchaCode.do", method = RequestMethod.GET)  
    public void validateCode(HttpServletRequest request, HttpServletResponse response) throws Exception{ 
        //第一个参数是生成的验证码,第二个参数是生成的图片  
        Object[] objs = ImageUtil.createImage();  
        //将验证码存入Session  
        request.getSession(true).setAttribute("validateCode",objs[0]);  
        //将图片输出给浏览器  
        BufferedImage image = (BufferedImage) objs[1];  
        // 禁止图像缓存。
        response.setHeader("Pragma", "no-cache"); 
        response.setHeader("Cache-Control", "no-cache"); 
        response.setDateHeader("Expires", 0); 
        response.setContentType("image/jpeg"); 
        OutputStream os = response.getOutputStream();  
        ImageIO.write(image, "jpeg", os); 
        os.flush();
    }

其中ImageUtil为生成验证码的具体java类,其内容如下

public class ImageUtil {
    public static Object[] createImage() {
        Object[] obj = new Object[2];
        int width = 60;
        // 验证码图片的高度。
        int height = 18;
        // 验证码字符个数
        int codeCount = 4;
        int x = 0;
        // 字体高度
        int fontHeight;
        int codeY;
        x = width / (codeCount + 1);
        fontHeight = height - 2;
        codeY = height - 4;
        char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
                'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
                'X', 'Y','3', '4', '5', '6', '7', '8', '9','a','b','c','d','e','f','g','h',
                'j','k','m','n','r','s','t','u','v','w','x','y'};
        //定义图像buffer
        BufferedImage buffImg = new BufferedImage(
        width, height,BufferedImage.TYPE_INT_RGB); 
        Graphics2D g = buffImg.createGraphics(); 
        //创建一个随机数生成器类
        Random random = new Random(); 
        //将图像填充为白色
        g.setColor(Color.WHITE); 
        g.fillRect(0, 0, width, height); 
        //创建字体,字体的大小应该根据图片的高度来定。
        Font font = new Font("Fixedsys", Font.PLAIN, fontHeight-5); 
        //设置字体。
        g.setFont(font); 
        //画边框
        g.setColor(Color.WHITE); 
        g.drawRect(0, 0, width - 2, height - 2); 

        //随机产生干扰线,使图象中的认证码不易被其它程序探测到。
        /*g.setColor(Color.BLACK); 
        for(int i = 0; i < 5; i++) 
        {
            int x = random.nextInt(width); 
            int y = random.nextInt(height); 
            int xl = random.nextInt(12); 
            int yl = random.nextInt(12); 
            g.drawLine(x, y, x + xl, y + yl); 
        }*/
        //randomCode用于保存随机产生的验证码,以便用户登录后进行验证。
        StringBuffer randomCode = new StringBuffer(); 
        int red = 0, green = 0, blue = 0; 

        //随机产生codeCount数字的验证码。
        for (int i = 0; i < codeCount; i++) {
        //得到随机产生的验证码数字。
        String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]); 
        //产生随机的颜色分量来构造颜色值,这样输出的每位数字的颜色值都将不同。
        /*red = random.nextInt(255); 
        green = random.nextInt(255); 
        blue = random.nextInt(255);*/ 

        //用随机产生的颜色将验证码绘制到图像中。
        g.setColor(new Color(red, green, blue)); 
        g.drawString(strRand, (i + 1) * x, codeY-2); 

        //将产生的四个随机数组合在一起。
        randomCode.append(strRand); 
        }
        obj[0] = randomCode.toString();
        obj[1] = buffImg;
        return obj;
    }
}

如上操作,页面就会出现验证码

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值