其他分享
首页 > 其他分享> > 健身管理系统【登录页,首页】

健身管理系统【登录页,首页】

作者:互联网

一,简介
说明:这是我正式做的第一个简易项目
使用场地:中小健身场所
使用对象:前端对健身用户的管理,老板对管理员的管理
所用到的技术:
前端:HTML+JS+CSS
后端:C#的MVC框架
数据库:SQL server

二,项目模块
1,管理员模块:管理员对VIP用户和临时用户的数据添加,数据查询,数据修改
2,老板模块:老板对管理员的数据添加,数据查询,数据修改,数据删除
3,登录
4,忘记密码

三,各个模块代码
1,登录页面
前端

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <title>范C健身管理系统登录页面</title>
    <link href="~/css/bootstrap.css" rel="stylesheet">
    <link href="~/css/style.css" rel="stylesheet">
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <style>
        body {
            font-size: 14px;
            height: auto;
        }

        .loginbg {
            background: #1890ff;
            position: absolute;
            width: 100%;
            height: 300px;
            left: 0;
            top: 0;
            z-index: 0;
        }

        .loginav {
            width: 870px;
            padding: 0 50px;
            margin: 0 auto;
            background: #fff;
            z-index: 10;
            position: relative;
            margin-top: 195px;
            padding-bottom: 50px;
            margin-bottom: 50px;
            box-shadow: 0 0 30px rgba(0,0,0,.1)
        }

        .logo2 {
            left: 0px;
            font-size: 30px;
            color: #fff;
            position: absolute;
            width: 100%;
            top: -45px;
            text-align: center;
            padding-bottom: 26px;
        }

        .logotit {
            text-align: center;
            padding: 40px 0;
            font-size: 30px;
        }

        .loginav2 {
            width: 600px;
            padding: 0 65px;
        }

        .btnblock {
            border-radius: 0 !important;
        }

        .loginbox {
            padding: 50px 0 70px 0;
        }

        .logininput .forminput {
            border: none;
            display: block;
            width: 100%;
            line-height: 48px;
            outline: none;
            text-indent: 1px;
        }

        .logininput > li {
            display: block;
            padding-top: 5px;
            position: relative;
            border-bottom: 1px solid #efefef;
        }

        .logininput li > span {
            color: #ccc;
        }

        .logintit {
            border-bottom: 2px solid #efefef;
            color: #1263f0;
            position: relative;
            padding: 15px 0;
            font-size: 16px;
            text-indent: 20px;
        }

            .logintit:before {
                position: absolute;
                content: "";
                height: 4px;
                background: #1263f0;
                width: 100px;
                left: 0;
                bottom: -2px;
            }

        .btn-primary {
            background: #1890ff;
            border-color: #1890ff;
        }
    </style>
</head>
<body>
    <div class="loginav  loginav2">
        <div class="logo2">老范健身管理系统</div>
        <div>
            <div class=" loginbox">

                <div class="logintit">登录</div>
                <form action="/Default1/Login" method="post">
                    <div class="logininput">
                        <div>
                            <ul>
                                <li>

                                    账号:<input class="forminput" onblur="zhanghao()" id="cardID" type="text" placeholder="请输入账号" name="cardID">
                                    <label id="zhanghao"></label>
                                </li>
                                <li>
                                    密码:<input class="forminput" onblur="mima()" id="pwd" type="password" placeholder="请输入密码" name="pwd">
                                    <label id="mima"></label>
                                </li>
                            </ul>
                        </div>
                        <div class="clearfix" style="padding: 15px 0;">
                            <div class="pull-left"><label id="cuowu"></label></div>
                            <div class="pull-right"><a href="~/Default1/forgetPwd" class="text-primary"> 忘记密码?</a></div>
                        </div>
                        <ul>
                            <li>
                                <input id="Submit1" onclick="xiaoguo()" class="btn btnblock btn-block btn-primary" type="submit" value="登录" />
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="loginbg"></div>
</body>
</html>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //判断登录账号是否为空,为空就提示用户名不能为空,并进行用户选择框聚焦
    function zhanghao() {
        if ($("#cardID").val() == "") {
            $("#zhanghao").html("用户名不能为空!")
            $("#cardID").focus();
            return false
        }
    }
    //判断登录密码是否为空,为空就提示密码不能为空,并进行密码选择框聚焦
    function mima() {
        if ($("#pwd").val() == "") {
            $("#mima").html("密码不能为空!")
            $("#pwd").focus();
            return false
        }
    }
</script>

后端

        //登录
        public ActionResult Login()
        {
            return View();
        }
        [HttpPost]
        public void Login(string pwd, string cardID)
        {
            //数据库实例化
            JianShengEntities1 db = new JianShengEntities1();
            //员工表实例化
            Employee employee = new Employee();
            //根据账号密码寻找员工表登录员工的信息
            var result = db.Employee.SingleOrDefault(p => p.cardID == cardID && p.pwd == pwd);
            //判断是否有这条账号或者密码
            if (result!=null)
            {
                Response.Write("<script>alert('恭喜您登录成功!');location.href='/Default1/CustomerAdd'</script>");
            }
            else
            {
                Response.Write("<script>alert('密码或者账号错误,登录失败');location.href='/Default1/Login'</script>");
                Response.End();
            }
            //收集登录管理员的个人信息, System.Web.HttpContext.Current.Session[""]的作用可以跨控制器,进行控制器与控制器之间的传值
            System.Web.HttpContext.Current.Session["result"] = result.name;
            System.Web.HttpContext.Current.Session["cardID"] = result.cardID;
            System.Web.HttpContext.Current.Session["age"] = result.age;
            System.Web.HttpContext.Current.Session["phone"] = result.phone;
            System.Web.HttpContext.Current.Session["rank"] = result.rank;
            System.Web.HttpContext.Current.Session["salary"] = result.salary;
            System.Web.HttpContext.Current.Session["id"] = result.id;
            System.Web.HttpContext.Current.Session["wordtime"] = result.worktime;
            System.Web.HttpContext.Current.Session["img"] = result.img;
            
        }

类似效果
在这里插入图片描述

首页
首页我用到的是母版页和子页来做的,因为是系统,就应该是有导航栏的那种模式

母版页
前端

@{
    Layout = null;
}
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>范C健身管理系统</title>
    <script src="~/js/jquery.js"></script>
    <link href="~/css/font-awesome.css" rel="stylesheet">
    <link href="~/css/bootstrap.css" rel="stylesheet">
    <link href="~/css/style-responsive.css" rel="stylesheet">
    <link href="~/css/default-theme.css" rel="stylesheet">
    <link href="~/css/style.css" rel="stylesheet">
    <link href="~/css/bootstrap-reset.css" rel="stylesheet">
</head>
<body class="sticky-header">
    <section>
        <div class="sidebar-left">
            <div class="sidebar-left-info">
                <div class=" search-field"></div>
                <ul class="nav nav-pills nav-stacked side-navigation">
                    <li id="ca1" class="menu-list nav-active">
                        <a href=""><i class="fa fa-desktop"></i> <span>会员管理</span></a>
                        <ul class="child-list">
                            <li class="active" id="c1">@Html.ActionLink("会员添加", "CustomerAdd", "Default1")</li>
                            <li id="c2">@Html.ActionLink("会员信息", "Customerinformation", "Default1")</li>
                        </ul>
                    </li>
                    <li id="ca2" class="menu-list">
                        <a href=""><i class="fa fa-drivers-license"></i> <span>员工管理</span></a>
                        <ul class="child-list">
                            <li id="c3">@Html.ActionLink("员工添加", "EmployeeAdd", "Default1")</li>
                            <li id="c4">@Html.ActionLink("员工信息", "Employeeinformation", "Default1")</li>
                        </ul>
                    </li>
                    <li id="ca3" class="menu-list">
                        <a href=""><i class="fa fa-desktop"></i> <span>体验用户管理</span></a>
                        <ul class="child-list">
                            <li id="c5">@Html.ActionLink("体验用户添加", "eCustomerAdd", "Default1")</li>
                            <li id="c6">@Html.ActionLink("体验用户信息", "eCustomerinformation", "Default1")</li>
                        </ul>
                    </li>
                    <li id="ca4" class="menu-list">
                        <a href=""><i class="fa fa-desktop"></i> <span>个人信息管理</span></a>
                        <ul class="child-list">
                            <li id="c7">@Html.ActionLink("个人信息", "EmployeeContent1", "Default1")</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="body-content">
            <div class="header-section">
                <div class="logo dark-logo-bg">
                    <a href="index.html">
                        <img src="img/logo-icon.png" alt="">
                        <!--<i class="fa fa-maxcdn"></i>-->
                        <span class="brand-name" style="font-size: 15px; font-weight: bold;">范C健身管理系统</span>
                    </a>
                </div>
                <a class="toggle-btn"><i class="fa fa-outdent"></i></a>
                <div class="kouhao">为健身而生</div>
                <div class="notification-wrap">
                    <div class="right-notification">
                        <ul class="notification-menu">
                            <li> <a href="javascript:;" class="btn btn-default  dropdown-toggle"> <i class="fa "></i>欢迎您回来,<label id="name" style="color:coral">@ViewBag.name</label>&nbsp;&nbsp;</a> </li>
                            <li class="dropdown">
                                <a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false"> <i class="fa  fa-cogs"></i> 账号设置<b class=" fa fa-angle-down"></b></a>

                                <ul role="menu" class="dropdown-menu language-switch">
                                    <li>
                                        <a href="~/Default1/forgetPwd">修改密码</a>
                                    </li>

                                </ul>

                            </li>
                            <li> <a href="/Default1/Login" class="btn btn-default  dropdown-toggle"> <i class="fa fa-sign-out"></i>退出登录 </a> </li>
                        </ul>
                    </div>
                </div>
            </div>
            @RenderBody();
        </div>
    </section>
    <script src="~/js/bootstrap.js"></script>
    <script src="~/js/echarts.min.js"></script>
    <script src="~/js/scripts.js"></script>
    <script src="~/laydate/laydate.js"></script>
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Vue/vue.js"></script>
    <script>
        //通过URL的地址不同,进行导航栏功能切换
        var url = window.location.href;
        if (url == "https://localhost:44359/Default1/CustomerAdd") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca1").addClass("nav-active");
            $("#c1").addClass("active")
        }
        //用户信息
        if (url == "https://localhost:44359/Default1/Customerinformation") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca1").addClass("nav-active");
            $("#c2").addClass("active")
        }
        //管理员添加
        if (url == "https://localhost:44359/Default1/EmployeeAdd") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca2").addClass("nav-active");
            $("#c3").addClass("active")
        }
        //管理员信息
        if (url == "https://localhost:44359/Default1/Employeeinformation") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca2").addClass("nav-active");
            $("#c4").addClass("active")
        }
        //临时用户添加
        if (url == "https://localhost:44359/Default1/eCustomerAdd") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca3").addClass("nav-active");
            $("#c5").addClass("active")
        }
        //临时用户信息
        if (url == "https://localhost:44359/Default1/eCustomerinformation") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca3").addClass("nav-active");
            $("#c6").addClass("active")
        }
        //个人信息
        if (url == "https://localhost:44359/Default1/EmployeeContent1") {
            $(".menu-list").removeClass("nav-active")
            $("li").removeClass("active")
            $("#ca4").addClass("nav-active");
            $("#c7").addClass("active")
        }
        //隐藏功能实现
        if ($("#name").html() != "老板") {
            $("#ca2").hide();
        }           
    </script>
</body>
</html>

后端

    public ActionResult Index()
    {
        //从登录页获取了用户的名字
        ViewBag.name = System.Web.HttpContext.Current.Session["result"];
        return View();
    }

类似效果
在这里插入图片描述

标签:result,健身,管理系统,removeClass,Default1,首页,active,nav,addClass
来源: https://blog.csdn.net/weixin_46964231/article/details/118277157