HuTool
在登录时进行验证码验证,增加系统安全,hutool是Java工具类库,提供了各种组件和工具类,Hutool官网地址:https://hutool.cn/docs/#/
1.使用HuTool工具类首先引入依赖
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.8.16</version>
</dependency>
2.生成图案验证码
/************************验证码:hutool类库******************************************************/
@RequestMapping("/user")
class Test{
@RequestMapping("/getcode")
public void getCode(HttpServletResponse response) {
// 随机生成 4 位验证码,范围是0-9
randomGenerator = new RandomGenerator("0123456789", 4);
// 定义图片的显示大小
LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(95, 30);
response.setContentType("image/jpeg");
response.setHeader("Pragma", "No-cache");
try {
// 调用父类的 setGenerator() 方法,设置验证码的类型
lineCaptcha.setGenerator(randomGenerator);
// 输出到页面
lineCaptcha.write(response.getOutputStream());
// 打印验证码
String code = lineCaptcha.getCode();
System.out.println("生成的验证码:"+code);;
// 关闭流
response.getOutputStream().close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
3.前端引入验证码
<div class="code">
<span>验证码</span>
<input type="text" id="getCode">
<!-- 将/user/getcode请求接口生成的验证码输出到当前页面 -->
<img src="/user/getcode" id="codeImg" onclick="refresh()" alt="">
</div>
/* javascrip刷新验证码 */
function refresh() {
/* new Date().getTime()这里采取获得时间,使每次点击图片验证码时src发生改变,前端检测到src改变时,就会根据接口自动去重新获得图片验证码 */
document.querySelector("#codeImg").src = "user/getcode?time=" + new Date().getTime();
}
最后生成的图案验证码如下,排版样式自行调整