验证码,就是后端随机生成的一串字符串,然后拼接成一个图片,返回给前端的一个过程。怎么生成一串随机的字符串,怎么创建一个图片?
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;//返回一个图片
}
}
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的进行比较。这样就能实现验证码的功能。