MVC登录

前言
最近没什么好写的，准备把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登录的更多相关文章

Spring mvc登录拦截器
自己实现的第一个Spring mvc登录拦截器题目要求:拒绝未登录用户进入系统,只要发现用户未登录,则将用户请求转发到/login.do要求用户登录实现步骤: 1.在spring的配置文件中添加登 ...
MVC 登录认证与授权及读取登录错误码
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷学无止境,精益求精最近在自学MVC,遇到的问题很多,索性一点点总结下 ...
MVC登录校验
利用MVC自带的过滤器可现实简单的登录校验在项目目录下创建一个BaseController控制器,让需要验证的控制器继承这个BaseController 需要让BaseController继承Con ...
MVC登录前准备写好cookie
Insus.NET写过一系列的MVC的练习,昨天学习了jQuery的验证<在MVC应用程序中使用jQuery的验证>http://www.cnblogs.com/insus/p/34626 ...
MVC 登录后重定向回最初请求的 URL FormsAuthentication.RedirectFromLoginPage
在传统的Asp.net webForm 中如果使用 Form身份验证.登录后重定向到最初请求的页面只需使用 FormsAuthentication.RedirectFromLoginPage 但在MV ...
Spring MVC登录注册以及转换json数据
项目结构; 代码如下: BookController package com.mstf.controller; import javax.servlet.http.HttpServletRespons ...
ASP.NET MVC 登录验证
好久没写随笔了,这段时间没什么事情,领导一直没安排任务,索性一直在研究代码,说实在的,这个登录都搞得我云里雾里的,所以这次我可能也讲得不是特别清楚,但是我尽力把我知道的讲出来,顺便也对自 ...
MVC登录案例
1.在Controllers文件夹里面新建一个控制器HomeController;2.在默认的Index方法里面添加一个视图,名字跟Controller中的方法名一样叫Index,添加后的视图文件会在 ...
AngularJS与ASP.NET MVC登录超时解决方案
问题: 1.在Action中判断Ajax请求的方法Request.IsAjaxRequest()始终是false 2.返回给前台StatusCode和HttpUnauthorizedResult,前台 ...

随机推荐

axios+Qs请求数据转表单格式
import axios from 'axios' import qs from 'qs' axios.post('http://localhost:8888/baseitem/update', qs ...
hystrix源码之概述
概述 hystrix核心原理是通过代理执行用户命令,记录命令执行的metrics信息,通过这些metrics信息进行降级和熔断. 源码结构包括一下几个部分: 熔断器熔断器就是hystrix用来判断调 ...
CF1120 A. Diana and Liana
Description At the first holiday in spring, the town Shortriver traditionally conducts a flower fest ...
gcc g++ 安装与配置入门详解 - 精简归纳
gcc g++ 安装与配置入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 24 转载请注明出处!️ 目录 gcc g++ 安装与配置入门详解 - 精简归纳一.下载MinGW ...
C++实现将一个文件夹内容拷贝至另一个文件夹
Windows提供了非常好用的方法SHFileOperation,而且功能强大, 不光可以拷贝,还有移动.删除等等操作.直接上代码: 1 void CopyFolder(TCHAR* srcFolde ...
tomcat在linux下安装
1.下载地址: https://tomcat.apache.org/download-90.cgi 2.上传linux 3.查看是否上传成功 4.解压: 5.进入后,查看README.md文件,可以查 ...
使用JWT登录生成token
package com.example.demo.util; import com.auth0.jwt.JWT; import com.auth0.jwt.JWTVerifier; import co ...
[ERROR] Aborting
where? mysql 5.7 启动时候,报错 [ERROR] Aborting why? /etc/my.cnf 中有错误的配置参数 way? 检查参数是否出错,通过一行一行注释排错
李宏毅老师机器学习第一课Linear regression
机器学习就是让机器学会自动的找一个函数学习图谱: 1.regression example appliation estimating the combat power(cp) of a pokem ...
使用Maven那么久了，你对企业级Maven的核心配置了解多少？
写在前面相信从事Java工作的小伙伴们多多少少都会接触到Maven.使用Maven来搭建项目,能够极大的方便我们构建项目的依赖关系,对于项目中需要依赖的Jar包,也只是简单的在pom.xml中进行配 ...

MVC登录

MVC登录的更多相关文章

随机推荐

热门专题