javaweb登录页面验证码验证、session验证码详细步骤及疑问解决

1.  案例2——验证码登录与注销

1.1.  验证码校验效果

 

1.2.  没有登录访问welcomeServlet的效果

1.3.  登录成功后访问WelcomServlet的效果

2.  实现步骤

1、login.htm文件

<form class="form-horizontal" method="post" action="/DemoLogin/LoginServlet">    <div class="form-group">     <label for="username" class="col-sm-2 control-label">用户名</label>     <div class="col-sm-6">       <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">     </div>   </div>    <div class="form-group">     <label for="inputPassword3" class="col-sm-2 control-label">密码</label>     <div class="col-sm-6">       <input type="password" class="form-control" name="password"  placeholder="请输入密码">     </div>   </div>    <div class="form-group">         <label for="inputPassword3" class="col-sm-2 control-label">验证码</label>     <div class="col-sm-3">       <input type="text" class="form-control" id="inputPassword3" name="ucheckC" placeholder="请输入验证码">     </div>     <div class="col-sm-3">       <img id="checkCodeImg" src="CheckCodeServlet" οnclick="checkCode(this)"/>     </div>       </div>

2、script

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript">    function checkCode(obj) {        /*?后面是GET请求数据*/ //怎么点击图片就刷新验证码，不能刷新页面，否则用户名与密码刷掉了 //如何保证页面不刷新，图片重新加载访问servlet就可以切换验证码？ //浏览器对于img标签，如果src的路径不变不会重新请求servlet资源，所以必须改变src的路径       obj.src="CheckCodeServlet?"+new Date().getTime();            $(function () {                $("#tou").load('guide.html');            });        } </script>

3、接下来通过服务端动态生成验证码图片

创建Servlet CheckCodeServlet 根据如下步骤完成

public class CheckCodeServlet extends HttpServlet {    private Random random=new Random();     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {          //内存图片对象(TYPE_INT_BGR 选择图片模式RGB模式)         BufferedImage image = new BufferedImage(90,30,BufferedImage.TYPE_INT_BGR);          //得到画笔         Graphics graphics = image.getGraphics();         //画之前要设置颜色，设置画笔颜色         graphics.setColor(Color.yellow);         //填充矩形区域（指定要画的区域设置区）         graphics.fillRect(0,0,90,30);         //为了防止黑客软件通过扫描软件识别验证码。要在验证码图片上加干扰线         //给两个点连一条线graphics.drawLine();         for (int i=0;i<5;i++){             //颜色也要随机（设置每条线随机颜色）             graphics.setColor(getRandomColor());             int x1=random.nextInt(90);             int y1=random.nextInt(30);             int x2=random.nextInt(90);             int y2=random.nextInt(30);             graphics.drawLine(x1,y1,x2,y2);         }         //拼接4个验证码，画到图片上         char [] arrays={'A','B','C','D','E','+'};         StringBuilder builder = new StringBuilder();         for(int i=0;i<4;i++){                //设置字符的颜色                 int index=random.nextInt(arrays.length);                 builder.append(arrays[index]);           }           //创建session对象将生成的验证码字符串以名字为checkCode保存在session中 request.getSession().setAttribute("checkCode",builder.toString());           //将4个字符画到图片上graphics.drawString(str ,x,y);一个字符一个字符画         for (int i=0;i<builder.toString().length();i++)         {             graphics.setColor(getRandomColor());             char item=builder.toString().charAt(i);             graphics.drawString(item+"",10+(i*20),15);         }         //输出内存图片到输出流         ImageIO.write(image,"png",response.getOutputStream());      }      private Color getRandomColor(){         int r=random.nextInt(256);          int g=random.nextInt(256);          int b=random.nextInt(256);         return new Color(r,g,b);      }     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         doPost(request, response);     }

4、在servlet  loginServlet中做验证码比较操作 黄色部分为session相关操作

private UserService userService=new UserService(); protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {     request.setCharacterEncoding("utf-8");     response.setContentType("text/html;charset=utf-8");     String uname=request.getParameter("username");     String pw=request.getParameter("password");     //获取到用户输入的验证码     String ucheckC=request.getParameter("ucheckC");     HttpSession session = request.getSession();    //将用户输入的验证码与session中取出的验证码进行比较，相等的话就进行登录操作不成功则返回得到登录界面     if(session.getAttribute("checkCode").toString().equalsIgnoreCase(ucheckC)){         User user=new User();         user.setPassword(pw);         user.setUname(uname);         //System.out.println(user);         boolean login = userService.getLogin(user);         if (login){             request.setAttribute("login" , "登录成功！"); //登录成功后将用户信息存入session中             session.setAttribute("username",user.getUname());             response.sendRedirect(request.getContextPath()+"/index.jsp");         }else{             response.getWriter().write("<script>alert('用户名或密码错误！');history.back();</script>");         }     }else{         response.getWriter().write("<script>alert('验证码输入错误！');history.back();</script>");     } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doPost(request,response); }

5、接下来登录成功后将index.jsp界面进行如下修改就能达到登录和未登录效果

<div class="col-md-3" style="padding-top:20px">   <ol class="list-inline">    <%      if(request.getSession().getAttribute("username")!=null){    %>     <li>欢迎:<%=request.getSession().getAttribute("username")%>&nbsp;&nbsp;</li>     <li><a href="exitLogin">退出&nbsp;&nbsp;</a></li>     <%}else{%>     <li><a href="login.htm">登录</a></li>     <li><a href="register.htm">注册</a></li>     <%}%>     <li><a href="<%=request.getContextPath()%>/SowUsServlet">用户管理</a></li>     <li><a href="cart.htm">购物车</a></li>   </ol> </div>

6、接下来就是注销效果，创建servlet ExitLoginServlet主要就是清除session。然后跳转login.htm

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {   request.getSession().removeAttribute("username");   response.sendRedirect("login.htm"); }