原理:(部分代码是基于Spring注解的,请见谅)
1. 图片的src写请求的方式进入后台
2. 通过工具类生成一个图片的验证码,并将验证码放到session中,同时生成图片并输出图片。
@RequestMapping(value = "/image", method = RequestMethod.GET)
public void initImg(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 设置不缓存图片
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "No-cache");
response.setDateHeader("Expires", 0);
// 生成随机字串
String verifyCode = VerifyCodeUtils.generateVerifyCode(4);
// 存入会话session
HttpSession session = request.getSession(true);
session.setAttribute("verifyCode", verifyCode.toLowerCase());
// 生成图片
int w = 200, h = 80;
VerifyCodeUtils.outputImage(w, h, response.getOutputStream(), verifyCode);
}
3. 页面加载后就能出现图片
4. 在登录的时候在session中拿出刚刚存入session的verifyCode
@ResponseBody
@RequestMapping(value = "/login", method = RequestMethod.POST)
public ResultVO login(HttpServletRequest request, String userName, String password, String verifyCode) throws Exception {
AssertUtil.notBlank(userName, "userName required");
AssertUtil.notBlank(password, "password required");
AssertUtil.notBlank(verifyCode, "verifyCode required");
HttpSession session = request.getSession(true);
String sessionCode = session.getAttribute("verifyCode").toString();
if (!verifyCode.equals(sessionCode)) {
throw new InvalidArgumentException("VerifyCode 错误");
}
loginService.login(userName, password);
ResultVO result = new ResultVO();
result.setMessage("login success");
return result;
}
问题:
1. 之刷新图片不刷新页面?
解决方法:
1. 加上一个链接,
<a href="#" οnclick="refreshImg();">下一张</a><br/>
注意href中不能为“”(空字符串),因为会刷新整个页面;同时可不能是“.”;只能是“#”
2. js脚本如下:
<script type="text/javascript">
function refreshImg () {
var image = document.getElementById('verifyImg');
image.src = '../image?'+Math.random();
}
</script>
注意:在之前../image请求的基础上,加上了随机数,因为用../image是无法刷新的,
3. 同时,在页面重新加载的时候刷新验证码,以免验证码被重用
window.onload = refreshImg();