java spring 实现登录页面添加验证码

from 表单:

<div class="block">
    <p class="block-heading">用户登录</p>
    <div class="block-body">
     <form id="login_form"
      action="${pageContext.request.contextPath}/platform/login.htm"
      method="post">
      <input type="hidden" name="remFlag" id="remFlag"/>
      <label>用户名</label>
      <input autocomplete="off" id="username" name="username" value="${userName}" type="text" placeholder="请输入用户名" class="span12">
      <label>密码</label>
      <input name="password" id="password" type="password" class="span12" autocomplete="off" value="${userPass}"  placeholder="请输入用密码" >
      <label>验证码</label>
      <input autocomplete="off" style="width: 150px;" id="code" name="code" type="text"  placeholder="请输入验证码" class="span12"  onblur="document.getElementById('enter').focus();">
      <img alt="验证码" id="scode" style="width: 75px; height:30px; margin-bottom: 9px; " src="${pageContext.request.contextPath}/platform/getCode.htmc" >
      <a href="#" onclick="javascript:flushCode();"><font style="font-style:italic;" size="1">看不清?换一张</font></a><br>
      <input name="aaaa" type="checkbox" onclick="remember();">记住账号和密码
      <a id="enter" href="#*" class="btn btn-primary pull-right" onclick="toLogin()">立即登录</a>
     
     </form>
    </div>
   </div>

js:

function flushCode() {
     // 每次刷新的时候获取,防止浏览器缓存刷新失败
     var time = Math.random();
     document.getElementById("scode").src = "${pageContext.request.contextPath}/platform/getCode.htmc?time=" + time;
 }

后台controller:

/**
  * 生成验证码
  * @param request
  * @param response
  * @throws IOException
  */
 @RequestMapping(value = "/platform/getCode")
 public void code(HttpServletRequest request, HttpServletResponse response) throws IOException {
  int IMG_HEIGHT = 100;
  int IMG_WIDTH = 40;
  // 用于绘制图片,设置图片的长宽和图片类型(RGB)
        BufferedImage bi = new BufferedImage(IMG_HEIGHT, IMG_WIDTH, BufferedImage.TYPE_INT_RGB);
        // 获取绘图工具
        Graphics graphics = bi.getGraphics();
        graphics.setColor(new Color(180, 200, 200)); // 使用RGB设置背景颜色
        graphics.fillRect(0, 0, 100, 40); // 填充矩形区域

        // 验证码中所使用到的字符
        char[] codeChar = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".toCharArray();
        String captcha = ""; // 存放生成的验证码
        Random random = new Random();
        for(int i = 0; i < 4; i++) { // 循环将每个验证码字符绘制到图片上
            int index = random.nextInt(codeChar.length);
            graphics.setFont(new Font("黑体", Font.BOLD, 20));
            // 随机生成验证码颜色
            graphics.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));
            // 将一个字符绘制到图片上,并制定位置(设置x,y坐标)
            graphics.drawString(codeChar[index] + "", (i * 20) + 15, 30);
            captcha += codeChar[index];
        }
        for (int i = 0; i < 20; i++) {
         int x = random.nextInt(IMG_HEIGHT);
         int y = random.nextInt(IMG_WIDTH);
         int xl = random.nextInt(20);
         int yl = random.nextInt(20);
         graphics.drawLine(x, y, x + xl, y + yl);
        }
        // 将生成的验证码code放入sessoin中
        request.getSession().setAttribute("code", captcha);
        // 通过ImageIO将图片输出
        ImageIO.write(bi, "JPG", response.getOutputStream());
 }



猜你喜欢

转载自blog.csdn.net/duliu1314/article/details/79273221
今日推荐