需求：
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 }