【JSP學習筆記】使用Servlet實現網頁驗證碼

Servlet是一種獨立於平臺和協議的服務器端的Java技術,Servlet對象主要封裝了對HTTP請求的處理,並且它的運行需要Servlet容器(Tomcat和JBoss等)的支持。其實Servlet實質就是按Servlet規範編寫的Java類,但它可以處理Web應用中的相關請求。

先給出Servlet的UML圖:


下面,我們將通過Servlet實現網頁上的驗證碼進一步瞭解Servlet。

1、Servlet創建

如果是使用IDE中Servlet直接生成的這就簡單了,因爲IDE會自動幫你創建你所選擇的方法以及進行了註解配置(Servlet配置),但是新手的話我建議大家是直接新建一個Java類,按照Servlet的規範逐一將想要的代碼實現,因爲這樣能幫我們加深對Servlet的認識的同時,也讓我們更熟悉Servlet的使用。

2、要求

1. 編寫一個Servlet,實現以下功能:

(1)能夠響應來自客戶端的GET請求,不響應POST和其他請求;

(2)請求的url-pattern爲“/checkcode”;

(3)響應請求時,向瀏覽器改善驗證碼圖片,驗證碼由4位字符組成,字符可以是26個英文字母和10個數字。

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


生成驗證碼的Java類:

public class Verifycode {

	String code = "";
	public static final char[] chars = {'0','1','2','3','4','5','6','7','8',
		'9','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'}; //定義隨機字符字典,可隨意添加
	public static Random random = new Random(); //隨機數類
	
	public static String getRandomString() {
		//獲取隨機字符串,即驗證碼
		StringBuffer sb = new StringBuffer();
		for (int i=0;i<4;i++)  //生成4位隨機的驗證碼
			sb.append(chars[random.nextInt(chars.length)]);
		return sb.toString();
	}
	
	public static Color getRandomColor() {
		return new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)); //渲染方法
	}
	
	public static Color getReverseColor(Color c) {
		return new Color(255-c.getRed(),255-c.getGreen(), 255-c.getBlue()); //渲染方法

	}
	
	public void getCode(HttpServletRequest request,
            HttpServletResponse response) {
		code = getRandomString();
		HttpSession session = request.getSession();
		session.setAttribute("code", code); //將生成的驗證碼字符串放到session當中,便於與客戶端輸入的信息匹配
		int width = 100, height = 30; //定義圖片的寬和高
		Color color = getRandomColor();
		Color reverse = getReverseColor(color);
		BufferedImage imgbuf = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
		Graphics2D g = imgbuf.createGraphics();
		g.setFont(new Font(Font.SANS_SERIF,Font.BOLD,16));//設置字體
		g.setColor(color);//設置顏色
		g.fillRect(0, 0, width, height);//繪製背景
		g.setColor(reverse);//設置顏色
		g.drawString(code, 18, 20);//繪製隨機字符
		for(int i=0,n=random.nextInt(100);i<n;i++) {//畫最多100個噪音點
			g.drawRect(random.nextInt(width), random.nextInt(height), 1, 1);//隨機噪音點
		}
		try {
            ImageIO.write(imgbuf, "JPEG", response.getOutputStream());//將內存中的圖片通過流動形式輸出到客戶端
        } catch (Exception e) {
            e.printStackTrace();
        }
	}
}

接收客戶端請求的Servlet:

@WebServlet("/checkcode") //註解配置Servlet,非常重要!!!
public class checkcode extends HttpServlet{
	
	private static final long serialVersionUID = 1L;
	
	public checkcode() {
		super();
	}

	public void init(ServletConfig config) throws ServletException {
		super.init();
	}
	
	public void destory() {
		
	}
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
		response.setContentType("image/jpeg");  //將服務器的響應類型設置爲image
		Verifycode vc = new Verifycode();
		try {
			vc.getCode(request, response); //將客戶端的請求傳遞到生成驗證碼的Java類中,並且成功後返回響應
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
	}
}


2. 編寫一個login.jsp(見下圖),測試驗證碼是否有效。

(1)用戶輸入正確的驗證碼,則提示驗證碼正確;否則提示錯誤。然後繼續顯示一個新的驗證碼。

(2)用戶點擊驗證碼圖片時,更換一個新的驗證碼。


網頁代碼:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>

<script type="text/javascript"> <!--該JavaScript腳本用於當用戶點擊圖片時換一張圖片 -->
	$(function() {
		$("#vcode").bind("click", function() {
			this.src = "checkcode?time=" + (new Date()).getTime();
		});
	});
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>驗證碼</title>
</head>
<body>

	<form action="login.jsp" name="form1" id="form1" method="get">
		輸入驗證碼:<input type="text" name="verifycode" id="verifycode" maxlength="4" />
		<img alt="驗證碼" src="checkcode" id="vcode" style="cursor: pointer;"  > 
		<input type="submit" value="check">
	</form>

<% 
	String code = (String)session.getAttribute("code"); 
	String code1 = request.getParameter("verifycode");
%>
<!--獲取session中的驗證碼字符串,並與客戶端輸入的字符串作比較 -->
<%
	if (code != null)
		if (code.equals(code1)) //這裏必須是用String的equals方法,Java的基本常識
			out.print("驗證碼正確!");
		else
			out.print("驗證碼不正確!請重新輸入");
%>

</body>
</html>


輸入錯誤的效果:



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章