javaweb项目实现登陆验证码功能

1.首先是前端：需要在页面有个img标签来接收后台返回的验证码图片

在页面中加入img标签：<img id="checkImg">，并添加id以便获取验证码图片

我这边是页面一加载就加载了验证码，所以我在js文件里是这样写的：

$(document).ready(function () {

//这里在url中加时间是因为让url变化
$("#checkImg").attr("src","getCheckNumber?time="+new Date().getTime());

}）

2.然后是后台代码：

2.1在controller中添加返回方法

//获取验证码
@RequestMapping(value = "getCheckNumber", produces = {"text/html;charset=UTF-8"})
public void getCheckNumber(HttpServletResponse response) throws IOException {
    //创建对象
    CheckNumber checkNumber = new CheckNumber();
    //获取图片对象
    BufferedImage image = checkNumber.getImage();
    //获得图片的文本内容
    String text = checkNumber.getText();
    // 将系统生成的文本内容保存到session中（这里是因为我用的shiro框架，所以使用shiro的session，如果项目没用shiro就用HttpServletRequest来获取session,把验证码文本存入session）
    SecurityUtils.getSubject().getSession().setAttribute("checkNumber",text);
    //把图片返回前端
    ImageIO.write(image, "JPEG", response.getOutputStream());
}

2.2建立一个工具类，专门创建验证码图片

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

/**
 * 生成登陆验证码的类
 */
public class CheckNumber {
    private int w = 70;//验证码图片宽
    private int h = 35;//验证码图片高
    private Random r = new Random();//随机对象
    // {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"}
    private String[] fontNames  = {"宋体", "华文楷体", "黑体", "微软雅黑", "楷体_GB2312"};
    // 可选字符
    private String codes  = "0123456789abcdefghjkmnopqrstuvwxyz";
    // 背景色
    private Color bgColor  = new Color(255, 255, 255);
    // 验证码上的文本
    private String text ;

    // 生成随机的颜色
    private Color randomColor () {
        int red = r.nextInt(150);
        int green = r.nextInt(150);
        int blue = r.nextInt(150);
        return new Color(red, green, blue);
    }

    // 生成随机的字体
    private Font randomFont () {
        int index = r.nextInt(fontNames.length);
        String fontName = fontNames[index];//生成随机的字体名称
        int style = r.nextInt(4);//生成随机的样式, 0(无样式), 1(粗体), 2(斜体), 3(粗体+斜体)
        int size = r.nextInt(5) + 24; //生成随机字号, 24 ~ 28
        //Font对象的参数：1.字体名称2.字体样式3.字体大小
        return new Font(fontName, style, size);
    }

    // 传入一个BufferImage对象，给图片画干扰线
    private void drawLine (BufferedImage image) {
        int num  = 3;//一共画3条
        Graphics2D g2 = (Graphics2D)image.getGraphics();
        for(int i = 0; i < num; i++) {//生成两个点的坐标，即4个值
            int x1 = r.nextInt(w);
            int y1 = r.nextInt(h);
            int x2 = r.nextInt(w);
            int y2 = r.nextInt(h);
            g2.setStroke(new BasicStroke(1.5F));
            g2.setColor(Color.BLUE); //干扰线是蓝色
            g2.drawLine(x1, y1, x2, y2);//画线
        }
    }

    // 随机生成一个字符
    private char randomChar () {
        int index = r.nextInt(codes.length());
        return codes.charAt(index);
    }

    // 创建BufferedImage
    private BufferedImage createImage () {
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        Graphics2D g2 = (Graphics2D)image.getGraphics();
        g2.setColor(this.bgColor);
        g2.fillRect(0, 0, w, h);
        return image;
    }

    // 调用这个方法得到验证码
    public BufferedImage getImage () {
        BufferedImage image = createImage();//创建图片缓冲区
        Graphics2D g2 = (Graphics2D)image.getGraphics();//得到绘制环境
        StringBuilder sb = new StringBuilder();//用来装载生成的验证码文本
        // 向图片中画4个字符
        for(int i = 0; i < 4; i++)  {//循环四次，每次生成一个字符
            String s = randomChar() + "";//随机生成一个字母
            sb.append(s); //把字母添加到sb中
            float x = i * 1.0F * w / 4; //设置当前字符的x轴坐标
            g2.setFont(randomFont()); //设置随机字体
            g2.setColor(randomColor()); //设置随机颜色
            g2.drawString(s, x, h-5); //画图
        }
        this.text = sb.toString(); //把生成的字符串赋给了this.text
        drawLine(image); //添加干扰线
        return image;
    }

    // 返回验证码图片上的文本
    public String getText () {
        return text;
    }

    // 保存图片到指定的输出流
    public static void output (BufferedImage image, OutputStream out)
            throws IOException {
        ImageIO.write(image, "JPEG", out);
    }
}