package com.loan.modules.storeconf.lbtsysorgruleregion.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import javax.imageio.ImageIO; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.awt.*; import java.awt.image.BufferedImage; import java.util.Random; /** * 生成登录验证码 * @author xj * */ @Controller @RequestMapping("api/backgd/system/code") public class CodeController { private int width = 90;// 定义图片的width private int height = 30;// 定义图片的height private int codeCount = 4;// 定义图片上显示验证码的个数 private int xx = 15; private int fontHeight = 18; private int codeY = 20; char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }; @RequestMapping("/code") public void getCode(HttpServletRequest req, HttpServletResponse resp){ // 定义图像buffer BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics gd = buffImg.getGraphics(); // 创建一个随机数生成器类 Random random = new Random(); // 将图像填充为白色 gd.setColor(Color.WHITE); gd.fillRect(0, 0, width, height); // 创建字体，字体的大小应该根据图片的高度来定。 Font font = new Font("Fixedsys", Font.BOLD, fontHeight); // 设置字体。 gd.setFont(font); // 画边框。 gd.setColor(Color.BLACK); gd.drawRect(0, 0, width - 1, height - 1); // 随机产生40条干扰线，使图象中的认证码不易被其它程序探测到。d gd.setColor(Color.BLACK); for (int i = 0; i < 10; i++) { int x = random.nextInt(width); int y = random.nextInt(height); int xl = random.nextInt(12); int yl = random.nextInt(12); gd.drawLine(x, y, x + xl, y + yl); } // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。 StringBuffer randomCode = new StringBuffer(); int red = 0, green = 0, blue = 0; // 随机产生codeCount数字的验证码。 for (int i = 0; i < codeCount; i++) { // 得到随机产生的验证码数字。 String code = String.valueOf(codeSequence[random.nextInt(codeSequence.length-1)]); // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。 red = random.nextInt(255); green = random.nextInt(255); blue = random.nextInt(255); // 用随机产生的颜色将验证码绘制到图像中。 gd.setColor(new Color(red, green, blue)); gd.drawString(code, (i + 1) * xx, codeY); // 将产生的四个随机数组合在一起。 randomCode.append(code); } // 将四位数字的验证码保存到Session中。 HttpSession session = req.getSession(); session.setAttribute("code", randomCode.toString()); // 禁止图像缓存。 resp.setHeader("Pragma", "no-cache"); resp.setHeader("Cache-Control", "no-cache"); resp.setDateHeader("Expires", 0); resp.setContentType("image/jpeg"); try{ // 将图像输出到Servlet输出流中。 ServletOutputStream sos = resp.getOutputStream(); ImageIO.write(buffImg, "jpeg", sos); sos.close(); }catch(Exception ex){ ex.printStackTrace(); } } }
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ include file="/commons/global.jsp" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Sentir, Responsive admin and dashboard UI kits template"> <meta name="keywords" content="admin,bootstrap,template,responsive admin,dashboard template,web apps template"> <meta name="author" content="Ari Rusmanto, Isoh Design Studio, Warung Themes"> <title>${fns:getSite().title}登录</title> <jsp:include page="/commons/style.jsp"></jsp:include> <script type="text/javascript"> function changeImg() { var imgSrc = $("#codeImg"); var src = imgSrc.attr("src"); imgSrc.attr("src", chgUrl(src)); } //加入时间戳，去缓存机制 function chgUrl(url) { var timestamp = (new Date()).valueOf();if ((url.indexOf("&") >= 0)) { url = url + "×tamp=" + timestamp; } else { url = url + "?timestamp=" + timestamp; } return url; } document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==13){ // enter 键 loginFun(); } }; function loginFun(){ if($("#userName").val()==""){ layer.tips('请输入账号!', '#userName'); }else if($("#userPass").val()==""){ layer.tips('请输入密码!', '#userPass'); }else if($("#userCode").val()==""){ layer.tips('请输验证码!', '#userCode'); }else{ sendAjax("${pageContext.request.contextPath}/backgd/system/login/login", $("#myform") .serializeArray(), function(data) { if (data.result) { layer.load(); setTimeout(function(){ window.location.href="${pageContext.request.contextPath}/backgd/system/systemHome/home"; }, 10); } else { layer.msg(data.msg, {icon: 5}); } }); } }; </script> </head> <body class="login tooltips"> <div class="login-header text-center" align="center"> <img src="${pageContext.request.contextPath}/style/admin/assets/img/logo-login.png" class="logo" alt="Logo"> </div> <div class="login-wrapper"> <!-- <div class="alert alert-warning alert-bold-border fade in alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>提示!</strong> Better check yourself, you're <a href="#fakelink" class="alert-link">not looking too good</a>. </div> --> <div style="height: 20px"></div> <form role="form" action="index.html" id="myform" style="margin: 20px"> <div class="form-group has-feedback lg left-feedback no-label"> <input id="userName" name="userName" type="text" value="" class="form-control no-border input-lg rounded" placeholder="输入您的账号" autofocus> <span class="fa fa-user form-control-feedback"></span> </div> <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/> <div class="form-group has-feedback lg left-feedback no-label"> <input id="userPass" name="userPass" type="password" class="form-control no-border input-lg rounded" placeholder="输入您的密码" value=""> <span class="fa fa-unlock-alt form-control-feedback"></span> </div> <div> <div class="form-group" style="float: left; 60%"> <input id="userCode" name="userCode" type="text" class="form-control no-border input-lg rounded" placeholder="输入验证码"> </div> <img style="margin-left: 10px;margin-top:8px;cursor: pointer;" id="codeImg" title="看不清换一张" alt="验证码" src="${pageContext.request.contextPath}/backgd/system/code/code" onclick="changeImg()"/> </div> <div class="form-group"> <button onclick="loginFun()" type="button" class="btn btn-warning btn-lg btn-perspective btn-block">登录</button> </div> </form> </div> <div class="loginbm"> ${fns:getSite().copyright} </div> </body> </html>