Java Web制作登录验证码实现代码解析
程序员文章站
2022-06-25 12:01:51
图例如下具体操作如下:新建一个servlet,代码如下:标记一个webservlet,1 @webservlet(urlpatterns = {"/checkcode"}) //验证码servlet绘...
图例如下
具体操作如下:
新建一个servlet,代码如下:标记一个webservlet,
1 @webservlet(urlpatterns = {"/checkcode"}) //验证码servlet
绘制验证码图片的核心代码:
int width = 100; int height = 50; //创建图片对象 bufferedimage image = new bufferedimage(width, height, bufferedimage.type_int_rgb); //美化图片 graphics g = image.getgraphics(); //1:填充背景 g.setcolor(color.pink); g.fillrect(0, 0, width, height); //画边框 g.setcolor(color.blue); g.drawrect(0, 0, width - 1, height - 1); //生成一个验证码字符串 string strcheckcode = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789"; random random = new random(); strcheckcode = ""; for (int i = 1; i <= 4; i++) { int index = random.nextint(strcheckcode.length()); char ch = strcheckcode.charat(index); strcheckcode += ch;//拼接验证码 g.drawstring(ch + "", width / 5 * i, height / 2); } //画干扰线 for (int i = 0; i < 5; i++) { int x1 = random.nextint(width); int x2 = random.nextint(width); int y1 = random.nextint(height); int y2 = random.nextint(height); g.drawline(x1, x2, y1, y2); } //输出,显示出来 imageio.write(image, "jpg", resp.getoutputstream()); }
首先是new一个bufferedimage,然后给定长和宽,之后是指边框和背景色,接着使用随机数生成4个字符绘制在图片上,接着使用drawline绘随机制干扰线,
然后在前端页面引入图片,然后给图片绑定点击事件,点击后重新访问servlet即可:
//点击验证码图片,重新生成新验证 $(function () { $("#imgcheckcode").click(function () { var img = document.getelementbyid("imgcheckcode"); var date = new date(); img.src = "http://localhost:8080/blogs_war_exploded/checkcode?op=setcheckcode&a=" + date; }) })
<div class="inputcheckcode"> <div class="inputcheckcodeleftico">➤</div> <div class="inputcheckcoderightinput"> <input type="text" name="checkcode" id="checkcode" placeholder="验证码" autocomplete="off"/> </div> <img src="http://localhost:8080/blogs_war_exploded/checkcode?op=setcheckcode" id="imgcheckcode"> </div>
最后输出即可,效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: ES6之解构赋值