.Net Mvc 星空登录页面 | 使用Ajax通过控制器验证用户信息返回登录结果并跳转

Vin Cente

已于 2023-02-23 14:31:33 修改

阅读量716

点赞数

于 2022-08-15 10:41:33 首次发布

本文链接：https://blog.csdn.net/Mr_Fei/article/details/126340535

版权

NET 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

WEB 前端

8 篇文章 0 订阅

订阅专栏

以前在搜索页面的时候，曾经看到过一些星空特效的页面，感觉这个星空特效玩爆其他的星空特效，不服留言来辩。

项目已经发上来关联本文章了，这个星空特效背景图片可以不要，去掉图片就可以，喜欢纯黑不用加上图片也非常漂亮！

效果图如下：

一、Models实体类User

public class User
{
    private int user_UserId;
    /// <summary>
    /// 用户信息编号
    /// </summary>
    public int User_UserId1 { get => user_UserId; set => user_UserId = value; }

    private string user_LoginId;
    /// <summary>
    /// 用户信息账号
    /// </summary>
    public string User_LoginId { get => this.user_LoginId; set => this.user_LoginId = value; }

    private string user_LoginPwd;
    /// <summary>
    /// 用户信息密码
    /// </summary>
    public string User_LoginPwd { get => this.user_LoginPwd; set => this.user_LoginPwd = value; }
}

二、路由规则配置文件

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Account", action = "Index", id = UrlParameter.Optional }
        );
    }
}

三、绑定规则配置文件

public class BundleConfig
{
    // 有关捆绑的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-{version}.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate.min.js"));

        // 使用要用于开发和学习的 Modernizr 的开发版本。然后，当你做好
        // 生产准备就绪，请使用 https://modernizr.com 上的生成工具仅选择所需的测试。
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.min.js",
                    "~/Scripts/Site.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.min.css",
                    "~/Content/Site.css"));
    }
}

四、Account控制器

public class AccountController : Controller
{
    /// <summary>
    /// GET请求
    /// 登录视图
    /// </summary>
    /// <returns>登录视图</returns>
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }
    /// <summary>
    /// POST请求
    /// 用户登录
    /// </summary>
    /// <param name="User_LoginId">用户信息账号</param>
    /// <param name="User_LoginPwd">用户信息密码</param>
    /// <returns>True：登录成功；False：登录失败</returns>
    [HttpPost]
    public ActionResult Index(string User_LoginId, string User_LoginPwd)
    {
        //判断当前数据
        if (User_LoginId != null && User_LoginPwd != null)
        {
            //判断是否存在用户
            if (User_LoginId == "admin" && User_LoginPwd == "admin"))
            {
                //保持用户状态
                Session["HMS_User"] = User;
                //返回首页
                return Content("1");
            }
            else
            {
                //不存在用户
                return Content("0");
             }
        }
        else
        {
            //登录无效
            return Content("0");
        }
    }
}

五、Account视图下的Index视图

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>星空登录</title>
    @Styles.Render("~/Content/css")
</head>
<body style="overflow:hidden;">
    <div class="loginbox">
        <div class="inputcontent">
            <div class="logintitle">
                <div>
                    <i class="titlebg left"></i>
                    Management System
                    <i class="titlebg right"></i>
                </div>
                <p>管理系统</p>
            </div>
            <form class="logininput">
                <p class="p">
                    <input id="login_username" type="text" placeholder="账号" autocomplete="off" class="logintextbox" />
                </p>
                <p class="p">
                    <input id="login_password" type="password" placeholder="密码" autocomplete="off" class="logintextbox" />
                </p>
                <div id="Message" class="message"></div>
                <div class="loginbtn">
                    <a id="Login" class="btnback" href="#" onclick="CheckLogin()">登&nbsp;&nbsp;&nbsp;&nbsp;录</a>
                    <a id="Reset" class="btnback" href="#" onclick="CheckReset()">清&nbsp;&nbsp;&nbsp;&nbsp;空</a>
                </div>
            </form>
        </div>
        <div class="canvaszz"></div>
        <canvas id="canvas"></canvas>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/bootstrap")
    <script type="text/javascript">
        //登录页星空特效
        Animation();
        $("#login_username").focus();
        /*页面高度宽度改变事件*/
        window.onresize = function () {
            location.reload();
            //登录页星空特效
            Animation();
            $("#login_username").focus();
        };
        /*按Enter键触发登录事件*/
        $(document).keydown(function (event) {
            if (event.keyCode == 13) {
                CheckLogin();
            }
        });
        function CheckForm() {
            //获取用户信息账号
            var login_username = $("#login_username").val();
            //获取用户信息密码
            var login_password = $("#login_password").val();
            //获取错误消息
            var Msg = $("#Message");
            if (login_username.trim() == "") {
                Msg .html("请输入账号");
                $('#login_username').focus();
                return false;
            } else if (login_password.trim() == "") {
                Msg .html("请输入密码");
                $('#login_password').focus();
                return false;
            } else {
                Msg .html("");
                return true;
            }
        };
        function CheckReset() {
            //获取错误消息
            var Msg = $("#Message");
            $("#login_username").val("");
            $("#login_password").val("");
            $("#login_username").focus();
            Msg.html("");
        };
        /*登录提交*/
        function CheckLogin() {
            //接收判断结果
            var flag = CheckForm();
            if (!flag) return;
            $.ajax({
                url: '@Url.Action("Index","Account")',
                type: 'POST',
                async: false,
                data: {
                    User_LoginId: $("#login_username").val(),
                    User_LoginPwd: $("#login_password").val()
                },
                success: function (data) {
                    if (data == "1") {
                        window.location.href = '@Url.Action("Index","Home")';
                    } else {
                        $("#Message").html("账号或密码不正确");
                    }
                },
                error: function () {
                    $("#Message").html("连接数据库失败！");
                }
            });
        };
    </script>
</body>
</html>

六、Site.css样式表

/* Others - Start */
*{ margin:0px; padding:0px;}
html{ margin:0px; padding:0px;}
body{ margin:0 auto; padding:0; font:18px "Microsoft YaHei", Arial, Helvetica, Sans-serif; text-align:center; line-height:1.5;}
img{ border:0px; display:block;}
ul li,ul,li{ list-style:none;}

/* Account/Index - Start */
.loginbox{ margin:0 auto; width:100%; height:100%; background-color:#000; position:relative;}
    .loginbox .inputcontent{ width:580px; top:30%; margin-left:-290px; left:50%; padding:30px; position:absolute; z-index:9999; }
    .loginbox .inputcontent .logintitle{ width:580px; top:-80px; left:-1px; text-align:center; color:#FFF; position:absolute;}
        .loginbox .logintitle > div{ font-size:22px; font-weight:bold; position:relative;}
        .loginbox .logintitle > p{ font-size:18px; font-family:Arial; margin:20px 0px;}
        .loginbox .logintitle .titlebg{ width:90px; height:3px; top:50%; background:url('../Images/Account/login-tit.png'); display:inline-block; position:absolute;}
        .loginbox .logintitle .titlebg.left{ left:0; transform:rotate(180deg);}
        .loginbox .logintitle .titlebg.right{ right:0;}
    .loginbox .inputcontent .logininput{ width:400px; left:50%; margin-left:59px; padding-top:40px;}
        .inputcontent .logininput .p{ height:44px; margin:20px 0 10px; position:relative;}
        .logintextbox::-webkit-input-placeholder{ color: rgba(255,255,255,.9);}
        .logininput .message{ width:100%; height:21px; font-size:16px; color:red;}
        .logininput .p .logintextbox{ width:100%; height:40px;text-indent:1em; font-size:14px; line-height:40px; border:1px solid #1D7EB8; color:white; background:rgba(0,0,0,.1);}
        .logininput .loginbtn{ margin-top: 20px; text-align: center;}
        .logininput .loginbtn a{ cursor:pointer;}
        .logininput .loginbtn a.btnback{ width: 130px; height: 43px; line-height: 43px; text-decoration: none; font: 18px/43px 'Microsoft Yahei'; text-align: center; color: #0661C0; background: url("../Images/Account/nav_gv.png") repeat 0px 0px; margin: 8px 20px 8px 20px; display: inline-block; cursor: pointer;} 
        .logininput .loginbtn a.btnback:hover{ background: url("../Images/Account/nav_gv.png") repeat 0px -43px; color: #1D7EB8; -webkit-box-shadow: 0 0 6px #1D7EB8; transition-duration: 0.5s;}
.loginbox .canvaszz{ width: 100%; height: 800px; background-image: url("../Images/Account/in_top_bj1.png"); position: absolute; z-index: 10; opacity: 0.4;}
.loginbox canvas{ width: 100%; height: auto; display: inline-block; z-index: -1;}

七、Site.js脚本文件JavaScript

/*登录页星空特效*/
function Animation() {
    var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight, hue = 217, stars = [], count = 0, maxStars = 2500;//星星数量
    var canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2, gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#CCC');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');
    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();
    function random(min, max) {
        if (arguments.length < 2) {
            max = min;
            min = 0;
        }
        if (min > max) {
            var hold = max;
            max = min;
            min = hold;
        }
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function maxOrbit(x, y) {
        var max = Math.max(x, y), diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
        //星星移动范围，值越大范围越小，
    }
    var Star = function () {
        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / 18;
        //星星大小
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / 500000;
        //星星移动速度
        this.alpha = random(2, 10) / 10;
        count++;
        stars[count] = this;
    }
    Star.prototype.draw = function () {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX, y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY, twinkle = random(10);
        if (twinkle === 1 && this.alpha > 0) {
            this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
            this.alpha += 0.05;
        }
        ctx.globalAlpha = this.alpha;
        ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
        this.timePassed += this.speed;
    }
    for (var i = 0; i < maxStars; i++) {
        new Star();
    }
    function animation() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.5; //尾巴
        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
        ctx.fillRect(0, 0, w, h);
        ctx.globalCompositeOperation = 'lighter';
        for (var i = 1, l = stars.length; i < l; i++) {
            stars[i].draw();
        };
        window.requestAnimationFrame(animation);
    }
    animation();
};

八、下载链接

Vin Cente

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
.Net Mvc 星空登录页面 | 使用Ajax通过控制器验证用户信息返回登录结果并跳转

以前在搜索页面的时候，曾经看到过一些星空特效的页面，感觉这个星空特效玩爆其他的星空特效，不服留言来辩。项目已经发上来关联本文章了，这个星空特效背景图片可以不要，去掉图片就可以，喜欢纯黑不用加上图片也非常漂亮！......
复制链接

扫一扫