汉服商城系统之登录功能

登录页面如下：

1、后端实现

业务层逻辑：

//根据用户名和密码查询用户
 @Override
 public HigherResponse<User> queryUser(User user) {
  if(null == user){
   return HigherResponse.getResponseFailed("用户名或密码为空");
  }
  System.out.println("service用户名："+user.getUserName());
  if(null == user.getUserName() || "".equals(user.getUserName())){
   return HigherResponse.getResponseFailed("用户名不能为空");
  }
  if(null == user.getPassWord() || "".equals(user.getPassWord())){
   return HigherResponse.getResponseFailed("密码不能为空");
  }
  User queryUserByUserNameAndPwd = userDao.queryUserByUserNameAndPwd(user);
  System.out.println("用户信息："+queryUserByUserNameAndPwd);
  if(null == queryUserByUserNameAndPwd){
   System.out.println("查询到的用户为空...");
   return HigherResponse.getResponseFailed("用户名或密码错误");
  }
  return HigherResponse.getResponseSuccess(queryUserByUserNameAndPwd);
 }

2、前端实现

通过事件获得焦点，拿到框的值来判断输入框是否为空

<script type="text/javascript">
   $(function(){
    //事件
    $("#username").focusout(function(){
     if(null == $(this).val() || $(this).val().length == 0){
      alert("用户名不能为空！");
      return;
     }
    });
    $("#pwd").focusout(function(){
     if(null == $(this).val() || $(this).val().length == 0){
      alert("密码不能为空");
      return;
     }
    });
    $("#login").click(function(){
     $.ajax({
      type:"post",
      url:"manage/user/login.do",
      data:{
       name:$("#username").val(),
       pwd:$("#pwd").val()
      },
      dataType:"json",
      //回调方法,响应成功回调
      success:function(response){
       //console.log(response);
       if(response.status == 1){
        alert("登录成功");
       }else if(response.status == 0){
        alert("用户名或密码错误！！！");
        //清空错误信息
        $("#username").val("");
        $("#password").val("");
       }
      }
     })    
    })
   
   })  
  </script>

3、测试

不输入用户名：

不输入密码：