简单实现验证码
1. 前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>testHttpServlet</title> </head> <body> <form action="/jeetest/testHttpServlet" method="post"> <input placeholder="输入用户名" name="username"> <br/> <input placeholder="输入密码" name="password"> <br/> <img id="checkcode" src="/jeetest/testreqres" /> <a id="change" href="">看不清,换一张</a> <input type="submit" value="登录"> </form> </body> <script> window.onload=function () { //1.获取图片对象 var img = document.getElementById("checkcode"); img.onclick=function () { var date = new Date().getTime(); img.src="/jeetest/testreqres?"+date; } var bt_change = document.getElementById("change"); bt_change.onclick=function () { var date = new Date().getTime(); img.src="/jeetest/testreqres?"+date; } } </script> </html>
2. 后端
1 package com.net; 2 3 import javax.imageio.ImageIO; 4 import javax.servlet.ServletException; 5 import javax.servlet.annotation.WebServlet; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 import java.awt.*; 10 import java.awt.image.BufferedImage; 11 import java.io.IOException; 12 import java.util.Random; 13 14 @WebServlet("/testreqres") 15 public class TestREQRES extends HttpServlet { 16 @Override 17 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 18 doPost(req,resp); 19 } 20 21 @Override 22 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 23 //(1)图片对象 24 int width = 100; 25 int height = 50; 26 BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); 27 28 //(2)图片美化 29 Graphics g = image.getGraphics(); 30 //①设置背景色 31 g.setColor(Color.pink); 32 g.fillRect(0,0,width,height); 33 //②画边框 34 g.setColor(Color.BLUE); 35 g.drawRect(0,0,width-1,height-1); 36 //③写验证码 37 String word = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz"; 38 String [] strs = new String[4]; 39 Random ran = new Random(); 40 for(int i=0;i<4;i++) { 41 int index = ran.nextInt(word.length()); 42 strs[i] = word.charAt(index)+""; 43 g.drawString(strs[i],width/5*(i+1),height/2); 44 } 45 //④画干扰线 46 g.setColor(Color.GREEN); 47 for(int i=0;i<10;i++) { 48 int x1 = ran.nextInt(width); 49 int x2 = ran.nextInt(width); 50 int y1 = ran.nextInt(height); 51 int y2 = ran.nextInt(height); 52 g.drawLine(x1,y1,x2,y2); 53 } 54 55 //(3)图片输出到页面 56 ImageIO.write(image,"jpg",resp.getOutputStream()); 57 } 58 }
3. 效果
点击图片或链接都会重置图片的src属性，重新访问后端，刷新了验证码
