昨天的主要工作就是新增驗證碼功能，感覺還是挺有意思的。

首先總結下流程：登入註冊介面->後臺生成圖片和這個圖片對應的數字->前臺的jsp頁面獲得圖片所對應的數字->當用戶點選提交後判斷使用者輸入的與儲存的數字是否一樣

後臺生成圖片程式碼number.jsp:

<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
Color getRandColor(int fc,int bc){
  Random random = new Random();
  if(fc>255) fc=255;
  if(bc>255) bc=255;
  int r=fc+random.nextInt(bc-fc);
  int g=fc+random.nextInt(bc-fc);
  int b=fc+random.nextInt(bc-fc);
  return new Color(r,g,b);
}
%>
<%
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
int width=60, height=20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
Random random = new Random();
g.setColor(getRandColor(200,250));
g.fillRect(0, 0, width, height);
g.setFont(new Font("Times New Roman",Font.PLAIN,18));
g.setColor(getRandColor(160,200));
for (int i=0;i<155;i++){
  int x = random.nextInt(width);
  int y = random.nextInt(height);
  int xl = random.nextInt(12);
  int yl = random.nextInt(12);
  g.drawLine(x,y,x+xl,y+yl);
}
String sRand="";
for (int i=0;i<4;i++){
  String rand=String.valueOf(random.nextInt(10));
  sRand+=rand;
  g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
  g.drawString(rand,13*i+6,16);
}
session.setAttribute("rand",sRand);
g.dispose();
ImageIO.write(image, "JPEG", response.getOutputStream());
response.getOutputStream().flush();
response.getOutputStream().close();
out.clear();
out=pageContext.pushBody();
%>
 

可以看出我們將圖片對應的結果存在了session的rand中，接下去前臺如何呼叫這個驗證碼.

   在前臺register.jsp的合適位置新增如下程式碼,這樣一旦登入register.jsp就會出現驗證碼，那麼

<input name="verify" type="text" placeholder="驗證碼">
<img src="number.jsp" width="98" height="31"  id="picture" >

這裡有一個需要注意的問題，如果我在前臺通過js比較session的值和擁戶輸入的值是否一樣，那麼session的值其實是重新整理頁面之前的值，所以我現在能想到的方法就是提交到另一個jsp頁面（或者是servlet了),程式碼如下:

        String yan=(String)session.getAttribute("rand");//獲得圖片所對應的驗證碼
        if(!yan.equals((String)request.getParameter("verify")))//比較值
        out.print("<script>alert('驗證碼錯誤!');location.href='register.jsp';</script>");//不一樣彈窗同時跳轉回去
        else{......}//否則就註冊成功,進行什麼增刪查改的操作,傳送郵件的功能
 

到此為止驗證碼的基本功能就實現了，但是如果我想要點選重新整理驗證碼呢

只需要新增Onclick事件，然後實現跳轉，方法是我腦洞大開時想出來的....

對剛才的驗證碼部分新增點選事件和id：

<img src="number.jsp" width="98" height="31"  id="picture" onClick="change()" id="picture">

js程式碼:

function change()
{
var pic=document.getElementById("picture");
 var i=Math.random();//目的是使頁面不一樣
 pic.src="number.jsp?id="+i;
}
 

這個是不是很黑科技....我不知道有沒有其他方法，就採用變換url後面get的引數(後面加隨機數）使得頁面重新整理圖片

如果直接後面src改為number.jsp那麼不會再次呼叫後臺生成圖片，因為url是一致的，所以只能這麼改。

這樣我們就實現了驗證碼的生成及重新整理，缺點是在後臺判斷（也就是先跳轉到其他頁面）希望有人能告知前臺判斷（解決先後順序）