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:;

    padding:;

    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:;

    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:;

    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:;

}

.form-content .field .inputs{

    display: inline-block;

    width: 218px;/*196px 218px*/

    line-height:;

}

.form-content .field .login_verifycode{

    float: right;

    margin-top: 1px;

    display:inline-block;

    text-align:center;

    cursor:pointer;

    width: 100px;

    height: 36px;

    padding-right:;

    padding-left:;

    /*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(), ))

            {

                login.ErrorMessage = "您输入的验证码不正确。";

                return Content(new AjaxResult { type = ResultType.info, message = "您输入的验证码不正确" }.ToJson());

                //return View(login);

            }

            if (login.password.Length > )

            {

                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

mvc 登陆界面+后台代码的更多相关文章

.net MVC 登陆模块后台代码
首先是拦截器 public class AuthLoginAttribute : ActionFilterAttribute { public bool IsLogin = true; /// < ...
php截取后台登陆密码的代码
php截取后台登陆密码的代码,很多时候黑客留了这样的代码,大家一定要注意下if($_POST[loginsubmit]!=){ //判断是否点了登陆按钮 $sb=user:.$_POST[userna ...
基于AOP的MVC拦截异常让代码更优美
与asp.net 打交道很多年,如今天微软的优秀框架越来越多,其中微软在基于mvc的思想架构,也推出了自己的一套asp.net mvc 框架,如果你亲身体验过它,会情不自禁的说‘漂亮’.回过头来,‘漂 ...
ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
登陆界面Login
最终界面: XMAL 代码: <Grid > <Grid.RowDefinitions> <RowDefinition /> <RowDefinition ...
.Net程序员安卓学习之路1：登陆界面
任何编程学习起步均是HelloWorld,作为稍有>net编程经验的我们来说就跳过这步吧,咱们且从简单登录界面开始.先看看效果: 一.准备知识: 1. 安卓环境:安装好JDK,直接去官网下载AD ...

随机推荐

Linux ubuntu centos 下 grep显示前后几行信息
标准unix/linux下的grep通过下面参数控制上下文 grep -C 5 foo file 显示file文件里匹配foo字串那行以及上下5行grep -B 5 foo file 显示foo及前5 ...
常见Web攻击及解决方案
DoS和DDoS攻击 DoS(Denial of Service),即拒绝服务,造成远程服务器拒绝服务的行为被称为DoS攻击.其目的是使计算机或网络无法提供正常的服务.最常见的DoS攻击有计算机网络带 ...
C# 去除所有的html标签
/// <summary> /// 去除所有的html标签 /// </summary> /// <param name="strhtml">& ...
C#的String.Format举例
1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:￥0.20 (英文操作系统结果:$0 ...
利用matlab自带函数快速提取二值图像的图像边缘 bwperim函数
clear all;close all;clc; I = imread('rice.png'); I = im2bw(I); J = bwperim(I); % 提取二值图像图像边缘 figure ...
用Python搞出自己的云词图 | 【带你装起来】
作者:AI算法与图像处理参考:http://www.sohu.com/a/149657007_236714 云词图简介什么词云由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“ ...
【计算机】DMA原理2
DMA (直接存储器访问) DMA(Direct Memory Access,直接内存存取) 是所有现代电脑的重要特色,它允许不同速度的硬件装置来沟通,而不需要依赖于 CPU 的大量中断负载.否则,C ...
最新汇量科技java校招面经（含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 汇量科技等10家互联网公司的校招Offer,因为某些自身原因最终选择了汇量科技.6.7月主要是做系统复习.项目复盘.Le ...
linux中sleep详解实例
在linux编程中,有时候会用到定时功能,常见的是用sleep(time)函数来睡眠time秒:但是这个函数是可以被中断的,也就是说当进程在睡眠的过程中,如果被中断,那么当中断结束回来再执行该进程的时 ...
Nginx 小入门记录之 Nginx 配置文件解读(二)
上一小节主要是记录一些环境准备和Nginx的安装,接下来对Nginx基本配置进行记录. 查看配置文件安装记录可以通过以下Linux命令进行查看: rpm -ql nginx rpm 是liunx的包 ...

mvc 登陆界面+后台代码

mvc 登陆界面+后台代码的更多相关文章

随机推荐

热门专题