登录验证码实现

原理：（部分代码是基于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="#" onclick="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();