這篇來做一個練習題，很有意思，就是實作網頁上登入旁邊一個驗證碼的過程。當然實際開發過程中，網上可以找到很多别人開發好的jar包，直接使用别人的驗證碼成果就可以。
1.ServletDemo3.java代碼
package com.anthony.servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ServletDemo3 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int width = 110;
int height = 25;
// 在記憶體中建立一個圖像對象
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//建立一個畫筆
Graphics g = img.getGraphics();
//給圖檔設定背景顔色和邊框
g.setColor(Color.PINK);
g.fillRect(1, 1, width-2, height-2);
//添加邊框并設定顔色
g.setColor(Color.BLUE);
g.drawRect(0, 0, width-1, height-1);
//設定字型樣式
g.setColor(Color.BLUE);
g.setFont(new Font("宋體", Font.BOLD | Font.ITALIC, 15)); //設定宋體 加粗和斜體顯示，字号15
//給圖檔添加數字
Random random = new Random();
int position = 20;
for (int i = 0; i < 4; i++) {
g.drawString(random.nextInt(10)+"", position, 18);
position += 20;
}
//添加9條幹擾線
for (int i = 0; i < 9; i++) {
g.drawLine(random.nextInt(width), random.nextInt(height), random.nextInt(width), random.nextInt(height));
}
//講圖檔以流的形式輸出到網頁
ImageIO.write(img, "jpg", resp.getOutputStream());
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
部署效果
2.登陸表單添加驗證碼
在WebContent檔案夾下建立一個login.html檔案，這個登陸表單html源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<script type="text/javascript">
function changeCode() {
//先要得到圖檔元素
var img = document.getElementsByTagName("img")[0];
img.src="/Servlet01/demo3?time=" + new Date().getTime();
}
</script>
</head>
<body>
<form action="#" method="post">
使用者名：<input type="text" name="userName"/></br>
密碼：<input type="password" name="pwd"/></br>
驗證碼：<input type="text" name="code"/>
<img src="/Servlet01/demo3"/><a href="javascript:changeCode()" target="_blank" rel="external nofollow" >看不清換一張</a></br>
<input type="submit" value="登入"/></br>
</form>
</body>
</html>
部署之後，效果是這樣的
點選浏覽器重新整理可以變換驗證碼，點選 看不清換一張也可以變換驗證碼。上面這個過程就寫一個自定義的驗證碼的過程，上面代碼不懂，暫時沒關系，了解一下這個思路就好。實際開發肯定用别人寫好的開源的驗證碼。
使用驗證碼工具包
網上有一個矩形圖檔驗證碼的jar包ValidateCode.jar，其實和我們這個自定義的差不多，關鍵是這個jar包在csdn下載下傳需要積分，由于不是免費軟體，我這也不建議使用，我們可以把上面自己寫的代碼抽取出來形成一個工具類。把width 和height 和左右 上下舉例都換成變量，這樣就可以像ValidateCode vc = new ValidateCode(寬度，高度，驗證碼個數，幹擾線條數)，當然網上還有其他語言的圖檔驗證碼的工具包可以使用。