上代码
前端+js（懒得分文件了）
@{ ViewBag.Title = "MVC权限系统架构学习-登录"; Layout = "/Views/Shared/_LoadJsAndCss.cshtml"; } <link rel="stylesheet" href="~/Content/styles/css/login.css"> <script type="text/javascript"> var contentPath = '@Url.Content("~")'.substr(0, '@Url.Content("~")'.length - 1); var isIE = !!window.ActiveXObject; var isIE6 = isIE && !window.XMLHttpRequest; if (isIE6) { window.location.href = contentPath + "/Error/ErrorMessage?message='浏览器不支持'"; } //回车键 document.onkeydown = function (e) { if (!e) e = window.event; if ((e.keyCode || e.which) == 13) { var btlogin = document.getElementById("btnlogin"); btnlogin.click(); } } //初始化 $(function () { function loadTopWindow() { if (window.top != null && window.top.document.URL != document.URL) { window.top.location = document.URL; //这样就可以让登陆窗口显示在整个窗口了 } } $("#bodytop").load(loadTopWindow()); //提示信息 function formMessage(msg, type) { $('.login_tips').parents('dt').remove(); var _class = "login_tips"; if (type == 1) { _class = "login_tips-succeed"; } $('.spanMess').prepend('<dt><div class="' + _class + '"><i style="color:red" class="fa fa-question-circle"></i>' + msg + '</div></dt>'); } //点击切换验证码 $("#login_verifycode").click(function () { $("#code").val(''); $("#login_verifycode").attr("src", contentPath + "/Login/VerifyCode?time=" + Math.random()); }); //登录按钮事件 $("#btnlogin").click(function () { var $username = $("#name"); var $password = $("#password"); var $verifycode = $("#code"); if ($username.val() == "") { $username.focus(); formMessage('请输入账号。'); return false; } else if ($password.val() == "") { $password.focus(); formMessage('请输入密码。'); return false; } else if ($verifycode.val() == "") { $verifycode.focus(); formMessage('请输入验证码。'); return false; } else { CheckLogin(); } }); function CheckLogin() { $(".formmargin").find('span').hide(); var name = $.trim($("#name").val()); var pass = $.trim($("#password").val()); var code = $.trim($("#code").val()); $.ajax({ type: 'POST', url: '@Url.Action("LoginMvc", "Login")', data: { username: name, password: pass, VerificationCode: code }, dataType: 'JSON', success: function (data) { if (data.type == 1) { window.location.href = '@Url.Action("Index", "Home")'; } else { formMessage(data.message); $(".formmargin").find('span').show(); $("#login_verifycode").trigger("click"); } } }); } }) </script> <body id="bodytop"> <div class=" bg"></div> <div class="container"> <div class="container-content"> <form class="form-panel" method="post"> <div class="logibbox"> <div class="form-head formmargin"> <h1>后台管理中心</h1> </div> <div class="form-content formmargin"> <div class="field"> <input type="text" minlength="2" class="input input-big" id="name" name="name" placeholder="登录账号" data-validate="required:请填写账号" /> </div> <div class="field"> <input type="password" maxlength="16" class="input input-big" id="password" name="password" placeholder="登录密码" data-validate="required:请填写密码" /> </div> <div class="field clearfix"> <input type="text" maxlength="4" class="inputs input-big" id="code" name="code" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" /> <img id="login_verifycode" class="login_verifycode" src="~/Login/VerifyCode" alt="点击切换验证码" title="点击切换验证码"/> </div> </div> <div class="form-tail formmargin"> <input type="button" class="button input-big" id="btnlogin" value="登录"> <span class="spanMess"></span> </div> </div> </form> </div> </div> <div class="copyright"> MVC权限架构系统学习 <br> 版权：世人皆萌 </div> </body>
css文件
*{ margin: 0; padding: 0; font: inherit; color: #333; vertical-align: baseline; } *:before,*:after{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .clearfix:after, .container:after{ content: " "; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; } .bg{ width: 100%; height: 100%; position: absolute; background: url(../images/bg.jpg); } .container-content{ margin: 150px auto; width: 400px; position: relative; } .form-panel{ border: 1px solid #ddd; border-radius: 4px; display: block; } .logibbox{ margin-top: -20px; border: 0; background: url(../images/tmbg-white.png); /*background-color:#fafafa;*/ } .logibbox .formmargin{ margin: 0 40px; } .form-panel .form-head{ margin: 20px; padding-top: 20px; display: block; text-align: center; /*font-weight: bold;*/ font-size: 24px; } .form-content{ display: block; height: 230px; } .form-content .field{ height: 33.33%; font-size: 14px; font: inherit; vertical-align: baseline; } .form-content .field .input{ display: inline-block; width: 318px;/*294px 318px*/ line-height: 1; } .form-content .field .inputs{ display: inline-block; width: 218px;/*196px 218px*/ line-height: 1; } .form-content .field .login_verifycode{ float: right; margin-top: 1px; display:inline-block; text-align:center; cursor:pointer; width: 100px; height: 36px; padding-right: 0; padding-left: 0; /*border: 1px solid #d5d5d5;*/ font-size: 14px; color: #727272; background: white; margin-left:-4px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .form-content .input-big, .form-tail .button{ padding:10px; font-size:16px; line-height: 24px; border-radius:10px; border:1px solid #d5d5d5; box-sizing:border-box; box-shadow:inset 0 1px 2px rgba(0,0,0,.1); outline:none; } .form-content .input-big, .form-tail .button:focus{ border:1px solid #afc2ec; color:#4b4b4b } .form-content .input-big, .form-tail .button[disabled]{ border:1px solid #d5d5d5; background:#fbfbfb; color:#9f9f9f; /*cursor:not-allowed*/ } .form-tail{ display: block; height: 106px; line-height: 106px; } .form-tail .button{ display: block; width: 100%; margin-top: 0px; border: solid 1px #ddd; border-color: #0ae; border-radius: 4px; color: #fff; background-color: #0ae; cursor: pointer; } .validation-summary-errors li{ height:43px; line-height:43px; width:auto; color:red; text-align:center; display:block; } .copyright{text-align: center;color: #4b4b4b;position: absolute;top: 100%;margin-top: -60px;width: 97%;font-family: Microsoft Yahei;line-height:25px;} .logibbox .formmargin .login_tips { height: 44px; line-height: 44px; font-size: 14px; text-align:center; color:red; box-shadow: none; }
两张背景图
后台代码
/// <summary> /// 登录 /// </summary> [HttpPost] public ActionResult LoginMvc(op_users login) { string Verification = WebHelper.GetSession("session_verifycode"); if (Session["session_verifycode"].IsEmpty() || Verification != MD5PassWordProvider.CutMD5(login.VerificationCode.ToLower(), 16)) { login.ErrorMessage = "您输入的验证码不正确。"; return Content(new AjaxResult { type = ResultType.info, message = "您输入的验证码不正确" }.ToJson()); //return View(login); } if (login.password.Length > 16) { login.ErrorMessage = "您输入的密码不正确。"; return Content(new AjaxResult { type = ResultType.info, message = "您输入的密码不正确" }.ToJson()); } var user = _userbll.Login(login.username, login.password); if (user == null) { login.ErrorMessage = "您输入的用户名不存在或密码不正确。"; return Content(new AjaxResult { type = ResultType.info, message = "您输入的用户名不存在或密码不正确" }.ToJson()); } if (user.IsExpire) { login.ErrorMessage = "该用户已经禁用。"; return Content(new AjaxResult { type = ResultType.info, message = "该用户已经禁用" }.ToJson()); } WebHelper.WriteSession("session_FullName", user.FullName); WebHelper.WriteSession("session_UserId", user.id); return Content(new AjaxResult { type = ResultType.success, message = "登陆成功" }.ToJson()); }
整个登陆就OK