#模拟用户登陆,内含验证码验证和jsp等操做html
##1.案例需求: 1. 访问带有验证码的登陆页面login.jsp 2. 用户输入用户名,密码以及验证码。 * 若是用户名和密码输入有误,跳转登陆页面,提示:用户名或密码错误 * 若是验证码输入有误,跳转登陆页面,提示:验证码错误 * 若是所有输入正确,则跳转到主页success.jsp,显示:用户名,欢迎您java
##2.案例分析: git
##3.代码实现github
设计思想: 1. 先写出页面的基本框架:一个基本的表单,其中采用el表达式来表达虚拟目录,动态生成虚拟目录。 <form action="${pageContext.request.contextPath}/loginServlet" method="post"> <table> <tr> <td>用户名</td> <td><input type="text" name="username"></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password"></td> </tr> <tr> <td>验证码</td> <td><input type="text" name="checkCode"></td> </tr> <tr> <td colspan="2"><img id="img" src="/day16/checkCodeServlet"></td> </tr> <tr> <td colspan="2"><input type="submit" value="登陆"></td> </tr> </table> </form> 2. 用于显示验证码正确和错误以后的定向问题:主要codes: 采用el表达式是用来显示的,若是没有返回值或者返回值为空的话,若是采用request.getAttribute()的方法会产生null,可是若是采用el表达式,直接返回空字符串,不用返回null,简化了代码。 <div> ${requestScope.cc_error} /*这里也能够采用三目操做符来表示: <%=request.getAttribute("cc_error") == null ? "" : request.getAttribute("cc_error")%> */ </div> <div> ${requestScope.login_error} </div>
使用servlet来获取验证码,具体过程以下: 1. 先建立一个对象,用来画图:web
int width=100; int height=50; BufferedImage image=new BufferedImage(width,height, BufferedImage.TYPE_INT_RGB); 解释:第1,2行代码不用解释。使用BufferdImage对象来创造一个图像的对象,刚开始显示一个小方框,长100px,宽50px,采用RGB来涂色 2. 进一步美化照片,先填充色来填充背景 Graphics graphics = image.getGraphics(); graphics.setColor(Color.PINK);// graphics.fillRect(0,0,width,height); 3. 到这一步,会发现下和右没有图上颜色,再进一步梅花: graphics.setColor(Color.blue); graphics.drawRect(0,0,width-1,height-1); 4. 定义显示在图片上的字符和数字的库---》由大写A~Z小写的a~z和0~9组成: String str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; 5. 建立随机类来生成随机的角标 Random ran=new Random(); StringBuilder sb=new StringBuilder(); for (int i = 1; i <=4 ; i++) { int index = ran.nextInt(str.length()); //获取字符 char ch = str.charAt(index); sb.append(ch); //2.3写验证码 graphics.drawString(ch+"",width/5*i,height/2); } 6. 再将生成的动态验证码字符串交个session来保存,共客户端访问数据 String checkCode_session = sb.toString(); //存入session request.getSession().setAttribute("checkCode_session",checkCode_session); 7. 生产干扰线 graphics.setColor(Color.GREEN); //随机生成坐标 for (int i = 0; i < 10; i++) { int x1 = ran.nextInt(width); int x2 = ran.nextInt(width); int y1 = ran.nextInt(height); int y2 = ran.nextInt(height); graphics.drawLine(x1,x2,y1,y2); } 8. 将图片输出到页面展现 ImageIO.write(image,"jpg",response.getOutputStream());
至此,验证码的servlet生成;sql
TIP:这里采用写死的方法,简化了开发,读者能够采用sql的数据库链接上去动态生成用户名和密码。数据库
1. 首先设置代码的编码格式为utf-8; **request.setCharacterEncoding("utf-8");** 注意是request,请求用来设置编码。response通常是用来服务器的发送信息(用于给客户端发送回应) 2.采用request请求来获取username,password和验证码的元素: String username = request.getParameter("username"); String password = request.getParameter("password"); String checkCode = request.getParameter("checkCode"); 3. 获取session进行验证: HttpSession session = request.getSession(); String checkCode_session = (String) session.getAttribute("checkCode_session"); //删除验证码session中存储的 session.removeAttribute("checkCode_session"); 4. 判断验证码,用户名和密码是否都正确,首先须要先判断验证码是否正确,这样能够避免数据库的消耗。(若是先验证用户名和密码的话,须要去数据库查询,查询完了若是验证码不对,也没法登陆,因此须要先验证验证码) 判断获取的字符串是否为空而后和在login.jsp页面中输入的字符串去掉大小写进行比较 如图在login.jsp中定义的:
这是在CheckCodeServlet中保存在session中的验证码字符串
服务器
String checkCode = request.getParameter("checkCode"); 表示把数据从请求中去了出来而且赋给了checkCode。
进行比较 if(checkCode_session!=null&&checkCode_session.equalsIgnoreCase(checkCode)){ //忽略大小写比较字符串,判断用户名和密码是否一致 //正确 if("zhangsan".equals(username)&&"123".equals(password)){ //登陆成功 //存储信息,用户信息 session.setAttribute("user",username); //重定向到success.jsp response.sendRedirect(request.getContextPath()+"/success.jsp"); }else{ //不一致,存储提示信息到request request.setAttribute("login_error","用户名或者密码错误"); //转发到登陆页面 request.getRequestDispatcher("/login.jsp").forward(request,response); } }else{ //不一致,存储提示信息到request request.setAttribute("cc_error","验证码错误"); //转发到登陆页面 request.getRequestDispatcher("/login.jsp").forward(request,response); }
codes from GitHub-----》》》》》登陆简单案例-验证码cookie
原文出处:https://www.cnblogs.com/chenyameng/p/11223139.htmlsession