一，简介
说明：这是我正式做的第一个简易项目
使用场地：中小健身场所
使用对象：前端对健身用户的管理，老板对管理员的管理
所用到的技术：
前端：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;
}
效果
2，首页
首页我用到的是母版页和子页来做的，因为是系统，就应该是有导航栏的那种模式
母版页
前端
@{
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();
}
效果
子页
3，会员数据添加
前端
因为用户办理会员卡的时候，管理员不可能去输入现在时间，办理什么卡，卡后面的截止日期是多少，卡金额是多少，这样绝对会乱套，所以我的办法是选择用户需要办理的卡类型，直接自动生成现在时间，截止时间，卡金额。
@{
ViewBag.Title = "EmpAdd";
Layout = "~/Views/Default1/Index.cshtml";
}
<div class="page-head">
<ol class="breadcrumb">
<li><a href="#">会员管理</a></li>
<li class="active">会员添加</li>
</ol>
<h3>会员添加</h3>
</div>
<div class="wrapper">
<div class="panel">
<div class="panel-body">
<form action="/Default1/CustomerAdd" method="post" enctype="multipart/form-data">
<div class="modal-body">
<div class="form1 form2" id="app">
<ul class="row">
<li class="col-xs-12">
<span>个人照片：</span>
<input name="image" type="file" />
</li>
<li class="col-xs-12">
<span>姓名：</span>
<input type="text" name="name" class="form-control">
</li>
<li class="col-xs-12">
<span>年龄：</span>
<input type="text" name="age" class="form-control">
</li>
<li class="col-xs-12">
<span>身份证号：</span>
<input type="text" name="CardID" class="form-control">
</li>
<li class="col-xs-12">
<span>电话：</span>
<input type="text" name="pnone" class="form-control">
</li>
<li class="col-xs-12">
<span onclick="dianji()">当前时间：</span>
<input type="text" readonly name="time" value="" id="startTime" class="form-control"/>
</li>
<li class="col-xs-12">
<span>会员卡：</span>
<select id="card" onchange="changes()">
<option class="form-control">卡类型</option>
<option class="form-control">月卡</option>
<option class="form-control">季卡</option>
<option class="form-control">年卡</option>
</select>
</li>
<li class="col-xs-12">
<span>办卡金额：</span>
<input type="text" readonly id="salary" value="" class="form-control" name="money"/>
</li>
<li class="col-xs-12" id="endTime">
<span>截止时间：</span>
<input type="text" readonly name="endtime" class="form-control" value="" id="endtime"/>
</li>
<li class="col-xs-12">
<span>所属管理员：</span>
<input type="text" readonly name="admin" class="form-control" value="@ViewBag.name"/>
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
</div>
</div>
</div>
<script>
//根据会员卡类型，自动生成现在时间，价格，截止时间
var d = new Date();//现在时间
function changes() {
var year = d.getFullYear() + 1;//获取现在年份后一年
var mouth = d.getMonth() + 2;//获取现在月份一个月后
var mouths = d.getMonth() + 4;//获取当前月三个月后
if ($("select option:selected").val() == "月卡") {
$("#salary").val("600")//月卡需要的金额
$("#endtime").val(d.getFullYear() + "-" + mouth + "-" + d.getDate())//距离今天一个月后到期
}
if ($("select option:selected").val() == "季卡") {
$("#salary").val("1500")//季卡需要的金额
$("#endtime").val(d.getFullYear() + "-" + mouths + "-" + d.getDate())//距离今天三个月后到期
}
if ($("select option:selected").val() == "年卡") {
$("#salary").val("2000")//年卡需要的金额
$("#endtime").val(year + "-" + (d.getMonth() + 1) + "-" + d.getDate())//距离今天一年后到期
}
}
//点击后生成现在的时间
function dianji() {
$("#startTime").val(d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())
}
</script>
后台
//用户添加
public ActionResult CustomerAdd()
{
//管理员名字
ViewBag.name= System.Web.HttpContext.Current.Session["result"];
return View();
}
[HttpPost]
public ActionResult CustomerAdd(Customer customer, HttpPostedFileBase image)
{
JianShengEntities1 db = new JianShengEntities1();
//将用户的图片保存到文件夹中
image.SaveAs(Server.MapPath("~/img/" + image.FileName));
//保存图片的名字
customer.image= image.FileName;
db.Customer.Where(p => p.CardID == customer.CardID).Count();
//判断身份证号是否唯一
if (db.Customer.Where(p => p.CardID == customer.CardID).Count()==0)
{
db.Customer.Add(customer);
db.SaveChanges();
Response.Write("<script>alert('用户添加成功！');</script>");
return View();
}
else
{
Response.Write("<script>alert('该用户已经存在！');</script>");
return View();
}
}
效果
4，会员显示查询和修改
修改这里有些是不能够修改的，比如说身份证，这些都属于唯一标识
查询用到了AJAX技术，这样用户的体验感会更好一点
这里有一个点就是当用户会员卡时间到期后，就会自动的在管理界面消失掉，避免无用数据太多，产生臃肿
前端
@{
ViewBag.Title = "Customerinformation";
Layout = "~/Views/Default1/Index.cshtml";
}
<div class="page-head">
<ol class="breadcrumb">
<li><a href="#">会员管理</a></li>
<li class="active">会员信息</li>
</ol>
<h3>会员信息</h3>
</div>
<div class="wrapper">
<div class="panel">
<div class="panel-body">
<div class="form1 searchbox">
<ul class="row">
<li class="col-xs-3">
<span>姓名：</span>
<input type="text" name="nameA" id="nameA" class="form-control" />
</li>
<li class="col-xs-3">
<span>身份证号：</span>
<input type="text" name="cardIDA" id="cardIDA" class="form-control">
</li>
<li class="col-xs-1" style="padding-left: 0"> <button type="submit" class="btn btn-primary" onclick="chufa()">查询</button></li>
</ul>
</div>
<div class="line"></div>
<table id="cntt" class="table m-t-20">
<thead>
<tr>
<th>编号</th>
<th>个人照片</th>
<th>姓名</th>
<th>年龄</th>
<th>身份证号</th>
<th>电话</th>
<th>办卡金额</th>
<th>开通时间</th>
<th>截止时间</th>
<th>所属管理员</th>
<th>操作</th>
<th id="nameN">@ViewBag.name</th>
<th id="b" name="b"></th>
</tr>
</thead>
<tbody>
@foreach (var item in ViewBag.information)
{
<tr class="ss">
<td class="a">@item.Id</td>
<td><img id="b" width="80" height="80" src="~/img/@item.image" /></td>
<td id="ccc">@item.name</td>
<td id="d">@item.age</td>
<td id="e">@item.CardID</td>
<td id="f">@item.pnone</td>
<td id="g">@item.money</td>
<td id="h">@item.time</td>
<td class="ii">@item.endtime</td>
<td class="j">@item.admin</td>
<td id="k"><a href="/Default1/CustomerUpdate?id=@item.Id">修改</a></td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script>
//用AJAX查询特定的数据
function chufa() {
$.ajax({
url: "/Default1/Customerinformation",
type: "POST",
data: { "nameA": $("#nameA").val(), "cardIDA": $("#cardIDA").val()},
success: function (dataA) {
$("#cntt").html(dataA);
}
})
}
//判断当前时间大于等于会员卡最终时间，如果大于等于的话，就隐藏掉用户的信息
var d = new Date();
var time = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();//现在的时间
for (var i = 0; i < $(".a").length; i++) {
var b = $(".ii")[i].innerHTML;//会员卡到期的时间
if (time >= b) {
$($(".ss")[i]).hide();
}
}
//整个过程是获取管理员管理员工的数量，然后用AJAX将获取到的数量传到后台
//隐藏登录管理员个人名字
$("#nameN").hide();
//判断登录人与管理员是否一致，.a代表序号，.j代表管理员
var b = 0;
for (var i = 0; i < $(".a").length; i++) {
var c = $(".j")[i].innerHTML;//遍历所有的管理员
if (c == $("#nameN").html()) {
b += 1;
}
}
$("#b").html(b)
//通过AJAX将HTML的值传递到后台
$.ajax({
url: "/Default1/EmployeeContent1",
type: "POST",
data: { "b": $("#b").html() },
})
$("#b").hide();
//遍历所有管理员，输出所有管理员分别管理的人数
//var hash = [];
//for (var i = 0; i < $(".a").length; i++) {
// var c = $(".j")[i].innerHTML;//遍历所有的管理员
// if (hash.indexOf(c)==-1) {//当值不在新数组，就加入新数组中去
// hash.push(c);
// }
//}
//for (var i = 0; i < hash.length; i++) {
// alert(hash[i]);
//}
</script>
后端
用户显示
//用户信息
public ActionResult Customerinformation()
{
ViewBag.name = System.Web.HttpContext.Current.Session["result"];
JianShengEntities1 db = new JianShengEntities1();
var result = db.Customer.ToList();
ViewBag.information = result;
return View();
}
效果图
用户查询
[HttpPost]
public string Customerinformation(string nameA,string cardIDA)
{
JianShengEntities1 db = new JianShengEntities1();
//用户查询后，根据输入的值进行页面的重新显示，这里用的是连接字符串，一个个连的
var result= db.Customer.Where(p => p.name.Contains(nameA)&&p.CardID.Contains(cardIDA));
var resultStr = "<thead><tr><th>编号</th><th>个人照片</th><th>姓名</th><th>年龄</th><th>身份证</th><th>电话</th><th>办卡金额</th<th>开通时间</th><th>截止时间</th><th>所属管理员</th><th>操作</th></thead>";
resultStr += "<tbody>";
foreach (var item in result)
{
resultStr += $"<tr><td> {item.Id}</td><td><img width = '80' height = '80' src = '/img/{item.image}' /></td><td> {item.name}</td><td> {item.age} </td><td> {item.CardID} </td><td> {item.pnone} </td><td> {item.money} </td><td> {item.time} </td><td> {item.endtime} </td><td> {item.admin} </td><td><a href = {'#'} data - toggle = 'modal' data - target = '#myModal2'> 修改 </a></td></tr> ";
}
resultStr += "</tbody>";
return resultStr;
}
效果
用户修改
//用户修改
public ActionResult CustomerUpdate(int Id)
{
JianShengEntities1 db = new JianShengEntities1();
var result = db.Customer.SingleOrDefault(p => p.Id == Id);
ViewBag.result = result;
return View();
}
[HttpPost]
public ActionResult CustomerUpdate(string cardID,string name,string age,string phone)
{
JianShengEntities1 db = new JianShengEntities1();
var result= db.Customer.SingleOrDefault(p=>p.CardID==cardID);
result.name = name;
result.age = age;
result.pnone = phone;
if (db.SaveChanges()>0)
{
Response.Write("<script>alert('用户信息修改成功！');</script>");
return RedirectToAction("Customerinformation");
}
else
{
Response.Write("<script>alert('用户信息修改失败！');</script>");
return RedirectToAction("Customerinformation");
}
}
效果图
三（2），代码模块
管理员添加，删除，个人信息，项目源码
接下来的部分换一页：请点击连接
https://blog.csdn.net/weixin_46964231/article/details/118278906
8165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
