主要功能，在登錄頁面上添加驗證碼，然后如果用戶看不清，可以點擊“換一張”，切換驗證碼，如果驗證碼輸入錯誤，會提示驗證碼輸入錯誤並無法登錄
首先是LoginServlet
package cn.itcast.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class LoginServlet */ @WebServlet("/LoginServlet") public class LoginServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { /** * 校驗驗證碼 * 1.從session中獲取正確的驗證碼 * 2.從表單中用戶填寫的驗證碼 * 3.進行比較 * 4.如果相同，向下運行，否則保存錯誤信息到request域，轉發到login.jsp */ String sessionCode =(String) request.getSession().getAttribute("session_vcode"); String paramCode = request.getParameter("verifyCode"); if(!paramCode.equalsIgnoreCase(sessionCode)){ request.setAttribute("msg", "驗證碼錯誤"); request.getRequestDispatcher("/day11_4/login.jsp").forward(request,response); return; } /** * 1.獲取表單數據 */ //處理中文問題 request.setCharacterEncoding("utf-8"); //獲取 String username=request.getParameter("username"); String password = request.getParameter("password"); //2.校驗用戶名和密碼是否正確 if(!"itcast".equalsIgnoreCase(username)){//登錄成功 /** * 附加項：把用戶名保存到cookie中，發送給客戶端瀏覽器 * 當再次打開login.jsp時，login.jsp中會讀取request中的cookie，把它顯示到用戶名文本框中 */ } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
下面是VerifyCodeServlet（驗證碼的關鍵一步）
package cn.itcast.servlet; import java.awt.image.BufferedImage; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.itcast.image.VerifyCode; @WebServlet("/VerifyCodeServlet") public class VerifyCodeServlet extends HttpServlet { protected 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()); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } }
再下面是login.jsp
<%@ 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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>My JSP 'login.jsp' starting page</title> <meta http-equiv="param" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript"></script> <script> function _change(){ /** 1.得到img元素 2.修改其src為/day11_4/VerifyCodeServlet */ var imgEle = document.getElementById("img"); imgEle.src="/day11_4/VerifyCodeServlet?a="+ new Date().getTime(); } </script> </head> <body> <%--本頁面提供登錄表單，還要顯示錯誤信息 --%> <h1>登錄</h1> <% /** 讀取名為uname的Cookie 如果為空顯示："" 如果不為空顯示：Cookie的值 */ String uname = " "; Cookie[] cs = request.getCookies();//獲取請求中所有的cookie if(cs!=null){//如果存在cookie for(Cookie c:cs){//循環遍歷所有的cookie if("uname".equals(c.getName())){//查找名為uname的cookie uname = c.getValue();//獲取這個cookie的值，給uname這個變量 } } } %> <% String message=" "; String msg = (String)request.getAttribute("msg");//獲取request域中的名為msg的屬性 if(msg!=null){ message=msg; } %> <font color="red"><b><%=message%></b></font> <form action="/day11_4/LoginServlet" method="post"> 用戶名：<input type="text" name="username" value="<%=uname %>" /><br/><%-- --%> 密碼：<input type="password" name="password"/><br/> 驗證碼：<input type="text" name="verifyCode" /><br/> <img id="img" src=" /day11_4/VerifyCodeServlet"/> <a href="javascript:_change()">換一張</a> <br/> <input type="submit" value="登錄"/> </form> </body> </html>