版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zzti_erlie/article/details/91393391
pom.xml中加入如下依赖
<dependency>
<groupId>com.github.axet</groupId>
<artifactId>kaptcha</artifactId>
<version>0.0.9</version>
</dependency>
返回图片的服务
@GetMapping("captcha.jpg")
public void captcha(HttpServletResponse response, HttpSession session)throws ServletException, IOException {
response.setHeader("Cache-Control", "no-store, no-cache");
response.setContentType("image/jpeg");
// 生成文字验证码
// com.google.code.kaptcha.Producer;
String text = producer.createText();
// 生成图片验证码
BufferedImage image = producer.createImage(text);
// 将文字保存到session
session.setAttribute(Constants.KAPTCHA_SESSION_KEY, text);
ServletOutputStream out = response.getOutputStream();
ImageIO.write(image, "jpg", out);
}
前端图片显示
<div class="form-group">
<img alt="如果看不清楚,请单击图片刷新!" class="pointer" src="" id="captcha_img">
<a href="javascript:;" id="refreshCode">点击刷新</a>
</div>
var page = {
init: function(){
var imgsrc = "http://127.0.0.1/user/captcha.jpg";
$('#captcha_img').attr('src',imgsrc);
this.bindEvent();
},
bindEvent : function(){
var _this = this;
$('#refreshCode').click(function(){
var imgsrc = "http://127.0.0.1/user/captcha.jpg";
$('#captcha_img').attr('src',imgsrc);
})
}
};
$(function(){
page.init();
});
登陆进行校验
@PostMapping("login")
public String login(String username, String password,
String captcha, HttpSession session) {
// username,password,captcha都是前端传过来的文本框内容
Object kaptcha = session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
if (null == kaptcha) {
return "验证码过期"
}
if (!captcha.equalsIgnoreCase(kaptcha.toString())) {
return "验证码错误"
}
// 这里加你登陆的逻辑
return "验证码正确";
}