前言
最近没什么好写的，准备把MVC的登录再写一下，巩固一下
HTML

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>登录 - 瑰园美食</title>

    <link rel="icon" href="~/Content/Images/Icon/Logo.png" />

    <link href="~/Plugin/layui/css/layui.css" rel="stylesheet" />

    <link href="~/Content/Css/LoginStyle.css" rel="stylesheet" />

</head>

<body>

    <h1>

        <span>瑰园美食</span>

        <span>享受美食带来的欢乐~</span>

    </h1>

    <div class="LoginFrom">

        <h2>登录</h2>

        <div class="LoginFrom_Input">

            <input spellcheck="false" class="Input_User" type="text" placeholder="账号" />

            <input class="Input_Pass" type="password" placeholder="密码" />

            <input class="SuccessButton" type="button" value="点我登录" />

            <div class="OAO_YC"><span></span><p>自动登录</p></div>

            <input class="ForgetPass" type="button" value="忘记密码" />

            <input class="RegisterUser" onclick="window.location.href='/Main/Register'" type="button" value="注册账户" />

        </div>

    </div>

    <footer>

        <p>2019 Yolx</p>

    </footer>

    <script src="~/Plugin/layui/layui.all.js"></script>

    <script>

        var User = document.querySelectorAll(".Input_User")[0];

        var Pass = document.querySelectorAll(".Input_Pass")[0];

        var xhr1 = new XMLHttpRequest();

        var SuccessButton = document.querySelectorAll(".SuccessButton")[0]

        SuccessButton.onclick = function () {

            if (User.value == "" || Pass.value == "") {

                alert("请填写完整!")

            } else {

                xhr1.open("Get", "/Main/UserLogin?User=" + User.value + "&Pass=" + Pass.value + "");

                xhr1.responseType = "json";

                xhr1.send();

                xhr1.onreadystatechange = function () {

                    if (xhr1.status == 200 && xhr1.readyState == 4) {

                        if (xhr1.response.MsgState == true) {

                            window.location.href = "/Main/Index"

                        } else {

                            alert(xhr1.response.MsgText);

                        }

                    }

                }

            }

        }

        //控件

        document.querySelectorAll(".OAO_YC")[0].onclick = function () {

            if (this.className.indexOf("OAO_YC_On") == -1) {

                //开启

                this.classList.add("OAO_YC_On");

            } else {

                //关闭

                this.classList.remove("OAO_YC_On");

            }

        }

    </script>

</body>

</html>

CSS

body {

    margin: 0;

    padding: 0;

    background-image: url('../Images/LoginBG.jpg');

    background-repeat: no-repeat;

    background-size: 100%;

}

h1 {

    position: fixed;

    top: 50%;

    left: 10%;

    transform: translateY(-50%);

    color: #fff;

}

    h1 span {

        display: block;

        font-size: 3vh;

    }

        h1 span:nth-child(1) {

            font-size: 5vh;

            position: relative;

            padding: 0.5vh 0px 1vh;

        }

            h1 span:nth-child(1):after {

                content: '';

                position: absolute;

                left: 0;

                top: 0;

                width: 9.8vh;

                height: 0.35vh;

                background: #fff;

            }

.LoginFrom {

    width: 24vw;

    height: 40vh;

    position: fixed;

    top: 50%;

    right: 10%;

    transform: translateY(-50%);

    background: rgba(255, 255, 255, .8);

    border-radius: 0.5vh;

    overflow: hidden;

}

    .LoginFrom h2 {

        text-align: center;

        padding: 2vh;

        background: #fff;

        font-size: 2vh;

    }

    .LoginFrom .LoginFrom_Input {

        width: 100%;

        padding: 2vh 0px;

    }

        .LoginFrom .LoginFrom_Input input {

            border: 0;

            width: 80%;

            height: 5vh;

            display: block;

            padding: 0 1vh;

            font-size: 2vh;

            margin: 1vh auto;

            box-sizing: content-box;

            position: relative;

        }

.ForgetPass, .RegisterUser {

    font-size: 1vh !important;

    position: absolute !important;

    background: none;

    width: auto !important;

    height: auto !important;

    bottom: 0px;

}

.SuccessButton {

    background:#fff;

}

.SuccessButton:after {

    content:'';

    position:absolute;

    left:0px;

    bottom:0px;

    height:2px;

    width:10px;

    background:#67b968;

}

/*.SuccessButton:hover {

    border-bottom:1vh solid #67b968;

}*/

.ForgetPass {

    left:0px;

}

.RegisterUser {

    right:0px;

}

footer {

    position: fixed;

    bottom: 0px;

    left: 0px;

    width: 100%;

}

    footer p {

        text-align: center;

        color: rgba(255, 255, 255, 0.8);

        padding: 1.5vh 0px;

        font-size: 1.5vh;

    }

/*开关组*/

.OAO_YC {

    width: 7vh;

    height: 3vh;

    background: #fff;

    border-radius: 1vh;

    padding: .5vh;

    transition: all ease 0.5s;

    position: relative;

    overflow: hidden;

    margin: 1vh 3.8vh;

}

    .OAO_YC p {

        position: absolute;

        top: 0px;

        left: 0px;

        margin: 0;

        padding: 0;

        font-size: 1.5vh;

        height: 100%;

        width: 8vh;

        text-align: center;

        line-height: 2.7em;

        opacity: 0;

        transition: all ease 0.5s;

    }

    .OAO_YC:hover p {

        opacity: 1;

    }

    .OAO_YC:hover span {

        opacity: 0.3;

    }

    .OAO_YC span {

        height: 100%;

        background: #e47575;

        border-radius: 1vh;

        display: block;

        width: 3.7vh;

        transition: all ease 0.5s;

    }

.OAO_YC_On {

    transition: all ease 0.5s;

}

    .OAO_YC_On span {

        transform: translateX(3vh);

        background: #67b968;

}

页面效果

控制器代码
//用户登录

public ActionResult UserLogin(string User, string Pass)
{

    msg.MsgState = false;

    try

    {

        var listUser = (from tbUser in MyModel.PW_User

                        where tbUser.UserName == User.Trim() && tbUser.UserPass == Pass.Trim()

                        select tbUser).Single();

        Session["UserName"] = User;

        Session["UserID"] = listUser.UserID;

        msg.MsgState = true;

        msg.MsgText = "登录成功";

    }

    catch (Exception e)

    {

        msg.MsgText = "信息错误";

    }

    return Json(msg, JsonRequestBehavior.AllowGet); ;

}

登录效果


后言
本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进

MVC登录的更多相关文章

  1. Spring mvc登录拦截器

    自己实现的第一个Spring mvc登录拦截器 题目要求:拒绝未登录用户进入系统,只要发现用户未登录,则将用户请求转发到/login.do要求用户登录 实现步骤: 1.在spring的配置文件中添加登 ...

  2. MVC 登录认证与授权及读取登录错误码

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    最近在自学MVC,遇到的问题很多,索性一点点总结下 ...

  3. MVC登录校验

    利用MVC自带的过滤器可现实简单的登录校验 在项目目录下创建一个BaseController控制器,让需要验证的控制器继承这个BaseController 需要让BaseController继承Con ...

  4. MVC登录前准备写好cookie

    Insus.NET写过一系列的MVC的练习,昨天学习了jQuery的验证<在MVC应用程序中使用jQuery的验证>http://www.cnblogs.com/insus/p/34626 ...

  5. MVC 登录后重定向回最初请求的 URL FormsAuthentication.RedirectFromLoginPage

    在传统的Asp.net webForm 中如果使用 Form身份验证.登录后重定向到最初请求的页面只需使用 FormsAuthentication.RedirectFromLoginPage 但在MV ...

  6. Spring MVC登录注册以及转换json数据

    项目结构; 代码如下: BookController package com.mstf.controller; import javax.servlet.http.HttpServletRespons ...

  7. ASP.NET MVC 登录验证

     好久没写随笔了,这段时间没 什么事情,领导 一直没安排任务,索性 一直在研究代码,说实在的,这个登录都 搞得我云里雾里的,所以这次我可能也讲得不是 特别清楚,但是 我尽力把我知道的讲出来,顺便也对自 ...

  8. MVC登录案例

    1.在Controllers文件夹里面新建一个控制器HomeController;2.在默认的Index方法里面添加一个视图,名字跟Controller中的方法名一样叫Index,添加后的视图文件会在 ...

  9. AngularJS与ASP.NET MVC登录超时解决方案

    问题: 1.在Action中判断Ajax请求的方法Request.IsAjaxRequest()始终是false 2.返回给前台StatusCode和HttpUnauthorizedResult,前台 ...

随机推荐

  1. Linux实战（3）：升级最新内核

    # 先查看一下当前内核版本 uname -r # 升级内核 rpm -Uvh http://www.elrepo.org/elrepo-release-7.0-3.el7.elrepo.noarch. ...

  2. Java审计之文件操作漏洞

    Java审计之文件操作漏洞篇 0x00 前言 本篇内容打算把Java审计中会遇到的一些文件操作的漏洞,都给叙述一遍.比如一些任意文件上传,文件下载,文件读取,文件删除,这些操作文件的漏洞. 0x01 ...

  3. java安全编码指南之:输入校验

    目录 简介 在字符串标准化之后进行校验 注意不可信字符串的格式化 小心使用Runtime.exec() 正则表达式的匹配 简介 为了保证java程序的安全,任何外部用户的输入我们都认为是可能有恶意攻击 ...

  4. Qt 展示pdf内容（新窗口或嵌入，pdfjs，linux）

    前言:初学Qt,在网上查找了诸多资料,有什么poppler.mupdf啊巴拉巴拉的,结果一个比一个费劲,最后还是采用pdfjs较为方便高效,为方便相关问题搜索,写了一下内容. 需求描述:Qt应用中不支 ...

  5. Java基础一篇过（四）List这篇就够了

    文章更新时间:2020/08/03 一.List介绍 list是Java的一个接口,继承了Collection,常用到的有3个子类实现: ArrayList 底层数据结构是数组.线程不安全 Linke ...

  6. 《Java从入门到失业》第四章：类和对象（4.6）：类路径

    4.6类路径 4.6.1什么是类路径 前面我们讨论过包,知道字节码文件最终都会被放到和包名相匹配的树状结构子目录中.例如上一节的例子: 其实类还有一种存放方式,就是可以归档到一个jar文件中,jar文 ...

  7. Python-__init__ 和 __new__区别和原理

    __init__ 和 __new__区别 1. 从传递参数角度看,__init__第一个参数是实例本身, __new__传递的是类本身 2. 从执行顺序角度看,__new__方法执行在 __init_ ...

  8. Python-获取等差数列

    获取等差数列思路 1. 通过range步长 2. 通过切片步长 # 通过 range series = [i for i in range(1, 101, 2)] print(series) # 通过 ...

  9. Centos-分割文件-split

    split 分割文件,将一个文件分割为多个 相关选项 -b 指定文件大小,可以在size后面添加单位后缀,b表示512字节,k表示1KB,m表示MB -n 指定分割文件的长度,默认为1000行 -d ...

  10. 2020HC大会上，这群人在讨论云原生…

    启程 一年一度的华为全联接大会又开启了,伴随着一封来自华为全联接大会的邀请函,我来到了2020华为全联接大会的现场. 理解 今年,华为全联接大会的主题是:共 创 行 业 新 价 值!(NEW VALU ...