layui使用使用servlet+jsp+ajax进行登录验证

╰+哭是因爲堅強的太久メ 2021-09-21 10:46 316阅读 0赞

#### 引言 ####

> 我们一般最基本的登录验证，是通过form表单提交数据到servlet的，那么如果使用ajax提交数据怎么做呢，网上资料是非常少的，下面我将向大家演示如何使用ajax提交数据，完成登录的操作，本次的UI界面我们使用Layui

#### 准备工作 ####

> 开发工具：eclipse  
> 开发环境：jdk1.8  
> 服务器： Tomcat6.0以上  
> 主要技术：jsp+serlvet+jdbc+js+html+css+jquery+layui基础知识(java web技术）  
> 数据库：SQLserver2014/Mysql5.7都可以

#### 1. 建表并连接数据库 ####

![在这里插入图片描述][20200909183257365.png_pic_center]

> id自增哦，是主键,数据库连接都会吧，使用Mysql和SqlServer都可以哦  
> 先看下项目的整体骨架吧  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70_pic_center]

#### 2.创建User实体类 ####

public class User{ 
     private Integer id;
     private String username;
     private String password;
     private String email;
     //setter和getter方法
     public User(){ }//无参构造器
     public User(Integer id, String username, String password, String email) { //有参构造器用于设置
      super();
      this.id = id;
      this.username = username;
      this.password = password;
      this.email = email;
     }
     }

#### 3-1.持久层Dao接口 ####

public interface UserDao { 
      User queryUserByUsernameAndPassword(String username,String password);//验证用户名和密码是正确
     }

#### 3-2.持久层Dao接口实现 ####

> 我们为什么用持久层和业务层，持久层用来操作数据库的，业务层是用来处理业务的，一个dao意味着执行数据库sql语句一次，也就是一个功能，但有时候一个业务可能需要多个dao来配合，比如注册的业务，他需要两个dao，一个是验证用户名是否存在，一个是将数据持久化保存注册到数据库。

public class SalDaoImpl extends DbConn implements SalDao  { //继承了数据库连接的Java类，就不需要再调用了哦
    public UsernameAndPassword(String username, String password) { //验证用户名和密码是正确
      User user=null;
      if(conn!=null) { 
       try{ 
        String sql="select * from [dbo].[user] where username=? and password=?";//SqlServer的写法
        String sql="select * from user where username=? and password=?";//Mysql的写法
        PreparedStatement pst=conn.prepareStatement(sql);
        pst.setString(1, username);
        pst.setString(2, password);
        ResultSet rs=pst.executeQuery();
        if(rs.next()==false){ 
         return null;
        }else{ 
         user=new User();
         user.setId(rs.getInt("id"));
         user.setUsername(rs.getString("username"));
         user.setPassword(rs.getString("password"));
         user.setEmail(rs.getString("email"));
        }
       
       }catch(Exception e){ 
        e.printStackTrace();
       }
      }
      return user;
     }

#### 3-3.业务层接口编写 ####

public interface UserService { 
     public User login(User user);
     }

#### 3-4.业务层接口实现类编写 ####

public class UserServiceImpl implements UserService { 
     private UserDao dao=new UserDaoImpl();
     public User login(User user) { 
      // TODO Auto-generated method stub
      return dao.queryUserByUsernameAndPassword(user.getUsername(), user.getPassword());
     }
    }

#### 4-1.项目骨架以及静态资源所在位置 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70_pic_center 1]

#### 4-2.项目启动页面index.jsp ####

> 运行此页面进入到login.jsp

...//省略
    <body>
    <jsp:forward page="WEB-INF/views/login.jsp"></jsp:forward> 
    </body>
    </html>

#### 4-3.login.jsp页面内容（核心代码） ####

...//省略
    <head>
    //引入layui的样式路径，我们用的相对路径哦
    <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css"> 
    <link rel="stylesheet" type="text/css" href="static/layui/css/admin.css"> 
    <link rel="stylesheet" type="text/css" href="static/layui/css/login.css"> 
    </head>
    <body>
    <form action="">//form表单我就写简单的，就不加入layui样式了，省的看的头疼，具体样式登录官网www.layui.com。
    <input type="text" name="username" id="username"/>
    <input type="password" name="password" id="password"/>
    <button type="button" id="denglu" class="layui-btn layui-btn-fluid">登陆</button>
    //这里注意，我们用的是ajax提交，就不能用type=submit的方式提交了，type要为不然它会认为是form表单提交
    </form>
    <script src="static/layui/layui.js"></script>
    <script>
    layui.use([ 'form','jquery','layer' ], function() { 
     var form = layui.form,
      layer = layui.layer,
      $= layui.jquery;
      form.render();//这句一定要加，占坑
      $("#denglu").click(function(){ 
          //alert("登录");
          var $1 = $.trim($('#username').val());
        var $2 = $.trim($("#password").val());
        if($1 == ''){   
             layer.msg('用户名不能为空',function() { time:2000}); 
             return false;  
         }
         if($2 == ''){   
             layer.msg('密码不能为空',function() { time:2000}); 
             return false;  
         }
           $.ajax({ 
           url:'UserServlet?action=login',//发出请求
           type:'post',
           data:{ "username":$1,"password":$2},
           success:function(data){ 
            console.log(data);
            if(data=="ok"){ //ok说明登录成功
             window.location.href="UserServlet?action=toLogin";然后跳转到你系统的主界面
            }else if(data=="error"){ 
           $("#msg").html("用户名或密码错误!");
           setTimeout(function(){  $("#msg").html("")},2000);//定时器，3秒钟后提示消失       
            }
           }
          });
          });
    </script>
    </body>
    <html>

#### 4-4.UserServlet核心内容 ####

public class UserServlet extends HttpServlet { 
    private static final long serialVersionUID = 1L;
     
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    /*方法一，常见的处理请求解决办法,选择一种即可
    request.setCharacterEncoding("UTF-8");
    String action=request.getParameter("action");
    if(action.equals("login")){ 
                doLogin(request,response);
    }else if (action.equals("registe")){ 
                 doRegiste(request,response);
    }else if(action.equals("toLogin")){ 
    	     toLogin(request,response);
    }*/   
    /*方法二，也可以通过反射来处理action
    request.setCharacterEncoding("UTF-8");
    String action=request.getParameter("action");
    try { 
                 Method method=this.getClass().getDeclaredMethod(action,HttpServletRequest.class,HttpServletResponse.class);//通过反射来调用业务，优化ifelse
                 method.invoke(this,request,response);//调用目标业务，方法
                 System.out.println(method);
    } catch (Exception e) { 
                 e.printStackTrace();
    }
    //如果使用这个那么我们的请求UserSerlvet?action=doLogin就代表这这个方法
    protected void doLogin(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { }
    */
    }
    //处理调用的请求
    protected void doLogin(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
           String username = request.getParameter("username");
           String username = request.getParameter("username");
            String password = request.getParameter("password");
            User user = userService.login(new User(null, username, password, null));
            if (user == null) { 
                request.setAttribute("msg","用户名或者密码错误");
                System.out.println("用户名或者密码错误");
                response.getWriter().print("error");//响应ajax的data值，
              
            } else { 
             response.getWriter().print("ok");//响应ajax的data值，成功则进响应到前端
             request.getSession().setAttribute("user", user.getUsername());
                System.out.println("登陆成功");
             
            }
     }
    protected void toLogin(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
      request.getRequestDispatcher("/WEB-INF/views/main.jsp").forward(request, response);//去系统主界面
     }
    }

#### 4-5.实现效果 ####

> 非空验证  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70_pic_center 2]

> 如数一个错误的用户名或者密码，点击登录  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70_pic_center 3]

> 输入正确的用户名和密码，登陆成功  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70_pic_center 4]

> 感谢收看，更多源码，尽在源码客栈（微信公众号），个人网站（www.ymkz.top)  
> ![在这里插入图片描述][20200909193104775.jpg_pic_center]

[20200909183257365.png_pic_center]: /images/20210920/a27ec62a740d4f4fa397c9408b3b9d99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70_pic_center]: /images/20210920/b03248ed81424f689b2d4bdd719fa7bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210920/0971a1b457b74bdc923480cbeaa0e3d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210920/3fb811ac7a704a57ade20e3079f8bead.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210920/c5bfe3d6495b4178aa85748c7d17e87f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210920/7f8d00378fcd4a7cbd489de87e53b8a7.png
[20200909193104775.jpg_pic_center]: /images/20210920/77714593fae749a29ab310db772a5259.png