验证码

生成随机验证码

验证码，就是后端随机生成的一串字符串，然后拼接成一个图片，返回给前端的一个过程。怎么生成一串随机的字符串，怎么创建一个图片？

生成随机字符串，创建图片

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.concurrent.ThreadLocalRandom;

    public class ValidationNumber {
	// 声明一个String 字符串
	String valid = "0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ";
	// 随机生成字符串
	public String getStr() {
		// 1.初始化一个可变字符串
		StringBuilder sb = new StringBuilder();
		// 2.通过随机函数获取 字符串的字符
		ThreadLocalRandom random = ThreadLocalRandom.current();
		for (int i = 0; i < 4; i++) {
			// 生成随机数据 0-valid.length-1
			int num = random.nextInt(0, valid.length());// 通过string字符串随机生成一个数
			char c = valid.charAt(num);// 通过随机数截取字符串
			// 追加字符串
			sb.append(c);
		}
		return sb.toString();// 返回验证码字符串
	}  	
	// 通过验证码 创建一张图片
	public BufferedImage creatImage(String str) {
		int width = 100;// 初始换宽
		int height = 33;// 初始化高
		// 创建一张图片
		BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		// 获取当前图片的上下文
		Graphics g = img.getGraphics();
		// 设置图片的背景颜色
		g.setColor(Color.WHITE);
		g.fillRect(0, 0, width, height);
		// 绘制文字
        Random random=new Random();
    	for (int i = 0; i < str.length(); i++) {//依次给每个验证码附上颜色
	   g.setColor(new Color(random.nextInt(256),random.nextInt(256),random.nextInt(256)));//随机生成颜色
       g.setFont(new Font("宋体", Font.CENTER_BASELINE, 30));//设置，字体样式，大小
  	   g.drawString(str.charAt(i)+"",16+(i*18),26);//在宽，高一定，每隔18px间距设置字体
}
	return img;//返回一个图片
}
}

创建servlet，给前端进行返回信息

import java.awt.image.BufferedImage;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.tf.management.util.ValidationNumber;

@WebServlet("/validation.do")
public class ValidationServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//处理数据
		//生成随机字符串
		ValidationNumber va = new ValidationNumber();
		String num = va.getStr();
		//将验证码存放在session中
		HttpSession session = req.getSession(true);
		//赋值
		session.setAttribute("vacode",num);
		//通过字符串生成图片
		BufferedImage img = va.creatImage(num);
		//3.数据响应给客户端
		ImageIO.write(img,"JPEG",resp.getOutputStream());
	}
}

前端代码

这是前端的部分代码

 <div class="form-group">
 <div class="field">
 <input type="text" class="input input-big code" name="code" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" />
 <img src="validation.do" alt="点击刷新" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="change(this)">                                                 
    </div>
    </div>
<script type="text/javascript">
var num = 1;
function change(img){//每次点击图片，重新刷新，获取不同验证码
	img.setAttribute("src","validation.do?"+num++);
}
</script>

总结

在某个范围内生成随机数，取到字符串的长度，这样就可以随机取到几个验证码，然后把它绘制到img上，返回给前端。通过点击事件，让它的src一直改变就可以实现点击图片实现刷新的效果。验证码可以放在session中，每一次操作在session中取出验证码，跟你前端页面输入的提交到servlet的进行比较。这样就能实现验证码的功能。