From 8d273ec5820f4077831d7e29fc5ecc4b22605b09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=89=AC?= <2016910632@qq.com>
Date: Wed, 18 Dec 2024 21:58:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B3=A8=E9=87=8A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/WEB-INF/jsp/admin_edit.jsp |  22 +-
 web/WEB-INF/jsp/admin_list.jsp | 252 ++++++++++++++-------
 web/WEB-INF/jsp/class_edit.jsp |  28 ++-
 web/WEB-INF/jsp/class_list.jsp | 390 ++++++++++++++++++++++-----------
 4 files changed, 474 insertions(+), 218 deletions(-)
diff --git a/web/WEB-INF/jsp/admin_edit.jsp b/web/WEB-INF/jsp/admin_edit.jsp
index 96ecd79..42813a4 100644
--- a/web/WEB-INF/jsp/admin_edit.jsp
+++ b/web/WEB-INF/jsp/admin_edit.jsp
@@ -10,10 +10,13 @@
 <html>
 <head>
     <title>修改信息</title>
+    <!-- 设置网页图标 -->
     <link rel="icon" href="/images/favicon.ico" sizes="32x32" />
+    <!-- 引入CSS样式文件 -->
     <link rel="stylesheet" href="/css/font.css">
     <link rel="stylesheet" href="/css/xadmin.css">
     <link rel="stylesheet" href="/css/pg_btn.css">
+    <!-- 引入JavaScript脚本文件 -->
     <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
     <script src="lib/layui/layui.js"></script>
     <script type="text/javascript" src="./js/xadmin.js"></script>
@@ -22,9 +25,12 @@
 <body>
 
 <div class="x-body">
-    <%--把表单封装成一个Admin对象传给服务端--%>
-    <form class="layui-form"  id="f_auto" action="/updateAdmin" method="post">
+    <!-- 表单开始，用于提交修改后的管理员信息 -->
+    <form class="layui-form" id="f_auto" action="/updateAdmin" method="post">
+        <!-- 隐藏字段，存储管理员ID -->
         <input type="hidden" value="${sessionScope.a.a_id}" name="a_id" id="a_id" class="layui-input"/>
+
+        <!-- 用户名输入框 -->
         <div class="layui-form-item">
             <label for="a_username" class="layui-form-label">
                 <span class="">用户名</span>
@@ -35,6 +41,7 @@
             </div>
         </div>
 
+        <!-- 密码输入框 -->
         <div class="layui-form-item">
             <label for="a_password" class="layui-form-label">
                 <span class="">密码</span>
@@ -45,6 +52,7 @@
             </div>
         </div>
 
+        <!-- 姓名输入框 -->
         <div class="layui-form-item">
             <label for="a_name" class="layui-form-label">
                 <span class="">姓名</span>
@@ -55,6 +63,7 @@
             </div>
         </div>
 
+        <!-- 电话输入框 -->
         <div class="layui-form-item">
             <label for="a_phone" class="layui-form-label">
                 <span class="">电话</span>
@@ -65,6 +74,7 @@
             </div>
         </div>
 
+        <!-- 级别输入框 -->
         <div class="layui-form-item">
             <label for="a_power" class="layui-form-label">
                 <span class="">级别</span>
@@ -75,6 +85,7 @@
             </div>
         </div>
 
+        <!-- 级别描述输入框 -->
         <div class="layui-form-item">
             <label for="a_describe" class="layui-form-label">
                 <span class="">级别描述</span>
@@ -85,14 +96,17 @@
             </div>
         </div>
 
-
+        <!-- 提交按钮 -->
         <div class="layui-form-item" id="btn_xg">
-            <button  class="layui-btn" id="btn_on"  lay-submit="" lay-filter="updateAdmin">
+            <button class="layui-btn" id="btn_on" lay-submit="" lay-filter="updateAdmin">
                 修改
             </button>
         </div>
     </form>
 </div>
+</body>
+</html>
+
 
 <script>
     // layui.use(['form','layer','laydate'], function(){
diff --git a/web/WEB-INF/jsp/admin_list.jsp b/web/WEB-INF/jsp/admin_list.jsp
index 0d2e286..b1053a7 100644
--- a/web/WEB-INF/jsp/admin_list.jsp
+++ b/web/WEB-INF/jsp/admin_list.jsp
@@ -11,23 +11,28 @@
 <html>
 <head>
     <title>后台登录</title>
+    <!-- 设置页面相关元数据 -->
     <meta name="renderer" content="webkit|ie-comp|ie-stand">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
     <%--<meta http-equiv="Cache-Control" content="no-siteapp" />--%>
 
+    <!-- 引入图标 -->
     <link rel="icon" href="/images/favicon.ico" sizes="32x32" />
+    <!-- 引入CSS样式文件 -->
     <link rel="stylesheet" href="/css/font.css">
     <link rel="stylesheet" href="/css/xadmin.css">
+    <!-- 引入JavaScript脚本文件 -->
     <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
     <script src="/lib/layui/layui.js"></script>
     <script type="text/javascript" src="/js/xadmin.js"></script>
     <script src="/layui_exts/excel.js"></script>
 
+    <!-- 自定义样式 -->
     <style type="text/css">
         .layui-table{
-                text-align: center;
-            }
+            text-align: center;
+        }
         .layui-table th{
             text-align: center;
         }
@@ -36,29 +41,37 @@
 
 <body>
 <div class="x-nav">
-      <span class="layui-breadcrumb">
+    <!-- 面包屑导航 -->
+    <span class="layui-breadcrumb">
         <a href="">首页</a>
         <a href="/findAdmin">管理员信息</a>
       </span>
+    <!-- 刷新按钮 -->
     <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="/findAdmin" title="刷新">
         <i class="layui-icon" style="line-height:30px">ဂ</i></a>
 </div>
 <div class="x-body">
     <div class="layui-row">
+        <!-- 搜索表单 -->
         <form class="layui-form layui-col-md12 x-so" action="/findAdmin" >
             <input type="hidden" class="layui-input" placeholder="请输入用户名" name="a_id" id="a_id">
             <input class="layui-input" placeholder="请输入用户名" name="a_username" id="a_username">
             <input class="layui-input" placeholder="请输入级别描述" name="a_describe" id="a_describe" >
 
+            <!-- 分页信息，隐藏字段 -->
             <input class="layui-input" type="hidden" name="pageIndex" value="1">
             <input class="layui-input" type="hidden" name="pageSize" value="3">
+            <!-- 搜索按钮 -->
             <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
         </form>
     </div>
 
     <xblock>
+        <!-- 添加管理员按钮 -->
         <button id="addStudnetBtn" class="layui-btn layui-btn-normal"> <i class="layui-icon">&#xe654;</i>添加</button>
+        <!-- 导出按钮 -->
         <button class="layui-btn layui-btn-warm" lay-filter="toolbarDemo" lay-submit=""><i class="layui-icon">&#xe67c;</i>导出</button>
+        <!-- 显示数据总数 -->
         <span class="x-right" style="line-height:40px">共有数据：${ai.totalCount} 条</span>
     </xblock>
 
@@ -67,7 +80,7 @@
         <thead>
         <tr>
             <%--<th>--%>
-                <%--<div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>--%>
+            <%--<div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>--%>
             <%--</th>--%>
             <th>ID</th>
             <th>用户名</th>
@@ -79,30 +92,34 @@
             <th>操作</th>
         </thead>
         <tbody>
-<c:forEach items="${ai.list}" var="ai">
-        <tr>
-            <%--<td>--%>
-                <%--<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>--%>
-            <%--</td>--%>
-            <%--<td>${class.c_id}</td>--%>
-            <td class="myid">${ai.a_id}</td>
-            <td>${ai.a_username}</td>
-            <%--<td>${ai.a_password}</td>--%>
-            <td>${ai.a_name}</td>
-            <td>${ai.a_phone}</td>
-            <%--<td>${ai.a_power}</td>--%>
-            <td>${ai.a_describe}</td>
-            <td class="td-manage">
-                <%--href="/findAdminById?a_id=${ai.a_id}"--%>
-                <a title="编辑" class="updateEdit" href="#">
-                    <i class="layui-icon">&#xe642;</i>
-                </a>
-                <a title="删除" onclick="member_del(this,'${ai.a_id}','${ai.a_power}')" href="javascript:;">
-                    <i class="layui-icon">&#xe640;</i>
-                </a>
-            </td>
-        </tr>
-</c:forEach>
+        <!-- 循环遍历管理员信息列表，为每个管理员生成一行数据 -->
+        <c:forEach items="${ai.list}" var="ai">
+            <tr>
+                    <%--<td>--%>
+                    <%--<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>--%>
+                    <%--</td>--%>
+                <td class="myid">${ai.a_id}</td>
+                        <!-- 显示管理员ID -->
+                <td>${ai.a_username}</td>
+                        <!-- 显示管理员用户名 -->
+                    <%--<td>${ai.a_password}</td>--%> <!-- 注释掉密码显示 -->
+                <td>${ai.a_name}</td>
+                        <!-- 显示管理员姓名 -->
+                <td>${ai.a_phone}</td>
+                        <!-- 显示管理员电话 -->
+                    <%--<td>${ai.a_power}</td>--%> <!-- 注释掉级别显示 -->
+                <td>${ai.a_describe}</td> <!-- 显示管理员级别描述 -->
+                <td class="td-manage">
+                    <!-- 编辑和删除按钮 -->
+                    <a title="编辑" class="updateEdit" href="#">
+                        <i class="layui-icon">&#xe642;</i>
+                    </a>
+                    <a title="删除" onclick="member_del(this,'${ai.a_id}','${ai.a_power}')" href="javascript:;">
+                        <i class="layui-icon">&#xe640;</i>
+                    </a>
+                </td>
+            </tr>
+        </c:forEach>
         </tbody>
     </table>
 
@@ -162,7 +179,8 @@
         </div>
     </div>
 
-<div class="" >
+
+    <div class="" >
     <input type="hidden" id="totalPageCount" value="${ai.pageTotalCount}"/>
     <c:import url="pageBtn.jsp">
         <c:param name="totalCount" value="${ai.totalCount}"/>
@@ -173,124 +191,194 @@
 </div>
 <script>
 
+    // 配置layui的扩展模块路径
     layui.config({
         base: 'layui_exts/',
+        // 设置扩展模块的路径
     }).extend({
         excel: 'excel',
+        // 添加excel模块
     });
 
-    layui.use(['jquery', 'excel', 'form','layer','laydate'], function(){
+    // 使用layui模块
+    layui.use(['jquery', 'excel', 'form', 'layer', 'laydate'], function(){
         var form = layui.form,
+            // 获取form模块
             $ = layui.jquery,
+            // 获取jQuery模块
             laydate = layui.laydate;
+        // 获取laydate模块
         var excel = parent.layui.excel;
+        // 获取父页面的excel模块
 
-        //执行一个laydate实例
+        // 初始化laydate日期选择器
         laydate.render({
-            elem: '#start' //指定元素
+            elem: '#start'
+            // 指定绑定日期选择器的元素
         });
         form.render();
+        // 重新渲染表单元素，以便layui能够识别新的表单元素
 
+        // 监听表单提交事件
         form.on('submit(toolbarDemo)', function(){
-
+            // 发起ajax请求，获取导出数据
             $.ajax({
                 url: '/exportadminlist',
+                // 请求的URL
                 type: 'post',
+                // 请求类型
                 dataType: 'json',
+                // 预期服务器返回的数据类型
                 contentType: "application/json; charset=utf-8",
+                // 发送信息至服务器时内容编码类型
                 success: function (data) {
+                    // 请求成功后的回调函数
                     console.log(data);
+                    // 在控制台打印返回的数据
 
-                    // 1. 如果需要调整顺序，请执行梳理函数
+                    // 1. 调整导出数据的顺序
                     var dt = excel.filterExportData(data, [
-                        'a_id'
-                        ,'a_username'
-                        ,'a_name'
-                        ,'a_phone'
-                        ,'a_describe'
+                        'a_id',
+                        // ID
+                        'a_username',
+                        // 用户名
+                        'a_name',
+                        // 姓名
+                        'a_phone',
+                        // 电话
+                        'a_describe'
+                        // 级别描述
                     ]);
 
-                    // 2. 数组头部新增表头
-                    dt.unshift({a_id: 'ID', a_username: '用户名', a_name: '姓名', a_phone: '电话', a_describe: '级别描述'});
+                    // 2. 在数据数组头部添加表头信息
+                    dt.unshift({
+                        a_id: 'ID',
+                        a_username: '用户名',
+                        a_name: '姓名',
+                        a_phone: '电话',
+                        a_describe: '级别描述'
+                    });
 
-                    // 意思是：A列40px，B列60px(默认)，C列120px，D、E、F等均未定义
+                    // 3. 设置列宽配置
                     var colConf = excel.makeColConfig({
                         'A': 40,
+                        // A列宽度40px
                         'D': 90
+                        // D列宽度90px
                     }, 60);
+                    // 其他未定义列的默认宽度为60px
 
+                    // 4. 记录开始时间
                     var timestart = Date.now();
-                    // 3. 执行导出函数，系统会弹出弹框
+
+                    // 5. 执行导出函数，系统会弹出下载框
                     excel.exportExcel({
                         sheet1: dt
+                        // 数据
                     }, '管理员数据.xlsx', 'xlsx', {
+                        // 文件名和类型
                         extend: {
                             '!cols': colConf
+                            // 列配置
                         }
                     });
+
+                    // 6. 记录结束时间
                     var timeend = Date.now();
 
+                    // 7. 计算耗时
                     var spent = (timeend - timestart) / 1000;
                     layer.alert('导出耗时 '+spent+' s');
-                    //setTimeout(function () {window.location.href='/findAdmin';},2000);
+                    // 弹出耗时信息
+                    //setTimeout(function () {window.location.href='/findAdmin';},2000); // 2秒后跳转页面
                 },
-
                 error: function () {
+                    // 请求失败后的回调函数
                     //console.log(data);
+                    // 在控制台打印错误信息
                     setTimeout(function () {window.location.href='/findAdmin';},2000);
+                    // 2秒后跳转页面
                 }
             });
         });
+    });
 
 
-        /*添加弹出框*/
-        $("#addStudnetBtn").click(function () {
-            layer.open({
-                type:1,
-                title:"添加管理员",
-                skin:"myclass",
-                area:["50%"],
-                anim:2,
-                content:$("#test").html()
-            });
-            $("#addEmployeeForm")[0].reset();
-            form.on('submit(formDemo)', function(data) {
-                // layer.msg('aaa',{icon:1,time:3000});
-                var param=data.field;
-                // console.log(JSON.stringify(param));
-                $.ajax({
-                    url: '/addAdmin',
-                    type: "post",
-                    data:JSON.stringify(param),
-                    contentType: "application/json; charset=utf-8",
-                    success:function(da){
-                        console.log(da);
-                        layer.msg('添加成功', {icon: 1, time: 2000});
-                        setTimeout(function () {window.location.href='/findAdmin';},2000);
-
-                    },
-                    error:function(){
-                        layer.msg('添加失败',{icon:0,time:2000});
-                        setTimeout(function () {window.location.href='/findAdmin';},2000);
-                    }
-                });
-                // return false;
+    // 当点击添加管理员按钮时，打开一个弹出层
+    $("#addStudnetBtn").click(function () {
+        // 使用layer.open方法打开一个弹出层
+        layer.open({
+            type: 1,
+            // 类型为页面层
+            title: "添加管理员",
+            // 弹出层的标题
+            skin: "myclass",
+            // 弹出层的皮肤样式
+            area: ["50%"],
+            // 弹出层的宽度，这里设置为屏幕宽度的50%
+            anim: 2,
+            // 弹出层的动画效果
+            content: $("#test").html()
+            // 弹出层的内容，这里是通过jQuery选择器获取的HTML内容
+        });
+        // 重置表单
+        $("#addEmployeeForm")[0].reset();
+        // 监听表单提交事件
+        form.on('submit(formDemo)', function(data) {
+            // 可以在这里使用layer.msg显示消息提示，这里被注释掉了
+            // layer.msg('aaa',{icon:1,time:3000});
+            var param = data.field; // 获取表单数据
+            // console.log(JSON.stringify(param)); // 在控制台打印表单数据，这里被注释掉了
+
+            // 发起ajax请求，提交表单数据
+            $.ajax({
+                url: '/addAdmin', // 请求的URL
+                type: "post",
+                // 请求类型
+                data: JSON.stringify(param),
+                // 发送到服务器的数据，这里是表单数据的JSON字符串
+                contentType: "application/json; charset=utf-8",
+                // 发送信息至服务器时内容编码类型
+                success: function(da){
+                    // 请求成功后的回调函数
+                    console.log(da);
+                    // 在控制台打印服务器返回的数据
+                    layer.msg('添加成功', {icon: 1, time: 2000});
+                    // 显示成功消息提示
+                    setTimeout(function () {window.location.href='/findAdmin';},2000);
+                    // 2秒后跳转到管理员列表页面
+                },
+                error: function(){
+                    // 请求失败后的回调函数
+                    layer.msg('添加失败',{icon:0,time:2000});
+                    // 显示失败消息提示
+                    setTimeout(function () {window.location.href='/findAdmin';},2000);
+                    // 2秒后跳转到管理员列表页面
+                }
             });
+            // return false; // 阻止表单默认提交行为，这里被注释掉了
         });
-
     });
 
 
+
     /*编辑*/
     $(".updateEdit").click(function () {
         var myid = $(this).parent("td").parent("tr").children(".myid").html();
         //判断
+        // 获取当前行的管理员ID
         var admin_id = ${sessionScope.ad.a_id};
+        // 获取当前登录管理员的ID
         if(admin_id != myid){
+            // 判断当前登录管理员是否有权限编辑
             layer.alert("对不起，您没有权限:(");
+            // 如果没有权限，弹出提示框
         }else {
             <%--window.location.href = "/findAdminById?a_id=${ai.a_id}";--%>
             window.location.href = "/findAdminById?a_id=" + myid;
+            // 如果有权限，跳转到编辑页面，并传递管理员ID
+            // 这里的注释表示原来的代码被注释掉了
+            // window.location.href = "/findAdminById?a_id=${ai.a_id}";
         }
     });
 
@@ -299,8 +387,11 @@
     function member_del(obj,a_id,a_power){
 
         var power = ${sessionScope.ad.a_power};
+        // 获取当前登录管理员的权限
         var id = ${sessionScope.ad.a_id};
+        // 获取当前登录管理员的ID
         if(power != 1 && id != a_id){
+            // 如果没有权限，弹出提示框
                 layer.alert("对不起，您没有权限:(");
         }
         // else if(power == 1 && id == a_id){
@@ -308,15 +399,20 @@
         // }
         else {
             layer.confirm('确认要删除吗？',function(index){
+                // 如果有权限，弹出确认框
                 //发异步删除数据
                 $.get("/deleteAdmin",{"a_id":a_id},function (data) {
+                    // 发起GET请求删除管理员信息
                     if(data = true){
+                        // 判断删除操作是否成功
                         layer.msg('删除成功!',{icon:1,time:2000});
                         setTimeout(function () {window.location.href='/findAdmin';},2000);
+                        // 如果成功，显示成功消息并跳转
 
                     }else {
                         layer.msg('删除失败!',{icon:1,time:2000});
                         setTimeout(function () {window.location.href='/findAdmin';},2000);
+                        // 如果失败，显示失败消息并跳转
                     }
                 });
             });
diff --git a/web/WEB-INF/jsp/class_edit.jsp b/web/WEB-INF/jsp/class_edit.jsp
index c3681e0..7250c6c 100644
--- a/web/WEB-INF/jsp/class_edit.jsp
+++ b/web/WEB-INF/jsp/class_edit.jsp
@@ -9,54 +9,76 @@
 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
 <html>
 <head>
+    <!-- 设置页面标题 -->
     <title>修改信息</title>
+    <!-- 引入页面的图标 -->
     <link rel="icon" href="/images/favicon.ico" sizes="32x32" />
+    <!-- 引入字体样式文件 -->
     <link rel="stylesheet" href="/css/font.css">
+    <!-- 引入xadmin的样式文件 -->
     <link rel="stylesheet" href="/css/xadmin.css">
+    <!-- 引入自定义按钮样式文件 -->
     <link rel="stylesheet" href="/css/pg_btn.css">
+    <!-- 引入jQuery库，版本为1.3.2 -->
     <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
+    <!-- 引入layui库 -->
     <script src="lib/layui/layui.js"></script>
+    <!-- 引入xadmin的脚本文件 -->
     <script type="text/javascript" src="./js/xadmin.js"></script>
 </head>
 
 <body>
 
+<!-- 页面的主体内容区域 -->
 <div class="x-body">
-    <form class="layui-form"  id="f_auto" action="/updateClass" method="post" >
+    <!-- 创建一个layui风格的表单 -->
+    <form class="layui-form" id="f_auto" action="/updateClass" method="post">
+        <!-- 隐藏的输入字段，用于存储班级ID -->
         <input type="hidden" value="${sessionScope.c.c_id}" name="c_id" id="c_id"/>
+
+        <!-- 班级编号的表单项 -->
         <div class="layui-form-item">
             <label for="c_classid" class="layui-form-label">
+                <!-- 班级编号的标签 -->
                 <span class="">班级编号</span>
             </label>
             <div class="layui-input-inline">
+                <!-- 班级编号的输入框 -->
                 <input type="text" id="c_classid" name="c_classid"
                        autocomplete="off" value="${sessionScope.c.c_classid}" class="layui-input">
             </div>
         </div>
 
+        <!-- 班级名的表单项 -->
         <div class="layui-form-item">
             <label for="c_classname" class="layui-form-label">
+                <!-- 班级名的标签 -->
                 <span class="">班级名</span>
             </label>
             <div class="layui-input-inline">
+                <!-- 班级名的输入框 -->
                 <input type="text" id="c_classname" name="c_classname"
                        autocomplete="off" value="${sessionScope.c.c_classname}" class="layui-input">
             </div>
         </div>
 
+        <!-- 辅导员姓名的表单项 -->
         <div class="layui-form-item">
             <label for="c_counsellor" class="layui-form-label">
+                <!-- 辅导员姓名的标签 -->
                 <span class="">辅导员姓名</span>
             </label>
             <div class="layui-input-inline">
+                <!-- 辅导员姓名的输入框 -->
                 <input type="text" id="c_counsellor" name="c_counsellor"
                        autocomplete="off" value="${sessionScope.c.c_counsellor}" class="layui-input">
             </div>
         </div>
 
-
+        <!-- 修改按钮的表单项 -->
         <div class="layui-form-item" id="btn_xg">
-            <button  class="layui-btn" id="btn_on"  lay-submit="" lay-filter="updateClass">
+            <!-- 修改按钮 -->
+            <button class="layui-btn" id="btn_on" lay-submit="" lay-filter="updateClass">
                 修改
             </button>
         </div>
diff --git a/web/WEB-INF/jsp/class_list.jsp b/web/WEB-INF/jsp/class_list.jsp
index d0c4026..e645096 100644
--- a/web/WEB-INF/jsp/class_list.jsp
+++ b/web/WEB-INF/jsp/class_list.jsp
@@ -10,24 +10,37 @@
 
 <html>
 <head>
+    <!-- 设置页面标题 -->
     <title>后台登录</title>
+    <!-- 设置浏览器渲染模式 -->
     <meta name="renderer" content="webkit|ie-comp|ie-stand">
+    <!-- 设置IE浏览器兼容性 -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <!-- 设置视图窗口属性，包括宽度、缩放比例等 -->
     <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
+    <!-- 禁止百度转码 -->
     <%--<meta http-equiv="Cache-Control" content="no-siteapp" />--%>
 
+    <!-- 引入页面的图标 -->
     <link rel="icon" href="/images/favicon.ico" sizes="32x32" />
+    <!-- 引入字体样式文件 -->
     <link rel="stylesheet" href="./css/font.css">
+    <!-- 引入xadmin的样式文件 -->
     <link rel="stylesheet" href="./css/xadmin.css">
+    <!-- 引入jQuery库，版本为1.3.2 -->
     <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
+    <!-- 引入layui库 -->
     <script src="lib/layui/layui.js"></script>
+    <!-- 引入xadmin的脚本文件 -->
     <script type="text/javascript" src="./js/xadmin.js"></script>
+    <!-- 引入layui的扩展插件，用于导出Excel -->
     <script src="/layui_exts/excel.js"></script>
 
+    <!-- 自定义样式，设置表格内容居中 -->
     <style type="text/css">
         .layui-table{
-                text-align: center;
-            }
+            text-align: center;
+        }
         .layui-table th{
             text-align: center;
         }
@@ -35,60 +48,85 @@
 </head>
 
 <body>
+<!-- 顶部导航 -->
 <div class="x-nav">
-      <span class="layui-breadcrumb">
-        <a href="">首页</a>
-        <a href="/findClass">班级信息</a>
-      </span>
+    <!-- 面包屑导航 -->
+    <span class="layui-breadcrumb">
+            <a href="">首页</a>
+            <a href="/findClass">班级信息</a>
+        </span>
+    <!-- 刷新按钮 -->
     <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="/findClass" title="刷新">
         <i class="layui-icon" style="line-height:30px">ဂ</i></a>
 </div>
+<!-- 页面主体内容区域 -->
 <div class="x-body">
+    <!-- 搜索表单 -->
     <div class="layui-row">
         <form class="layui-form layui-col-md12 x-so" action="/findClass" >
+            <!-- 班级编号输入框 -->
             <input class="layui-input" placeholder="请输入班级编号" name="c_classid" id="c_classid">
+            <!-- 班级名输入框 -->
             <input class="layui-input" placeholder="请输入班级名" name="c_classname" id="c_classname">
+            <!-- 辅导员姓名输入框 -->
             <input class="layui-input" placeholder="请输入辅导员姓名" name="c_counsellor" id="c_counsellor">
 
+            <!-- 隐藏的页码和页面大小输入框 -->
             <input class="layui-input" type="hidden" name="pageIndex" value="1">
             <input class="layui-input" type="hidden" name="pageSize" value="3">
+            <!-- 搜索按钮 -->
             <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
         </form>
     </div>
+    <!-- 操作按钮区域 -->
     <xblock>
+        <!-- 添加班级按钮 -->
         <button id="addStudnetBtn" class="layui-btn layui-btn-normal"> <i class="layui-icon">&#xe654;</i>添加 </button>
+        <!-- 导出按钮 -->
         <button class="layui-btn layui-btn-warm" lay-filter="toolbarDemo" lay-submit=""><i class="layui-icon">&#xe67c;</i>导出</button>
+        <!-- 显示数据总数 -->
         <span class="x-right" style="line-height:40px">共有数据：${ci.totalCount} 条</span>
     </xblock>
 
-    <%--添加模态框--%>
+    <%-- 添加模态框的HTML结构 --%>
     <div class="layui-row" id="test" style="display: none;">
+        <!-- 模态框内容区域，宽度为10/12 -->
         <div class="layui-col-md10">
+            <!-- 添加班级信息的表单 -->
             <form class="layui-form" id="addEmployeeForm">
+                <!-- 班级编号输入项 -->
                 <div class="layui-form-item">
                     <label class="layui-form-label">班级编号：</label>
+                    <!-- 输入框块 -->
                     <div class="layui-input-block">
                         <input type="text" name="c_classid" class="layui-input" placeholder="请输入班级编号">
                     </div>
                 </div>
 
+                <!-- 班级名输入项 -->
                 <div class="layui-form-item">
                     <label class="layui-form-label">班级名：</label>
+                    <!-- 输入框块，并设置必填校验 -->
                     <div class="layui-input-block">
-                        <input type="text" lay-verify="required" name="c_classname"  class="layui-input" placeholder="请输入班级名">
+                        <input type="text" lay-verify="required" name="c_classname" class="layui-input" placeholder="请输入班级名">
                     </div>
                 </div>
 
+                <!-- 辅导员姓名输入项 -->
                 <div class="layui-form-item">
                     <label class="layui-form-label">辅导员：</label>
+                    <!-- 输入框块 -->
                     <div class="layui-input-block">
                         <input type="text" name="c_counsellor" class="layui-input" placeholder="请输入辅导员姓名">
                     </div>
                 </div>
 
+                <!-- 提交和重置按钮 -->
                 <div class="layui-form-item">
                     <div class="layui-input-block">
+                        <!-- 提交按钮，绑定表单提交事件 -->
                         <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">提交</button>
+                        <!-- 重置按钮，用于重置表单 -->
                         <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                     </div>
                 </div>
@@ -99,168 +137,254 @@
 
 
 
-    <%--表格数据--%>
+
+    <%-- 表格数据展示区域 --%>
     <table class="layui-table">
+        <!-- 表格头部，定义列名 -->
         <thead>
-            <th>ID</th>
-            <th>班级编号</th>
-            <th>班级名</th>
-            <th>辅导员</th>
-            <th>操作</th>
+        <th>ID</th>
+        <!-- ID列 -->
+        <th>班级编号</th>
+        <!-- 班级编号列 -->
+        <th>班级名</th>
+        <!-- 班级名列 -->
+        <th>辅导员</th>
+        <!-- 辅导员列 -->
+        <th>操作</th>
+        <!-- 操作列 -->
         </thead>
         <tbody>
-<c:forEach items="${ci.list}" var="ci">
-        <tr>
-            <td>${ci.c_id}</td>
-            <td>${ci.c_classid}</td>
-            <td>${ci.c_classname}</td>
-            <td>${ci.c_counsellor}</td>
-            <td>
-                <a title="编辑"    id= "updateEdit"    href="/findClassById?c_id=${ci.c_id}">
-                    <i class="layui-icon">&#xe642;</i>
-                </a>
-                <a title="删除" onclick="member_del(this,'${ci.c_id}')" href="javascript:;">
-                    <i class="layui-icon">&#xe640;</i>
-                </a>
-            </td>
-        </tr>
-</c:forEach>
+        <!-- 使用JSTL的forEach标签遍历班级信息列表 -->
+        <c:forEach items="${ci.list}" var="ci">
+            <tr>
+                <!-- 显示每行的数据 -->
+                <td>${ci.c_id}</td>
+                <!-- 显示ID -->
+                <td>${ci.c_classid}</td>
+                <!-- 显示班级编号 -->
+                <td>${ci.c_classname}</td>
+                <!-- 显示班级名 -->
+                <td>${ci.c_counsellor}</td>
+                <!-- 显示辅导员 -->
+                <td>
+                    <!-- 编辑操作链接，点击后跳转到编辑页面 -->
+                    <a title="编辑" id="updateEdit" href="/findClassById?c_id=${ci.c_id}">
+                        <i class="layui-icon">&#xe642;</i>
+                        <!-- layui的编辑图标 -->
+                    </a>
+                    <!-- 删除操作链接，点击后执行JavaScript函数 -->
+                    <a title="删除" onclick="member_del(this,'${ci.c_id}')" href="javascript:;">
+                        <i class="layui-icon">&#xe640;</i>
+                        <!-- layui的删除图标 -->
+                    </a>
+                </td>
+            </tr>
+        </c:forEach>
         </tbody>
     </table>
 
-<div class="" >
-    <input type="hidden" id="totalPageCount" value="${ci.pageTotalCount}"/>
-    <c:import url="pageBtn.jsp">
-        <c:param name="totalCount" value="${ci.totalCount}"/>
-        <c:param name="currentPageNo" value="${ci.pageIndex}"/>
-        <c:param name="totalPageCount" value="${ci.pageTotalCount}"/>
-    </c:import>
-</div>
-<script>
+    <div class="" >
+        <!-- 隐藏的输入框，存储总页数 -->
+        <input type="hidden" id="totalPageCount" value="${ci.pageTotalCount}"/>
+        <!-- 导入分页按钮的JSP文件 -->
+        <c:import url="pageBtn.jsp">
+            <!-- 传递参数给分页按钮JSP -->
+            <c:param name="totalCount" value="${ci.totalCount}"/>
+            <!-- 总记录数 -->
+            <c:param name="currentPageNo" value="${ci.pageIndex}"/>
+            <!-- 当前页码 -->
+            <c:param name="totalPageCount" value="${ci.pageTotalCount}"/>
+            <!-- 总页数 -->
+        </c:import>
+    </div>
 
-    layui.config({
-        base: 'layui_exts/',
-    }).extend({
-        excel: 'excel',
-    });
+    <script>
 
+        // 配置layui的扩展模块路径
+        layui.config({
+            base: 'layui_exts/',
+            // 设置扩展模块的基础路径
+        }).extend({
+            excel: 'excel',
+            // 注册excel模块
+        });
 
-    layui.use(['jquery', 'excel','form','layer','laydate'], function(){
-        var form = layui.form,
-            $ = layui.jquery,
-            laydate = layui.laydate;
-        var excel = parent.layui.excel;
+        // 使用layui模块
+        layui.use(['jquery', 'excel', 'form', 'layer', 'laydate'], function(){
+            var form = layui.form,
+                // 获取layui的表单模块
+                $ = layui.jquery,
+                // 获取jQuery模块
+                laydate = layui.laydate;
+            // 获取layui的日期模块
+            var excel = parent.layui.excel;
+            // 获取父页面的excel模块
+
+            // 初始化日期选择器
+            laydate.render({
+                elem: '#start'
+                // 指定绑定的元素
+            });
 
-        //执行一个laydate实例
-        laydate.render({
-            elem: '#start' //指定元素
-        });
+            // 监听表单提交事件
+            form.on('submit(toolbarDemo)', function(){
+
+                // 发起AJAX请求导出班级列表
+                $.ajax({
+                    url: '/exportclasslist',
+                    // 请求的URL
+                    type: 'post',
+                    // 请求类型
+                    dataType: 'json',
+                    // 预期服务器返回的数据类型
+                    contentType: "application/json; charset=utf-8",
+                    // 发送信息至服务器时内容编码类型
+                    success: function (data) {
+                        // 请求成功后的回调函数
+                        console.log(data);
+                        // 在控制台打印服务器返回的数据
+
+                        // 1. 如果需要调整导出数据的顺序，请执行梳理函数
+                        var dt = excel.filterExportData(data, [
+                            'c_id',
+                            // ID列
+                            'c_classid',
+                            // 班级编号列
+                            'c_classname',
+                            // 班级名列
+                            'c_counsellor'
+                            // 辅导员列
+                        ]);
+
+                        // 2. 在数组头部新增表头
+                        dt.unshift({c_id: 'ID', c_classid: '班级编号', c_classname: '班级名', c_counsellor: '辅导员'});
+
+                        // 配置列宽，A列40px，B列60px(默认)，C列120px，D、E、F等均未定义
+                        var colConf = excel.makeColConfig({
+                            'C': 90,
+                            // C列宽度
+                            'D': 80
+                            // D列宽度
+                        }, 60);
+                        // 默认列宽
+
+                        var timestart = Date.now();
+                        // 记录开始时间
+                        // 3. 执行导出函数，系统会弹出保存文件的弹框
+                        excel.exportExcel({
+                            sheet1: dt
+                            // 数据
+                        }, '班级数据.xlsx', 'xlsx', {
+                            // 文件名和格式
+                            extend: {
+                                '!cols': colConf
+                                // 列配置
+                            }
+                        });
+                        var timeend = Date.now();
+                        // 记录结束时间
+
+                        var spent = (timeend - timestart) / 1000;
+                        // 计算耗时
+                        layer.alert('导出耗时 '+spent+' s');
+                        // 弹出提示框显示耗时
+                        //setTimeout(function () {window.location.href='/findAdmin';},2000); // 2秒后跳转页面，此行被注释掉了
+                    },
 
-        form.on('submit(toolbarDemo)', function(){
-
-            $.ajax({
-                url: '/exportclasslist',
-                type: 'post',
-                dataType: 'json',
-                contentType: "application/json; charset=utf-8",
-                success: function (data) {
-                    console.log(data);
-
-                    // 1. 如果需要调整顺序，请执行梳理函数
-                    var dt = excel.filterExportData(data, [
-                        'c_id'
-                        ,'c_classid'
-                        ,'c_classname'
-                        ,'c_counsellor'
-                    ]);
-
-                    // 2. 数组头部新增表头
-                    dt.unshift({c_id: 'ID', c_classid: '班级编号', c_classname: '班级名', c_counsellor: '辅导员'});
-
-                    // 意思是：A列40px，B列60px(默认)，C列120px，D、E、F等均未定义
-                    var colConf = excel.makeColConfig({
-                        'C': 90,
-                        'D': 80
-                    }, 60);
-
-                    var timestart = Date.now();
-                    // 3. 执行导出函数，系统会弹出弹框
-                    excel.exportExcel({
-                        sheet1: dt
-                    }, '班级数据.xlsx', 'xlsx', {
-                        extend: {
-                            '!cols': colConf
-                        }
-                    });
-                    var timeend = Date.now();
-
-                    var spent = (timeend - timestart) / 1000;
-                    layer.alert('导出耗时 '+spent+' s');
-                    //setTimeout(function () {window.location.href='/findAdmin';},2000);
-                },
-
-                error: function () {
-                    //console.log(data);
-                    setTimeout(function () {window.location.href='/findClass';},2000);
-                }
+                    error: function () {
+                        // 请求失败后的回调函数
+                        //console.log(data);
+                        // 在控制台打印错误信息，此行被注释掉了
+                        setTimeout(function () {window.location.href='/findClass';},2000); // 2秒后跳转到班级列表页面
+                    }
+                });
             });
         });
 
-        /*添加弹出框*/
+        /* 添加弹出框 */
+        // 当点击添加学生按钮时触发事件
         $("#addStudnetBtn").click(function () {
+            // 使用layer.open方法打开一个弹出层
             layer.open({
-                type:1,
-                title:"添加班级",
-                skin:"myclass",
-                area:["50%"],
-                anim:2,
-                content:$("#test").html()
+                type: 1,
+                // 类型为页面层
+                title: "添加班级",
+                // 弹出层标题
+                skin: "myclass",
+                // 自定义皮肤样式
+                area: ["50%"],
+                // 弹出层宽高，这里只设置了宽度为50%
+                anim: 2,
+                // 弹出动画效果
+                content: $("#test").html()
+                // 弹出层内容，这里是获取id为test的元素的HTML内容
             });
+            // 重置表单
             $("#addEmployeeForm")[0].reset();
+            // 监听表单提交事件
             form.on('submit(formDemo)', function(data) {
+                // 弹出消息提示，这里被注释掉了
                 // layer.msg('aaa',{icon:1,time:3000});
-                var param=data.field;
+                var param = data.field;
+                // 获取表单数据
                 // console.log(JSON.stringify(param));
+                // 打印表单数据，这里被注释掉了
+                // 发起AJAX请求添加班级
                 $.ajax({
                     url: '/addClass',
+                    // 请求URL
                     type: "post",
-                    data:JSON.stringify(param),
+                    // 请求类型
+                    data: JSON.stringify(param),
+                    // 发送的数据，转换为JSON字符串
                     contentType: "application/json; charset=utf-8",
-                    success:function(){
-                            layer.msg('添加成功', {icon: 1, time: 3000});
-                            setTimeout(function () {window.location.href='/findClass';},2000);
-
+                    // 发送数据的类型
+                    success: function() {
+                        // 请求成功回调函数
+                        layer.msg('添加成功', {icon: 1, time: 3000});
+                        // 弹出成功消息
+                        setTimeout(function () {window.location.href='/findClass';},2000);
+                        // 2秒后跳转到班级列表页面
                     },
-                    error:function(){
+                    error: function() {
+                        // 请求失败回调函数
                         layer.msg('添加失败',{icon:0,time:3000});
+                        // 弹出失败消息
                         setTimeout(function () {window.location.href='/findClass';},2000);
+                        // 2秒后跳转到班级列表页面
                     }
                 });
+                // 阻止表单默认提交行为
                 // return false;
             });
         });
 
-    });
-
-
-    /*删除*/
-    function member_del(obj,c_id){
-        layer.confirm('确认要删除吗？',function(index){
-            //发异步删除数据
-           $.get("/deleteClass",{"c_id":c_id},function (data) {
-                if(data =true){
-                    layer.msg('删除成功!',{icon:1,time:2000});
-                  setTimeout(function () {window.location.href='/findClass';},2000);
-
-                }else {
-                    layer.msg('删除失败!',{icon:1,time:2000});
-                    setTimeout(function () {window.location.href='/findClass';},2000);
-                }
+        // 删除班级的函数
+        function member_del(obj, c_id) {
+            // 弹出确认框
+            layer.confirm('确认要删除吗？', function(index) {
+                // 发起GET请求删除班级
+                $.get("/deleteClass", {"c_id": c_id}, function (data) {
+                    if(data === true) {
+                        // 如果删除成功
+                        layer.msg('删除成功!', {icon: 1, time: 2000});
+                        // 弹出成功消息
+                        setTimeout(function () {window.location.href='/findClass';},2000);
+                        // 2秒后跳转到班级列表页面
+                    } else {
+                        // 如果删除失败
+                        layer.msg('删除失败!', {icon: 1, time: 2000});
+                        // 弹出失败消息
+                        setTimeout(function () {window.location.href='/findClass';},2000); // 2秒后跳转到班级列表页面
+                    }
+                });
+                // 关闭确认框
+                layer.close(index);
             });
-        });
-    }
+        }
+
 
-</script>
+    </script>
 
 
 </body>
