Web编程入门 1.1登录功能的实现

AdminLTE中有对应的登录模板，因此界面设计基本不需要花什么功夫，仅仅需要对其中的一些元素做一些个性化的调整即可，比如以下示例：

登录需要解决以下几个问题：

(1)得到输入的账号和密码

这里直接通过设定输入框，指定ID即可，在password设置type = password可以让密码输入不可见。

在js中通过Sign点击事件，得到

$("#email").val()以及$("#password").val()，就是两个对应值。

(2)检测输入用户名以及密码是否合法

检测分为多个方面

①检测输入是否满足最小长度，使用str.length > x即可。

②检测是否有非法字符，当然也可以不处理，因为含有非法字符说明这个账户一定不存在或者密码一定不正确。

③检测用户名是否存在，同样可以不处理，因为一个不存在的用户名去进行数据库查询肯定是没有返回结果的。

(3)与数据库交互验证账号密码

这里使用PHP作为后台，因此前端js拿到账号密码进行初步检测数据合法后就交由后台进行数据库的验证处理，数据库的访问在下一章介绍，这里就直接验证其返回值的，做出不同的反应。如果设置了权限管理，那么还可以通过不同的返回值，来指定用户界面跳转到不同的网页。

user.checkstr = function(str){
      switch (str){
        case "false":
          alert("wrong password");
          break;
        case "admin":
          alert("welcome admin "+user.name);
          break;
        case "user":
          alert("welcome user "+user.name);
          break;
        case "true":
          alert("welcome success");
          break;
        case "judgefailed":
          alert("no such user whose name is "+user.name);
          break;
        default :
          alert("wrong message for the function of judge");
          break;
      }

    }

(4)防止重复登录

防止重复登录有一个典型方案就是使用设计模式中的单例模式

// 提供了一个静态方法，用户可以直接在类上调用
  Singleton.getInstance = function(name,password) {
    // 没有实例化的时候创建一个该类的实例
    if(!this.instance) {
      this.instance = new Singleton(name,password);
      flag = true;
    }
    else{
      flag = false;
      return this.instance;
    }
    // 已经实例化了，返回第一次实例化对象的引用
  }

单例模式保证了，当前对象已经实例化了过后，如果还想实例化，那么就会返回这个对象，而不是去实例化一个新的对象。这就可以使得用户登录了过后重复登录还是他自己，而不是一个新的用户对象。

(5)页面跳转

这里我们仅仅实现了一个管理员，那么可以通过判断当前登录的账号是不是管理员账号来区分跳转网页地址，或者可以根据上述验证过程的返回值来判断该向哪个页面跳转。

if(checkstr(judgemessage)=='success'){
      var user = Singleton.getInstance(name,password);
      if(flag == true && name=='835670119@qq.com'){
        $(location).attr('href', 'index1.html');
      }
      else if(flag == true && name!='835670119@qq.com'){
        $(location).attr('href', 'index2.html');
      }
      else {
        alert("你已经登录了，不能重复登录");
      }
    }

这样既可实现整个登录过程。