代码如下
1.依赖
<!-- hutool --> <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>4.6.8</version> </dependency>
2.前端页面
<div class="form-group"> <label for="validateCode" class="col-sm-3 control-label">验证码:</label> <div class="col-sm-9 "> <div class="row"> <div class="col-md-5 form-inline"> <img src='${pageContext.request.contextPath}/vericode/showCode' alt='' id='sr' onclick='chance()' height='50px' > <input type="text" class="form-control" id="validateCode" name="code" placeholder="validateCode" style="width:170px"> </div> <div class="col-md-7"> <span>请输入图片中的四个字母。<a href="">看不清楚?换个图片</a></span> </div> </div> </div> </div>
<!--动态点击验证码的实现-->
<script type="text/javascript">
function chance() {
var img=document.getElementById("sr");
img.src="${pageContext.request.contextPath}/vericode/showCode?a="+ Math.random();
}
</script>
后端代码
CodeController
@Controller public class CodeController { @RequestMapping("/vericode/showCode") @ResponseBody public void showCode(HttpServletRequest request, HttpServletResponse response,HttpSession session) throws Exception { System.out.println("121212"); //构建验证码图片 CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(80, 30, 4, 6); //添加验证码 String codeString = captcha.getCode(); //将验证码放入session供后续验证 session.setAttribute("captcha", captcha); ServletOutputStream outputStream = response.getOutputStream(); //将验证码写回页面 captcha.write(outputStream); } }
后续验证验证码
//获取session中的验证码对象并且比对输入的验证码是否正确
CircleCaptcha captcha = (CircleCaptcha)session.getAttribute("captcha");
boolean verify = captcha.verify(coding);
以粮为纲全面发展