登录功能之添加验证码（包含切换验证码）
主要功能，在登录页面上添加验证码，然后如果用户看不清，可以点击“换一张”，切换验证码，如果验证码输入错误，会提示验证码输入错误并无法登录
首先是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>
