驗證碼案例
基本介紹
驗證碼的本質上是一張圖片格式的文件，目的在於防止惡意註冊。這裏將用HttpServlet相關知識來生成驗證碼。
基本實現
- 創建JavaWeb項目。
- 編寫顯示效果的HTML頁面，show.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>註冊頁面</title>
<script>
//點擊超鏈接或圖片，換圖片
window.onload = function () {
//1. 獲取圖片對象
var img = document.getElementById("checkCode");
//2. 綁定點擊事件
img.onclick = function () {
// 加時間戳
var date = new Date().getTime();
img.src = "/Serv/checkCodeServlet?"+date;
}
}
</script>
</head>
<body>
<img id="checkCode" src="/Serv/checkCodeServlet"/>
<a id="change" href="">看不清換一張？</a>
</body>
</html>
- 編寫 Java 代碼
package servletDemo;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
/**
* @description: 描述
* @author: Jacks丶
* @date: 2019-11-02
* @version: 1.0
*/
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
protected 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_RGB);
// 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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// 生成隨機角標
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);
// g.drawString("A", 20, 25);
// g.drawString("B", 25, 25);
// g.drawString("C", 30, 25);
// g.drawString("D", 35, 25);
}
// 2.4 畫干擾線
g.setColor(Color.GREEN);
// 隨機生成座標點
for (int i = 1;i<=10;i++){
int x1 = ran.nextInt(width);
int x2 = ran.nextInt(width);
int y1 = ran.nextInt(width);
int y2 = ran.nextInt(width);
g.drawLine(x1,x2,y1,y2);
}
// 3. 將圖片輸出到頁面顯示
ImageIO.write(image,"jpg",response.getOutputStream());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
-
訪問到瀏覽器訪問URL：http://localhost:8080/Serv/show.html
-
展示效果:
時間：2019年11月3日17:13:04