登录页面的代码

大家好，又见面了，我是你们的朋友全栈君。

登录页面的代码

在把页面和数据库做好之后，我的登录页面只需要 用户名和密码 ，所以代码比较简单。
先找到登录按钮，给一个点击事件，然后再获取他们的表单值，然后对用户名和密码进行判断，判断是否填写了资料和是否是正确的账户和密码，在这之前还要检查登录页面是否是属于外层页面。dataValidationForm 是from表单的ID，用户名和密码必须要加上value

<input type="text" name="UserNuber" id="UserNuber" class="form-control" placeholder="用户名" value="@ViewBag.UserNuber" style="width:93%;" />
 <input type="Password" name="Password" id="Password" class="form-control" placeholder="密码" value="@ViewBag.Password" style="width:93%;" />

<script>
 var layer;
   $(function () {
       //键盘按下事件
       window.onkeydown = onreturn;
         //用于检查登录页面是否是外层页面
         if (window.top.location.href != window.location.href) {
             window.top.location.href = window.location.href;
            }
         //加载&初始化layui模块,弹出层模块
         layui.use(['layer'], function (args) {
             layer = layui.layer;
         });
        $("#btnSubmit").click(function () {
          //获取值
          var UserNuber = $('#dataValidationForm [name="UserNuber"]').val();//用户名
          var Password = $('#dataValidationForm [name="Password"]').val();//密码
var rememberMe = $('#dataValidationForm[name="rememberMe"]:checked').val();//是否记住密码
            //判断是否填写数据 判断用户名和密码
            if (strValIsNotNull(UserNuber) && strValIsNotNull(Password)) {
                var layerIndex = layer.load();//打开加载层
                $.post("/WCommerce/UserLogin",//路径：控制器名称+控制器中的方法名称
                  {
                     UserNuber: UserNuber,//用户名
                     Password: Password,//密码
                     rememberMe: rememberMe,//是否记住密码
                   }, function (msg) {
                     layer.close(layerIndex);//加载层
                   if (msg == "success") {
                       //alert("登录成功");
                       //跳转到主页面
                window.location.replace("/WCommerce/Main");//跳转路径：控制器名称+主页面
                } else {
                    if (msg == "PasswordErro") {
                        layer.alert('请输入正确的账号或密码');
                      }
                     else if (msg == "userNoExsit") {
                         layer.alert('用户不存在');
                      }
                      else {
                         layer.alert('登录失败');
                      }
                       //清空密码
                       $("#Password").val("");
                            }
                        });
                } else {
                    alert("请填写完整数据");
                }
            });
            //字符串值不为空
            function strValIsNotNull(strVal) {
                return strVal != undefined && strVal != null && strVal != '';
            }
    </script>

然后在后台里获取cookie，

public ActionResult Login()
{
   string UserNuber = "";
   string Password = "";    
   bool isRember = false;
   //获取cookie
  HttpCookie cookie = System.Web.HttpContext.Current.Request.Cookies["user"];
    if (cookie != null)
      {
       if (cookie["UserNuber"] != null)
        {
      UserNuber = System.Web.HttpContext.Current.Server.UrlDecode(cookie["UserNuber"]);
            }
            if (cookie["Password"] != null)
             {
      Password = System.Web.HttpContext.Current.Server.UrlDecode(cookie["Password"]);
              }
              isRember = true;
            }
            ViewBag.UserNuber = UserNuber;
            ViewBag.Password = Password;
            ViewBag.isRember = isRember;
            return View();
        }

接下来就是最关键的后台代码了，获取页面传递的变量，然后用linq的查询方法，根据账号查询出一条用户数据…

 public ActionResult UserLogin(PW_User pwUser)
{
   string strMsg = "fail";//定义一个记录状态的变量
   //获取页面传递的变量
   string strUserNuber = pwUser.UserNuber;   //用户名
   string strPassword = pwUser.Password;     //密码
   string strIsRember = Request["rememberMe"];    //记住否        
   //验证码正确
    try
     {
      //根据账号查询出一条用户数据
      //linq
       PW_User dbUser = (from tbUser in myModels.PW_User
                         where tbUser.UserNuber == strUserNuber && tbUser.ToVoidNo == true
                         select tbUser).Single();//结果只能有一条数据，0条或者大于等于2条都会出现异常(一般单表查询时用)
       //对用户输入的密码加密
       string password = Common.AESEncryptHelper.Encrypt(strPassword);
       //用加密后的密码和数据库查询到的密码比较
       if (password == dbUser.Password)
        {
          //=验证选择的角色是否正确
          var listUserType = (from tbUser in myModels.PW_User
                              join tbUserRoleDetail in myModels.PW_UserRoleDetail on tbUser.UserID equals tbUserRoleDetail.UserID
                              join tbUserType in myModels.SYS_UserType on tbUserRoleDetail.UserTypeID equals tbUserType.UserTypeID
                              where tbUser.UserID == dbUser.UserID
                              select new
                              {
                                 tbUserType.UserTypeID,
                                 tbUserType.UserType
                               }).ToList();
           if (listUserType.Count > 0)
             {
                //=确认身份正确
//把用户数据放到session中
                //获取用户类型名称
                string userTypeName = listUserType[0].UserType.Trim();
                //获取用户类型ID
                int userTypeId = listUserType[0].UserTypeID;
                //设置session
                Session["UserID"] = dbUser.UserID;//传递UserID
                Session["UserTypeID"] = userTypeId;//传递UserTypeID
                Session["ServerTime"] = DateTime.Now.ToString("yyy-MM-dd HH:mm:ss");//登录时间
                //记住用户信息 使用cookie
                if (strIsRember != null && strIsRember.Trim() == "true")
                   {
                     //记住
                     //记住密码 保存cookie
                     HttpCookie cookie = new HttpCookie("user");
                     cookie.Expires = DateTime.Now.AddDays(7);//保存7天
                     cookie["UserNuber"] = strUserNuber;//用户名
                     cookie["Password"] = strPassword;//密码
                     Response.Cookies.Add(cookie);
         }
         else
             {
                //忘记
                HttpCookie cookie = new HttpCookie("user");
                cookie.Expires = DateTime.Now.AddDays(-1);//有效期设置为昨天，浏览器会自动删除cookie
                Response.Cookies.Add(cookie);
               }
                 strMsg = "success";//登录成功
                 }
                  else
                      {
                        strMsg = "userTypeErro";//用户类型错误
                        }
                    }
                    else
                    {
                        strMsg = "passwordErro";//密码错误
                    }
                }
                catch (Exception e)
                {
                    strMsg = "userNoExsit";//没有此用户
                    Console.Write(e);
                    //throw;
                }
            return Json(strMsg, JsonRequestBehavior.AllowGet);
        }

完整代码就是这样的了，如果还需要其他的判断条件可自行添加上去。效果图：

如果需要按回车键登录的话，

//按下回车键实现登录效果
 function onreturn() {
  if (window.event.keyCode == 13) {
     $("#btnSubmit").click();
         }
     }