thymeleaf和java实现验证码的生成与校验

1.页面

<div class="verCode">
   验证码：<input type="text" value="" name="imageCode"  id="imageCode" size="10"/>&nbsp;
   <img th:onclick="'loadImage()'"  th:title="换一张试试" name="randImage" id="randImage" src="../getVerifyCode" width="70" height="30" border="1" align="absmiddle">

</div>

再次点击加载另一个验证码：

 // 加载验证码
 function loadImage(){
            document.getElementById("randImage").src="../getVerifyCode?"+new Date().getTime(); //加时间戳，防止浏览器利用缓存
 }

2.Controller

/** 获取验证码图片
     * @description
     * @author    tony
     * @date  2019/11/27 22:33
     */
    @RequestMapping("/getVerifyCode")
    public void getVerificationCode(HttpServletResponse response, HttpServletRequest request) {
        try {
            int width=200;
            int height=69;
            BufferedImage verifyImg=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
            /*
            生成对应宽高的初始图片
            单独的一个类方法，出于代码复用考虑，进行了封装。
            功能是生成验证码字符并加上噪点，干扰线，返回值为验证码字符
             */
            String randomText = VerifyCode.drawRandomText(width,height,verifyImg);

            request.getSession().setAttribute("verifyCode", randomText);
            response.setContentType("image/png");//必须设置响应内容类型为图片，否则前台不识别
            OutputStream os = response.getOutputStream(); //获取文件输出流
            ImageIO.write(verifyImg,"png",os);//输出图片流

            os.flush();
            os.close();//关闭流

        } catch (IOException e) {
            e.printStackTrace();
        }

    }

/**
 * @Description:
 * @Author: tony
 * @Date: 2019/11/27 22:04
 **/
/*对图片进行处理的类和方法*/

public class VerifyCode {

    public static  String drawRandomText(int width, int height, BufferedImage verifyImg) {

        Graphics2D graphics = (Graphics2D)verifyImg.getGraphics();

        graphics.setColor(Color.WHITE);//设置画笔颜色-验证码背景色

        graphics.fillRect(0, 0, width, height);//填充背景

        graphics.setFont(new Font("微软雅黑", Font.BOLD, 40));

        //数字和字母的组合

        String baseNumLetter = "123456789abcdefghijklmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";

        StringBuffer sBuffer = new StringBuffer();

        int x = 10;  //旋转原点的 x 坐标

        String ch = "";

        Random random = new Random();

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

            graphics.setColor(getRandomColor());

            //设置字体旋转角度

            int degree = random.nextInt() % 30;  //角度小于30度

            int dot = random.nextInt(baseNumLetter.length());

            ch = baseNumLetter.charAt(dot) + "";

            sBuffer.append(ch);

            //正向旋转

            graphics.rotate(degree * Math.PI / 180, x, 45);

            graphics.drawString(ch, x, 45);

            //反向旋转

            graphics.rotate(-degree * Math.PI / 180, x, 45);

            x += 48;

        }

        //画干扰线

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

            // 设置随机颜色

            graphics.setColor(getRandomColor());

            // 随机画线

            graphics.drawLine(random.nextInt(width), random.nextInt(height),

                    random.nextInt(width), random.nextInt(height));

        }

        //添加噪点

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

            int x1 = random.nextInt(width);

            int y1 = random.nextInt(height);

            graphics.setColor(getRandomColor());

            graphics.fillRect(x1, y1, 2,2);

        }

        return sBuffer.toString();

    }

    /**
     * 随机取色
     */

    private static Color getRandomColor() {

        Random ran = new Random();

        Color color = new Color(ran.nextInt(256),

                ran.nextInt(256), ran.nextInt(256));

        return color;

    }

    public static void main(String[] args) {
        System.out.println(VerifyCode.drawRandomText(200,69,new BufferedImage(200,69,BufferedImage.TYPE_INT_RGB)));
    }
}

3.提交

function submitData(){
            var content=$("#content").val();
            var imageCode=$("#imageCode").val();

            var articleId = document.getElementById("articleId").value;
            if(content==null || content==""){
                alert("请输入评论内容！");
            }else if(imageCode==null || imageCode==""){
                alert("请填写验证码！");
            }else{

                $.post("/comment/save",{"content":content,'imageCode':imageCode,'articleId':articleId},function(result){
                    if(result.success){
                        window.location.reload();
                        alert("评论已提成成功，审核通过后显示！");
                    }else{
                        alert(result.errorInfo);
                    }
                },"json");
            }
        }

4.校验

@RequestMapping("/save")
	public String save(Comment comment, @RequestParam("imageCode") String imageCode, HttpServletRequest request,
					   HttpServletResponse response, HttpSession session) throws Exception {
		String verifyCode=(String) session.getAttribute("verifyCode");
		JSONObject result=new JSONObject();
		if(!imageCode.equals(verifyCode)){
			result.put("success", false);
			result.put("errorInfo", "验证码填写错误!");
		}
		......