前提pom.xml 引用hutool包
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.3.9<ersion>
</dependency>
1.layui登录页面
在账号密码下面添加验证码
<div class="layui-form-item"><label class="layui-form-label">验证码</label><div class="layui-input-inline"><div style="float: left;"><input type="text" name="verifyCode" width="200px;" id="verifyCode" placeholder="请输入验证码"autocomplete="off" class="layui-input verity"></div><div style="float: left;"><img id="verify" onclick="chageCode()" alt="点击刷新验证码" style="width: 90%;height: 39px;" /></div></div></div>引用jquery-3.3.1.js
<script src="/static/js/jquery-3.3.1.js"></script>
图片验证码生成function chageCode(){$('#verify').attr('src','/checkCode.do?random='+new Date());}chageCode();
Controller层
/***图片验证码*/@RequestMapping("/checkCode.do")@ResponseBodypublic void checkCod(HttpSession session, HttpServletResponse response ,Object random) throws IOException {System.out.println(random);CircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 5);String code = circleCaptcha.getCode();session.setAttribute("code", code);circleCaptcha.write(response.getOutputStream());}替换你之前的login页面
//替换登录
@RequestMapping(value = "/logi")@ResponseBodypublic void login(@RequestParam Map<String,Object> map, HttpServletResponse response, HttpSession session){String verifyCode=map.get("verifyCode").toString();String code= session.getAttribute("code").toString();if (verifyCode.equals(code)){try {map=service.list(map).get(0);int aid =Integer.valueOf(map.get("aid").toString());session.setAttribute("aid",aid);} catch (IndexOutOfBoundsException e) {ReturnJson.json(ReturnMessage.error(),response);}ReturnJson.json(ReturnMessage.success(map),response);}}