Springboot+thymeleaf实现验证码

Posted 2021-08-12 蒙面侠1024

验证码使用了Hutool工具类实现
导入Hutool工具类依赖

		<dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.3.8</version>
        </dependency>

在controller上写上获取验证码的接口

private LineCaptcha lineCaptcha;
 /**获取验证码*/
    @RequestMapping("/getCode")
    public void getCode(HttpServletResponse response) {
        // 随机生成 4 位验证码
        RandomGenerator randomGenerator = new RandomGenerator("0123456789", 4);
        // 定义图片的显示大小
        lineCaptcha = CaptchaUtil.createLineCaptcha(110, 36);
        response.setContentType("image/jpeg");
        response.setHeader("Pragma", "No-cache");
        try {
            // 调用父类的 setGenerator() 方法，设置验证码的类型
            lineCaptcha.setGenerator(randomGenerator);
            // 输出到页面
            lineCaptcha.write(response.getOutputStream());
            // 关闭流
            response.getOutputStream().close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

在html页面进行接口调用/getCode

<div class="form-group row mt-4">
	<label for="verifycode" class="col-sm-2 col-form-label text-right">验证码:</label>
		<div class="col-sm-7">
			<input type="text" th:class="|form-control ${codeMsg!=null?'is-invalid':''}|" id="verifycode" name="code" placeholder="请输入验证码!">
				<div class="invalid-feedback" th:text="${codeMsg}">
					验证码不正确!
				</div>
		</div>
		<div class="col-sm-2">
		<img src="/getCode" id="captchaPic" style="width:100px;height:40px;" class="mr-2" onclick="refresh()"/>
		</div>
</div>	

点击图片刷新验证码事件，使用js编写refresh()方法

<script>
		function refresh() {
			document.getElementById("captchaPic").src = "getCode?time=" + new Date().getTime();
		}
</script>

检验验证码，在登录接口进行代码添加

// 检查验证码，前端床来的code使用String接收
        String kaptcha =lineCaptcha.getCode();
        if (StringUtils.isBlank(kaptcha) || StringUtils.isBlank(code) || !kaptcha.equalsIgnoreCase(code)) {
            model.addAttribute("codeMsg", "验证码不正确!");
            return "/site/login";//返回登录页面
        }