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");
}

 

  • 11
    点赞
  • 100
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值