基于SpingBoot+thymeleaf实现数字验证码功能

1、效果图

2、思路

1）java生成验证码图片以流的形式传到前端展示。

2)后端在session中保存验证码内容（注：分布式要考虑session共享问题）

3）前端将图片上的内容传到后台进行校验

3、代码实现

1)新建一个验证码生成的工具类

public class RandomValidateCode {

public static final String RANDOMCODEKEY= "RANDOMVALIDATECODEKEY";//放到session中的key

private String randString = "0123456789";//随机产生只有数字的字符串 private String

//private String randString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生只有字母的字符串

//private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生数字与字母组合的字符串

private int width = 95;// 图片宽

private int height = 25;// 图片高

private int lineSize = 40;// 干扰线数量

private int stringNum = 4;// 随机产生字符数量

private Random random = new Random();

/**

* 获得字体

*/

private Font getFont() {

return new Font("Fixedsys", Font.CENTER_BASELINE, 18);

}

/**

* 获得颜色

*/

private Color getRandColor(int fc, int bc) {

if (fc > 255)

fc = 255;

if (bc > 255)

bc = 255;

int r = fc + random.nextInt(bc - fc - 16);

int g = fc + random.nextInt(bc - fc - 14);

int b = fc + random.nextInt(bc - fc - 18);

return new Color(r, g, b);

}

/**

* 生成随机图片

*/

public void getRandcode(HttpServletRequest request, HttpServletResponse response) {

HttpSession session = request.getSession();

// BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类

BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);

Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作

g.fillRect(0, 0, width, height);//图片大小

g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));//字体大小

g.setColor(getRandColor(110, 133));//字体颜色

// 绘制干扰线

for (int i = 0; i <= lineSize; i++) {

drowLine(g);

}

// 绘制随机字符

String randomString = "";

for (int i = 1; i <= stringNum; i++) {

randomString = drowString(g, randomString, i);

}

//将生成的随机字符串保存到session中

session.removeAttribute(RANDOMCODEKEY);

session.setAttribute(RANDOMCODEKEY, randomString);

g.dispose();

try {

// 将内存中的图片通过流动形式输出到客户端

ImageIO.write(image, "JPEG", response.getOutputStream());

} catch (Exception e) {

System.out.println("将内存中的图片通过流动形式输出到客户端失败>>>> ");

}

}

/**

* 绘制字符串

*/

private String drowString(Graphics g, String randomString, int i) {

g.setFont(getFont());

g.setColor(new Color(random.nextInt(101), random.nextInt(111), random

.nextInt(121)));

String rand = String.valueOf(getRandomString(random.nextInt(randString

.length())));

randomString += rand;

g.translate(random.nextInt(3), random.nextInt(3));

g.drawString(rand, 13 * i, 16);

return randomString;

}

/**

* 绘制干扰线

*/

private void drowLine(Graphics g) {

int x = random.nextInt(width);

int y = random.nextInt(height);

int xl = random.nextInt(13);

int yl = random.nextInt(15);

g.drawLine(x, y, x + xl, y + yl);

}

/**

* 获取随机的字符

*/

public String getRandomString(int num) {

return String.valueOf(randString.charAt(num));

}

/**

* 生成验证码

*/

@RequestMapping(value = "/getVerify")

public void getVerify(HttpServletRequest request, HttpServletResponse response) {

try {

response.setContentType("image/jpeg");//设置相应类型,告诉浏览器输出的内容为图片

response.setHeader("Pragma", "No-cache");//设置响应头信息，告诉浏览器不要缓存此内容

response.setHeader("Cache-Control", "no-cache");

response.setDateHeader("Expire", 0);

RandomValidateCode randomValidateCode = new RandomValidateCode();

randomValidateCode.getRandcode(request, response);//输出验证码图片方法

} catch (Exception e) {

System.out.println("获取验证码失败>>>> ");

}

2）新建一个Controller

@Controller

public class CheckController {

@Autowired

HttpSession httpSession;

@RequestMapping("/checkCodePage")

public String getCheckCode(){

return "index";

}

@RequestMapping("/getCheckCodeImage")

public void returnImageStream(HttpServletRequest request, HttpServletResponse response){

try {

response.setContentType("image/jpeg");//设置相应类型,告诉浏览器输出的内容为图片

response.setHeader("Pragma", "No-cache");//设置响应头信息，告诉浏览器不要缓存此内容

response.setHeader("Cache-Control", "no-cache");

response.setDateHeader("Expire", 0);

RandomValidateCode randomValidateCode = new RandomValidateCode();

randomValidateCode.getRandcode(request, response);//输出验证码图片方法

} catch (Exception e) {

System.out.println("获取验证码失败>>>> ");

}

}

@RequestMapping("/verifyCheckCode")

public String verifyCheckCode(HttpServletRequest request, HttpServletResponse response,Model model,String checkCode){

String cc=(String)request.getSession().getAttribute(RandomValidateCode.RANDOMCODEKEY);

if(cc.equals(checkCode)){

model.addAttribute("message", "验证码正确！");

}else{

model.addAttribute("message", "验证码不正确！");

}

return "message";

}

}

3)新建2个页面一个校验验证码页，一个消息提示页

index.html

<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<title>图片验证码</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

<input id="verify_input" placeholder="请输入验证码" maxlength="4"/><input type="button" value="校验" onclick="verify();"/>

<a href="javascript:void(0);" title="点击更换验证码">

<img id="imgVerify" src="" alt="更换验证码" height="36" width="95px" onclick="getVerify(this);"/>

</a>

</body>

<script th:inline="javascript">

/*<![CDATA[*/

var httpurl="http://127.0.0.1:8080";

document.getElementById("imgVerify").src=httpurl + "/getCheckCodeImage?"+Math.random();

//获取验证码

function getVerify(obj){

obj.src = httpurl + "/getCheckCodeImage?"+Math.random();

}

//校验验证码

function verify(){

var code=document.getElementById("verify_input").value;

var href=httpurl + "/verifyCheckCode?checkCode="+code+"&random="+Math.random();

window.location= href;

}

/*]]>*/

</script>

message.html

<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<title>图片验证码</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

<div th:text="${message}"></div>

</body>

</html>

目录结构：

小demo目录结构

小demo紧供参考，需要代码私信即可。