生成随机4位验证码

1.首先是页面布局

<form action="${pageContext.request.contextPath}/dzswchecklogin.action" method="post">
        <input class="inp-fon" id="mobile" type="text" name="name" placeholder="请输入用户名"  maxlength="10">
        <input class="inp-fon" id="pwd" type="password" name="pwd" placeholder="请输入密码"  maxlength="10" οnkeyup="value=value.replace(/[^\w\.\/]/ig,'')"><br>
        <span>  <!--这个span标签之间的就是验证码的布局-->
        <input type="text" id="user_input_verifyCode" name="user_input_verifyCode" placeholder="请输入验证码" maxlength="4"  class="inp-fon" style="width: 345px;" />
         <img src="${pageContext.request.contextPath }/admin/getVerifyCode.action" width="120" height="60" id="verifyCodeImage" οnclick="javascript:changeImage();">
         </span>
        <button class="login" type="submit" οnclick="login()">登录</button>
    </form>    

还有呢！

 

<script type="text/javascript">

这里是用时间戳生成图片参数！

    function genTimestamp() {    
        var time = new Date();    
        return time.getTime();    
    } 
     function changeImage() {
         $('#verifyCodeImage').attr('src',
                 '${pageContext.request.contextPath }/admin/getVerifyCode.action?timestamp=' + genTimestamp());
     }

</script>

2.前端布局已经完成，直接看后台数据！

这里是后台请求接口：
        @RequestMapping(value="/admin/getVerifyCode.action")
        public void gerenate(HttpServletResponse response ,HttpSession session) {
            ByteArrayOutputStream  output = new ByteArrayOutputStream();
            @SuppressWarnings("unused")
            String verifyCodeValue = drawImg(output);
            session.setAttribute("verifyCodeValue", verifyCodeValue);
            try {
                ServletOutputStream out = response.getOutputStream();
                output.writeTo(out);
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }

        /**
         * 随机字符生成
         * @return
         */
        private char randomChar() {
            Random r = new Random();
            String s = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
            return s.charAt(r.nextInt(s.length()));
        }

        /**
         * 绘画验证码
         * @param output
         * @return
         */

        private String drawImg(ByteArrayOutputStream output) {
            String code = "";
            for(int i = 0;i< 4;i++) {
                code+= randomChar();//上面的随机生成的数字和字母组合
            }
            int width = 70;
            int height = 35;
            BufferedImage bi = new BufferedImage(width, height,BufferedImage.TYPE_USHORT_555_RGB);
            Font font = new Font("Times new Roman", Font.PLAIN, 20);
            //调用Graphics2d绘画验证码 这里可以自己定制验证码图片的样式和字体，也就是图片效果
            Graphics2D g = bi.createGraphics();
            g.setFont(font);
            Color color = new Color(0,0,205);
            g.setColor(color);
            g.setBackground(new Color(255,255,224));
            g.clearRect(0,0, width, height);
            FontRenderContext context = g.getFontRenderContext();
            Rectangle2D bounds = font.getStringBounds(code, context);
            double x = (width - bounds.getWidth())/2;
            double y = (height - bounds.getHeight())/2;
            double ascent = bounds.getY();
            //干扰线
            Random random = new Random();
              for(int i=0;i<8;i++){
                 int x1=random.nextInt(width);
                 int y1=random.nextInt(height);
                 int x2=random.nextInt(width);
                 int y2=random.nextInt(height);
                 g.drawLine(x1, y1, x1+x2, y1+y2);
              }
            @SuppressWarnings("unused")
            double daseY = y - ascent;
            g.drawString(code, (int)x, 20);
            g.dispose();
            try {
                ImageIO.write(bi, "jpg", output);
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            
            return code;
        }