mvc 登陆界面+后台代码

上代码

前端+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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/shuaimeng/p/10559704.html