基于spring boot的健身房管理系统主要代码注释
一.前端代码
addClass.html
<!DOCTYPE html>：指定这是一个HTML5文档类型的页面。<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">：HTML页面的根元素，lang属性定义了文档语言为中文，xmlns:th定义了thymeleaf命名空间。<head th:replace="adminCommon::common-header"></head>：页面的头部，使用th:replace指令引用了名为adminCommon::common-header的模板。<body class="sb-nav-fixed">：页面的主体，定义了一个样式类sb-nav-fixed。<nav th:replace="adminCommon::common-navbar"></nav>：页面的导航栏，使用th:replace指令引用了名为adminCommon::common-navbar的模板。<div id="layoutSidenav">：整个页面的布局容器。<div th:replace="adminCommon::common-sidenav"></div>：页面的侧边栏，使用th:replace指令引用了名为adminCommon::common-sidenav的模板。<div id="layoutSidenav_content">：页面内容的主要容器。<main>：页面的主要内容。<!-- 这是一个包含添加课程表单的页面 --><div class="container-fluid px-4"><!-- 页面标题 --><h1 class="mt-4">添加课程</h1><!-- 面包屑导航栏，用于指示当前页面所处的位置 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li><li class="breadcrumb-item"><a th:href="@{/class/selClass}">课程管理</a></li><li class="breadcrumb-item active">添加课程</li></ol><!-- 添加课程的表单 --><div class="card mb-4"><!-- 表单提交时调用 beforeSubmit() 函数进行校验 --><form th:action="@{/class/addClass}" method="post" name="addForm" onsubmit="return beforeSubmit(this)"><!-- 课程信息表格 --><table class="table table-hover"><!-- 编号输入框 --><tr><td text-align="center">编号：</td><td><input type="text" class="form-control" placeholder="4位编号" name="classId"></td></tr><!-- 名称输入框 --><tr><td text-align="center">名称：</td><td><input type="text" class="form-control" placeholder="课程名称" name="className"></td></tr><!-- 时间输入框 --><tr><td text-align="center">时间：</td><td><input type="text" class="form-control" placeholder="xxxx年xx月xx日 00：00" name="classBegin"></td></tr><!-- 时长输入框 --><tr><td text-align="center">时长：</td><td><input type="text" class="form-control" placeholder="xx分钟" name="classTime"></td></tr><!-- 教练输入框 --><tr><td text-align="center">教练：</td><td><input type="text" class="form-control" placeholder="教练" name="coach"></td></tr></table><!-- 提交按钮 --><div style="text-align:center;margin-top:20px;margin-bottom:20px"><input type="submit" class="btn btn-outline-success" value="添加"></div></form></div></div><!-- 页面底部 --><main role="main" class="flex-shrink-0"><footer th:replace="adminCommon::common-footer"></footer></main><!-- 通用的脚本文件 --><div th:include="adminCommon::common-scripts"></div><!-- JavaScript 校验函数 --><script type="text/javascript">function beforeSubmit(addForm) {// 检查各个输入框是否为空if (addForm.classId.value == "") {alert("请输入课程编号！")return false;}if (addForm.className.value == "") {alert("请输入课程名称！")return false;}if (addForm.classBegin.value == "") {alert("请输入课程时间！")return false;}if (addForm.classTime.value == "") {alert("请输入课程时长！")return false;}if (addForm.coach.value == "") {alert("请输入教练！")return false;}return true;}
</script>
</body>
</html>
addEmployee.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"> <!-- 页面头部引入公共头部页面 -->
</head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav> <!-- 导航栏引入公共导航栏页面 -->
<div id="layoutSidenav"><div th:replace="adminCommon::common-sidenav"></div> <!-- 侧边栏引入公共侧边栏页面 --><div id="layoutSidenav_content"><main><div class="container-fluid px-4"><h1 class="mt-4">添加员工</h1> <!-- 页面主标题 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li> <!-- 面包屑导航，跳转到主页 --><li class="breadcrumb-item"><a th:href="@{/employee/selEmployee}">员工管理</a></li><!-- 面包屑导航，跳转到员工管理页面 --><li class="breadcrumb-item active">添加员工</li> <!-- 面包屑导航，当前页面为添加员工 --></ol><div class="card mb-4"><!-- 表单提交，提交到addEmployee处理 --><form th:action="@{/employee/addEmployee}" method="post" name="addForm"onsubmit="return beforeSubmit(this)"><table class="table table-hover"><tr><td text-align="center">工号：</td><!-- 工号自动生成，设置为只读状态 --><td><input type="text" class="form-control" placeholder="工号由系统自动生成"name="employeeAccount" disabled="disabled"></td></tr><tr><td text-align="center">姓名：</td><td><input type="text" class="form-control" placeholder="姓名" name="employeeName"></td></tr><tr><td text-align="center">性别：</td><td><input type="text" class="form-control" placeholder="性别" name="employeeGender"></td></tr><tr><td text-align="center">年龄：</td><td><input type="text" class="form-control" placeholder="年龄" name="employeeAge"></td></tr><tr><td text-align="center">职务：</td><td><input type="text" class="form-control" placeholder="职务" name="staff"></td></tr><tr><td text-align="center">备注信息：</td><td><input type="text" class="form-control" placeholder="备注信息" name="employeeMessage"></td></tr></table><div style="text-align:center;margin-top:20px;margin-bottom:20px"><input type="submit" class="btn btn-outline-success" value="添加"> <!-- 提交按钮 --></div></form></div></div></main><!-- 引入页脚模板 --><footer th:replace="adminCommon::common-footer"></footer></div>
</div><!-- 引入公共脚本模板 -->
<div th:include="adminCommon::common-scripts"></div><!-- 客户端JavaScript代码 -->
<script type="text/javascript">// 声明一个函数beforeSubmit，用于在提交表单前进行数据校验function beforeSubmit(addForm) {// 如果姓名为空，弹出提示框并返回falseif (addForm.employeeName.value == "") {alert("请输入姓名！")return false;}// 如果性别为空，弹出提示框并返回falseif (addForm.employeeGender.value == "") {alert("请输入性别！")return false;}// 如果年龄为空，弹出提示框并返回falseif (addForm.employeeAge.value == "") {alert("请输入年龄！")return false;}// 如果职务为空，弹出提示框并返回falseif (addForm.staff.value == "") {alert("请输入职务！")return false;}// 如果数据校验通过，返回truereturn true;}
</script>
</body>
</html>
addEquipment.html
<!DOCTYPE html> <!--文档类型定义为HTML-->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> <!--定义语言和thymeleaf命名空间-->
<head th:replace="adminCommon::common-header"></head> <!--引用共同的头部信息-->
<body class="sb-nav-fixed"> <!--添加类名，便于样式控制-->
<nav th:replace="adminCommon::common-navbar"></nav> <!--引用共同的导航栏-->
<div id="layoutSidenav"> <!--定义整个页面的布局--><div th:replace="adminCommon::common-sidenav"></div> <!--引用共同的侧边栏--><div id="layoutSidenav_content"> <!--定义页面主要内容的区域--><main><div class="container-fluid px-4"> <!--定义内容的容器--><h1 class="mt-4">添加器材</h1> <!--页面标题--><ol class="breadcrumb mb-4"> <!--面包屑导航--><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li><li class="breadcrumb-item"><a th:href="@{/equipment/selEquipment}">器材管理</a></li><li class="breadcrumb-item active">添加器材</li></ol><div class="card mb-4"> <!--定义卡片样式--><form th:action="@{/equipment/addEquipment}" method="post" name="addForm"onsubmit="return beforeSubmit(this)"> <!--定义表单，设置提交动作和提交前的函数--><table class="table table-hover"> <!--定义表格样式--><tr><td text-align="center">器材名称：</td> <!--表格行，设置文本内容和样式--><td><input type="text" class="form-control" placeholder="名称" name="equipmentName"></td><!--表格行，定义文本输入框，设置样式和属性--></tr><tr><td text-align="center">器材位置：</td><td><input type="text" class="form-control" placeholder="x号房间" name="equipmentLocation"></td></tr><tr><td text-align="center">器材状态：</td><td><input type="text" class="form-control" placeholder="状态" name="equipmentStatus"></td></tr><tr><td text-align="center">备注信息：</td><td><input type="text" class="form-control" placeholder="备注" name="equipmentMessage"></td></tr></table><div style="text-align:center;margin-top:20px;margin-bottom:20px"> <!--设置样式--><input type="submit" class="btn btn-outline-success" value="添加"> <!--定义提交按钮，设置样式和属性--></div></form></div></div></main><footer th:replace="adminCommon::common-footer"></footer> <!--引用共同的页脚信息--></div>
</div>
<!-- 引入公共脚本文件 -->
<div th:include="adminCommon::common-scripts"></div>
<!-- 定义JavaScript函数，用于在提交表单前进行验证 -->
<script type="text/javascript">function beforeSubmit(addForm) {// 如果器材名称为空，则提示用户输入器材名称并返回falseif (addForm.equipmentName.value == "") {alert("请输入器材名称！")return false;}// 如果器材位置为空，则提示用户输入器材位置并返回falseif (addForm.equipmentLocation.value == "") {alert("请输入器材位置！")return false;}// 如果器材状态为空，则提示用户输入器材状态并返回falseif (addForm.equipmentStatus.value == "") {alert("请输入器材状态！")return false;}// 如果备注信息为空，则提示用户输入备注信息并返回falseif (addForm.equipmentMessage.value == "") {alert("请输入备注信息！")return false;}// 如果所有字段都不为空，则返回true，允许提交表单数据return true;}
</script>
</body>
</html>
addMember.html
<!-- 注释1：会员添加表单，使用Bootstrap样式 -->
<div class="card mb-4"><!-- 注释2：会员添加表单提交，使用Thymeleaf模板引擎生成URL --><form th:action="@{/member/addMember}" method="post" name="addForm" onsubmit="return beforeSubmit(this)"><!-- 注释3：会员添加表单，使用Bootstrap表格样式 --><table class="table table-hover"><!-- 注释4：会员账号/卡号栏，禁用输入框并由系统自动生成 --><tr><td text-align="center">会员账号/卡号：</td><td><input type="text" class="form-control" placeholder="卡号由系统自动生成" name="memberAccount"disabled="disabled"></td></tr><!-- 注释5：姓名栏 --><tr><td text-align="center">姓名：</td><td><input type="text" class="form-control" placeholder="姓名" name="memberName"></td></tr><!-- 注释6：密码栏，禁用输入框并使用初始密码123456 --><tr><td text-align="center">密码：</td><td><input type="text" class="form-control" placeholder="初始密码123456" name="memberPassword"disabled="disabled"></td></tr><!-- 注释7：性别栏 --><tr><td text-align="center">性别：</td><td><input type="text" class="form-control" placeholder="性别" name="memberGender"></td></tr><!-- 注释8：年龄栏 --><tr><td text-align="center">年龄：</td><td><input type="text" class="form-control" placeholder="年龄" name="memberAge"></td></tr><!-- 注释9：联系方式栏 --><tr><td text-align="center">联系方式：</td><td><input type="text" class="form-control" placeholder="11位手机号" name="memberPhone"></td></tr><!-- 注释10：身高栏 --><tr><td text-align="center">身高：</td><td><input type="text" class="form-control" placeholder="cm" name="memberHeight"></td></tr><!-- 注释11：体重栏 --><tr><td text-align="center">体重：</td><td><input type="text" class="form-control" placeholder="kg" name="memberWeight"></td></tr><!-- 注释12：购买课时栏 --><tr><td text-align="center">购买课时：</td><td><input type="text" class="form-control" placeholder="购买课时" name="cardClass"></td></tr></table><div style="text-align:center;margin-top:20px;margin-bottom:20px"><!-- 创建一个居中对齐的div，并设置其上下边距 --><input type="submit" class="btn btn-outline-success" value="添加"><!-- 创建一个提交按钮，并为其添加一个样式类，用于美化按钮的外观 --></div></form><!-- 结束一个表单 -->
</div>
</div>
</main>
<!-- 结束主要内容区域 -->
<footer th:replace="adminCommon::common-footer"></footer>
<!-- 引用一个公共的页脚模板 -->
</div>
</div><div th:include="adminCommon::common-scripts"></div>
<!-- 引用一个公共的JavaScript脚本 -->
<script type="text/javascript">function beforeSubmit(addForm) {// 定义一个变量，并使用正则表达式设置手机号的验证规则let phone = /^[1][3,4,5,7,8,9][0-9]{9}$/;// 如果姓名为空，则弹出提示框并返回falseif (addForm.memberName.value == "") {alert("请输入姓名！")return false;}// 如果性别为空，则弹出提示框并返回falseif (addForm.memberGender.value == "") {alert("请输入性别！")return false;}// 如果年龄为空，则弹出提示框并返回falseif (addForm.memberAge.value == "") {alert("请输入年龄！")return false;}// 如果手机号码不符合规则，则弹出提示框并返回falseif (!phone.test(addForm.memberPhone.value)) {alert("手机号码错误！");return false;}// 如果身高为空，则弹出提示框并返回falseif (addForm.memberHeight.value == "") {alert("请输入身高！")return false;}// 如果体重为空，则弹出提示框并返回falseif (addForm.memberWeight.value == "") {alert("请输入体重！")return false;}// 如果购买课时为空，则弹出提示框并返回falseif (addForm.cardClass.value == "") {alert("请输入购买课时！")return false;}// 如果以上所有条件都满足，则返回truereturn true;}
</script>
</body>
</html>
adminCommon.html
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> <!-- 定义HTML文档的基本结构 --><head th:fragment="common-header"> <!-- 头部信息的片段，可以在其他HTML页面中重复使用 --><!-- 设置字符集为UTF-8 --><meta charset="UTF-8"/><!-- 告诉浏览器使用最新的IE内核 --><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!-- 定义视口，用于移动端响应式布局 --><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><!-- 设置网页的描述信息 --><meta name="description" content="gym-management-system"/><!-- 设置网页作者 --><meta name="author" content="ZhangMing"/><!-- 设置网页标题 --><title>健身房管理系统-管理员</title><!-- 引入 Simple Datatables 的样式文件 --><link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet"/><!-- 引入自定义的 CSS 样式文件 --><link href="/static/css/styles.css" th:href="@{/css/styles.css}" rel="stylesheet"/><!-- 引入 Font Awesome 的 JS 文件 --><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script></head><body><!-- 导航栏 -->
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark" th:fragment="common-navbar"><!-- 导航栏品牌 --><a class="navbar-brand ps-3">健身房管理系统</a><!-- 侧边栏开关按钮 --><button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button><!-- 导航栏搜索框 --><form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0"><div class="input-group"><input class="form-control" type="text" placeholder="搜索" aria-label="搜索" aria-describedby="btnNavbarSearch"/><button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button></div></form><!-- 导航栏右侧菜单 --><ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4"><li class="nav-item dropdown"><!-- 用户菜单 --><a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a><ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown"><!-- 退出登录选项 --><li><a class="dropdown-item" th:href="@{/}"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li></ul></li></ul>
</nav><!--侧边栏-->
<div id="layoutSidenav_nav" th:fragment="common-sidenav"><!-- 创建一个带有折叠效果的侧边栏 --><nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion"><div class="sb-sidenav-menu"><div class="nav"><!--快速查询区域--><!-- 显示"快速查询"标题 --><div class="sb-sidenav-menu-heading">快速查询</div><!-- 创建一个"会员卡查询"链接，th:href用于Thymeleaf模板引擎解析，sb-nav-link-icon是导航栏图标，i标签表示使用Font Awesome图标--><a class="nav-link" th:href="@{/member/toSelByCard}"><div class="sb-nav-link-icon"><i class="fas fa-id-card"></i></div>会员卡查询</a><!--管理区域--><!-- 显示"管理"标题 --><div class="sb-sidenav-menu-heading">管理</div><!-- 创建一个"会员管理"链接 --><a class="nav-link" th:href="@{/member/selMember}"><div class="sb-nav-link-icon"><i class="fas fa-user"></i></div>会员管理</a><!-- 创建一个"员工管理"链接 --><a class="nav-link" th:href="@{/employee/selEmployee}"><div class="sb-nav-link-icon"><i class="fas fa-user-tie"></i></div>员工管理</a><!-- 创建一个"器材管理"链接 --><a class="nav-link" th:href="@{/equipment/selEquipment}"><div class="sb-nav-link-icon"><i class="fas fa-table-tennis"></i></div>器材管理</a><!-- 创建一个"课程管理"链接 --><a class="nav-link" th:href="@{/class/selClass}"><div class="sb-nav-link-icon"><i class="fas fa-calendar-alt"></i></div>课程管理</a><!--链接区域--><!-- 显示"链接"标题 --><div class="sb-sidenav-menu-heading">链接</div><!-- 创建一个"注意事项"链接，使用外部链接 --><a class="nav-link" href="https://zhuanlan.zhihu.com/p/440751809"><div class="sb-nav-link-icon"><i class="fab fa-github"></i></div>注意事项</a></div></div></nav><footer class="py-4 bg-light mt-auto" th:fragment="common-footer"><!-- py-4：添加上下内边距为4个单位的空白 --><!-- bg-light：添加浅色背景 --><!-- mt-auto：将该元素的上边距设置为自动，以便它在父元素中垂直居中 --><div class="container-fluid px-4"><!-- container-fluid：使用全宽容器 --><!-- px-4：添加左右内边距为4个单位的空白 --><div class="d-flex align-items-center justify-content-between small"><!-- d-flex：使用 Flexbox 布局 --><!-- align-items-center：垂直居中元素 --><!-- justify-content-between：在容器中分别对齐元素 --><!-- small：添加更小的字体 --><div class="text-muted"><!-- text-muted：使用浅色字体 -->Copyright © chenfuhai 2023<!-- 版权信息 --></div></div></div></footer><div th:fragment="common-scripts"><!-- 引入Bootstrap框架的JS文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script><!-- 引入自定义的脚本文件 --><script src="/static/js/scripts.js" th:src="@{/js/scripts.js}"></script><!-- 引入Chart.js图表库的JS文件 --><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script><!-- 引入使用Chart.js库的演示脚本文件 --><script src="/static/assets/demo/chart-area-demo.js" th:src="@{/assets/demo/chart-area-demo.js}"></script><!-- 引入使用Chart.js库的演示脚本文件 --><script src="/static/assets/demo/chart-bar-demo.js" th:src="@{/assets/demo/chart-bar-demo.js}"></script><!-- 引入Simple Datatables插件的JS文件 --><script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script><!-- 引入使用Simple Datatables插件的演示脚本文件 --><script src="/static/js/datatables-simple-demo.js" th:src="@{/js/datatables-simple-demo.js}"></script>
</div></body>
</html>adminLogin.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<!--本段head代码在HTML文档的<head>标签中，包含了网页的元信息、CSS文件和JavaScript函数等。-->
<head><!-- 设置字符编码 --><meta charset="UTF-8"/><!-- 设置IE兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!-- 设置视口宽度和缩放比例 --><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><!-- 设置网页描述信息 --><meta name="description" content="gym-management-system"/><!-- 设置作者信息 --><meta name="author" content="ZhangMing"/><!-- 设置网页标题 --><title>健身房管理系统-管理员登录</title><!-- 引入CSS文件 --><link href="/static/css/styles.css" th:href="@{css/styles.css}" rel="stylesheet"/><!-- 引入FontAwesome图标库 --><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"crossorigin="anonymous"></script><!-- 定义JavaScript函数，用于检查表单输入是否合法 --><script type="text/javascript">function checkSubmit(loginForm) {if (loginForm.adminAccount.value == '') {alert("请输入账号");loginForm.adminAccount.focus();return false;}if (loginForm.adminPassword.value == '') {alert("请输入密码");loginForm.adminPassword.focus();return false;}return true;}</script>
</head><!-- 设置页面背景为蓝色，并设置背景图片为/img/background.jpeg -->
<body class="bg-primary" th:style="'background-image: url(/img/background.jpeg);background-size: 100%, 100%'">
<!-- 管理员登录页面的主体内容，使用Bootstrap的布局 -->
<div id="layoutAuthentication"><div id="layoutAuthentication_content"><main><!-- 设置容器宽度为父容器宽度的居中容器 --><div class="container"><!-- 将子元素水平居中 --><div class="row justify-content-center"><!-- 设置列的宽度为12格的5格，占据了居中容器的一半 --><div class="col-lg-5"><!-- 卡片式面板，使用Bootstrap的样式，并设置阴影、无边框、圆角等属性 --><div class="card shadow-lg border-0 rounded-lg mt-5"><!-- 卡片面板的头部 --><div class="card-header"><!-- 设置标题，使用Bootstrap的样式，并居中显示、设置字体粗细、设置上下外边距 --><h3 class="text-center font-weight-light my-4">管理员登录</h3></div><!-- 卡片面板的主体部分 --><div class="card-body"><!-- 表单，使用POST方法提交数据，并设置表单名为loginForm，提交时调用JS函数进行验证 --><form th:action="@{/adminLogin}" method="post" name="loginForm"onsubmit="return checkSubmit(this)"><!-- 账号输入框，使用Bootstrap的样式，并设置为浮动标签，输入时仅允许输入数字，设置placeholder提示信息 --><div class="form-floating mb-3"><input class="form-control" id="inputAccount" name="adminAccount" type="account"placeholder="Account"onkeypress="return event.keyCode>=48&&event.keyCode<=57"/><label for="inputAccount">账号</label></div><!-- 密码输入框，使用Bootstrap的样式，并设置为浮动标签，设置placeholder提示信息 --><div class="form-floating mb-3"><input class="form-control" id="inputPassword" name="adminPassword"type="password"placeholder="Password"/><label for="inputPassword">密码</label></div><!-- 记住密码复选框，使用Bootstrap的样式，并设置标签信息 --><div class="form-check mb-3"><input class="form-check-input" id="inputRememberPassword" type="checkbox"value=""/><label class="form-check-label" for="inputRememberPassword">记住密码</label></div><!-- 按钮容器，使用Flex布局，设置两个按钮 --><div class="d-flex align-items-center justify-content-between mt-4 mb-0"><!-- 登录按钮，使用Bootstrap的样式，并设置按钮颜色、字体粗细、宽度等属性 --><input type="submit" class="btn btn-success" value="登录"><a class="btn btn-primary" th:href="@{/toUserLogin}">转到会员登录</a></div></form><div th:text="${msg}" style="margin-top: 20px;text-align: center;color: red"></div></div></div></div></div></div></main></div>
</div>
<!--这段代码script是在HTML中引入了两个JavaScript脚本文件。第一个文件是从CDN中加载的Bootstrap框架，用于提供Web页面的样式和交互效果。-->
<!--第二个文件是在本地服务器上的一个自定义JavaScript脚本，用于在页面加载时执行一些自定义代码，包括对页面元素进行操作、对用户输入-->
<!--进行验证、与服务器进行数据交互等。这里使用了Thymeleaf的语法，以便在服务器端动态地生成正确的URL。 crossorigin属性是用来设置-->
<!--请求的跨域资源是否需要使用凭证（如cookie、HTTP认证等）来验证的。-->
<!-- 引入Bootstrap的JS库 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>
<!-- 引入自定义的JavaScript脚本 -->
<script src="/static/js/scripts.js" th:src="@{js/scripts.js}"></script></body>
</html>
adminMain.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<!--该代码head 片段使用了Thymeleaf模板引擎的语法，它会将名为"adminCommon::common-header"的片段替换掉整个<head>元素。 -->
<!-- 具体而言，它将从名为"adminCommon"的模板中引用名为"common-header"的片段，并将其替换为当前位置的<head>元素。-->
<!-- 因此，该片段实际上是在引用模板中定义的一些公共的头部内容。-->
<head th:replace="adminCommon::common-header"></head>
<body class="sb-nav-fixed"> <!-- 固定导航栏 -->
<nav th:replace="adminCommon::common-navbar"></nav> <!-- 引入导航栏模板 -->
<div id="layoutSidenav"> <!-- 整个页面的布局 --><div th:replace="adminCommon::common-sidenav"></div> <!-- 引入侧边栏模板 --><div id="layoutSidenav_content"> <!-- 页面主体部分 --><main><div class="container-fluid px-4"> <!-- 页面主体内容 --><h1 class="mt-4">管理员主页</h1> <!-- 页面标题 --><ol class="breadcrumb mb-4"> <!-- 面包屑导航 --><li class="breadcrumb-item active">主页</li></ol><div class="row"><div class="col-xl-3 col-md-6"><div class="card bg-primary text-white mb-4"><div class="card-body">健身房总人数</div><div class="card-footer d-flex align-items-center justify-content-between"><span class="small text-white" th:text="${humanTotal} + '人'"></span> <!-- 健身房总人数 --></div></div></div><div class="col-xl-3 col-md-6"><div class="card bg-warning text-white mb-4"><div class="card-body">员工人数</div><div class="card-footer d-flex align-items-center justify-content-between"><span class="small text-white" th:text="${employeeTotal} + '人'"></span> <!-- 员工人数 --></div></div></div><div class="col-xl-3 col-md-6"><div class="card bg-success text-white mb-4"><div class="card-body">会员人数</div><div class="card-footer d-flex align-items-center justify-content-between"><span class="small text-white" th:text="${memberTotal} + '人'"></span> <!-- 会员人数 --></div></div></div><div class="col-xl-3 col-md-6"><div class="card bg-danger text-white mb-4"><div class="card-body">器材数</div><div class="card-footer d-flex align-items-center justify-content-between"><span class="small text-white" th:text="${equipmentTotal} + '件'"></span> <!-- 器材数 --></div></div></div></div><div class="row"><div class="col-xl-6"><div class="card mb-4"><div class="card-header"><i class="fas fa-chart-area me-1"></i>Area Chart Example</div><div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas> <!-- 绘制区域图 --></div></div></div>
<!--<!–下面这段代码是一个包含一个柱形图的卡片，用于展示管理员主页上的数据可视化。–>-->
<!-- 具体来说：-->
<!-- <div>元素设置了一个宽度为“col-xl-6”，表示该卡片的宽度为50%。-->
<!-- class="card mb-4"添加了Bootstrap的card类和“mb-4”类，使卡片具有卡片样式和底部边距。-->
<!-- <div class="card-header">定义卡片头，包含一个名为“Bar Chart Example”的标题，以及一个使用Font Awesome图标的元素。-->
<!-- <div class="card-body">定义卡片的主体部分，其中包含一个canvas元素，用于展示柱形图。-->
<!-- <canvas>元素的id设置为“myBarChart”，以便在脚本中引用该元素。其宽度设置为100%，以使其在其父容器内占用所有可用空间。高度设置为“40”，以避免元素完全折叠。-->
<!-- 此卡片显示了一个柱形图，但需要使用JavaScript或其他前端库来渲染数据和实现交互。--><div class="col-xl-6"><div class="card mb-4"><div class="card-header"><i class="fas fa-chart-bar me-1"></i>Bar Chart Example</div><div class="card-body"><canvas id="myBarChart" width="100%" height="40"></canvas></div></div></div></div></div></main><footer th:replace="adminCommon::common-footer"></footer>
<!-- 这段代码是一个页面底部的HTML标记，使用了Thymeleaf的语法，引用了一个
<!--名为"adminCommon::common-footer"的HTML片段，用于在管理后台的页面底部显示一些通用的内容，例如版权声明、联系方式等。–>--></div>
</div>
<!--这行代码使用Thymeleaf的语法，它将另一个HTML模板引入当前页面中。这个模板文件名
为“adminCommon::common-scripts”，它可能是一个独立的HTML文件或者是片段，具体取
决于它的实现方式。这个模板可能包含与脚本相关的HTML、CSS或JavaScript文件，可以在当
前页面中使用。
-->
<div th:include="adminCommon::common-scripts"></div>
</body>
</html>
selectByMemberAccount.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<!-- 设置body的class为"sb-nav-fixed"，并固定导航栏 -->
<body class="sb-nav-fixed">
<!-- 引入名为"adminCommon::common-navbar"的Thymeleaf片段，替换当前位置 -->
<nav th:replace="adminCommon::common-navbar"></nav>
<!-- id为"layoutSidenav"的div，分为两部分：侧边栏和主要内容区域 -->
<div id="layoutSidenav"><div th:replace="adminCommon::common-sidenav"></div> <!-- 引入侧边栏的Thymeleaf片段，替换当前位置 --><!-- id为"layoutSidenav_content"的div，主要内容区域 --><div id="layoutSidenav_content"><main><!-- 容器，用于包含页面主要内容 --><div class="container-fluid px-4"><!-- 标题 --><h1 class="mt-4">会员卡查询</h1><!-- 面包屑导航 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li><li class="breadcrumb-item active">会员卡查询</li></ol><!-- 卡片 --><div class="card mb-4"><div class="card-header"><i class="fas fa-table me-1"></i> <!-- 用FontAwesome图标显示一个表格图标 -->会员卡查询</div><div class="card-body"><div><!-- 表单，提交方式为post，目标地址为"/member/selByCard" --><form th:action="@{/member/selByCard}" method="post"><!-- 嵌套div，用于水平排列两个元素 --><div style="width: 310px;margin-bottom: 15px"><!-- 左侧元素，输入框 --><div align="left" style="float:left"><!-- 输入框类型为text，限制只能输入数字，不能输入字母 --><input type="text" class="form-control"onkeypress="return event.keyCode>=48&&event.keyCode<=57"ng-pattern="/[^a-zA-Z]/"name="memberAccount"></div><!-- 右侧元素，提交按钮 --><div align="right"><input type="submit" class="btn btn-outline-success" value="查询"></div></div></form></div><!-- 表格 --><table class="table table-hover"><thead class="bg-light"><tr><th scope="col" class="border-0">会员账号/卡号</th><th scope="col" class="border-0">姓名</th><th scope="col" class="border-0">办卡时间</th><th scope="col" class="border-0">性别</th><th scope="col" class="border-0">年龄</th><th scope="col" class="border-0">联系方式</th><th scope="col" class="border-0">身高</th><th scope="col" class="border-0">体重</th><th scope="col" class="border-0">购买课时</th><th scope="col" class="border-0">剩余课时</th><th scope="col" class="border-0">操作</th></tr></thead><tbody><!-- 遍历memberList，生成表格每一行的内容 --><tr th:each="mem:${memberList}"><td th:text="${mem.memberAccount}">会员账号/卡号</td> <!-- 会员账号/卡号 --><td th:text="${mem.memberName}">姓名</td> <!-- 姓名 --><td th:text="${mem.cardTime}">办卡时间</td> <!-- 办卡时间 --><td th:text="${mem.memberGender}">性别</td> <!-- 性别 --><td th:text="${mem.memberAge}">年龄</td> <!-- 年龄 --><td th:text="${mem.memberPhone}">联系方式</td> <!-- 联系方式 --><td th:text="${mem.memberHeight}">身高</td> <!-- 身高 --><td th:text="${mem.memberWeight}">体重</td> <!-- 体重 --><td th:text="${mem.cardClass}">购买课时</td> <!-- 购买课时 --><td th:text="${mem.cardNextClass}">剩余课时</td> <!-- 剩余课时 --><td><a th:href="@{/member/toUpdateMember(memberAccount=${mem.memberAccount})}"><input type="button" class="btn btn-sm btn-outline-primary" value="编辑"></a> <!-- 编辑按钮 --></td></tr></tbody></table></div></div></div></main><footer th:replace="adminCommon::common-footer"></footer></div>
</div><div th:include="adminCommon::common-scripts"></div>
</body>
</html>
selectClass.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav>
<div id="layoutSidenav"> <!-- 创建一个包含左侧导航栏和右侧主要内容区域的布局 --><div th:replace="adminCommon::common-sidenav"></div> <!-- 嵌入左侧导航栏HTML文件 --><div id="layoutSidenav_content"> <!-- 右侧主要内容区域 --><main><div class="container-fluid px-4"><h1 class="mt-4">课程管理</h1> <!-- 页面标题 --><ol class="breadcrumb mb-4"> <!-- 面包屑导航 --><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li> <!-- 面包屑导航第一部分 --><li class="breadcrumb-item active">课程管理</li> <!-- 面包屑导航第二部分，表示当前所在页面 --></ol><div class="card mb-4"> <!-- 显示课程信息的卡片 --><div class="card-header"> <!-- 卡片标题 --><i class="fas fa-table me-1"></i>课程信息表</div><div class="card-body"> <!-- 卡片内容 --><table id="datatablesSimple"> <!-- 显示课程信息的表格 --><thead><tr><th>编号</th><th>名称</th><th>时间</th><th>时长</th><th>教练</th><th>操作</th></tr></thead><tbody><!-- 使用th:each迭代classList中的每个class对象，生成一行表格 --><tr th:each="class:${classList}"><!-- 显示classId属性的值，如果为空则显示“编号” --><td th:text="${class.classId}">编号</td><!-- 显示className属性的值，如果为空则显示“名称” --><td th:text="${class.className}">名称</td><!-- 显示classBegin属性的值，如果为空则显示“时间” --><td th:text="${class.classBegin}">时间</td><!-- 显示classTime属性的值，如果为空则显示“时长” --><td th:text="${class.classTime}">时长</td><!-- 显示coach属性的值，如果为空则显示“教练” --><td th:text="${class.coach}">教练</td><td><!-- 使用th:href设置链接地址，当点击链接时会调用selClassOrder方法，传入参数classId --><a th:href="@{/class/selClassOrder(classId=${class.classId})}" style="text-decoration: none"><!-- 显示“报名信息”按钮 --><input type="button" class="btn btn-sm btn-outline-secondary" value="报名信息"></a><!-- 使用th:href设置链接地址，当点击链接时会调用delClass方法，传入参数classId --><a th:href="@{/class/delClass(classId=${class.classId})}" style="text-decoration: none"><!-- 显示“删除”按钮，并设置onclick事件，调用del方法 --><input type="button" class="btn btn-sm btn-outline-danger" onclick="return del()" value="删除"></a></td></tr></tbody></table></div></div><!-- 这是一个居中对齐的 div 元素，上下各留出 20px 的外边距 --><div style="text-align:center;margin-top:20px;margin-bottom:20px"><!-- 这是一个跳转到添加课程信息页面的链接 --><a th:href="@{/class/toAddClass}"><!-- 这是一个用 Bootstrap 样式的按钮，颜色为绿色，样式为边框，按钮文字为“添加课程信息” --><input type="button" class="btn btn-outline-success" value="添加课程信息"></a></div></div></main><footer th:replace="adminCommon::common-footer"></footer></div>
</div><div th:include="adminCommon::common-scripts"></div>
<script>// 定义名为del的函数function del() {// 设置确认框的提示信息let msg = "确定要删除吗？";// 如果用户点击确认，则返回trueif (confirm(msg) == true) {return true;}// 如果用户点击取消，则返回falseelse {return false;}}
</script>
<!--这段代码是一个JavaScript函数，用于在用户点击“删除”按钮时弹出一个确认框，让用户确认是否真的要删除该条数据。-->
</body>
</html>
selectClassOrder.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav>
<div id="layoutSidenav_content"><main><!-- 容器 --><div class="container-fluid px-4"><!-- 标题 --><h1 class="mt-4">报名信息</h1><!-- 面包屑导航 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li><li class="breadcrumb-item"><a th:href="@{/class/selClass}">课程管理</a></li><li class="breadcrumb-item active">报名信息</li></ol><!-- 卡片容器 --><div class="card mb-4"><!-- 当classOrderList为空（该课程无人报名）时显示 --><div th:if="${#lists.isEmpty(classOrderList)}"><table class="table table-hover"><tr><td align="center">暂无报名信息！</td></tr></table></div><!-- 当classOrderList不为空（该课程已有人报名）时显示 --><div th:if="${not #lists.isEmpty(classOrderList)}"><table class="table table-hover"><tr><td text-align="center">课程编号：</td><td th:text="${classOrderList[0].classId}">课程编号</td></tr><tr><td text-align="center">课程名称：</td><td th:text="${classOrderList[0].className}">课程名称</td></tr><tr><td text-align="center">开课时间：</td><td th:text="${classOrderList[0].classBegin}">开课时间</td></tr><tr><td colspan="2"></td></tr><tr><td colspan="2"><strong>报名会员：</strong></td></tr><!-- 循环遍历classOrderList中的报名会员信息 --><tr th:each="order:${classOrderList}"><td th:text="${order.memberAccount}">无</td><td th:text="${order.memberName}">无</td></tr></table></div><!-- 返回按钮 --><a th:href="@{/class/selClass}" style="text-align:center;margin-top:10px;margin-bottom:20px"><input type="submit" class="btn btn-outline-secondary" value="返回"></a></div></div></main><!-- 页脚 --><footer th:replace="adminCommon::common-footer"></footer></div>
</div>
<div th:include="adminCommon::common-scripts"></div>
</body>
</html>
selectEmployee.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav>
<div id="layoutSidenav"><div th:replace="adminCommon::common-sidenav"></div> <!-- 侧边栏模板，显示在左侧，使用Thymeleaf模板引擎 --><div id="layoutSidenav_content"><main><div class="container-fluid px-4"><h1 class="mt-4">员工管理</h1> <!-- 标题，显示在页面最上方 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li> <!-- 面包屑导航，显示在页面上方，帮助用户快速定位到当前页面的上一级页面 --><li class="breadcrumb-item active">员工管理</li></ol><div class="card mb-4"><div class="card-header"><i class="fas fa-table me-1"></i>员工信息表</div><div class="card-body"><table id="datatablesSimple"> <!-- 一个表格，用于显示员工信息 --><thead><tr><th>工号</th><th>姓名</th><th>性别</th><th>年龄</th><th>入职时间</th><th>职务</th><th>备注信息</th><th>操作</th></tr></thead><tbody><!-- 遍历员工列表，为每个员工生成一行数据 --><tr th:each="emp:${employeeList}"><!-- 显示员工的工号 --><td th:text="${emp.employeeAccount}">工号</td><!-- 显示员工的姓名 --><td th:text="${emp.employeeName}">姓名</td><!-- 显示员工的性别 --><td th:text="${emp.employeeGender}">性别</td><!-- 显示员工的年龄 --><td th:text="${emp.employeeAge}">年龄</td><!-- 显示员工的入职时间 --><td th:text="${emp.entryTime}">入职时间</td><!-- 显示员工的职务 --><td th:text="${emp.staff}">职务</td><!-- 显示员工的备注信息 --><td th:text="${emp.employeeMessage}">备注信息</td><!-- 显示操作按钮，包括编辑和解雇 --><td><!-- 编辑员工信息的按钮 --><a th:href="@{/employee/toUpdateEmployee(employeeAccount=${emp.employeeAccount})}"style="text-decoration: none"><input type="button" class="btn btn-sm btn-outline-primary" value="编辑"></a><!-- 解雇员工的按钮 --><a th:href="@{/employee/delEmployee(employeeAccount=${emp.employeeAccount})}"style="text-decoration: none"><input type="button" class="btn btn-sm btn-outline-danger"onclick="return del()" value="解雇"></a></td></tr></tbody></table></div></div><div style="text-align:center;margin-top:20px;margin-bottom:20px"><!-- 样式为居中对齐，顶部间距为20px，底部间距也为20px --><a th:href="@{/employee/toAddEmployee}"><!-- th:href是Spring Boot Thymeleaf模板引擎的语法，表示跳转到员工信息添加页面 --><input type="button" class="btn btn-outline-success" value="添加员工信息"><!-- 添加员工信息按钮，样式为绿色边框的成功按钮 --></a></div></div></main><footer th:replace="adminCommon::common-footer"></footer></div>
</div><div th:include="adminCommon::common-scripts"></div>
<script>function del() {let msg = "确定要解雇吗？";if (confirm(msg) == true) {return true;} else {return false;}}
</script>
这段代码是一个JavaScript脚本，其中定义了一个名为del的函数。当用户点击“解雇”按钮时，这个函数会被调用。该函数首先创建一个包含“确定要解雇吗？”消息的字符串变量msg，然后调用JavaScript内置的confirm()函数来显示一个包含该消息和确定和取消按钮的对话框。如果用户单击“确定”按钮，则函数返回true，否则返回false。根据返回值，调用该函数的HTML元素上的点击事件可能会继续执行或被取消。在这个例子中，点击“解雇”按钮时，如果用户单击“确定”按钮，则将调用后端代码解雇该员工；如果用户单击“取消”按钮，则不会进行任何操作。
</body>
</html>
selectEquipment.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav>
<div id="layoutSidenav"><!-- 左侧导航栏 --><div th:replace="adminCommon::common-sidenav"></div><!-- 主要内容区域 --><div id="layoutSidenav_content"><main><div class="container-fluid px-4"><!-- 页面标题 --><h1 class="mt-4">器材管理</h1><!-- 面包屑导航 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li><li class="breadcrumb-item active">器材管理</li></ol><!-- 显示器材信息的表格 --><div class="card mb-4"><div class="card-header"><i class="fas fa-table me-1"></i>器材信息表</div><div class="card-body"><table id="datatablesSimple"><thead><tr><th>器材id</th><th>名称</th><th>位置</th><th>状态</th><th>备注信息</th><th>操作</th></tr></thead><tbody><!-- 遍历器材信息列表 --><tr th:each="equ:${equipmentList}"><td th:text="${equ.equipmentId}">id</td><td th:text="${equ.equipmentName}">name</td><td th:text="${equ.equipmentLocation}">location</td><td th:text="${equ.equipmentStatus}">status</td><td th:text="${equ.equipmentMessage}">message</td><td><!-- 编辑器材信息 --><a th:href="@{/equipment/toUpdateEquipment(equipmentId=${equ.equipmentId})}"style="text-decoration: none"><input type="button" class="btn btn-sm btn-outline-primary" value="编辑"></a><!-- 删除器材信息 --><a th:href="@{/equipment/delEquipment(equipmentId=${equ.equipmentId})}"style="text-decoration: none"><input type="button" class="btn btn-sm btn-outline-danger"onclick="return del()" value="删除"></a></td></tr></tbody></table></div></div><!-- 添加器材信息的按钮 --><div style="text-align:center;margin-top:20px;margin-bottom:20px"><a th:href="@{/equipment/toAddEquipment}"><input type="button" class="btn btn-outline-success" value="添加器材信息"></a></div></div></main><!-- 页脚 --><footer th:replace="adminCommon::common-footer"></footer></div>
</div><div th:include="adminCommon::common-scripts"></div>
<script>function del() {let msg = "确定要删除吗？";if (confirm(msg) == true) { // 弹出确认对话框，如果用户点击确认，则返回true；否则返回falsereturn true;} else {return false;}}
</script>
</body>
</html>
selectMember.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav>
<!-- 定义整个页面的左右结构，左侧为导航栏，右侧为内容 -->
<div id="layoutSidenav"><!-- 引入名为adminCommon::common-sidenav的thymeleaf模板，渲染出导航栏的内容 --><div th:replace="adminCommon::common-sidenav"></div><!-- 右侧内容区域 --><div id="layoutSidenav_content"><main><!-- 页面内容以一个容器为基础进行布局 --><div class="container-fluid px-4"><!-- 标题 --><h1 class="mt-4">会员管理</h1><!-- 面包屑导航 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li><li class="breadcrumb-item active">会员管理</li></ol><!-- 信息表格的卡片 --><div class="card mb-4"><!-- 卡片标题 --><div class="card-header"><i class="fas fa-table me-1"></i>会员信息表</div><!-- 卡片主体内容 --><div class="card-body"><!-- 表格 --><table id="datatablesSimple"><!-- 表格头部，包含表格列名 --><thead><tr><th>会员账号/卡号</th><th>姓名</th><th>办卡时间</th><th>性别</th><th>年龄</th><th>联系方式</th><th>身高</th><th>体重</th><th>购买课时</th><th>剩余课时</th><th>操作</th></tr></thead><tbody><!-- 遍历会员信息列表 --><tr th:each="mem:${memberList}"><!-- 显示会员账号/卡号 --><td th:text="${mem.memberAccount}">会员账号/卡号</td><!-- 显示会员姓名 --><td th:text="${mem.memberName}">姓名</td><!-- 显示会员办卡时间 --><td th:text="${mem.cardTime}">办卡时间</td><!-- 显示会员性别 --><td th:text="${mem.memberGender}">性别</td><!-- 显示会员年龄 --><td th:text="${mem.memberAge}">年龄</td><!-- 显示会员联系方式 --><td th:text="${mem.memberPhone}">联系方式</td><!-- 显示会员身高 --><td th:text="${mem.memberHeight}">身高</td><!-- 显示会员体重 --><td th:text="${mem.memberWeight}">体重</td><!-- 显示会员购买课时 --><td th:text="${mem.cardClass}">购买课时</td><!-- 显示会员剩余课时 --><td th:text="${mem.cardNextClass}">剩余课时</td><td><!-- 编辑会员信息按钮 --><a th:href="@{/member/toUpdateMember(memberAccount=${mem.memberAccount})}"style="text-decoration: none"><input type="button" class="btn btn-sm btn-outline-primary" value="编辑"></a><!-- 删除会员信息按钮 --><a th:href="@{/member/delMember(memberAccount=${mem.memberAccount})}"style="text-decoration: none"><input type="button" class="btn btn-sm btn-outline-danger"onclick="return del()" value="删除"></a></td></tr></tbody></table></div></div><!-- 在页面中央添加一个居中对齐的按钮 --><div style="text-align:center;margin-top:20px;margin-bottom:20px"><!-- 创建一个超链接，链接到添加会员信息的页面 --><a th:href="@{/member/toAddMember}"><!-- 创建一个绿色轮廓按钮，上面写着"添加会员信息" --><input type="button" class="btn btn-outline-success" value="添加会员信息"></a></div></div></main><footer th:replace="adminCommon::common-footer"></footer></div>
</div><div th:include="adminCommon::common-scripts"></div>
<script>function del() {let msg = "确定要删除吗？";if (confirm(msg) == true) {return true;} else {return false;}}
</script>
</body>
</html>
updateEmployee.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav>
<!--这是一个HTML页面的代码，主要用于显示一个编辑会员信息的表单页面-->
<div id="layoutSidenav"><div th:replace="adminCommon::common-sidenav"></div><!-- 侧边栏代码，使用了Thymeleaf模板引擎进行渲染 --><div id="layoutSidenav_content"><main><div class="container-fluid px-4"><h1 class="mt-4">编辑会员</h1><!-- 标题 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li><li class="breadcrumb-item"><a th:href="@{/member/selMember}">会员管理</a></li><li class="breadcrumb-item active">编辑会员</li></ol><!-- 面包屑导航，用于提示用户当前所在的位置 --><div class="card mb-4"><form th:action="@{/member/updateMember}" method="post" name="updateForm"onsubmit="return beforeSubmit(this)"><!-- 提交表单，使用了Thymeleaf的表单绑定功能，绑定了表单提交的URL和请求方法，同时指定表单的name属性和提交时的验证方法 --><div th:each="mem:${memberList}"><!-- 创建一个类为table和table-hover的HTML表格 --><table class="table table-hover"><!-- 创建一个包含会员账号/卡号的表格行 --><tr><!-- 创建表格单元格，其中包含“会员账号/卡号”文本 --><td text-align="center">会员账号/卡号：</td><!-- 创建表格单元格，其中包含一个只读的输入框，用于显示会员账号/卡号 --><td><input type="text" class="form-control" readonly="readonly" th:value="${mem.memberAccount}" name="memberAccount"></td></tr><!-- 创建一个包含姓名的表格行 --><tr><!-- 创建表格单元格，其中包含“姓名”文本 --><td text-align="center">姓名：</td><!-- 创建表格单元格，其中包含一个输入框，用于显示和修改会员姓名 --><td><input type="text" class="form-control" th:value="${mem.memberName}" name="memberName"></td></tr><!-- 创建一个包含密码的表格行 --><tr><!-- 创建表格单元格，其中包含“密码”文本 --><td text-align="center">密码：</td><!-- 创建表格单元格，其中包含一个只读的输入框，用于显示会员密码 --><td><input type="text" class="form-control" readonly="readonly" th:value="${mem.memberPassword}" name="memberPassword"></td></tr><!-- 创建一个包含性别的表格行 --><tr><!-- 创建表格单元格，其中包含“性别”文本 --><td text-align="center">性别：</td><!-- 创建表格单元格，其中包含一个输入框，用于显示和修改会员性别 --><td><input type="text" class="form-control" th:value="${mem.memberGender}" name="memberGender"></td></tr><!-- 创建一个包含年龄的表格行 --><tr><!-- 创建表格单元格，其中包含“年龄”文本 --><td text-align="center">年龄：</td><!-- 创建表格单元格，其中包含一个输入框，用于显示和修改会员年龄 --><td><input type="text" class="form-control" th:value="${mem.memberAge}" name="memberAge"></td></tr><!-- 创建一个包含联系方式的表格行 --><tr><!-- 创建表格单元格，其中包含“联系方式”文本 --><td text-align="center">联系方式：</td><!-- 创建表格单元格，其中包含一个输入框，用于显示和修改会员联系方式 --><td><input type="text" class="form-control" th:value="${mem.memberPhone}" name="memberPhone"></td></tr><!-- 表格中的一行，显示会员身高信息 --><tr><td text-align="center">身高：</td><td><!-- 输入框，显示会员身高信息 --><input type="text" class="form-control" th:value="${mem.memberHeight}" name="memberHeight"></td></tr><!-- 表格中的一行，显示会员体重信息 --><tr><td text-align="center">体重：</td><td><!-- 输入框，显示会员体重信息 --><input type="text" class="form-control" th:value="${mem.memberWeight}" name="memberWeight"></td></tr><!-- 表格中的一行，显示会员购买课时信息 --><tr><td text-align="center">购买课时：</td><td><!-- 输入框，显示会员购买课时信息 --><input type="text" class="form-control" th:value="${mem.cardClass}" name="cardClass"></td></tr><!-- 表格中的一行，显示会员剩余课时信息 --><tr><td text-align="center">剩余课时：</td><td><!-- 输入框，显示会员剩余课时信息 --><input type="text" class="form-control" th:value="${mem.cardNextClass}" name="cardNextClass"></td></tr></table><!-- 以下是一个用于居中的div，设置了底部外边距为15像素 --><div style="text-align:center;margin-bottom:15px"><!-- 以下是一个提交按钮，样式为轮廓性绿色按钮，文本为“确认修改” --><input type="submit" class="btn btn-outline-success" value="确认修改"></div></div></form></div></div></main><footer th:replace="adminCommon::common-footer"></footer></div>
</div><div th:include="adminCommon::common-scripts"></div>
<script type="text/javascript">// 定义一个名为beforeSubmit的函数，该函数用于在提交表单前进行验证function beforeSubmit(updateForm) {// 定义一个手机号码的正则表达式let phone = /^[1][3,4,5,7,8,9][0-9]{9}$/;//设置手机号正则表达式 // 如果手机号码格式不正确，弹出提示信息并返回falseif (!phone.test(updateForm.memberPhone.value)) {alert("手机号码错误！");return false;} // 如果手机号码格式正确，返回truereturn true;}
</script>
</body>
</html>
updateEquipment.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav>
<div id="layoutSidenav"><div th:replace="adminCommon::common-sidenav"></div> <!-- 包含侧边栏的模板片段 --><div id="layoutSidenav_content"><main><div class="container-fluid px-4"><h1 class="mt-4">编辑器材</h1> <!-- 页面标题 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li> <!-- 面包屑导航：跳转到管理员主页 --><li class="breadcrumb-item"><a th:href="@{/equipment/selEquipment}">器材管理</a></li> <!-- 面包屑导航：跳转到器材管理页面 --><li class="breadcrumb-item active">编辑器材</li> <!-- 面包屑导航：当前页面 --></ol><div class="card mb-4"><form th:action="@{/equipment/updateEquipment}" method="post"> <!-- 表单提交地址和方法 --><div th:each="equ:${equipmentList}"> <!-- 遍历器材列表，展示当前要编辑的器材信息 --><table class="table table-hover"><tr><td text-align="center">器材id：</td><td><input type="text" class="form-control" readonly="readonly"th:value="${equ.equipmentId}" name="equipmentId"> <!-- 器材id，只读 --></td></tr><tr><td text-align="center">器材名称：</td><td><input type="text" class="form-control" th:value="${equ.equipmentName}"name="equipmentName"></td> <!-- 器材名称，可编辑 --></tr><tr><td text-align="center">器材位置：</td><td><input type="text" class="form-control" th:value="${equ.equipmentLocation}"name="equipmentLocation"></td> <!-- 器材位置，可编辑 --></tr><tr><td text-align="center">器材状态：</td><td><input type="text" class="form-control" th:value="${equ.equipmentStatus}"name="equipmentStatus"></td> <!-- 器材状态，可编辑 --></tr><tr><td text-align="center">器材备注信息：</td><td><input type="text" class="form-control" th:value="${equ.equipmentMessage}"name="equipmentMessage"></td> <!-- 器材备注信息，可编辑 --></tr></table><div style="text-align:center;margin-bottom:15px"><input type="submit" class="btn btn-outline-success" value="确认修改"> <!-- 提交修改按钮 --></div></div></form></div></div></main><footer th:replace="adminCommon::common-footer"></footer> <!-- 包含页脚的模板片段 --></div>
</div><div th:include="adminCommon::common-scripts"></div>
</body>
</html>
updateMember.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav>
<!--这是一个HTML页面的代码，主要用于显示一个编辑会员信息的表单页面-->
<div id="layoutSidenav"><div th:replace="adminCommon::common-sidenav"></div><!-- 侧边栏代码，使用了Thymeleaf模板引擎进行渲染 --><div id="layoutSidenav_content"><main><div class="container-fluid px-4"><h1 class="mt-4">编辑会员</h1><!-- 标题 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toAdminMain}">主页</a></li><li class="breadcrumb-item"><a th:href="@{/member/selMember}">会员管理</a></li><li class="breadcrumb-item active">编辑会员</li></ol><!-- 面包屑导航，用于提示用户当前所在的位置 --><div class="card mb-4"><form th:action="@{/member/updateMember}" method="post" name="updateForm"onsubmit="return beforeSubmit(this)"><!-- 提交表单，使用了Thymeleaf的表单绑定功能，绑定了表单提交的URL和请求方法，同时指定表单的name属性和提交时的验证方法 --><div th:each="mem:${memberList}"><!-- 创建一个类为table和table-hover的HTML表格 --><table class="table table-hover"><!-- 创建一个包含会员账号/卡号的表格行 --><tr><!-- 创建表格单元格，其中包含“会员账号/卡号”文本 --><td text-align="center">会员账号/卡号：</td><!-- 创建表格单元格，其中包含一个只读的输入框，用于显示会员账号/卡号 --><td><input type="text" class="form-control" readonly="readonly" th:value="${mem.memberAccount}" name="memberAccount"></td></tr><!-- 创建一个包含姓名的表格行 --><tr><!-- 创建表格单元格，其中包含“姓名”文本 --><td text-align="center">姓名：</td><!-- 创建表格单元格，其中包含一个输入框，用于显示和修改会员姓名 --><td><input type="text" class="form-control" th:value="${mem.memberName}" name="memberName"></td></tr><!-- 创建一个包含密码的表格行 --><tr><!-- 创建表格单元格，其中包含“密码”文本 --><td text-align="center">密码：</td><!-- 创建表格单元格，其中包含一个只读的输入框，用于显示会员密码 --><td><input type="text" class="form-control" readonly="readonly" th:value="${mem.memberPassword}" name="memberPassword"></td></tr><!-- 创建一个包含性别的表格行 --><tr><!-- 创建表格单元格，其中包含“性别”文本 --><td text-align="center">性别：</td><!-- 创建表格单元格，其中包含一个输入框，用于显示和修改会员性别 --><td><input type="text" class="form-control" th:value="${mem.memberGender}" name="memberGender"></td></tr><!-- 创建一个包含年龄的表格行 --><tr><!-- 创建表格单元格，其中包含“年龄”文本 --><td text-align="center">年龄：</td><!-- 创建表格单元格，其中包含一个输入框，用于显示和修改会员年龄 --><td><input type="text" class="form-control" th:value="${mem.memberAge}" name="memberAge"></td></tr><!-- 创建一个包含联系方式的表格行 --><tr><!-- 创建表格单元格，其中包含“联系方式”文本 --><td text-align="center">联系方式：</td><!-- 创建表格单元格，其中包含一个输入框，用于显示和修改会员联系方式 --><td><input type="text" class="form-control" th:value="${mem.memberPhone}" name="memberPhone"></td></tr><!-- 表格中的一行，显示会员身高信息 --><tr><td text-align="center">身高：</td><td><!-- 输入框，显示会员身高信息 --><input type="text" class="form-control" th:value="${mem.memberHeight}" name="memberHeight"></td></tr><!-- 表格中的一行，显示会员体重信息 --><tr><td text-align="center">体重：</td><td><!-- 输入框，显示会员体重信息 --><input type="text" class="form-control" th:value="${mem.memberWeight}" name="memberWeight"></td></tr><!-- 表格中的一行，显示会员购买课时信息 --><tr><td text-align="center">购买课时：</td><td><!-- 输入框，显示会员购买课时信息 --><input type="text" class="form-control" th:value="${mem.cardClass}" name="cardClass"></td></tr><!-- 表格中的一行，显示会员剩余课时信息 --><tr><td text-align="center">剩余课时：</td><td><!-- 输入框，显示会员剩余课时信息 --><input type="text" class="form-control" th:value="${mem.cardNextClass}" name="cardNextClass"></td></tr></table><!-- 以下是一个用于居中的div，设置了底部外边距为15像素 --><div style="text-align:center;margin-bottom:15px"><!-- 以下是一个提交按钮，样式为轮廓性绿色按钮，文本为“确认修改” --><input type="submit" class="btn btn-outline-success" value="确认修改"></div></div></form></div></div></main><footer th:replace="adminCommon::common-footer"></footer></div>
</div><div th:include="adminCommon::common-scripts"></div>
<script type="text/javascript">// 定义一个名为beforeSubmit的函数，该函数用于在提交表单前进行验证function beforeSubmit(updateForm) {// 定义一个手机号码的正则表达式let phone = /^[1][3,4,5,7,8,9][0-9]{9}$/;//设置手机号正则表达式 // 如果手机号码格式不正确，弹出提示信息并返回falseif (!phone.test(updateForm.memberPhone.value)) {alert("手机号码错误！");return false;} // 如果手机号码格式正确，返回truereturn true;}
</script>
</body>
</html>
updateUserInformation.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="userCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="userCommon::common-navbar"></nav>
<div id="layoutSidenav"> <!-- 整个页面的主要布局 --><div th:replace="userCommon::common-sidenav"></div> <!-- 引入侧边栏模板 --><div id="layoutSidenav_content"> <!-- 右侧主要内容区域 --><main><div class="container-fluid px-4"><h1 class="mt-4">编辑个人信息</h1> <!-- 页面标题 --><ol class="breadcrumb mb-4"> <!-- 面包屑导航，提示用户当前位置 --><li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li><li class="breadcrumb-item"><a th:href="@{/user/toUserInfo}">个人信息</a></li><li class="breadcrumb-item active">编辑个人信息</li></ol><div class="card mb-4"> <!-- 使用 Bootstrap 样式渲染卡片 --><form th:action="@{/user/updateInfo}" method="post" name="updateForm"onsubmit="return beforeSubmit(this)"> <!-- 提交表单，并在提交前执行 JavaScript 函数 beforeSubmit() --><table class="table table-hover"><!-- 第一行，包含会员账号/卡号 --><tr><td text-align="center">会员账号/卡号：</td><td><!-- 会员账号/卡号输入框，设置为只读，并将当前会员的账号/卡号值作为初始值 --><input type="text" class="form-control" readonly="readonly" th:value="${member.memberAccount}" name="memberAccount"></td></tr><!-- 第二行，包含会员姓名 --><tr><td text-align="center">姓名：</td><td><!-- 会员姓名输入框，将当前会员的姓名作为初始值 --><input type="text" class="form-control" th:value="${member.memberName}" name="memberName"></td></tr><!-- 第三行，包含会员密码 --><tr><td text-align="center">密码：</td><td><!-- 会员密码输入框，将当前会员的密码作为初始值 --><input type="text" class="form-control" th:value="${member.memberPassword}" name="memberPassword"></td></tr><!-- 第四行，包含会员性别 --><tr><td text-align="center">性别：</td><td><!-- 会员性别输入框，将当前会员的性别作为初始值 --><input type="text" class="form-control" th:value="${member.memberGender}" name="memberGender"></td></tr><!-- 第五行，包含会员年龄 --><tr><td text-align="center">年龄：</td><td><!-- 会员年龄输入框，将当前会员的年龄作为初始值 --><input type="text" class="form-control" th:value="${member.memberAge}" name="memberAge"></td></tr><!-- 第六行，包含会员联系方式 --><tr><td text-align="center">联系方式：</td><td><!-- 会员联系方式输入框，将当前会员的联系方式作为初始值 --><input type="text" class="form-control" th:value="${member.memberPhone}" name="memberPhone"></td></tr><!-- 第七行，包含会员身高 --><tr><td text-align="center">身高：</td><td><!-- 会员身高输入框，将当前会员的身高作为初始值 --><input type="text" class="form-control" th:value="${member.memberHeight}" name="memberHeight"></td></tr><tr><td text-align="center">体重：</td><td><input type="text" class="form-control" th:value="${member.memberWeight}"name="memberWeight"></td></tr></table><!--创建一个 div 元素，样式为居中对齐和底部 margin 15px--><div style="text-align:center;margin-bottom:15px"><!--创建一个提交按钮--><input type="submit"class="btn btn-outline-success" <!--添加按钮样式，以显示为绿色轮廓按钮-->value="确认修改"> <!--按钮显示文本为“确认修改”--></div></form></div></div></main><footer th:replace="userCommon::common-footer"></footer></div>
</div><div th:include="userCommon::common-scripts"></div>
<!--使用 script 标签定义一个 JavaScript 函数，该函数用于提交表单之前的验证-->
<script type="text/javascript">
<script type="text/javascript">function beforeSubmit(updateForm) {let phone = /^[1][3,4,5,7,8,9][0-9]{9}$/;//设置手机号正则表达式//如果手机号码不符合正则表达式，则弹出错误提示并返回 false，表示表单验证不通过if (!phone.test(updateForm.memberPhone.value)) {alert("手机号码错误！");return false;}return true;}
</script>
</body>
</html>
script代码解释：
这段代码定义了一个名为 beforeSubmit 的 JavaScript 函数，该函数将在提交表单之前对表单进行验证。具体注释如下：
function beforeSubmit(updateForm)：定义了一个名为beforeSubmit的函数，该函数将接收一个名为updateForm的参数，该参数表示待验证的表单对象。let phone = /^[1][3,4,5,7,8,9][0-9]{9}$/;：定义了一个名为phone的变量，该变量存储了一个手机号码的正则表达式，该正则表达式限定了手机号码的格式必须以 1 开头，第二位为 3、4、5、7、8 或 9，后面必须跟着 9 个数字。if (!phone.test(updateForm.memberPhone.value))：如果待验证的表单中名为memberPhone的表单元素的值不符合手机号码正则表达式，则执行下面的代码块。alert("手机号码错误！");：弹出一个提示框，显示错误信息“手机号码错误！”。return false;：返回 false，表示表单验证不通过。return true;：如果手机号码符合正则表达式，则返回 true，表示表单验证通过。
userApplyClass.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="userCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="userCommon::common-navbar"></nav>
<!--使用 id 属性定义一个容器-->
<div id="layoutSidenav"><!--在容器内部引入一个名为 "userCommon::common-sidenav" 的 Thymeleaf 片段--><div th:replace="userCommon::common-sidenav"></div><!--使用 id 属性定义另一个容器--><div id="layoutSidenav_content"><!--定义一个主体内容区域--><main><!--定义一个容器，设置其样式--><div class="container-fluid px-4"><!--定义一个标题--><h1 class="mt-4">报名选课</h1><!--定义一个面包屑导航，用于展示当前页面的位置信息--><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li><li class="breadcrumb-item active">报名选课</li></ol><!--定义一个卡片容器--><div class="card mb-4"><!--定义卡片容器的标题--><div class="card-header"><i class="fas fa-table me-1"></i>课程信息表</div><!--定义卡片容器的主体内容--><div class="card-body"><!--定义一个表格，使用 id 属性进行标识--><table id="datatablesSimple"><!--定义表格的列名--><thead><tr><th>编号</th><th>名称</th><th>时间</th><th>时长</th><th>教练</th><th>操作</th></tr></thead><!--定义表格的内容--><tbody><!--使用 th:each 指令遍历课程列表--><tr th:each="class:${classList}"><!--展示课程编号--><td th:text="${class.classId}">编号</td><!--展示课程名称--><td th:text="${class.className}">名称</td><!--展示课程时间--><td th:text="${class.classBegin}">时间</td><!--展示课程时长--><td th:text="${class.classTime}">时长</td><!--展示课程教练--><td th:text="${class.coach}">教练</td><!--在操作列中添加一个报名按钮--><td><a th:href="@{/user/applyClass(classId=${class.classId})}"style="text-decoration: none"><input type="button" class="btn btn-sm btn-outline-primary" value="报名"></a></td></tr></tbody></table></div></div></div></main><!--在主体内容区域下方引入一个名为 "userCommon::common-footer" 的 Thymeleaf 片段--><footer th:replace="userCommon::common-footer"></footer></div>
</div><div th:include="userCommon::common-scripts"></div>
</body>
</html>
userClass.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="userCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="userCommon::common-navbar"></nav>
<div id="layoutSidenav"><!-- 引入公共侧边栏 --><div th:replace="userCommon::common-sidenav"></div><div id="layoutSidenav_content"><main><div class="container-fluid px-4"><h1 class="mt-4">我的课程</h1><ol class="breadcrumb mb-4"><li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li><li class="breadcrumb-item active">我的课程</li></ol><!-- 课程信息表卡片 --><div class="card mb-4"><div class="card-header"><i class="fas fa-table me-1"></i>课程信息表</div><div class="card-body"><!-- 使用datatables库展示数据 --><table id="datatablesSimple"><thead><!-- 表头 --><tr><th>编号</th><th>名称</th><th>时间</th><th>教练</th><th>操作</th></tr></thead><tbody><!-- 循环展示课程列表 --><tr th:each="class:${classOrderList}"><!-- 课程编号 --><td th:text="${class.classId}">编号</td><!-- 课程名称 --><td th:text="${class.className}">名称</td><!-- 课程开始时间 --><td th:text="${class.classBegin}">时间</td><!-- 课程教练 --><td th:text="${class.coach}">教练</td><!-- 操作按钮列 --><td><!-- 退课按钮 --><a th:href="@{/user/delUserClass(classOrderId=${class.classOrderId})}"style="text-decoration: none"><input type="button" class="btn btn-sm btn-outline-danger"onclick="return del()" value="退课"></a></td></tr></tbody></table></div></div></div></main><!-- 引入公共页脚 --><footer th:replace="userCommon::common-footer"></footer></div>
</div><div th:include="userCommon::common-scripts"></div>
<script>function del() {let msg = "确定要退课吗？";if (confirm(msg) == true) {return true;} else {return false;}}
</script>
</body>
</html>
userCommon.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common-header"><!-- 设置页面的字符集 --><meta charset="UTF-8"/><!-- 兼容IE浏览器的最新文档模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!-- 定义视口以支持响应式布局 --><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><!-- 页面的描述信息 --><meta name="description" content="gym-management-system"/><!-- 页面的作者信息 --><meta name="author" content="ZhangMing"/><!-- 页面标题 --><title>健身房管理系统-用户</title><!-- 导入 Simple DataTables 样式 --><link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet"/><!-- 导入自定义样式 --><link href="/static/css/styles.css" th:href="@{/css/styles.css}" rel="stylesheet"/><!-- 导入 Font Awesome 图标 --><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"crossorigin="anonymous"></script></head>
<body><!--导航栏-->
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark" th:fragment="common-navbar"><!-- Navbar Brand--><a class="navbar-brand ps-3">健身房管理系统</a><!-- Sidebar Toggle--><button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><iclass="fas fa-bars"></i></button><!-- Navbar Search--><form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0"><div class="input-group"><input class="form-control" type="text" placeholder="搜索" aria-label="搜索"aria-describedby="btnNavbarSearch"/><button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button></div></form><!-- Navbar--><ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4"><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown"aria-expanded="false"><i class="fas fa-user fa-fw"></i></a><ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" th:href="@{/toUserLogin}"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li></ul></li></ul>
</nav><!--侧边栏-->
<div id="layoutSidenav_nav" th:fragment="common-sidenav"><nav class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion"><div class="sb-sidenav-menu"><div class="nav"><!--管理区域--><div class="sb-sidenav-menu-heading">管理</div><a class="nav-link" th:href="@{/user/toUserInfo}"><div class="sb-nav-link-icon"><i class="fas fa-user"></i></div>个人信息</a><a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts"><div class="sb-nav-link-icon"><i class="fas fa-calendar-alt"></i></div>课程管理<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div></a><div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion"><nav class="sb-sidenav-menu-nested nav"><a class="nav-link" th:href="@{/user/toApplyClass}">报名选课</a><a class="nav-link" th:href="@{/user/toUserClass}">我的课程</a></nav></div><!--链接区域--><div class="sb-sidenav-menu-heading">链接</div><a class="nav-link" href="https://zhuanlan.zhihu.com/p/440751809"><div class="sb-nav-link-icon"><i class="fab fa-github"></i></div>注意事项</a></div></div><div class="sb-sidenav-footer"><div class="small">你好！</div>尊敬的会员</div></nav>
</div><!--页脚-->
<footer class="py-4 bg-light mt-auto" th:fragment="common-footer"><div class="container-fluid px-4"><div class="d-flex align-items-center justify-content-between small"><div class="text-muted">Copyright © chenfuhai 2023</div></div></div>
</footer><div th:fragment="common-scripts"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script><script src="/static/js/scripts.js" th:src="@{/js/scripts.js}"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script><script src="/static/assets/demo/chart-area-demo.js" th:src="@{/assets/demo/chart-area-demo.js}"></script><script src="/static/assets/demo/chart-bar-demo.js" th:src="@{/assets/demo/chart-bar-demo.js}"></script><script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script><script src="/static/js/datatables-simple-demo.js" th:src="@{/js/datatables-simple-demo.js}"></script>
</div></body>
</html>head:
这段代码是HTML页面的头部内容，主要包含以下内容：
- 设置页面的字符集为 UTF-8。
- 设置文档模式为 IE 最新版本。
- 定义视口以支持响应式布局。
- 定义页面的描述信息和作者信息。
- 设置页面标题为 "健身房管理系统-用户"。
- 导入 Simple DataTables 样式，用于显示表格。
- 导入自定义样式，用于美化页面。
- 导入 Font Awesome 图标，用于显示图标。
<!--导航栏-->：
- 一个显示“健身房管理系统”的导航栏品牌。
- 一个切换侧边栏的按钮。
- 一个搜索框，用户可以输入关键字进行搜索。
- 一个下拉菜单，展示当前用户信息和“退出登录”选项。
代码中包含以下具体的HTML标签和CSS类：
<nav>标签定义导航栏。navbar和navbar-expand类指定导航栏的样式。navbar-dark bg-dark类指
div id：
id="layoutSidenav_nav"：定义一个具有唯一标识符的<div>元素，这个标识符可以在其他页面中使用，通常用来定义导航栏、侧边栏等。th:fragment="common-sidenav"：指定了一个名为common-sidenav的片段，在其他页面中可以通过这个名字引用这个片段。<nav>：定义导航栏。class="sb-sidenav accordion sb-sidenav-light" id="sidenavAccordion"：添加了一些样式和一个唯一标识符，使导航栏具有折叠功能。<div class="sb-sidenav-menu">：定义导航栏的主体部分。<div class="nav">：定义导航栏的链接部分，即导航栏的具体内容。<!--管理区域-->：注释，用于提高代码的可读性，这里注释了这个区域是用于管理。<div class="sb-sidenav-menu-heading">管理</div>：定义一个标题，表示这里是管理区域。<a class="nav-link" th:href="@{/user/toUserInfo}">：定义一个链接
<!--页脚-->：
这段代码是一个网页的页脚部分，包含一个底部区域，用于显示版权信息等。
<footer>标签定义了一个页面的底部区域。class="py-4 bg-light mt-auto"是 Bootstrap 的类，用于设置样式。th:fragment="common-footer"是 Thymeleaf 的语法，用于定义一个页面片段。<div class="container-fluid px-4">定义一个包含内容的容器。<div class="d-flex align-items-center justify-content-between small">定义一个具有弹性的 div 元素，它包含内容并使用 justify-content 和 align-items 属性将其垂直和水平居中对齐。<div class="text-muted">定义一个文本元素，用于显示版权信息等。©是 HTML 实体字符，表示版权符号。chenfuhai 2023是网站的版权信息。
<div th:fragment="common-scripts">：
这段代码是一个Thymeleaf的片段，用于在HTML页面中引入需要的JavaScript文件。具体的解释如下：
-
<div th:fragment="common-scripts">: 这个div定义了一个Thymeleaf片段，名称为"common-scripts"。 -
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"：从jsdelivr CDN引入Bootstrap框架的JS文件，crossorigin属性设置为"anonymous"表示跨域请求时不会发送cookie等敏感信息。 -
<script src="/static/js/scripts.js" th:src="@{/js/scripts.js}"></script>：引入自定义的JS文件，th:src属性中的@{/js/scripts.js}表示使用Thymeleaf的URL表达式引用该文件，即在使用Thymeleaf模板时会自动替换为正确的URL路径。 -
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>：引入Chart.js库的JS文件，同样设置crossorigin属性为"anonymous"。 -
<script src="/static/assets/demo/chart-area-demo.js" th:src="@{/assets/demo/chart-area-demo.js}"></script>：引入自定义的图表JS文件，同样使用Thymeleaf URL表达式引用。 -
<script src="/static/assets/demo/chart-bar-demo.js" th:src="@{/assets/demo/chart-bar-demo.js}"></script>：引入另一个自定义的图表JS文件，同样使用Thymeleaf URL表达式引用。 -
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>：引入简单数据表格插件的JS文件，同样设置crossorigin属性为"anonymous"。 -
<script src="/static/js/datatables-simple-demo.js" th:src="@{/js/datatables-simple-demo.js}"></script>：引入自定义的使用简单数据表格插件的JS文件，同样使用Thymeleaf URL表达式引用。
这段代码的作用是引入需要的JavaScript文件，以支持页面的各种交互和功能。
userInformation.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="userCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="userCommon::common-navbar"></nav>
<div id="layoutSidenav"> <!-- 创建一个 ID 为 layoutSidenav 的 div 元素，用于页面布局 --><div th:replace="userCommon::common-sidenav"></div> <!-- 引用 common-sidenav 模板 --><div id="layoutSidenav_content"> <!-- 创建一个 ID 为 layoutSidenav_content 的 div 元素，用于页面布局 --><main> <!-- 主要内容部分，通常用于显示页面的主体信息 --><div class="container-fluid px-4"> <!-- 创建一个 container-fluid 类型的 div 元素，用于创建一个静态容器 --><h1 class="mt-4">个人信息</h1> <!-- 标题，用于页面内容的头部展示 --><ol class="breadcrumb mb-4"> <!-- 创建一个包含导航栏的 ol 元素，用于用户快速定位页面所在位置 --><li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li> <!-- 第一个导航栏的内容 --><li class="breadcrumb-item active">个人信息</li> <!-- 第二个导航栏的内容，active 标识当前页 --></ol><div class="card mb-4"> <!-- 创建一个 card 类型的 div 元素，用于包含个人信息表格 --><table class="table table-hover"> <!-- 创建一个表格用于展示用户信息 --><tr> <!-- 第一行，展示会员账号/卡号 --><td text-align="center">会员账号/卡号：</td><td th:text="${member.memberAccount}"></td> <!-- 获取数据库中的会员账号/卡号数据并展示 --></tr><tr> <!-- 第二行，展示姓名 --><td text-align="center">姓名：</td><td th:text="${member.memberName}"></td> <!-- 获取数据库中的姓名数据并展示 --></tr><tr> <!-- 第三行，展示性别 --><td text-align="center">性别：</td><td th:text="${member.memberGender}"></td> <!-- 获取数据库中的性别数据并展示 --></tr><tr> <!-- 第四行，展示年龄 --><td text-align="center">年龄：</td><td th:text="${member.memberAge}"></td> <!-- 获取数据库中的年龄数据并展示 --></tr><tr> <!-- 第五行，展示联系方式 --><td text-align="center">联系方式：</td><td th:text="${member.memberPhone}"></td> <!-- 获取数据库中的联系方式数据并展示 --></tr><tr> <!-- 第六行，展示身高 --><td text-align="center">身高：</td><td th:text="${member.memberHeight}"></td> <!-- 获取数据库中的身高数据并展示 --></tr><tr> <!-- 第七行，展示体重 --><td text-align="center">体重：</td><td th:text="${member.memberWeight}"></td> <!-- 获取数据库中的体重数据并展示 --></tr><tr><td text-align="center">办卡时间：</td><td th:text="${member.cardTime}"></td></tr><tr><td text-align="center">剩余课时：</td><td th:text="${member.cardNextClass}"></td></tr></table><div style="text-align:center;margin-bottom:15px"> <!-- 编辑按钮的容器 --><a th:href="@{/user/toUpdateInfo}"> <!-- 编辑按钮链接 --><input type="button" class="btn btn-outline-primary" value="编辑个人信息"></a></div></div></div></main><footer th:replace="userCommon::common-footer"></footer> <!-- 引用名为common-footer的模板片段 --></div>
</div><div th:include="userCommon::common-scripts"></div>
</body>
</html>
userLogin.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head><!-- 定义文档字符编码为UTF-8 --><meta charset="UTF-8"/><!-- 指定页面应该采用的浏览器版本 --><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!-- 告诉浏览器页面应该自动缩放到合适的大小 --><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><!-- 页面的描述信息 --><meta name="description" content="gym-management-system"/><!-- 页面的作者信息 --><meta name="author" content="ZhangMing"/><!-- 页面标题 --><title>健身房管理系统-会员登录</title><!-- 引用外部样式表文件 --><link href="/static/css/styles.css" th:href="@{css/styles.css}" rel="stylesheet"/><!-- 引用外部脚本文件 --><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script><!-- 定义一个 JavaScript 函数，用于检查表单提交前的数据是否合法 --><script type="text/javascript">function checkSubmit(loginForm) {if (loginForm.memberAccount.value == '') {alert("请输入账号");loginForm.memberAccount.focus();return false;}if (loginForm.memberPassword.value == '') {alert("请输入密码");loginForm.memberPassword.focus();return false;}return true;}</script>
</head>
<body class="bg-primary" th:style="'background-image: url(/img/background.jpeg);background-size: 100%, 100%'">
<!-- 设置背景颜色为primary，背景图片为background.jpeg，并且全屏显示 -->
<div id="layoutAuthentication"><div id="layoutAuthentication_content"><main><div class="container"><div class="row justify-content-center"><div class="col-lg-5"><div class="card shadow-lg border-0 rounded-lg mt-5"><div class="card-header"><h3 class="text-center font-weight-light my-4">会员登录</h3></div><div class="card-body"><form th:action="@{/userLogin}" method="post" name="loginForm"onsubmit="return checkSubmit(this)"><!-- 用户名输入框 --><div class="form-floating mb-3"><input class="form-control" id="inputAccount" name="memberAccount" type="account"placeholder="Account"onkeypress="return event.keyCode>=48&&event.keyCode<=57"/><label for="inputAccount">账号</label></div><!-- 密码输入框 --><div class="form-floating mb-3"><input class="form-control" id="inputPassword" name="memberPassword"type="password"placeholder="Password"/><label for="inputPassword">密码</label></div><!-- 记住密码复选框 --><div class="form-check mb-3"><input class="form-check-input" id="inputRememberPassword" type="checkbox"value=""/><label class="form-check-label" for="inputRememberPassword">记住密码</label></div><!-- 登录和转到管理员登录按钮 --><div class="d-flex align-items-center justify-content-between mt-4 mb-0"><input type="submit" class="btn btn-success" value="登录"><a class="btn btn-primary" th:href="@{/}">转到管理员登录</a></div></form><!-- 错误信息 --><div th:text="${msg}" style="margin-top: 20px;text-align: center;color: red"></div></div></div></div></div></div></main></div>
</div>
<!-- 引入Bootstrap的js文件和自定义的js文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>
<script src="/static/js/scripts.js" th:src="@{js/scripts.js}"></script>
</body>
</html>
userMain.html
<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> <!-- 标记文档语言为中文，并引用 Thymeleaf 命名空间 -->
<head th:replace="userCommon::common-header"></head> <!-- 插入公共头部信息 -->
<body class="sb-nav-fixed"> <!-- 设定导航栏固定 -->
<nav th:replace="userCommon::common-navbar"></nav> <!-- 插入公共导航栏 -->
<div id="layoutSidenav"> <!-- 开始布局 --><div th:replace="userCommon::common-sidenav"></div> <!-- 插入公共侧边栏 --><div id="layoutSidenav_content"><main><div class="container-fluid px-4"><h1 class="mt-4" th:text="${member.memberName} + '的主页'"></h1> <!-- 以 member.memberName 的值为标题 --><ol class="breadcrumb mb-4"><li class="breadcrumb-item active">主页</li> <!-- 显示当前为主页 --></ol></div></main><footer th:replace="userCommon::common-footer"></footer> <!-- 插入公共页脚 --></div>
</div><div th:include="userCommon::common-scripts"></div> <!-- 引用公共 JavaScript 文件 -->
</body>
</html>
二.后端代码
Admin.java
package com.milotnt.pojo;/* 管理员实体类*/
public class Admin {// 管理员账号，使用Integer类型private Integer adminAccount;// 管理员密码，使用String类型private String adminPassword;// get方法：获取管理员账号public Integer getAdminAccount() {return adminAccount;}// set方法：设置管理员账号public void setAdminAccount(Integer adminAccount) {this.adminAccount = adminAccount;}// get方法：获取管理员密码public String getAdminPassword() {return adminPassword;}// set方法：设置管理员密码public void setAdminPassword(String adminPassword) {this.adminPassword = adminPassword;}// 重写toString方法：输出管理员账号和密码@Overridepublic String toString() {return "Admin{" +"adminAccount=" + adminAccount +", adminPassword='" + adminPassword + '\\'' +'}';}
}
这是一个Java类文件，包名为"com.milotnt.pojo"。
该类为"Admin"实体类，有两个属性，分别为"adminAccount"和"adminPassword"，对应管理员的账号和密码。提供了对这两个属性的getter和setter方法。
同时还重写了toString方法，用于输出该实体类的对象内容。
这是一个名为Admin的Java类，用于表示管理员对象。下面是该类的属性和方法：
adminAccount，Integer类型，表示管理员账号；adminPassword，String类型，表示管理员密码；getAdminAccount()方法，返回adminAccount属性的值；setAdminAccount(Integer adminAccount)方法，将参数adminAccount的值设置给adminAccount属性；getAdminPassword()方法，返回adminPassword属性的值；setAdminPassword(String adminPassword)方法，将参数adminPassword的值设置给adminPassword属性；toString()方法，用于返回包含adminAccount和adminPassword属性的字符串表示形式。
ClassOrder.java
package com.milotnt.pojo;/* ClassOrder 类是一个 POJO（Plain Old Java Object），用于表示一个课程预约订单。* POJO 是一种简单的 Java 对象，通常用于表示业务实体，不包含业务逻辑。此类用于存储课程预约订单的相关信息。 ClassOrder 类有 7 个成员变量，分别表示课程预约订单的 ID，课程 ID，课程名称，教练，会员姓名，会员账号和上课时间。* 其中前 6 个成员变量的类型分别为 Integer 或 String，classBegin 的类型为 String，用于存储时间字符串。* 此外，该类还包含默认构造方法和带参构造方法，以及相应的 getter 和 setter 方法。*/
public class ClassOrder {// 课程订单编号private Integer classOrderId;// 课程编号private Integer classId;// 课程名private String className;// 教练名private String coach;// 会员名private String memberName;// 会员账号private Integer memberAccount;// 上课时间private String classBegin;// 无参构造方法public ClassOrder() {}/* 带参构造方法，用于创建一个包含课程预约订单信息的 ClassOrder 对象。* @param classId 课程 ID* @param className 课程名称* @param coach 教练* @param memberName 会员姓名* @param memberAccount 会员账号* @param classBegin 上课时间*/// 有参构造方法public ClassOrder(Integer classId, String className, String coach, String memberName, Integer memberAccount, String classBegin) {this.classId = classId;this.className = className;this.coach = coach;this.memberName = memberName;this.memberAccount = memberAccount;this.classBegin = classBegin;}// getter和setter方法public Integer getClassOrderId() {return classOrderId;}public void setClassOrderId(Integer classOrderId) {this.classOrderId = classOrderId;}public Integer getClassId() {return classId;}public void setClassId(Integer classId) {this.classId = classId;}public String getClassName() {return className;}public void setClassName(String className) {this.className = className;}public String getCoach() {return coach;}public void setCoach(String coach) {this.coach = coach;}public String getMemberName() {return memberName;}public void setMemberName(String memberName) {this.memberName = memberName;}public Integer getMemberAccount() {return memberAccount;}public void setMemberAccount(Integer memberAccount) {this.memberAccount = memberAccount;}public String getClassBegin() {return classBegin;}public void setClassBegin(String classBegin) {this.classBegin = classBegin;}// 重写toString方法@Overridepublic String toString() {return "ClassOrder{" +"classOrderId=" + classOrderId +", classId=" + classId +", className='" + className + '\\'' +", coach='" + coach + '\\'' +", memberName='" + memberName + '\\'' +", memberAccount=" + memberAccount +", classBegin='" + classBegin + '\\'' +'}';}
}以上是对课程订单类的详细注释，包括每个属性的含义，构造方法、getter和setter方法的作用，以及重写的toString方法的实现。
ClassTable.java
package com.milotnt.pojo;/* 表示课程表的类*/
public class ClassTable {// 课程idprivate Integer classId;// 课程名称private String className;// 课程开始时间private String classBegin;// 课程持续时间private String classTime;// 教练名称private String coach;/* 获取课程id* @return 课程id*/public Integer getClassId() {return classId;}/* 设置课程id* @param classId 课程id*/public void setClassId(Integer classId) {this.classId = classId;}/* 获取课程名称* @return 课程名称*/public String getClassName() {return className;}/* 设置课程名称* @param className 课程名称*/public void setClassName(String className) {this.className = className;}/* 获取课程开始时间* @return 课程开始时间*/public String getClassBegin() {return classBegin;}/* 设置课程开始时间* @param classBegin 课程开始时间*/public void setClassBegin(String classBegin) {this.classBegin = classBegin;}/* 获取课程持续时间* @return 课程持续时间*/public String getClassTime() {return classTime;}/* 设置课程持续时间* @param classTime 课程持续时间*/public void setClassTime(String classTime) {this.classTime = classTime;}/* 获取教练名称* @return 教练名称*/public String getCoach() {return coach;}/* 设置教练名称* @param coach 教练名称*/public void setCoach(String coach) {this.coach = coach;}/* 重写toString方法，返回类的信息* @return 类的信息*/@Overridepublic String toString() {return "ClassTable{" +"classId=" + classId +", className='" + className + '\\'' +", classBegin='" + classBegin + '\\'' +", classTime='" + classTime + '\\'' +", coach='" + coach + '\\'' +'}';}
}
这是一个表示课程表的Java类，其中包含了课程id、课程名称、课程开始时间、课程持续时间和教练名称等属性。此外，这个类还包含了一些方法，如获取和设置属性的方法，以及重写的toString方法来返回这个类的信息。
Employee.java
package com.milotnt.pojo;/* 员工实体类*/
public class Employee {//员工账号private Integer employeeAccount;//员工姓名private String employeeName;//员工性别private String employeeGender;//员工年龄private Integer employeeAge;//员工入职时间private String entryTime;//员工职位private String staff;//员工信息private String employeeMessage;//空构造方法public Employee() {}/* 带参数构造方法* @param employeeAccount 员工账号* @param employeeName 员工姓名* @param employeeGender 员工性别* @param employeeAge 员工年龄* @param entryTime 员工入职时间* @param staff 员工职位* @param employeeMessage 员工信息*/public Employee(Integer employeeAccount, String employeeName, String employeeGender, Integer employeeAge, String entryTime, String staff, String employeeMessage) {//为对象的各个属性赋值this.employeeAccount = employeeAccount;this.employeeName = employeeName;this.employeeGender = employeeGender;this.employeeAge = employeeAge;this.entryTime = entryTime;this.staff = staff;this.employeeMessage = employeeMessage;}//以下为Getter和Setter方法public Integer getEmployeeAccount() {return employeeAccount;}public void setEmployeeAccount(Integer employeeAccount) {this.employeeAccount = employeeAccount;}public String getEmployeeName() {return employeeName;}public void setEmployeeName(String employeeName) {this.employeeName = employeeName;}public String getEmployeeGender() {return employeeGender;}public void setEmployeeGender(String employeeGender) {this.employeeGender = employeeGender;}public Integer getEmployeeAge() {return employeeAge;}public void setEmployeeAge(Integer employeeAge) {this.employeeAge = employeeAge;}public String getEntryTime() {return entryTime;}public void setEntryTime(String entryTime) {this.entryTime = entryTime;}public String getStaff() {return staff;}public void setStaff(String staff) {this.staff = staff;}public String getEmployeeMessage() {return employeeMessage;}public void setEmployeeMessage(String employeeMessage) {this.employeeMessage = employeeMessage;}/* 重写toString方法，用于输出员工对象的字符串表示形式*/@Overridepublic String toString() {return "Employee{" +"employeeAccount=" + employeeAccount +", employeeName='" + employeeName + '\\'' +", employeeGender='" + employeeGender + '\\'' +", employeeAge=" + employeeAge +", entryTime='" + entryTime + '\\'' +", staff='" + staff + '\\'' +", employeeMessage='" + employeeMessage + '\\'' +'}';}
}
Equipment.java.java
package com.milotnt.pojo;/* 设备实体类*/
public class Equipment {//设备IDprivate Integer equipmentId;//设备名称private String equipmentName;//设备位置private String equipmentLocation;//设备状态private String equipmentStatus;//设备信息private String equipmentMessage;//空构造方法public Equipment() {}/* 带参数构造方法* @param equipmentId 设备ID* @param equipmentName 设备名称* @param equipmentLocation 设备位置* @param equipmentStatus 设备状态* @param equipmentMessage 设备信息*/public Equipment(Integer equipmentId, String equipmentName, String equipmentLocation, String equipmentStatus, String equipmentMessage) {this.equipmentId = equipmentId;this.equipmentName = equipmentName;this.equipmentLocation = equipmentLocation;this.equipmentStatus = equipmentStatus;this.equipmentMessage = equipmentMessage;}//以下为Getter和Setter方法public Integer getEquipmentId() {return equipmentId;}public void setEquipmentId(Integer equipmentId) {this.equipmentId = equipmentId;}public String getEquipmentName() {return equipmentName;}public void setEquipmentName(String equipmentName) {this.equipmentName = equipmentName;}public String getEquipmentLocation() {return equipmentLocation;}public void setEquipmentLocation(String equipmentLocation) {this.equipmentLocation = equipmentLocation;}public String getEquipmentStatus() {return equipmentStatus;}public void setEquipmentStatus(String equipmentStatus) {this.equipmentStatus = equipmentStatus;}public String getEquipmentMessage() {return equipmentMessage;}public void setEquipmentMessage(String equipmentMessage) {this.equipmentMessage = equipmentMessage;}/* 重写toString方法*/@Overridepublic String toString() {return "Equipment{" +"equipmentId=" + equipmentId +", equipmentName='" + equipmentName + '\\'' +", equipmentLocation='" + equipmentLocation + '\\'' +", equipmentStatus='" + equipmentStatus + '\\'' +", equipmentMessage='" + equipmentMessage + '\\'' +'}';}
}
注释涵盖了类的定义、字段的说明、构造方法、Getter和Setter方法以及重写的toString方法
Member.java
package com.milotnt.pojo;/* 会员类* 包含会员信息* * @author ZhangMing [1157038410@qq.com]* @date 2021/8/10*/
public class Member {private Integer memberAccount; //会员账号private String memberPassword; //会员密码private String memberName; //会员姓名private String memberGender; //会员性别private Integer memberAge; //会员年龄private Integer memberHeight; //会员身高private Integer memberWeight; //会员体重private Long memberPhone; //会员电话private String cardTime; //会员办卡时间private Integer cardClass; //会员卡种类private Integer cardNextClass; //会员下一次预约的课程种类public Integer getMemberAccount() {return memberAccount;}public void setMemberAccount(Integer memberAccount) {this.memberAccount = memberAccount;}public String getMemberPassword() {return memberPassword;}public void setMemberPassword(String memberPassword) {this.memberPassword = memberPassword;}public String getMemberName() {return memberName;}public void setMemberName(String memberName) {this.memberName = memberName;}public String getMemberGender() {return memberGender;}public void setMemberGender(String memberGender) {this.memberGender = memberGender;}public Integer getMemberAge() {return memberAge;}public void setMemberAge(Integer memberAge) {this.memberAge = memberAge;}public Integer getMemberHeight() {return memberHeight;}public void setMemberHeight(Integer memberHeight) {this.memberHeight = memberHeight;}public Integer getMemberWeight() {return memberWeight;}public void setMemberWeight(Integer memberWeight) {this.memberWeight = memberWeight;}public Long getMemberPhone() {return memberPhone;}public void setMemberPhone(Long memberPhone) {this.memberPhone = memberPhone;}public String getCardTime() {return cardTime;}public void setCardTime(String cardTime) {this.cardTime = cardTime;}public Integer getCardClass() {return cardClass;}public void setCardClass(Integer cardClass) {this.cardClass = cardClass;}public Integer getCardNextClass() {return cardNextClass;}public void setCardNextClass(Integer cardNextClass) {this.cardNextClass = cardNextClass;}@Overridepublic String toString() {return "Member{" +", memberAccount=" + memberAccount +", memberPassword='" + memberPassword + '\\'' +", memberName='" + memberName + '\\'' +", memberGender='" + memberGender + '\\'' +", memberAge=" + memberAge +", memberHeight=" + memberHeight +", memberWeight=" + memberWeight +", memberPhone=" + memberPhone +", cardTime='" + cardTime + '\\'' +", cardClass=" + cardClass +", cardNextClass=" + cardNextClass +'}';}
}
GymManagementSystemApplication.java
//这是一个Spring Boot的启动类，用于启动整个项目，以下是每行代码的作用解释：
package com.milotnt;
//声明包名，该类所属的包名为com.milotnt。import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
//导入Spring Boot相关的类。
//@SpringBootApplication是一个组合注解，包含了@Configuration、@EnableAutoConfiguration
//和@ComponentScan三个注解。
//@Configuration和@ComponentScan这两个注解不需要我们自己添加，Spring Boot会自动为我们添
//加。
//@EnableAutoConfiguration是自动配置注解，用于自动配置Spring Boot项目所需的配置信息。@SpringBootApplication
public class GymManagementSystemApplication {
//声明一个公共类GymManagementSystemApplication，用于Spring Boot应用的启动。public static void main(String[] args) {SpringApplication.run(GymManagementSystemApplication.class, args);}}
//该类的主方法，用于启动整个Spring Boot应用。SpringApplication.run()方法会自动启动整个Spring //Boot应用，并加载自动配置信息和应用配置信息。args是传入的启动参数。这段代码是一个 Spring Boot 应用程序的主入口，它包含了一个 main 方法。该应用程序使用了 Spring Boot 框架，通过 @SpringBootApplication 注解来启用 Spring Boot 自动配置功能，包括自动配置应用程序所需的各种组件，如数据源、事务管理、Web MVC 等等。该注解是一个复合注解，包含了 @Configuration、@EnableAutoConfiguration 和 @ComponentScan 这三个注解。
在 main 方法中，使用 SpringApplication 类的 run 方法启动 Spring Boot 应用程序，它会自动执行 Spring Boot 的自动配置，并根据需要创建所需的 Bean。如果在启动时需要传递命令行参数，可以将这些参数传递给 run 方法的 args 参数。
该应用程序的主要作用是管理健身房系统，因此可以在该应用程序中添加管理健身房系统所需的各种业务逻辑和功能。
三.接口
AdminMapper.java
package com.milotnt.mapper;import com.milotnt.pojo.Admin;
import org.apache.ibatis.annotations.Mapper;@Mapper
public interface AdminMapper {Admin selectByAccountAndPassword(Admin admin);}
这段代码定义了一个AdminMapper接口，它使用MyBatis框架来与数据库进行交互。以下是每行代码的作用：
package com.milotnt.mapper;: 定义了该接口所在的包名。import com.milotnt.pojo.Admin;: 导入了Admin类，这个类是管理员实体类。import org.apache.ibatis.annotations.Mapper;: 导入了MyBatis的@Mapper注解，该注解将会告诉Spring Boot这是一个MyBatis的Mapper接口，需要在启动时生成相应的实现类。@Mapper: 这是一个注解，用于告诉Spring Boot将该接口注册为MyBatis的Mapper接口。public interface AdminMapper {: 定义了AdminMapper接口。Admin selectByAccountAndPassword(Admin admin);: 定义了一个抽象方法，用于查询符合给定账户和密码的管理员。
ClassOrderMapper.java
package com.milotnt.mapper;import com.milotnt.pojo.ClassOrder;
import org.apache.ibatis.annotations.*;import java.util.List;@Mapper
public interface ClassOrderMapper {//查询所有报名表信息List<ClassOrder> findAll();//添加报名信息Boolean insertClassOrder(ClassOrder classOrder);//根据会员账号查询个人报名课表List<ClassOrder> selectClassOrderByMemberAccount(Integer memberAccount);//删除已预约的课程Boolean deleteByClassOrderId(Integer classOrderId);//查询会员是否报名该课程ClassOrder selectMemberByClassIdAndMemberAccount(Integer classId, Integer memberAccount);//根据课程id查询所有报名的会员List<ClassOrder> selectMemberOrderList(Integer classId);}
这是一个名为 ClassOrderMapper 的 Java 接口，其主要功能是定义数据库操作相关的方法。
@Mapper注解表示这是一个 MyBatis Mapper 接口，用于进行数据库操作映射。List<ClassOrder> findAll()：查询所有报名表信息，返回类型为List<ClassOrder>。Boolean insertClassOrder(ClassOrder classOrder)：添加报名信息，参数类型为ClassOrder，返回值为Boolean，表示添加是否成功。List<ClassOrder> selectClassOrderByMemberAccount(Integer memberAccount)：根据会员账号查询个人报名课表，参数类型为Integer，返回类型为List<ClassOrder>。Boolean deleteByClassOrderId(Integer classOrderId)：删除已预约的课程，参数类型为Integer，返回值为Boolean，表示删除是否成功。ClassOrder selectMemberByClassIdAndMemberAccount(Integer classId, Integer memberAccount)：查询会员是否报名该课程，参数类型为Integer，返回类型为ClassOrder。List<ClassOrder> selectMemberOrderList(Integer classId)：根据课程id查询所有报名的会员，参数类型为Integer，返回类型为List<ClassOrder>。
ClassTableMapper.java
package com.milotnt.mapper;import com.milotnt.pojo.ClassTable;
import org.apache.ibatis.annotations.Mapper;import java.util.List;@Mapper
public interface ClassTableMapper {//查询所有课程List<ClassTable> findAll();//根据id删除课程Boolean deleteClassByClassId(Integer classId);//添加课程Boolean insertClass(ClassTable classTable);//根据id查询课表ClassTable selectByClassId(Integer classId);//根据id删除已预约的课程Boolean deleteOrderByClassId(Integer classId);}
这是一个名为ClassTableMapper的Java接口，定义了与课程表相关的数据库操作方法。
@Mapper注解表示这是一个MyBatis的Mapper接口。List<ClassTable> findAll()方法：查询所有课程信息，返回一个ClassTable对象的列表。Boolean deleteClassByClassId(Integer classId)方法：根据课程id删除课程，返回一个布尔值表示是否删除成功。Boolean insertClass(ClassTable classTable)方法：添加一门新的课程，返回一个布尔值表示是否添加成功。ClassTable selectByClassId(Integer classId)方法：根据课程id查询对应的课程信息，返回一个ClassTable对象。Boolean deleteOrderByClassId(Integer classId)方法：根据课程id删除已预约该课程的所有会员，返回一个布尔值表示是否删除成功。
EmployeeMapper.java
package com.milotnt.mapper;import com.milotnt.pojo.Employee;
import org.apache.ibatis.annotations.Mapper;import java.util.List;@Mapper
public interface EmployeeMapper {//查询所有员工List<Employee> findAll();//根据员工账号删除员工Boolean deleteByEmployeeAccount(Integer employeeAccount);//添加新员工Boolean insertEmployee(Employee employee);//根据员工账号修改会员信息Boolean updateMemberByEmployeeAccount(Employee employee);//根据员工账号查询员工List<Employee> selectByEmployeeAccount(Integer employeeAccount);//查询员工数Integer selectTotalCount();}
这是一个员工管理相关的Mapper接口，下面是对每个方法的注释说明：
-
findAll(): 查询所有员工的信息并返回一个员工列表(List<Employee>)。 -
deleteByEmployeeAccount(Integer employeeAccount): 根据员工账号删除一个员工，并返回一个Boolean类型的值表示操作是否成功。 -
insertEmployee(Employee employee): 插入一个新的员工记录，并返回一个Boolean类型的值表示操作是否成功。 -
updateMemberByEmployeeAccount(Employee employee): 根据员工账号修改员工信息，并返回一个Boolean类型的值表示操作是否成功。 -
selectByEmployeeAccount(Integer employeeAccount): 根据员工账号查询一个员工，并返回一个员工列表(List<Employee>)。 -
selectTotalCount(): 查询员工总数，并返回一个Integer类型的值表示员工总数。
EmployeeMapper.java
package com.milotnt.mapper;import com.milotnt.pojo.Employee;
import org.apache.ibatis.annotations.Mapper;import java.util.List;@Mapper
public interface EmployeeMapper {//查询所有员工List<Employee> findAll();//根据员工账号删除员工Boolean deleteByEmployeeAccount(Integer employeeAccount);//添加新员工Boolean insertEmployee(Employee employee);//根据员工账号修改会员信息Boolean updateMemberByEmployeeAccount(Employee employee);//根据员工账号查询员工List<Employee> selectByEmployeeAccount(Integer employeeAccount);//查询员工数Integer selectTotalCount();}
这是一个名为EmployeeMapper的Java接口，它定义了访问员工数据的一组方法。接口中的方法主要用于查询、删除、添加和修改员工的信息。
@Mapper注解表示这是MyBatis框架中的Mapper接口，用于将SQL语句映射到Java方法中。
接口中的方法包括：
findAll()：查询所有员工信息；deleteByEmployeeAccount(Integer employeeAccount)：根据员工账号删除员工；insertEmployee(Employee employee)：添加新员工；updateMemberByEmployeeAccount(Employee employee)：根据员工账号修改员工信息；selectByEmployeeAccount(Integer employeeAccount)：根据员工账号查询员工信息；selectTotalCount()：查询员工总数。
EmployeeMapper.java
package com.milotnt.mapper;import com.milotnt.pojo.Member;
import org.apache.ibatis.annotations.*;import java.util.List;@Mapper
public interface MemberMapper {//查询会员信息List<Member> findAll();//新增会员信息Boolean insertMember(Member member);//根据会员账号修改会员信息Boolean updateMemberByMemberAccount(Member member);//查询会员账号密码Member selectByAccountAndPassword(Member member);//根据会员账号删除会员信息Boolean deleteByMemberAccount(Integer memberAccount);//查询会员数Integer selectTotalCount();//根据会员账号查询会员List<Member> selectByMemberAccount(Integer memberAccount);}
在这个Mapper中，每个方法都是针对会员信息的操作，包括查询、新增、修改和删除等。其中，还有一些特殊的方法，比如查询会员总数和根据会员账号和密码查询会员信息等。这些方法都是为了满足系统的需求而设计的，能够方便快捷地对会员信息进行操作。
