springmvc下实现登录验证码功能示例

springmvc下实现登录验证码功能示例

总体思路，简单讲，就是后台生成图片同时将图片信息保存在session，前端显示图片，输入验证码信息后提交表单到后台，取出存放在session里的验证码信息，与表单提交的验证码信息核对。

点击验证码图片时，通过jquery重新请求后台生成验证码图片方法，更换图片。

首先在后端controller里，有这样一个方法：

路径为http://localhost:8888/RiXiang_blog/login/captcha.form,访问这个路径便可以通过response写入图片。

@RequestMapping(value = "/captcha", method = RequestMethod.GET)

@ResponseBody

public void captcha(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException

{

CaptchaUtil.outputCaptcha(request, response);

}

CaptchaUtil是一个工具类，封装了验证码IXkGMuT图片生成，和存储session功能。

代码如下：

package com.util;

import java.awt.Color;

import java.awt.Font;

import java.awt.Graphics2D;

import java.awt.image.BufferedImage;

import java.io.IOException;

import java.util.Random;

import javax.servlet.ServletException;

import javax.servlet.ServletOutputStream;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.sun.image.codec.jpeg.JPEGCodec;

import com.sun.image.codec.jpeg.JPEGImageEncoder;

/**

* @ClassName: CaptchaUtil

* @Description: 关于验证码的工具类

* @author 无名

* @date 2016-5-7 上午8:33:08

* @version 1.0

*/

public final class CaptchaUtil

{

private CaptchaUtil(){}

/*

* 随机字符字典

*/

private static final char[] CHARS = { '2', '3', '4', '5', '6', '7', '8',

'9', 'A', 'B', 'C', http://'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M',

'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' };

/*

* 随机数

*/

private static Random random = new Random();

/*

* 获取6位随机数

*/

private static String getRandomString()

{

StringBuffer buffer = new StringBuffer();

for(int i = 0; i < 6; i++)

{

buffer.append(CHARS[random.nextInt(CHARS.length)]);

}

return buffer.toString();

}

/*

* 获取随机数颜色

*/

private static Color getRandomColor()

{

return new Color(random.nextInt(255),random.nextInt(255),

random.nextInt(255));

}

/*

* 返回某颜色的反色

*/

private static Color getReverseColor(Color c)

{

return new Color(255 - c.getRed(), 255 - c.getGreen(),

255 - c.getBlue());

}

public static void outputCaptcha(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException

{

response.setContentType("image/jpeg");

String randomString = getRandomString();

request.getSession(true).setAttribute("randomString", randomString);

int width = 100;

int height = 30;

Color color = getRandomColor();

Color reverse = getReverseColor(color);

BufferedImage bi = new BufferedImage(width, height,

BufferedImage.TYPE_INT_RGB);

Graphics2D g = bi.createGraphics();

g.setFont(new Font(Font.SANS_SERIF, Font.BOLD, 16));

g.setColor(color);

g.fillRect(0, 0, width, height);

g.setColor(reverse);

g.drawString(randomString, 18, 20);

for (int i = 0, n = random.nextInt(100); iIXkGMuT < n; i++)

{

g.drawRect(random.nextInt(width), random.nextInt(height), 1, 1);

}

// 转成JPEG格式

ServletOutputStream out = response.getOutputStream();

JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);

encoder.encode(bi);

out.flush()http://;

}

}

前端获取验证码图片，要这样写：

……

img的src里写入路径，页面加载时就会访问http://localhost:8888/RiXiang_blog/login/captcha.form获取图片。

表单的提交和登录信息验证就不具体讲了。

点击更换验证码的js代码如下：

// 更换验证码

$('#captchaImage').click(function()

{

$('#captchaImage').attr("src", "captcha.form?timestamp=" + (new Date()).valueOf());

});

可以看到后面加入时间戳作为参数，timestamp=" + (new Date()).valueOf()。加入这个参数就可以实现重新访问后台方法。否则是无法刷新图像的。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。