验证码--代码
采用servlet+html+js
在進行之前要先導入好自己需要的pom依賴
沒有這個依賴無法使用servlet(在原生javaweb開發時導入jar包)
<!--servlet依賴--><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>4.0.1</version></dependency>這個直接采用注解@WebServlet，簡化了web.xml的配置文件編寫，提高了開發效率。
1、首先編寫主要代碼
@WebServlet("/CheckCode") public class CheckCodeServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request,response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {int width = 100;int height = 50;// 1.創建一個對象，在內存中圖片(驗證碼圖片對象)BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);// 2.美化圖片// 2.1填充背景色Graphics g = image.getGraphics();// 畫筆對象g.setColor(Color.pink);// 設置背景顏色g.fillRect(0,0,width,height);// 2.2畫邊框g.setColor(Color.BLUE);// 設置邊框顏色g.drawRect(0,0,width - 1,height - 1);String str = "ABCDEFGHIJKLMNOPRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";// 生成隨機角標Random ran = new Random();for (int i = 1; i <= 4; i++) {int index = ran.nextInt(str.length());// 獲取字符char ch = str.charAt(index);// 隨機字符// 2.3寫驗證碼g.drawString(ch+"",width/5*i,height/2);}// 2.4畫干擾線g.setColor(Color.BLACK);// 隨機生成坐標點for (int i = 0; i < 10; i++) {int x1 = ran.nextInt(width);int x2 = ran.nextInt(width);int y1 = ran.nextInt(height);int y2 = ran.nextInt(height);g.drawLine(x1,y1,x2,y2);}// 3.將圖片輸出到頁面展示ImageIO.write(image,"jpg",response.getOutputStream());} }2、然后我們配置tomact
（基于原生的javaweb開發，這里還是使用的外入tomcat，在現在的先進開發技術當中，通過框架springboot內嵌tomcat【或者自己定義undertow服務器，引入pom進行開發】）
?
啟動tomcat，輸入接口/CheckCode
?
3、接著編寫html代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>驗證碼</title><script>/*分析:點擊超鏈接，需要換一張1.給超鏈接和圖片綁定單擊事件2.重新設置圖片的src屬性值*/window.onload = function (){// 1.獲取圖片對象let image = document.getElementById("checkCode");// 2.綁定單擊事件image.onclick = function (){// 加時間錯var date = new Date().getTime();image.src = "/day15/CheckCode?"+date;}// 3.獲取超鏈接對象let a = document.getElementById("change");a.onclick = image.onclick;}</script> </head> <body><img src="/day15/CheckCode" id="checkCode"><a id="change" href="#">看不清換一張</a> </body> </html>最后啟動測試
啟動tomact，打開html
點擊圖形或者超鏈接，即可實現驗證碼的變化
總結
- 上一篇： ## __VA_ARGS__ ... 宏
- 下一篇： LCD 设备驱动框架分析及核心结构