Hutoll 图文验证Demo

我采用的是Spring boot 

1：pom.xml依赖

       <!-- Hutool 依赖-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.4.5</version>
        </dependency>

　　

2：前端页面：

<img src="/getImage?count=0" id="authCodeImg" onclick="changeCodeImg(this)"><!--显示的验证码-->

<input type="text" id="name1" class="form-control" placeholder="请输入验证码" aria-describedby="basic-addon2">

<!--验证验证码-->

3：前端ajax请求：

//<!-- 图文验证码验证-->
    $('#name1').blur(function () {
        $.ajax({
            url: "/getverfy",
            type: "post",
            data: {
                vername:$("#name1").val()
            },
            success: function (result) {
                if(result=="图文验证成功")
                {

                }else{
                    alert("图文验证失败！")
                    location.reload();
                }
            }
        })
    })

//图文验证码
$.ajax({
    url: "/getImage",
    type: "post",
    data: {

    },
    success: function (result) {
        result.src = "/getImage?count=1&timestamp="+new Date().getTime();
    }
})

　controller:

/**
     * 生成图片验证码
     * @param request
     * @param response
     */
    @RequestMapping("getImage")
    public void ImgCode(HttpServletRequest request, HttpServletResponse response) {
       LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100);
        try {
            request.getSession().setAttribute("CAPTCHA_KEY", lineCaptcha.getCode());
            response.setContentType("image/png");
            response.setHeader("Pragma", "No-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expire", 0);
            lineCaptcha.write(response.getOutputStream());
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 对验证码进行输入验证
     * @param vername
     * @return
     */
    @RequestMapping("getverfy")
    public @ResponseBody String verfy(String vername) {

        if (lineCaptcha.verify(vername)) {
            return "图文验证成功";
        }
        return "图文验证失败";
    }