简单的登录页面

在所有的软件和网页中，多会有一个登录的操作，以上图片是一个非常简单的登录操作

注：登录页面和主页面写在一个控制器里面

先定义一个弹出层的全局变量，在加载模板

在给身份绑定下拉框

 var layer;

$(document).reday(function(){

if(window.top.location.href !=window.location.href){

    window.top.location.href =window.location.href;

}

CreateOption("绑定身份证控制器里面的路径')；

})

layui.use(['layer'],function(){

layer=layui.layer;

})

在控制器里面定义一个验证码的方法

AESEncryptHelper和ValidCodeUtils 在图书馆管理系统项目的登录页面

1. public ActionResult ValidCode(){
       //生成一个随机的字符串  验证码
       string strRandom=ValidCodeUtils.GetRandomCode(4);
       //将验证码存入Session会话
       Session["valiCode"] = strRandoom;
       //byte[]根据验证码产生图片
       byte[] imgByte = ValidCodeUtils.CreateImage(strRandoom);
       //返回图片信息
       return File(imgByte, @"image/jpeg");
   }

然后去视图，在HTML里面找到验证码的<div>，给它一个img事件然后把控制器的路径放上去，见下图，就跟之前要获取控制那边的方法不一样了，就不需要发送一个请求给它了

例：<img src="在这写控制器里面传过来方法的路径'>

在给验证码图片绑定一个点击事件，在到后面加一个时间的属性，这样验证码的字符串则是通过时间的，所以每次的字符串就会不相同

$("#ValidateCode").click(function(){
    $(this).prop("src"，"/Modex/ValidCode?t=" + new Date().getTime());
})

验证码的事件到这里就全部完成了，现在是要验证用户信息

去控制器定一个方法，在方法里面传入用户的表

获取页面传递的变量，我们页面上一个需要传递用户名、密码、验证码和记住否。验证码和记住否这是通过Request

//获取页面传递的变量

string strUserName=mouser.userName.Trim();//用户名

string strPassword=mouser.password.Trim();//密码

string strValidCode=Requer["validCode"].Trim();//验证码

string strIsRember=Requer["remberMe"].Trim();//记住否

获取处session存放的验证码

string sessionValiCode="";
try{
    sessionValiCode = Session["valiCode"].ToString();
}catch(Exception e){
    Console.WriteLine(e);//并不会产生输出，主要是为了避免VS提示e未使用的警告
}

判断填入的验证码和session中的验证码是否一致StringComparison.InvariantCultureIgnoreCase 不区分大小写

if(sessionValiCode.Equals(strValidCode,StringComparison.InvariantCultureIgnoreCase))

查询用户信息Single单条数据，当没有数据或者有多条数据时触发异常。也就是查询用户的名称

S_User modUser = myModels.S_User.Single(m => m.userName == strUserName);

用户查询完之后，判断一下用户在页面上输入的密码和数据里面的密码进行对比

//将用户输入的密码进行AES265后与数据库中的密码对比
                    string Password = AESEncryptHelper.Encrypt(strPassword);
                    //判断用户密码
                    if (AESEncryptHelper.Encrypt(modUser.password).Equals(Password))

之后，判断一下用户的类型

用户的身份验证完成之后，开始处理登录信息

在视图那边给登录按钮绑定点击事件，

获取元素，这个获取值和之前获取值的方式不同，之前是通过id获取，这次是通过fmLogin[name=""].val()获取值

判断是否用户是否填写数据

然后使用post发送请求，登录成功之后，就跳转到主页面，需要清空密码和验证码和验证码刷新

登录页面的操作就完成了

---

勾选页面的记住我，就是记住用户的名称和密码以及身份，用户下次登录的时候，就不需要填写这些数据，就填写验证码信息就可以了

在判断用户是否登录成功后面接着去判断记住否是否等于true,保存Cookie

注：具体代码见图书馆管理系统登录页面