健身管理系统【登录页，首页】
作者：互联网
一，简介
说明：这是我正式做的第一个简易项目
使用场地：中小健身场所
使用对象：前端对健身用户的管理，老板对管理员的管理
所用到的技术：
前端：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> </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