写在前面
前段时间大家都说最近大环境不好，好多公司在裁员，换工作的话不推荐轻易的裸辞，但是我想说的是我所在的公司好流弊，有做不完的业务需求，还有就是招不完的人......
最近我也是比较繁忙，但是还是要抽一点时间来进行自我复盘和记录，最近也写一个简单的小功能，就是登陆界面的图片 验证码 功能
环境：tomcat9、jdk1.8
1 生成验证码的工具类
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
public class randomvalidatecodeutil {
public static final string randomcodekey= "randomvalidatecodekey" ; //放到session中的key private string randstring = "0123456789" ; //随机产生只有数字的字符串 private string //private string randstring = "abcdefghijklmnopqrstuvwxyz";//随机产生只有字母的字符串 //private string randstring = "0123456789abcdefghijklmnopqrstuvwxyz";//随机产生数字与字母组合的字符串 private int width = 95 ; // 图片宽 private int height = 25 ; // 图片高 private int linesize = 40 ; // 干扰线数量 private int stringnum = 4 ; // 随机产生字符数量
private static final logger logger = loggerfactory.getlogger(randomvalidatecodeutil. class );
private random random = new random();
/** * 获得字体 */ private font getfont() { return new font( "fixedsys" , font.center_baseline, 18 ); }
/** * 获得颜色 */ private color getrandcolor( int fc, int bc) { if (fc > 255 ) fc = 255 ; if (bc > 255 ) bc = 255 ; int r = fc + random.nextint(bc - fc - 16 ); int g = fc + random.nextint(bc - fc - 14 ); int b = fc + random.nextint(bc - fc - 18 ); return new color(r, g, b); }
/** * 生成随机图片 */ public void getrandcode(httpservletrequest request, httpservletresponse response) { httpsession session = request.getsession(); // bufferedimage类是具有缓冲区的image类,image类是用于描述图像信息的类 bufferedimage image = new bufferedimage(width, height, bufferedimage.type_int_bgr); graphics g = image.getgraphics(); // 产生image对象的graphics对象,改对象可以在图像上进行各种绘制操作 g.fillrect( 0 , 0 , width, height); //图片大小 g.setfont( new font( "times new roman" , font.roman_baseline, 18 )); //字体大小 g.setcolor(getrandcolor( 110 , 133 )); //字体颜色 // 绘制干扰线 for ( int i = 0 ; i <= linesize; i++) { drowline(g); } // 绘制随机字符 string randomstring = "" ; for ( int i = 1 ; i <= stringnum; i++) { randomstring = drowstring(g, randomstring, i); } logger.info(randomstring); //将生成的随机字符串保存到session中 session.removeattribute(randomcodekey); session.setattribute(randomcodekey, randomstring); g.dispose(); try { // 将内存中的图片通过流动形式输出到客户端 imageio.write(image, "jpeg" , response.getoutputstream()); } catch (exception e) { logger.error( "将内存中的图片通过流动形式输出到客户端失败>>>> " , e); }
}
/** * 绘制字符串 */ private string drowstring(graphics g, string randomstring, int i) { g.setfont(getfont()); g.setcolor( new color(random.nextint( 101 ), random.nextint( 111 ), random .nextint( 121 ))); string rand = string.valueof(getrandomstring(random.nextint(randstring .length()))); randomstring += rand; g.translate(random.nextint( 3 ), random.nextint( 3 )); g.drawstring(rand, 13 * i, 16 ); return randomstring; }
/** * 绘制干扰线 */ private void drowline(graphics g) { int x = random.nextint(width); int y = random.nextint(height); int xl = random.nextint( 13 ); int yl = random.nextint( 15 ); g.drawline(x, y, x + xl, y + yl); }
/** * 获取随机的字符 */ public string getrandomstring( int num) { return string.valueof(randstring.charat(num)); } } |
这个类不用动，可以直接拿来用
2 页面代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!--html/bady代码-->
<div > <div > <div > <input type= "tel" id= "verify_input" placeholder= "请输入验证码" maxlength= "4" > </div> </div> <div > <a href= "javascript:void(0);" rel= "external nofollow" title= "点击更换验证码" > <img id= "imgverify" src= "login/getverify" alt= "更换验证码" height= "36" width= "170" onclick= "getverify(this);" > </a> </div> <input type= "button" onclick= "averify()" value= "提交" > </div> </body>
<!--js中的代码--> <script type= "text/javascript" src= "./js/jquery.min.js" ></script> <script>
//获取验证码 /*function getverify(obj){ obj.src = "login/getverify?"+math.random();//原生js方式 }*/
//获取验证码 function getverify() { // $("#imgcode").on("click", function() { $( "#imgverify" ).attr( "src" , 'login/getverify?' + math.random()); //jquery方式 // }); }
function averify(){ var value =$( "#verify_input" ).val(); // alert(value); $.ajax({ async: false , type: 'post' , url: 'login/checkverify' , datatype: "json" , data: { verifyinput: value }, success: function (result) { if (result) { alert( "success!" ); } else { alert( "failed!" ); } // window.location.reload(); getverify(); } }); } </script> |
注意：这里有2种获取验证码图片的方法
3 获取code和验证code的类
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
@restcontroller @requestmapping ( "/login" ) public class picverifyaction { private final static logger logger = loggerfactory.getlogger(picverifyaction. class );
/** * 生成验证码 */ @requestmapping (value = "/getverify" ) public void getverify(httpservletrequest request, httpservletresponse response) { try { response.setcontenttype( "image/jpeg" ); //设置相应类型,告诉浏览器输出的内容为图片 response.setheader( "pragma" , "no-cache" ); //设置响应头信息，告诉浏览器不要缓存此内容 response.setheader( "cache-control" , "no-cache" ); response.setdateheader( "expire" , 0 ); randomvalidatecodeutil randomvalidatecode = new randomvalidatecodeutil(); randomvalidatecode.getrandcode(request, response); //输出验证码图片方法 } catch (exception e) { logger.error( "获取验证码失败>>>> " , e); } }
/** * 校验验证码 */ @requestmapping (value = "/checkverify" , method = requestmethod.post,headers = "accept=application/json" ) public boolean checkverify( @requestparam string verifyinput, httpsession session) { try { //从session中获取随机数 string inputstr = verifyinput; string random = (string) session.getattribute( "randomvalidatecodekey" ); if (random == null ) { return false ; } if (random.equals(inputstr)) { return true ; } else { return false ; } } catch (exception e){ logger.error( "验证码校验失败" , e); return false ; } } } |
4 效果图镇楼
5 源码
当然上面代码只是核心部分，如果有问题可去github自行下载 charmsongo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
查看更多关于springboot登陆页面图片验证码简单的web项目实现的详细内容...