JSP做業5：servlet應用--圖片驗證碼

做業類型：驗證性實驗

實驗目的：掌握Servlet在JSP開發中的應用

實驗內容：使用Servlet實現網頁驗證碼功能。

1. 編寫一個Servlet，實現如下功能：

（1）可以響應來自客戶端的GET請求，不響應POST和其餘請求；

（2）請求的url-pattern爲「/checkcode」；

（3）響應請求時，向瀏覽器改善驗證碼圖片，驗證碼由4位字符組成，字符能夠是26個英文字母和10個數字。

（4）同時將驗證碼字符串放入session中，以便未來客戶端提交驗證碼時檢查是否一致。

2. 編寫一個login.jsp（見下圖），測試驗證碼是否有效。

（1）用戶輸入正確的驗證碼，則提示驗證碼正確；不然提示錯誤。而後繼續顯示一個新的驗證碼。

（2）用戶點擊驗證碼圖片時，更換一個新的驗證碼。

1.CheckCode.java

package june;
/**驗證碼實現思路：
*在Servlet中隨機產生驗證碼字符序列，並計入session中，
*JSP中以圖片的形式進行顯示。當用戶在JSP表單中輸入驗證碼並提交時，
*在相應的Servlet中驗證是否與session中保存的驗證碼一致。
*/
import java.awt.*;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.annotation.WebInitParam;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
//註釋配置Servlet
@WebServlet(name = "StoreCode", urlPatterns = { "/storecode" }, initParams = {
  @WebInitParam(name = "width", value = "80"),
  @WebInitParam(name = "height", value = "30"),
  @WebInitParam(name = "codeCount", value = "4") })
public class StoreCode extends HttpServlet {
 private static final long serialVersionUID = 1L;
 private int width = 80; // 驗證碼圖片的寬
 private int height = 30; // 驗證碼圖片的高
 private int codeCount = 4; // 驗證碼圖片的字符數
 private int x = 16;
 private int fontHeight=22;
 private int codeY=22;
 private final char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G',
   'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
   'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6',
   '7', '8', '9' };
 
 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException,
   java.io.IOException {
  //構造一個類型爲預約義圖像類型之一的BufferedImage，設置圖像的寬，高，和類型（TYPE_INT_RGB）
  BufferedImage Img = new BufferedImage(width, height,
    BufferedImage.TYPE_INT_RGB);
  
  // 返回Graphics2D，Graphics2D類擴展自Graphics 類，以提供對幾何形狀、座標轉換、顏色管理和文本佈局更爲複雜的控制
  Graphics g = Img.getGraphics();
  
  Random random = new Random();
  // 將圖像填充爲白色
  g.setColor(Color.WHITE);
  //填充指定的矩形。x,y座標均爲0，寬爲width,高爲height
  g.fillRect(0, 0, width, height);
  // 建立字體，字體的大小應該根據圖片的高度來定。
  Font font = new Font("Times new Roman", Font.PLAIN, fontHeight);
  g.setColor(Color.black);
  g.setFont(font);
  Color juneFont = new Color(153, 204, 102);
  // 隨機產生130條幹擾線，不易被其它程序探測
  g.setColor( juneFont );
  for (int i = 0; i < 130; i++) {
   
   //返回僞隨機數
   int x= random.nextInt(width);
   int y = random.nextInt(height);
   int xl = random.nextInt(16);  //80/5=16
   int yl = random.nextInt(16);
   //在此圖形上下文的座標系中，使用當前顏色在點 (x1, y1) 和 (x2, y2) 之間畫一條線
   g.drawLine(x, y, x + xl, y + yl);
   
  }
  // randomCode用於保存隨機產生的驗證碼，以便用戶登陸後進行驗證,線程安全的可變字符序列
  StringBuffer randomCode = new StringBuffer();
  // 隨機產生codeCount數字的驗證碼
  for (int i = 0; i < codeCount; i++) {
   //返回 char 參數的字符串表示形式
   String strRand = String.valueOf(codeSequence[random.nextInt(36)]);
   
   // 用隨機產生的顏色將驗證碼繪製到圖像中
   //建立具備指定紅色、綠色和藍色值的不透明的 sRGB 顏色，這些值都在 (0 - 255) 的範圍內
   g.setColor(new Color(20 + random.nextInt(110), 20 + random
     .nextInt(110), 20 + random.nextInt(110)));
   
   //使用此圖形上下文的當前字體和顏色繪製由指定 string 給定的文本。最左側字符的基線位於此圖形上下文座標系的 (x, y) 位置處。
   g.drawString(strRand, (i + 1) * x-4, codeY);
   randomCode.append(strRand);
  }
  HttpSession session = request.getSession(); // 將四位數字的驗證碼保存到Session中
  session.setAttribute("realcode", randomCode.toString());
  // 禁止瀏覽器緩存
  response.setHeader("Pragma", "no-cache");    //HTTP   1.0
  response.setHeader("Cache-Control", "no-cache");//HTTP   1.1
  response.setDateHeader("Expires", 0);      //在代理服務器端防止緩衝
  response.setContentType("image/gif");      //設置正被髮往客戶端的響應的內容類型
  
  // 將圖像輸出到Servlet輸出流中,ServletOutputStream提供了向客戶端發送二進制數據的輸出流
  ServletOutputStream sos = response.getOutputStream();
  ImageIO.write(Img, "gif", sos);           //使用支持給定格式的任意 ImageWriter 將一個圖像寫入 OutputStream
  sos.flush();                    //刷新此輸出流並強制寫出全部緩衝的輸出字節
  sos.close();
 }
}

2.還有login.jsp還有css佈局省略，寫

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8" import="java.util.*"%>
<%@ page import="java.io.PrintWriter" import="java.lang.String"%>
<!DOCTYPE HTML>
<html>
<head>
<title>驗證碼</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/all.css">
</head>
<body>
 <div class="page-back">
  <div class="page-welcome">
   <span class="font-welcome">JSP做業5：Servlet應用</span>
  </div>
  <div class="page-main">
   <div class="page-check">
    <form name="form1" method="get" onsubmit="#">
     <ul>
      <li class="input-info">輸入驗證碼：</li>
      <li><input type="text" id="input-code" name="input-code">
       <!-- 點擊一下從新加載一次驗證碼 --> <input type="image" name="img-code"
       id="img-code" alt="看不清，點擊換圖" src="checkcode"
       onclick="javascript:this.src='checkcode?+rand=Math.random()'"></li>
      <li><input type="submit" value="驗證" id="check-button"
       onclick="#"></li>
      <li><%
       String realCode = request.getSession().getAttribute("realcode").toString();
       if (request.getParameter("input-code") != null) {
        String userCode = request.getParameter("input-code");
        PrintWriter output = response.getWriter();//建立輸出流對象
        if (userCode.equalsIgnoreCase(realCode)) {
         out.print("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;輸入正確");
        } else {
         out.print("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;輸入錯誤，請從新輸入！");
        }
       }
      %>
      </li>
     </ul>
    </form>
   </div>
  </div>
  <div class="page-footer">
   <p>Copyright ? 2014 All Rights Reserved</p>
   <p>
    Author:June(王映君) &nbsp;&nbsp; <a
     href="http://my.oschina.net/june6502/blog">博客連接：</a>
   </p>
  </div>
 </div>
</body>
</html>

頁面效果：