登录页面的代码
在把页面和数据库做好之后,我的登录页面只需要 用户名和密码 ,所以代码比较简单。
先找到登录按钮,给一个点击事件,然后再获取他们的表单值,然后对用户名和密码进行判断,判断是否填写了资料和是否是正确的账户和密码,在这之前还要检查登录页面是否是属于外层页面。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();}}