需求：
1. 訪問帶有驗證碼的登錄頁面login.jsp
2. 用戶輸入用戶名，密碼以及驗證碼。
如果用戶名和密碼輸入有誤，跳轉登錄頁面，提示:用戶名或密碼錯誤
如果驗證碼輸入有誤，跳轉登錄頁面，提示：驗證碼錯誤
如果全部輸入正確，則跳轉到主頁success.jsp，顯示：用戶名,歡迎您
分析：
代碼實現：
login.jsp 頁面
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>登錄</title>
6 <script>
7
8 window.onloa = function() { 9 // 刷新驗證碼
10 document.getElementById("img").onclick = function() { 11 this.src = "/day13/checkcodeservletdemo"+new Date().getTime(); 12 } 13 } 14 </script>
15 <style>
16
17 div {
18 color:red;
19 }
20 </style>
21
22 <body>
23 <form action="/day13/loginservletdemo" method="post">
24 <table>
25 <tr>
26 <td>用戶名</td>
27 <td><input type="text" name="username"></td>
28 </tr>
29
30 <tr>
31 <td>密碼</td>
32 <td><input type="password" name="password"></td>
33 </tr>
34
35 <tr>
36 <td>驗證碼</td>
37 <td><input type="text" name="checkcode"></td>
38 </tr>
39
40 <tr>
41 <td colspan="2"><img id="img" src="/day13/checkcodeservletdemo"></td>
42 </tr>
43
44 <tr>
45 <td colspan="2"><input type="submit" value="登錄"></td>
46 </tr>
47 </table>
48
49 <div><%=request.getAttribute("cc_error") == null ? "":request.getAttribute("cc_error") %></div>
50 <div><%=request.getAttribute("login_error") == null ? "":request.getAttribute("login_error") %></div>
51
52 </form>
53 </body>
54 </html>
success 頁面
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>登錄成功</title>
5 </head>
6 <body>
7 <h1><%=request.getSession().getAttribute("user")%>,歡迎您</h1>
8
9 </body>
10 </html>
生成驗證碼 servlet
1 import javax.imageio.ImageIO; 2 import javax.servlet.ServletException; 3 import javax.servlet.annotation.WebServlet; 4 import javax.servlet.http.HttpServlet; 5 import javax.servlet.http.HttpServletRequest; 6 import javax.servlet.http.HttpServletResponse; 7 import java.awt.*; 8 import java.awt.image.BufferedImage; 9 import java.io.IOException; 10 import java.util.Random; 11
12 @WebServlet("/checkcodeservletdemo") 13 public class CheckCodeServlet extends HttpServlet { 14 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 15
16 // 定義圖片的寬高
17 int width = 100; 18 int height = 50; 19
20 // 1 創建對象，在內存中生成圖片（驗證碼圖片對象）
21 BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR); 22
23 // 2 修飾圖片 24 // 2.1 填充背景色
25 Graphics g = image.getGraphics(); //獲取畫筆對象
26 g.setColor(Color.pink); // 設置畫筆顏色
27 g.fillRect(0,0,width,height); // 繪制一個矩形，給定坐標與寬高 28
29 // 2.2 畫邊框
30 g.setColor(Color.blue); // 設置畫筆顏色
31 g.drawRect(0,0,width-1,height-1); // 給圖像繪制邊框
32
33 String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789"; 34 //生成隨機角標
35 Random ran = new Random(); 36
37 StringBuilder sb = new StringBuilder(); 38 for (int i = 1; i <= 4; i++) { 39 int index = ran.nextInt(str.length()); 40 //獲取字符
41 char ch = str.charAt(index);//隨機字符
42 sb.append(ch); 43
44
45 //2.3寫驗證碼
46 g.drawString(ch+"",width/5*i,height/2); 47 } 48
49 String checkCode_session = sb.toString(); 50 // 將驗證碼存入 session
51 request.getSession().setAttribute("checkCode_session",checkCode_session); 52
53 //2.4畫干擾線
54 g.setColor(Color.GREEN); 55
56 // 隨機生成坐標點
57
58 for (int i = 0; i < 6; i++) { 59 int x1 = ran.nextInt(width); 60 int x2 = ran.nextInt(width); 61
62 int y1 = ran.nextInt(height); 63 int y2 = ran.nextInt(height); 64 g.drawLine(x1,y1,x2,y2); // 畫干擾線
65 } 66
67
68 // 3 將圖片輸出到頁面展示：通過response 的 字符流，將圖片輸出到瀏覽器上
69 ImageIO.write(image,"jpg",response.getOutputStream()); 70 } 71
72 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 73 this.doPost(request, response); 74 } 75 }
登錄 servlet
1 import javax.servlet.ServletException; 2 import javax.servlet.annotation.WebServlet; 3 import javax.servlet.http.HttpServlet; 4 import javax.servlet.http.HttpServletRequest; 5 import javax.servlet.http.HttpServletResponse; 6 import javax.servlet.http.HttpSession; 7 import java.io.IOException; 8
9 @WebServlet("/loginservletdemo") 10 public class LoginServlet extends HttpServlet { 11 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 12 // 1. 設置編碼
13 request.setCharacterEncoding("utf-8"); 14 // 2. 獲取參數 15 //Map<String, String[]> map = request.getParameterMap();
16
17 String username = request.getParameter("username"); 18 String password = request.getParameter("password"); 19 String checkcode = request.getParameter("checkcode"); 20
21 // 3.先判斷驗證碼是否正確 22 // 獲取生成驗證碼
23 HttpSession session = request.getSession(); 24 String checkCode_session = (String) session.getAttribute("checkCode_session"); 25 // 刪除 session中存儲的驗證碼
26 session.removeAttribute("checkCode_session"); 27
28 // 判斷,忽略大小寫
29 if(checkCode_session!= null && checkCode_session.equalsIgnoreCase(checkcode)) { 30 //驗證碼正確 31 // 判斷用戶名和密碼是否一致
32 if("zhangsan".equals(username) && "123".equals(password)) { 33 // 登錄成功 34 // 存儲用戶信息
35
36 session.setAttribute("user",username); 37 // 重定向到 success.jsp
38 response.sendRedirect(request.getContextPath()+"/success.jsp"); 39 }else { 40 // 存儲提示信息到request
41 request.setAttribute("login_error","用戶名或密碼錯誤"); 42 request.getRequestDispatcher("/login.jsp").forward(request,response); 43 } 44
45 } else { 46 // 驗證碼不正確 47 // 存儲提示信息到request
48 request.setAttribute("cc_error","驗證碼錯誤"); 49 request.getRequestDispatcher("/login.jsp").forward(request,response); 50 } 51
52 } 53
54 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 55 this.doPost(request, response); 56 } 57 }