JavaWeb 之登录添加验证码示例

Dear 丶 2021-07-01 11:00 414阅读 0赞

## 案例描述： ##

这个示例是基于基本的登录案例，添加了验证码的功能。

## 效果展示 ##

login.jsp  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]  
succ.jsp  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 1]

## 一、大体流程图： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 2]

## 二、目录结构 ##

这个案例用到的几个目录和文件，用红框标出。其余的都可以忽略。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 3]

## 三、源代码 ##

源代码只选取核心部分展示。其余的大同小异，没有意义。

1.  login.jsp
    
        <html>
        	<script type="text/javascript"> function _change() { // 得到img元素 var imgele = document.getElementById("vcodeimage"); // 修改src,其实还是原来的src imgele.src = "/JavaWebLearning/VerifyCodeServlet?a=" + new Date().getTime(); } </script>
        
        	<head>
        		<base href="<%=basePath%>">
        
        		<title>登录</title>
        
        		<meta http-equiv="pragma" 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">
        		
        
        	</head>
        
        	<body>
        		<%-- 本页面提供表单信息，还要显示错误信息 --%>
        
        		<h1>登录</h1>
        
        		<%
        		/*
        		读取名为uname的cookie，
        		如果为空，显示 ""空字符串
        		如果不为空，显示cookie的值
        		 */
        		String uname = "";
        		// 获取所有的cookie
        		Cookie[] cs = request.getCookies();
        		// 如果存在cookie
        		if (cs != null) {
        			// 循环遍历所有的cookie
        			for (Cookie c : cs) {
        				// 找到名字为uname的cookie
        				if ("uname".equals(c.getName())) {
        					// 把这个cookie的值给uname这个变量
        					uname = c.getValue();
        				}
        			}
        		}
        	%>
        
        		<%
        		String msg = "";
        		msg = (String) request.getAttribute("msg");
        		if (msg == null) {
        			msg = "";
        		}
        	%>
        
        		<form action="/JavaWebLearning/LoginServlet" method="post">
        			<div>用户:</div>
        			<input type="text" name="username" value="<%=uname%>" /><br />
        			<div>密码:</div>
        			<input type="password" name="password" /><br />
        			<div>验证码：</div>
        			<input type="text" name="verifyCode" size="3" /> <img id="vcodeimage" src="/JavaWebLearning/VerifyCodeServlet" />
        			<a href="javascript:_change()">看不清，换一张</a> <br /> <input type="submit" value="submit" />
        		</form>
        		<font color="red"> <b> <%=msg%> </b> </font>
        	</body>
        
        </html>
2.  succ.jsp
    
        <body>
        	<h1>succ.jsp</h1>
        	<%
        	String username = (String) session.getAttribute("username");
        	if (username == null) {
        		/*
        		 * 1.向request域中保存错误信息，转发到login.jsp
        		 */
        		request.setAttribute("msg", "用户未登陆，请登陆！");
        		request.getRequestDispatcher("/session2/login.jsp").forward(request, response);
        		return;
        	}
        %> 欢迎用户
        	<%=username%>访问！！！
        </body>
3.  LoginServlet.java
    
        public class LoginServlet extends HttpServlet { 
        
        	public void doPost(HttpServletRequest request, HttpServletResponse response)
        			throws ServletException, IOException { 
        		/* * 校验验证码 1. 从session中获取正确的验证码 2. 从表单中获取用户填写的验证码 3. 进行比较 4. * 如果相同，向下运行，否则保存错误信息到request域，转发到login.jsp */
        		String sessionCode = (String) request.getSession().getAttribute(
        				"session_vcode");
        		System.out.println("系统传递过来的:" + sessionCode);
        		String formCodeString = request.getParameter("verifyCode");
        		System.out.println("用户输入的："+formCodeString);
        		if (!formCodeString.equalsIgnoreCase(sessionCode)) { 
        			// 保存错误信息到request域
        			request.setAttribute("msg", "验证码输入错误，请重新输入！");
        			// 得到一个转发器
        			RequestDispatcher qr = request
        					.getRequestDispatcher("/session2/login.jsp");
        			// 转发
        			qr.forward(request, response);
        			return;
        
        		}
        
        		/* * 1. 获取表单数据 */
        		// 处理中文问题
        		request.setCharacterEncoding("utf-8");
        		// 获取表单数据
        		String username = request.getParameter("username");
        		String password = request.getParameter("password");
        
        		/* * 2. 校验用户名和密码是否正确,预设用户名和密码分别为：“root”，“0000” */
        		if ("root".equalsIgnoreCase(username) && "0000".equals(password)) { 
        			/******* 附加项 *************************************************************/
        			// 把用户名保存到cookie中，发送给客户端浏览器。
        			// 当再次打开login.jsp时，login.jsp中会读取request中的cookie，把它显示到用户名文本框中
        
        			// 1. 创建cookie
        			Cookie cookie = new Cookie("uname", username);
        			// 2. 设置cookie生命时长为7天。
        			cookie.setMaxAge(60 * 60 * 24 * 7);
        			// 3. 保存cookie
        			response.addCookie(cookie);
        
        			/******* 附加项 *************************************************************/
        
        			/* * 3.如果成功 -> 保存用户信息到session中 -> 重定向到succ.jsp */
        
        			// 获取session
        			HttpSession session = request.getSession();
        			// 向session域中保存用户名
        			session.setAttribute("username", username);
        			// 重定向到succ.jsp
        			response.sendRedirect("/JavaWebLearning/session2/succ.jsp");
        		} else { 
        			/* * 如果失败 -> 保存错误信息到request域中 -> 转发到login.jsp */
        			// 保存错误信息到request域
        			request.setAttribute("msg", "用户名或密码错误！");
        			// 得到一个转发器
        			RequestDispatcher qr = request
        					.getRequestDispatcher("/session2/login.jsp");
        			// 转发
        			qr.forward(request, response);
        		}
        	}
        }
4.  VerifyCodeServlet.java
    
        public class VerifyCodeServlet extends HttpServlet { 
        	public void doGet(HttpServletRequest request, HttpServletResponse response)
        			throws ServletException, IOException { 
        		/* * 生成图片，保存图片上的文本到session域中，把图片响应给客户端 */
        		VerifyCode vc = new VerifyCode();
        		BufferedImage image = vc.getImage();
        		// 保存图片上的文本到session域中。
        		System.out.println("系统生成的验证码："+vc.getText());
        		request.getSession().setAttribute("session_vcode", vc.getText());
        		vc.output(image, response.getOutputStream());
        	}
        }

--------------------

end.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/6a8af03483144129a33eb2a1a982a5c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 1]: /images/20210615/3fb48ba47e124f1caf308f0f7ebcbc90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 2]: /images/20210615/9925cb350a5d401aa17712966700563b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 3]: /images/20210615/90418713ff634891b9faa5e864bae834.png