首頁技術文章正文

JAVA培訓之登錄案例之添加驗證碼案例詳解

更新時間:2016年09月21日11時58分來源:傳智播客JAVA培訓學院瀏覽次數(shù):

經(jīng)過登錄案例之添加驗證碼案例的分析，大家對本案例的功能有了一定的了解，下面我們就來實現(xiàn)該案例，點擊此處

可以下載本案例源代碼，具體如下：
(1)本案例是在HttpSession第二例中的案例的基礎上完成的，案例的其他功能詳情可以參考HttpSession第二例；下面我們對Example22中的login.jsp頁面稍作修改，如例1-1所示：
例1-1 login.jsp

在例1-1中，新添加了一個表單項：驗證碼，并且還有一個<img>標簽，該標簽的src屬性值為“/Example22/VerifyCodeServlet”，后面我們會新建一個名為VerifyCodeSerlvet的Servlet類。
(2)在該應用下，新建一個package，名為cn.itcast.utils，然后將生成驗證碼圖片中的VerifyCode類放在該package下。
(3)在該應用下，新建一個Servlet類，名稱為VerifyCodeServlet，其在web.xml文件中配置的訪問路徑為“/VerifyCodeServlet”，主要代碼如例1-2所示：
例1-2 VerifyCodeServlet.java

public class VerifyCodeServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
       /*
       * 1. 生成圖片
       * 2. 保存圖片上的文本到session域中
       * 3. 把圖片響應給客戶端
       */
       VerifyCode vc = new VerifyCode();
       BufferedImage image = vc.getImage();
       request.getSession().setAttribute("session_vcode", vc.getText());//保存圖片上的文本到session域
       VerifyCode.output(image, response.getOutputStream());
    }
}

在例1-2中，首先通過VerifyCode幫助類獲取一張圖片，然后將圖片上的驗證碼保存在session域中，最后調(diào)用VerifyCode類的output()方法，將圖片保存在輸出流中，由于我們要將圖片輸出在瀏覽器端，所以這里的輸出流是response.getOutputStream()字節(jié)輸出流，通過這個流就可以將圖片顯示在瀏覽器端。
(4)將Example22發(fā)布到服務器中，然后開啟服務器，然后在瀏覽器端訪問：http://localhost:8080/Example22/login.jsp，并使用HttpWatch工具查看請求信息，如圖1-1所示：

圖1-1 訪問login.jsp
由圖1-1可知，我們在訪問login.jsp時，瀏覽器一共發(fā)送了兩個請求：一個是請求login.jsp，另一個是請求VerifyCodeServlet。
(5)瀏覽器的顯示結果如圖1-2所示：

圖1-2 瀏覽器顯示結果
圖1-2中，生成的驗證碼圖片中的值為“28hS”。
(6)下面對應用中的LoginServlet進行修改，這里只給出添加的代碼，如例1-3所示：
例1-3 LoginServlet.java

    /*
       * 校驗驗證碼
       * 1. 從session中獲取正確的驗證碼
       * 2. 從表單中獲取用戶填寫的驗證碼
       * 3. 進行比較！
       * 4. 如果相同，向下運行，否則保存錯誤信息到request域，轉發(fā)到login.jsp
       */
String sessionCode=(String)request.getSession().
getAttribute("session_vcode");
       String paramCode = request.getParameter("verifyCode");
       if(!paramCode.equalsIgnoreCase(sessionCode)) {
           request.setAttribute("msg", "驗證碼錯誤！");
           request.getRequestDispatcher("/session/login.jsp").
forward(request, response);
           return;
}

例1-3中，if語句中轉發(fā)代碼之后要使用“return”關鍵字結束方法的執(zhí)行，如果不使用return關鍵字，那么該方法還會繼續(xù)執(zhí)行下去，如果后面有重定向或轉發(fā)語句那么就會拋異常。
(7)重新啟動服務器，在瀏覽器端再次訪問login.jsp，然后輸入用戶名：zhagnsan，密碼：123，如圖1-3所示：

圖1-3 瀏覽器顯示結果
圖1-3中，正確的驗證碼是“QYCe”，而輸入的驗證碼是“qyce”，由于在LoginServlet中驗證碼忽略大小寫，所以這樣寫也是正確的。
(8)點擊圖1-3中的“登錄”按鈕，瀏覽器顯示結果如圖1-4所示：

圖1-4 瀏覽器顯示結果
(9)再次訪問login.jsp，用戶名和密碼輸入的仍然是zhangsan，123，如圖1-5所示：

圖1-5 瀏覽器顯示結果
(10)點擊圖1-5中的“登錄”按鈕，瀏覽器顯示結果如圖1-6所示：

圖1-6 瀏覽器顯示結果
驗證碼不正確，那么就轉發(fā)到login.jsp，并在瀏覽器端打印“驗證碼錯誤”。
(11)在瀏覽器端訪問login.jsp頁面，再次訪問該頁面時，使用HttpWatch工具獲取請求信息，如圖1-7所示：

圖1-7 請求信息
圖1-7中，訪問login.jsp頁面，服務器響應200狀態(tài)碼，但是訪問VerifyCodeServlet走的是瀏覽器的緩存，也就是說頁面中的驗證碼不改變。
(12)為了解決以上問題，我們對login.jsp頁面做些修改，在驗證碼后面添加一個超鏈接“換一張”，并添加一段javascript代碼，如例1-4所示：

例1-4中，當點擊超鏈接“換一張”時就執(zhí)行_change()函數(shù)，該函數(shù)首先獲得id為“img”的標簽，如果設置該標簽的src屬性的值為“/Example22/VerifyCodeServlet”，那么還是會出現(xiàn)圖1-7所示結果，所以我們在該路徑后面添加了一個請求參數(shù)a，該參數(shù)的值是當前時間的毫秒值，那么a的值就會隨著時間的改變而改變，因此每次點擊超鏈接，服務器就認為是一次新的請求，從而做出響應。
(13)在瀏覽器段再次訪問login.jsp，如圖1-8所示：