登錄頁面的代碼

在把頁面和數據庫做好之后，我的登錄頁面只需要 用戶名和密碼 ，所以代碼比較簡單。
先找到登錄按鈕，給一個點擊事件，然后再獲取他們的表單值，然后對用戶名和密碼進行判斷，判斷是否填寫了資料和是否是正確的賬戶和密碼，在這之前還要檢查登錄頁面是否是屬于外層頁面。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;//獲取cookieHttpCookie 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{//根據賬號查詢出一條用戶數據//linqPW_User dbUser = (from tbUser in myModels.PW_Userwhere tbUser.UserNuber == strUserNuber && tbUser.ToVoidNo == trueselect tbUser).Single();//結果只能有一條數據，0條或者大于等于2條都會出現異常(一般單表查詢時用)//對用戶輸入的密碼加密string password = Common.AESEncryptHelper.Encrypt(strPassword);//用加密后的密碼和數據庫查詢到的密碼比較if (password == dbUser.Password){//=驗證選擇的角色是否正確var listUserType = (from tbUser in myModels.PW_Userjoin tbUserRoleDetail in myModels.PW_UserRoleDetail on tbUser.UserID equals tbUserRoleDetail.UserIDjoin tbUserType in myModels.SYS_UserType on tbUserRoleDetail.UserTypeID equals tbUserType.UserTypeIDwhere tbUser.UserID == dbUser.UserIDselect new{tbUserType.UserTypeID,tbUserType.UserType}).ToList();if (listUserType.Count > 0){//=確認身份正確 //把用戶數據放到session中//獲取用戶類型名稱string userTypeName = listUserType[0].UserType.Trim();//獲取用戶類型IDint userTypeId = listUserType[0].UserTypeID;//設置sessionSession["UserID"] = dbUser.UserID;//傳遞UserIDSession["UserTypeID"] = userTypeId;//傳遞UserTypeIDSession["ServerTime"] = DateTime.Now.ToString("yyy-MM-dd HH:mm:ss");//登錄時間//記住用戶信息 使用cookieif (strIsRember != null && strIsRember.Trim() == "true"){//記住//記住密碼 保存cookieHttpCookie 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);//有效期設置為昨天，瀏覽器會自動刪除cookieResponse.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();}}

總結

以上是生活随笔為你收集整理的登录页面的代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。