标签：result 健身 管理系统 removeClass Default1 首页 active nav addClass
一，简介
说明：这是我正式做的第一个简易项目
使用场地：中小健身场所
使用对象：前端对健身用户的管理，老板对管理员的管理
所用到的技术：
前端：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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。