Java Web如何编写登录验证码生成与验证的详细代码实现?
- 内容介绍
- 文章标签
- 相关推荐
本文共计687个文字,预计阅读时间需要3分钟。
图例如下+具体操作如下:+新建一个Servlet,代码如下:+标记一个WebServlet,1+@WebServlet(urlPatterns={/checkCode})+绘制验证码图片的核心代码:+int width=100;+int height=50;+// 创建图片+BufferedImage image=new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);+// 获取图片的图形上下文+Graphics g=image.getGraphics();+// 设置背景色+g.setColor(Color.WHITE);+g.fillRect(0, 0, width, height);+// 设置字体+g.setFont(new Font(Arial, Font.BOLD, 18));+// 设置前景色+g.setColor(Color.BLACK);+// 生成随机验证码+String code=;+Random random=new Random();+for (int i=0; i <4; i++) {+ int index=random.nextInt(26);+ char c=(char) ('A' + index);+ code +=c;+ g.drawString(String.valueOf(c), (i * 25) + 5, 30);+}+// 输出图片+g.dispose();+// 将图片输出到客户端+HttpServletResponse response=(HttpServletResponse) event.getSource();+response.setContentType(image/jpeg);+response.setHeader(Pragma, No-cache);+response.setHeader(Cache-Control, no-cache);+response.setDateHeader(Expires, 0);+OutputStream out=response.getOutputStream();+ImageIO.write(image, JPEG, out);+out.close();+// 返回验证码字符串+event.setMessage(code);+// 清理资源+image=null;+g=null;+code=null;+random=null;
图例如下
具体操作如下:
新建一个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 = "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="localhost:8080/blogs_war_exploded/checkCode?op=setCheckCode" id="imgCheckCode"> </div>
最后输出即可,效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持易盾网络。
本文共计687个文字,预计阅读时间需要3分钟。
图例如下+具体操作如下:+新建一个Servlet,代码如下:+标记一个WebServlet,1+@WebServlet(urlPatterns={/checkCode})+绘制验证码图片的核心代码:+int width=100;+int height=50;+// 创建图片+BufferedImage image=new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);+// 获取图片的图形上下文+Graphics g=image.getGraphics();+// 设置背景色+g.setColor(Color.WHITE);+g.fillRect(0, 0, width, height);+// 设置字体+g.setFont(new Font(Arial, Font.BOLD, 18));+// 设置前景色+g.setColor(Color.BLACK);+// 生成随机验证码+String code=;+Random random=new Random();+for (int i=0; i <4; i++) {+ int index=random.nextInt(26);+ char c=(char) ('A' + index);+ code +=c;+ g.drawString(String.valueOf(c), (i * 25) + 5, 30);+}+// 输出图片+g.dispose();+// 将图片输出到客户端+HttpServletResponse response=(HttpServletResponse) event.getSource();+response.setContentType(image/jpeg);+response.setHeader(Pragma, No-cache);+response.setHeader(Cache-Control, no-cache);+response.setDateHeader(Expires, 0);+OutputStream out=response.getOutputStream();+ImageIO.write(image, JPEG, out);+out.close();+// 返回验证码字符串+event.setMessage(code);+// 清理资源+image=null;+g=null;+code=null;+random=null;
图例如下
具体操作如下:
新建一个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 = "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="localhost:8080/blogs_war_exploded/checkCode?op=setCheckCode" id="imgCheckCode"> </div>
最后输出即可,效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持易盾网络。

