对webapp进行了修改

src/test/java/com/inks/hb/common/MD5Test.java

@@ -4,13 +4,23 @@ import org.junit.Test;
 
 import static org.junit.Assert.*;
 
+// 定义MD5Test类，用于对MD5相关功能进行测试
 public class MD5Test {
+    // 创建一个MD5类的实例，用于后续调用MD5相关的方法，
+    // 这里假设MD5类已经在相应的包下正确定义并有对应的功能实现
     private MD5 md5 = new MD5();
 
+    // 使用@Test注解标记该方法为一个JUnit测试方法，JUnit会识别并执行这个方法来进行测试
     @Test
     public void checkMD5() {
+        // 调用md5实例的getMD5方法，传入字符串"toor"，获取其MD5加密后的结果，
+        // 并将结果存储在变量a中，这里假设getMD5方法会返回对应的MD5加密字符串
         String a = md5.getMD5("toor");
+        // 打印出变量a的值，也就是"toor"字符串经过MD5加密后的结果，方便查看加密后的字符串样式
         System.out.println(a);
-        System.out.println(md5.checkMD5("toor",a));
+        // 调用md5实例的checkMD5方法，传入原始字符串"toor"以及加密后的字符串a，
+        // 该方法可能用于验证给定的原始字符串通过MD5加密后是否与传入的加密字符串匹配，
+        // 并打印出验证结果，结果应该是一个布尔值（true或false）
+        System.out.println(md5.checkMD5("toor", a));
     }
 }

src/test/java/com/inks/hb/floorinfo/dao/FloorInfoDaoTest.java

@@ -5,16 +5,27 @@ import org.junit.Test;
 
 import static org.junit.Assert.*;
 
+// 定义FloorInfoDaoTest类，用于对FloorInfoDao相关功能进行测试，一般来说这类测试类遵循单元测试的规范来编写
 public class FloorInfoDaoTest {
+    // 使用@Test注解标记该方法为JUnit测试方法，JUnit框架在执行测试时会识别并运行这个带注解的方法，
+    // 以此来验证被测试方法（这里是insertData方法）的功能是否符合预期
     @Test
     public void insertData() throws Exception {
+        // 创建FloorInfoDao类的实例，该类应该是用于操作数据库中与FloorInfo相关的数据（比如插入、查询等操作），
+        // 此处假设FloorInfoDao类已经在对应的包下正确定义，并且提供了相应的数据操作方法
         FloorInfoDao dao = new FloorInfoDao();
         FloorInfo floorInfo;
+        // 开启一个循环，循环次数为100次，目的可能是向数据库中批量插入100条FloorInfo相关的数据记录，
+        // 这里的循环变量i在每次循环中可能会作为生成FloorInfo对象的部分参数使用（比如作为唯一标识等）
         for (int i = 0; i < 100; i++) {
+            // 创建一个FloorInfo类的实例，通过构造函数传入当前循环的索引i以及固定字符串"123546"作为参数，
+            // 这里假设FloorInfo类的构造函数接受这些参数来初始化FloorInfo对象的相关属性，
+            // 具体属性和构造函数的定义取决于FloorInfo类的实现，该对象可能包含了要插入数据库的楼层信息等数据
             floorInfo = new FloorInfo(i, "123546");
+            // 调用dao实例的insertData方法，将刚创建的floorInfo对象作为参数传入，
+            // 目的是通过FloorInfoDao类中实现的insertData方法将该楼层信息对象插入到数据库中，
+            // 前提是insertData方法正确实现了数据库插入的相关逻辑（比如构建SQL语句、执行插入操作等）
             dao.insertData(floorInfo);
-
         }
     }
-
 }

src/test/java/com/inks/hb/login/service/LoginServiceImplTest.java

@@ -5,37 +5,60 @@ import org.junit.Test;
 
 import static org.junit.Assert.*;
 
+// 定义LoginServiceImplTest类，该类用于对LoginServiceImpl类提供的各个业务方法进行单元测试，
+// 以验证这些方法的功能是否符合预期，遵循JUnit测试框架的规范来编写
 public class LoginServiceImplTest {
 
+    // 使用@Test注解标记该方法为JUnit测试方法，理论上这个方法应该是用于测试LoginServiceImpl类中
+    // queryByName方法的功能，但目前方法体为空，可能后续需要补充具体的测试逻辑，比如调用被测试方法、
+    // 验证返回结果等
     @Test
     public void queryByName() {
     }
 
+    // 同样使用@Test注解标记此方法为JUnit测试方法，推测是用来测试LoginServiceImpl类里的queryLogin方法，
+    // 不过当前方法体没有具体实现测试内容，后续应完善相应的测试步骤，像传入合适参数调用方法并校验返回值等
     @Test
     public void queryLogin() {
     }
 
+    // 此方法也是一个JUnit测试方法，用于测试LoginServiceImpl类中的insertLogin方法，该方法的功能可能是向数据库或其他存储介质中
+    // 插入一条登录相关的记录（由Login对象表示），下面的代码实现了创建一个Login对象并调用insertLogin方法插入数据以及打印返回结果的逻辑
     @Test
     public void insertLogin() {
-
-        Login login = new Login("admin","123456","测试账户");
-
+        // 创建一个Login类的实例，通过Login类的构造函数传入用户名"admin"、密码"123456"以及账户描述"测试账户"作为参数，
+        // 这里假设Login类的构造函数按照这样的参数顺序来初始化Login对象的相关属性，比如用户名、密码和账户备注等属性，
+        // 该对象代表了一条登录相关的用户信息记录
+        Login login = new Login("admin", "123456", "测试账户");
+        // 创建LoginServiceImpl类的实例，并调用其insertLogin方法，将前面创建好的login对象作为参数传入，
+        // 目的是通过LoginServiceImpl类实现的insertLogin方法将这条登录信息插入到相应的存储位置（如数据库表中），
+        // 该方法会返回一个整型值（可能表示插入操作的结果状态码，比如1表示成功，0表示失败等），并将返回值存储在变量code中
         int code = new LoginServiceImpl().insertLogin(login);
+        // 打印输出插入操作返回的结果状态码，方便查看插入操作是否成功执行，在实际测试中可以根据这个输出进一步判断功能是否符合预期
         System.out.println("code: " + code);
     }
 
+    // 使用@Test注解标记的JUnit测试方法，应该是用于测试LoginServiceImpl类中的deleteLogin方法，
+    // 此方法目前方法体为空，可能后续需要添加代码来模拟删除登录相关记录的操作并验证删除操作是否成功等测试逻辑
     @Test
     public void deleteLogin() {
     }
 
+    // 同样是一个JUnit测试方法，用于测试LoginServiceImpl类里的updateLogin方法，不过当前没有具体的测试代码实现，
+    // 一般来说需要补充调用updateLogin方法并验证更新后的结果是否符合预期等相关测试逻辑，比如传入更新后的Login对象，
+    // 检查对应的存储数据是否被正确修改等
     @Test
     public void updateLogin() {
     }
 
+    // 又是一个被@Test注解标记的JUnit测试方法，推测是用来测试LoginServiceImpl类中的query方法，
+    // 目前方法体为空，后续需完善相应的测试内容，例如传入合适的查询条件调用query方法，然后对返回的查询结果进行校验等操作
     @Test
     public void query() {
     }
 
+    // 此为JUnit测试方法，目的应该是测试LoginServiceImpl类中的queryLoginNum方法，
+    // 当前方法体没有具体实现，后续可补充调用该方法获取登录数量相关数据并验证返回值是否正确等测试逻辑
     @Test
     public void queryLoginNum() {
     }

src/test/java/com/inks/hb/orderinfo/dao/OrderInfoDaoTest.java

@@ -12,37 +12,71 @@ import java.util.ArrayList;
 
 import static org.junit.Assert.*;
 
+// 定义OrderInfoDaoTest类，用于对OrderInfoDao类中相关方法进行单元测试，
+// 以此来验证这些方法在操作订单信息相关数据时功能是否正确，符合预期的业务逻辑
 public class OrderInfoDaoTest {
 
+    // 创建OrderInfoDao类的实例，该类应该是负责与数据库等存储介质进行交互，
+    // 实现对订单信息（OrderInfo）相关的数据操作，比如插入、查询等功能，这里先实例化以便后续调用其方法进行测试
     OrderInfoDao dao = new OrderInfoDao();
+    // 创建RoomTypeDao类的实例，这个类大概率是用于操作房间类型（RoomType）相关数据的，
+    // 例如从数据库中查询、更新房间类型信息等，在后续处理订单信息时可能会关联到房间类型数据，所以进行实例化
     RoomTypeDao roomTypeDao = new RoomTypeDao();
+    // 实例化LoginDao类，它应该是用于处理登录（Login）相关数据操作的类，比如查询登录用户信息等，
+    // 在订单信息处理中可能需要关联登录用户信息，因此创建该实例
     LoginDao loginDao = new LoginDao();
 
+    // 使用@Test注解标记该方法为JUnit测试方法，目的是测试OrderInfoDao类中的insertData方法，
+    // 该方法可能用于将一条订单信息数据插入到数据库等存储位置中，下面是具体的测试逻辑代码
     @Test
     public void insertData() throws Exception {
-
+        // 创建一个OrderInfo类的实例，该类应该用于表示订单信息，不过这里创建时没有传入初始参数，
+        // 后续会通过相应的set方法来设置其各个属性的值，以此构造完整的订单信息对象
         OrderInfo orderInfo = new OrderInfo();
+        // 调用roomTypeDao的queryName方法，传入参数"123"，尝试从数据库或其他存储中查询名称为"123"的房间类型信息，
+        // 并将查询结果（一个RoomType对象）赋值给roomType变量，该对象包含了对应的房间类型相关属性，如房间类型名称、价格等
         RoomType roomType = roomTypeDao.queryName("123");
-        Login login = (Login) loginDao.query(new Login("root",""));
+        // 调用loginDao的query方法，传入一个Login对象（这里使用Login类的构造函数创建了一个用户名是"root"，密码为空的Login对象）作为查询条件，
+        // 该方法可能是根据传入的Login对象的相关属性（如用户名、密码等）在数据库中查找对应的登录用户信息，
+        // 并将查询结果（也是一个Login对象，包含用户的详细信息）强制转换后赋值给login变量，然后打印出这个登录用户信息（用于查看查询结果是否符合预期）
+        Login login = (Login) loginDao.query(new Login("root", ""));
         System.out.println(login);
+        // 通过orderInfo对象的setTypeId方法，将前面查询到的房间类型信息（roomType对象）设置到订单信息对象中，
+        // 表示该订单关联的房间类型，建立订单信息与房间类型信息之间的关联关系
         orderInfo.setTypeId(roomType);
+        // 使用orderInfo对象的setOperatorId方法，把查询到的登录用户信息（login对象）设置为订单的操作者信息，
+        // 也就是确定该订单是由哪个用户操作产生的，同样是在构建订单信息对象各属性之间的关联关系
         orderInfo.setOperatorId(login);
+        // 通过orderInfo对象的setOrderId方法，设置订单的编号为"预定第3单"，进一步完善订单信息对象的属性内容
         orderInfo.setOrderId("预定第3单");
+        // 调用dao实例的insertData方法，将构造好的orderInfo订单信息对象作为参数传入，
+        // 目的是通过OrderInfoDao类中实现的insertData方法将这条完整的订单信息插入到相应的数据库表等存储介质中，
+        // 如果插入过程中出现问题，会根据方法签名抛出异常（这里方法声明抛出Exception，实际可能是更具体的数据库相关异常等）
         dao.insertData(orderInfo);
-
     }
 
+    // 使用@Test注解标记此方法为JUnit测试方法，推测是用于测试OrderInfoDao类中的queryOrder方法，
+    // 该方法可能是按照一定条件从数据库中查询订单信息，并返回一个包含多个OrderInfo对象的集合（ArrayList），
+    // 下面是具体的测试代码，包括调用方法、处理可能出现的异常以及遍历打印查询到的订单信息等操作
     @Test
-    public void queryOrder(){
+    public void queryOrder() {
+        // 声明一个ArrayList类型的变量list，用于存储查询到的订单信息（OrderInfo对象）集合，初始化为null，
+        // 后续会通过调用dao的queryOrder方法获取实际的订单信息列表并赋值给它
         ArrayList<OrderInfo> list = null;
         try {
-            list = dao.queryOrder(1,"测试");
+            // 调用dao实例的queryOrder方法，传入参数1和"测试"（具体含义取决于queryOrder方法的实现，可能是表示查询条件，
+            // 比如第一个参数是某种标识，第二个参数是模糊匹配的关键字等），尝试从数据库等存储中查询符合条件的订单信息，
+            // 并将查询结果（一个包含OrderInfo对象的ArrayList集合）赋值给list变量，如果查询过程中出现数据库相关的异常（SQLException），
+            // 则会进入catch块进行异常处理
+            list = dao.queryOrder(1, "测试");
+            // 遍历查询到的订单信息列表（list），对于其中的每一个OrderInfo对象（info），将其打印输出，
+            // 这样可以查看查询到的订单信息内容是否符合预期，便于验证queryOrder方法的查询结果是否正确
             for (OrderInfo info : list)
                 System.out.println(info);
         } catch (SQLException e) {
+            // 如果在调用queryOrder方法时出现SQLException异常（比如数据库连接问题、SQL语句执行错误等），
+            // 则会执行这个catch块中的代码，打印出异常的堆栈信息，方便排查问题所在，了解是哪里出现了错误导致查询失败
             e.printStackTrace();
         }
-
     }
-
 }

src/test/java/com/inks/hb/orderinfo/service/OrderInfoServiceImplTest.java

@@ -7,43 +7,67 @@ import java.util.ArrayList;
 
 import static org.junit.Assert.*;
 
+// 定义OrderInfoServiceImplTest类，该类用于对OrderInfoServiceImpl类所提供的各个业务方法进行单元测试，
+// 通过编写具体的测试逻辑来验证这些方法的功能是否符合预期，符合JUnit单元测试框架的使用规范
 public class OrderInfoServiceImplTest {
 
+    // 创建OrderInfoService接口的具体实现类OrderInfoServiceImpl的实例，
+    // 后续将通过这个实例调用相应的业务方法进行测试，这里假设OrderInfoServiceImpl类正确实现了OrderInfoService接口中定义的方法
     private OrderInfoService service = new OrderInfoServiceImpl();
 
+    // 使用@Test注解标记该方法为JUnit测试方法，推测此方法是用于测试OrderInfoServiceImpl类中实现的insertOrderInfo方法，
+    // 不过当前方法体为空，可能后续需要补充具体的测试逻辑，比如传入合适的参数调用insertOrderInfo方法并验证插入操作是否成功等
     @Test
     public void insertOrderInfo() {
     }
 
+    // 同样使用@Test注解标记此方法为JUnit测试方法，目的应该是测试OrderInfoServiceImpl类里的deleteOrderInfo方法，
+    // 目前方法体没有具体的测试代码实现，后续可添加相应的测试逻辑，例如传入要删除的订单相关参数调用deleteOrderInfo方法，
+    // 然后检查对应的订单是否在存储中被正确删除等操作来验证方法功能
     @Test
     public void deleteOrderInfo() {
     }
 
+    // 此方法也是被@Test注解标记的JUnit测试方法，大概率是用来测试OrderInfoServiceImpl类中的updateOrderInfo方法，
+    // 不过现在方法体为空，需要后续完善相关测试内容，像传入更新后的订单信息参数调用updateOrderInfo方法，
+    // 再验证订单信息在存储中的对应数据是否被准确更新等逻辑，以此判断方法的正确性
     @Test
     public void updateOrderInfo() {
     }
 
+    // 这是一个JUnit测试方法，用于测试OrderInfoServiceImpl类中的query方法，
+    // 该方法可能是按照给定的参数从存储（如数据库）中查询符合条件的订单信息列表，下面是具体的测试逻辑代码
     @Test
     public void query() {
-
-        ArrayList<OrderInfo> list = service.query(1,50);
-
+        // 通过service实例调用query方法，传入参数1和50（具体含义取决于query方法的实现，可能是表示查询的起始位置和数量限制等条件），
+        // 尝试获取符合这些条件的订单信息列表，并将返回的包含OrderInfo对象的ArrayList集合赋值给list变量，
+        // 以便后续对查询到的订单信息进行遍历等操作来验证查询结果是否正确
+        ArrayList<OrderInfo> list = service.query(1, 50);
+        // 遍历查询得到的订单信息列表（list），对于其中的每一个OrderInfo对象（info），将其打印输出，
+        // 这样可以查看查询到的订单信息内容是否符合预期，从而判断query方法是否正确地查询并返回了期望的数据
         for (OrderInfo info : list) {
             System.out.println(info);
         }
-
     }
 
+    // 又是一个@Test注解标记的JUnit测试方法，推测用于测试OrderInfoServiceImpl类中的另一个名为query的重载方法（参数不同），
+    // 这里调用了该重载方法并传入一个字符串参数（"OD151254780333"，可能表示订单的唯一标识等），然后直接打印出方法的返回结果，
+    // 通过查看打印内容可以初步判断该查询方法是否按照预期返回了对应的订单信息（具体取决于该方法的业务逻辑实现）
     @Test
     public void query1() {
-
         System.out.println(service.query("OD151254780333"));
     }
 
+    // 使用@Test注解标记的JUnit测试方法，应该是用于测试OrderInfoServiceImpl类中的queryOrderInfoNum方法，
+    // 当前方法体没有具体实现测试逻辑，后续可补充相应代码，比如调用queryOrderInfoNum方法获取订单数量相关的数据，
+    // 再验证返回的数量值是否符合实际情况等操作，以此来检查该方法功能的正确性
     @Test
     public void queryOrderInfoNum() {
     }
 
+    // 此为JUnit测试方法，目的大概是测试OrderInfoServiceImpl类中的queryRepeat方法，
+    // 目前方法体为空，后续需要添加具体的测试逻辑，例如传入合适的参数调用queryRepeat方法，
+    // 并根据业务需求验证返回结果是否正确，判断该方法是否准确实现了重复查询相关的功能（具体功能取决于业务定义）
     @Test
     public void queryRepeat() {
     }

src/webapp/index.jsp

@@ -1,13 +1,21 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- 这是JSP页面指令，用于设置该JSP页面的内容类型（text/html表示页面内容是HTML格式）以及字符编码为UTF-8，
+确保页面能够正确显示各种字符，比如中文等，避免出现乱码问题 -->
 <html>
 
-	<head>
-		<title>酒店管理系统</title>
-		<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
-	</head>
+<head>
+	<!-- 设置页面的标题为“酒店管理系统”，该标题通常会显示在浏览器的标题栏中，方便用户识别当前页面所属的系统 -->
+	<title>酒店管理系统</title>
+	<!-- 这行代码用于引入一个图标文件（这里是img目录下的windows.ico图标），设置为页面的图标（favicon），
+在浏览器的标签页、书签栏等地方会显示该图标，增强页面的辨识度和品牌感，rel属性表示关联关系，type属性指定图标文件的类型 -->
+	<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
+</head>
 
-	<body>
-		<jsp:forward page="login.jsp"></jsp:forward>
-	</body>
+<body>
+<!-- 使用JSP的内置动作标签<jsp:forward>，其作用是将当前请求转发到指定的页面（这里是login.jsp页面），
+意味着当访问当前这个JSP页面时，服务器会直接将请求转向到login.jsp页面进行后续处理，而不会渲染当前页面的其他内容，
+常用于页面跳转、根据不同条件引导用户到相应的登录、注册或其他功能页面等情况 -->
+<jsp:forward page="login.jsp"></jsp:forward>
+</body>
 
 </html>

src/webapp/insertLogin.jsp

@@ -1,24 +1,49 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面内容类型为text/html（即HTML格式页面），并指定字符编码为UTF-8，
+保证页面能正确显示各类字符，避免出现乱码情况 -->
 <html>
 
 <head>
+    <!-- 设置HTML页面的字符编码为utf-8，虽然前面JSP指令已经设置了编码，但这里在HTML部分再次声明，
+可以增强浏览器对页面字符编码的识别和处理，确保内容正确显示 -->
     <meta charset="utf-8">
+    <!-- 设置页面的标题为“注册账户”，此标题会显示在浏览器的标题栏中，让用户清楚当前页面的功能 -->
     <title>注册账户</title>
+    <!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（当前目录下的js/layui/css/layui.css），
+media="all"表示该样式适用于所有的媒体类型，也就是在各种设备上都应用此样式 -->
     <link rel="stylesheet" href="./js/layui/css/layui.css" media="all">
+    <!-- 引入Layui框架的JavaScript脚本文件（layui.js），该文件包含了Layui框架的各种功能实现，
+是后续使用Layui组件和功能的基础，路径为当前目录下的js/layui/layui.js -->
     <script src="./js/layui/layui.js"></script>
+    <!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
+方便简化JavaScript编程，这里的路径指向当前目录下的js/jquery.js -->
     <script src="./js/jquery.js"></script>
+    <!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了项目中通用的函数、变量或者其他自定义逻辑，
+路径为当前目录下的js/global.js -->
     <script src="./js/global.js"></script>
 </head>
 
 <body>
+<!-- 创建一个<fieldset>元素，用于对表单等相关元素进行分组显示，添加了Layui的样式类，设置了顶部外边距为10px，
+让页面布局更清晰美观 -->
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
+    <!-- 在<fieldset>内部使用<legend>元素来为分组设置标题，这里标题为“注册用户”，起到说明该分组内容的作用 -->
     <legend>注册用户</legend>
 </fieldset>
+<!-- 创建一个Layui风格的表单，通过class="layui-form"应用Layui的表单样式和相关交互功能，action属性为空，
+表示表单提交的地址暂未设置（后续可能通过JavaScript动态指定或者在服务器端进行统一处理等） -->
 <form class="layui-form" action="">
+    <!-- 创建一个Layui表单项目（layui-form-item），用于组织表单内的各个输入元素等内容，使得表单结构更清晰 -->
     <div class="layui-form-item">
+        <!-- 创建一个内联的布局容器（layui-inline），方便在一行内放置多个表单元素，实现更灵活的布局 -->
         <div class="layui-inline">
+            <!-- 创建一个表单标签元素（layui-form-label），用于显示对应输入框的说明文字，这里显示“账户名” -->
             <label class="layui-form-label">账户名</label>
+            <!-- 创建一个内联的输入框容器（layui-input-inline），用于放置具体的输入框元素 -->
             <div class="layui-input-inline">
+                <!-- 创建一个文本输入框（input type="text"），设置了输入框的名称（name="loginName"）用于表单提交时传递参数，
+lay-verify属性指定了验证规则（这里要求必须输入且符合自定义的inputName规则），autocomplete="off"关闭浏览器的自动完成功能，
+placeholder属性设置了输入框的占位提示文字“您登录所需的账户”，同时应用了Layui的输入框样式类（layui-input） -->
                 <input type="text" name="loginName" lay-verify="required|inputName" autocomplete="off"
                        placeholder="您登录所需的账户" class="layui-input">
             </div>
@@ -28,6 +53,8 @@
         <div class="layui-inline">
             <label class="layui-form-label">密码</label>
             <div class="layui-input-inline">
+                <!-- 创建一个密码输入框（input type="password"），设置名称为“loginPwd”，指定了验证规则（required|inputPwd），
+关闭自动完成功能，设置占位提示文字“您登录所需的密码”，应用Layui输入框样式，并且给该输入框设置了id为“pwd1”，方便后续在JavaScript中通过id获取其值 -->
                 <input type="password" name="loginPwd" id="pwd1" lay-verify="required|inputPwd" autocomplete="off"
                        placeholder="您登录所需的密码" class="layui-input">
             </div>
@@ -37,6 +64,8 @@
         <div class="layui-inline">
             <label class="layui-form-label">确认密码</label>
             <div class="layui-input-inline">
+                <!-- 创建另一个密码输入框，用于用户再次输入密码进行确认，设置了验证规则，关闭自动完成，设置占位提示文字，
+同样应用Layui样式，其id为“pwd2”，方便后续与前面输入的密码进行比较验证 -->
                 <input type="password"  id="pwd2" lay-verify="required|inputPwd" autocomplete="off"
                        placeholder="重复你所输入的密码" class="layui-input">
             </div>
@@ -53,57 +82,86 @@
     </div>
     <div class="layui-form-item">
         <div class="layui-input-block">
+            <!-- 创建一个Layui风格的按钮（layui-btn），设置了lay-submit属性表示该按钮用于触发表单提交操作，
+lay-filter属性指定了一个过滤器名称（insertRome），用于在JavaScript中监听该按钮的提交事件，按钮文字为“注册” -->
             <button class="layui-btn" lay-submit lay-filter="insertRome">注册</button>
+            <!-- 创建一个重置按钮（type="reset"），样式为Layui的默认按钮样式（layui-btn layui-btn-primary），
+点击该按钮可将表单内的输入框等元素恢复到初始状态 -->
             <button type="reset" class="layui-btn layui-btn-primary">重置</button>
         </div>
     </div>
 </form>
 
 <script>
+    // 使用Layui框架的模块加载机制，加载['form', 'layedit', 'laydate']这几个模块，
+    // 并在加载完成后执行回调函数，在回调函数内可以使用这些模块提供的功能，
+    // 这里主要是使用form模块来处理表单相关操作，layer模块用于弹出提示框等交互功能
     layui.use(['form', 'layedit', 'laydate'], function () {
         var form = layui.form,
             layer = layui.layer;
 
-        //自定义验证规则
+        // 自定义验证规则，通过form.verify方法来定义，下面分别针对inputName和inputPwd规则进行具体的验证逻辑设置
         form.verify({
             inputName: function (value) {
+                // 验证账户名长度，如果输入的字符长度小于4个字符，返回错误提示信息“账户至少4个字符”，
+                // 阻止表单提交，提示用户输入符合要求长度的账户名
                 if (value.length < 4) {
                     return '账户至少4个字符';
                 }
 
+                // 如果输入的字符长度大于10个字符，返回错误提示信息“账户至多10个字符”，同样阻止表单提交，
+                // 要求用户输入合理长度的账户名
                 if (value.length > 10) {
                     return '账户至多10个字符'
                 }
             },
             inputPwd: function (value) {
+                // 验证密码长度，当输入的密码字符长度小于4个字符时，返回“密码至少4个字符”的提示信息，
+                // 让用户知晓密码长度不符合要求，无法提交表单
                 if (value.length < 4) {
                     return '密码至少4个字符';
                 }
 
+                // 如果密码字符长度大于18个字符，返回“密码至多18个字符”的提示信息，提醒用户修改密码长度，
+                // 只有密码长度符合要求才能进行后续的表单提交操作
                 if (value.length > 18) {
                     return '密码至多18个字符'
                 }
             }
         });
 
-        //监听提交
+        // 监听表单的提交事件，通过form.on方法监听指定过滤器（lay-filter="insertRome"）对应的提交操作，
+        // 当点击注册按钮（触发提交且符合验证规则）时，会执行这个回调函数，data参数包含了表单提交的数据等相关信息
         form.on('submit(insertRome)', function (data) {
 
+            // 通过jQuery选择器（$("#pwd1")）获取id为“pwd1”的密码输入框元素，并获取其输入的值，存储在变量pwd1中，
+            // 该值为用户第一次输入的密码
             var pwd1 = $("#pwd1").val();
+            // 同样的方式获取id为“pwd2”的密码输入框元素的值，存储在变量pwd2中，用于和pwd1进行比较验证
             var pwd2 = $("#pwd2").val();
 
-            if (pwd1 != pwd2) {
+            // 比较两次输入的密码是否一致，如果不一致，通过layer.msg方法弹出提示框，显示“二次密码验证不一致”的提示信息，
+            // 告知用户需要重新输入密码，确保两次密码相同才能进行注册操作
+            if (pwd1!= pwd2) {
                 layer.msg("二次密码验证不一致");
             } else {
-
+                // 如果两次密码一致，使用jQuery的$.post方法进行异步POST请求，向服务器端发送数据，
+                // baseUrl + '/InsertLoginServlet'是请求的URL地址（baseUrl可能是在全局变量中定义的基础地址，
+                // InsertLoginServlet应该是服务器端用于处理注册逻辑的Servlet等程序），
+                // JSON.stringify(data.field)将表单提交的数据（经过Layui处理后的字段数据）转换为JSON字符串格式发送给服务器，
+                // 最后在请求成功的回调函数中根据服务器返回的code值进行不同的提示处理
                 $.post(baseUrl + '/InsertLoginServlet', JSON.stringify(data.field), function (code) {
                     if (code === 1) {
+                        // 如果服务器返回的code值为1，表示注册成功，通过layer.alert方法弹出一个提示框，
+                        // 设置标题为“成功”，图标为6（表示成功的图标样式），动画效果为5，告知用户注册成功
                         layer.alert('注册成功！', {
                             title: '成功',
                             icon: 6,
                             anim: 5
                         });
                     } else {
+                        // 如果服务器返回的code值不为1，表示注册失败，同样弹出提示框，设置标题为“异常”，图标为5（表示失败的图标样式），
+                        // 动画效果为6，向用户提示注册失败的信息，让用户知晓操作未成功
                         layer.alert('注册失败！', {
                             title: '异常',
                             icon: 5,
@@ -113,6 +171,8 @@
                 });
             }
 
+            // 返回false，表示阻止表单的默认提交行为，因为这里通过异步请求（$.post）已经自行处理了提交相关的数据交互，
+            // 不需要浏览器再进行默认的表单提交刷新页面等操作
             return false;
         });
     });

src/webapp/js/getTime.js

@@ -1,12 +1,19 @@
 function getTime() {
+	// 定义一个名为getTime的函数，用于获取当前时间并按照特定格式进行拼接返回，该函数无参数传入
 	var date = new Date();
+	// 创建一个Date对象，用于获取当前的日期和时间信息，调用Date构造函数时如果不传参数，则默认获取当前系统时间
 	var month = date.getMonth() + 1;
+	// 通过Date对象的getMonth方法获取当前月份（返回值是0 - 11，0代表1月，11代表12月），所以这里需要加1来得到实际的月份数字（1 - 12），并将其赋值给变量month
 	var strDate = date.getDate();
+	// 通过Date对象的getDate方法获取当前日期（返回值是1 - 31，代表一个月中的第几天），将其赋值给变量strDate
 	if(month >= 1 && month <= 9) {
+		// 判断获取到的月份数字是否在1 - 9之间，如果是，则执行下面的代码块，目的是在月份数字前补0，使其格式统一为两位数字（例如1月表示为“01”）
 		month = "0" + month;
 	}
 	if(strDate >= 0 && strDate <= 9) {
+		// 判断获取到的日期数字是否在0 - 9之间，如果是，则执行下面的代码块，同样是为了在日期数字前补0，使其格式统一为两位数字（例如5号表示为“05”）
 		strDate = "0" + strDate;
 	}
 	return date.getFullYear() + month + strDate + date.getHours() + date.getMinutes() + date.getSeconds();
+	// 将当前年份（通过Date对象的getFullYear方法获取）、处理后的月份（month）、处理后的日期（strDate）以及当前的小时数（通过getHours方法获取）、分钟数（通过getMinutes方法获取）、秒数（通过getSeconds方法获取）拼接成一个字符串并返回，最终得到的字符串格式类似“20241218103020”（代表2024年12月18日10时30分20秒）
 }

src/webapp/login.jsp

@@ -1,141 +1,211 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置该页面的内容类型为text/html（表示是HTML格式页面），字符编码为UTF-8，
+确保页面能够正确显示各种字符，避免出现乱码问题 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<title>酒店管理系统</title>
-		<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
-		<link rel="stylesheet" type="text/css" href="css/login/register-login.css">
-		<script src="./js/global.js"></script>
-	</head>
-
-	<body>
-
-		<div id="box"></div>
-
-		<!--主栏-->
-		<div class="cent-box">
-			<!--标题-->
-			<div class="cent-box-header">
-				<h1 class="main-title">HotelBook</h1>
-				<h2 class="sub-title">酒店管理系统</h2>
-			</div>
-
-			<div class="cont-main clearfix">
-
-				<!--登录区域开始-->
-				<div class="login form">
-					<!--文本输入框-->
-					<div class="group">
-						<!--用户名输入框-->
-						<div class="group-ipt loginName">
-							<input type="text" name="loginName" id="loginName" class="ipt" placeholder="输入您的用户名" required>
-						</div>
-						<!--密码输入框-->
-						<div class="group-ipt loginPwd">
-							<input type="password" name="loginPwd" id="loginPwd" class="ipt" placeholder="输入您的登录密码" required>
-						</div>
-					</div>
-					<!--登录按钮-->
-					<div class="button" id="btnLogin">
-						<button type="submit" class="login-btn register-btn button" id="embed-submit">登录</button>
-					</div>
+<head>
+	<!-- 设置HTML页面自身的字符编码为utf-8，再次强调页面的字符编码规范，有助于浏览器准确解析页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户明确当前页面所属的系统或功能 -->
+	<title>酒店管理系统</title>
+	<!-- 引入一个图标文件（img目录下的windows.ico）作为页面的图标（favicon），用于在浏览器的标签页、书签栏等地方显示，
+rel属性表示关联关系（这里表示图标关联），type属性指定图标文件的类型 -->
+	<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
+	<!-- 引入外部样式表文件（register-login.css），用于定义页面的样式，该文件位于css/login目录下，
+type="text/css"明确了样式表的文本/css类型 -->
+	<link rel="stylesheet" type="text/css" href="css/login/register-login.css">
+	<!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了项目中通用的函数、变量或者其他自定义逻辑，
+路径为当前目录下的js/global.js -->
+	<script src="./js/global.js"></script>
+</head>
+
+<body>
+<!-- 创建一个空的div元素，id为"box"，可能后续会通过JavaScript动态添加内容或者用于页面布局等用途 -->
+<div id="box"></div>
+
+<!-- 创建一个类名为"cent-box"的div元素，作为页面的主栏部分，用于组织页面主要内容，起到布局划分的作用 -->
+<div class="cent-box">
+	<!-- 创建一个类名为"cent-box-header"的div元素，用于放置标题相关内容，属于主栏内的标题区域 -->
+	<div class="cent-box-header">
+		<!-- 创建一个h1标题元素，应用类名"main-title"，显示主要标题"HotelBook"，通常是页面较为突出醒目的标题内容 -->
+		<h1 class="main-title">HotelBook</h1>
+		<!-- 创建一个h2标题元素，应用类名"sub-title"，显示副标题"酒店管理系统"，对主标题进行补充说明，进一步明确页面主题 -->
+		<h2 class="sub-title">酒店管理系统</h2>
+	</div>
+
+	<!-- 创建一个类名为"cont-main clearfix"的div元素，用于放置主要的内容区域，"clearfix"类可能用于清除浮动等布局相关的处理 -->
+	<div class="cont-main clearfix">
+
+		<!-- 开始登录区域的代码部分，创建一个类名为"login form"的div元素来划分登录相关的功能模块 -->
+		<div class="login form">
+			<!-- 创建一个类名为"group"的div元素，用于对文本输入框进行分组，方便布局和样式设置 -->
+			<div class="group">
+				<!-- 创建一个类名为"group-ipt loginName"的div元素，用于包裹用户名输入框，"loginName"类可能用于特定的样式设置或后续的JavaScript操作标识 -->
+				<div class="group-ipt loginName">
+					<!-- 创建一个文本输入框（input type="text"），设置名称（name）和id都为"loginName"，方便通过JavaScript获取其值和传递参数，
+应用类名"ipt"用于样式设置，placeholder属性设置了占位提示文字“输入您的用户名”，required属性表示该输入框为必填项 -->
+					<input type="text" name="loginName" id="loginName" class="ipt" placeholder="输入您的用户名" required>
 				</div>
-				<!--登录区域结束-->
-				<!--尾注-->
-				<div class="remember clearfix">
-					<label class="remember-me">
-                <a href="#">获取帮助</a>
-            </label>
-					<label class="forgot-password">
-                <a href="#">忘记密码？</a>
-            </label>
+				<!-- 创建一个类名为"group-ipt loginPwd"的div元素，用于包裹密码输入框，类似用户名输入框的设置逻辑 -->
+				<div class="group-ipt loginPwd">
+					<!-- 创建一个密码输入框（input type="password"），设置名称和id为"loginPwd"，应用"ipt"样式类，设置占位提示文字“输入您的登录密码”，
+同样为必填项 -->
+					<input type="password" name="loginPwd" id="loginPwd" class="ipt" placeholder="输入您的登录密码" required>
 				</div>
 			</div>
+			<!-- 创建一个类名为"button"，id为"btnLogin"的div元素，用于放置登录按钮相关内容，起到布局容器的作用 -->
+			<div class="button" id="btnLogin">
+				<!-- 创建一个按钮元素（button type="submit"），应用多个类名用于样式设置，id为"embed-submit"，按钮文字为“登录”，
+type="submit"表示点击该按钮会触发表单提交行为（虽然这里可能并不一定是传统表单提交，后续会通过JavaScript处理） -->
+				<button type="submit" class="login-btn register-btn button" id="embed-submit">登录</button>
+			</div>
 		</div>
-
-		<!--脚注-->
-		<div class="footer">
-			<p>© 2017
-				<a href="#">HotelBook System</a>
-			</p>
+		<!-- 登录区域结束 -->
+		<!-- 创建一个类名为"remember clearfix"的div元素，用于放置一些提示相关的内容，如获取帮助、忘记密码等链接，"clearfix"类用于布局处理 -->
+		<div class="remember clearfix">
+			<!-- 创建一个label元素，应用类名"remember-me"，里面包含一个超链接（a href="#"），文字为“获取帮助”，
+点击该链接可能会跳转到相应的帮助页面（这里href="#"表示暂时未设置具体链接地址） -->
+			<label class="remember-me">
+				<a href="#">获取帮助</a>
+			</label>
+			<!-- 类似地，创建另一个label元素，应用类名"forgot-password"，包含一个超链接，文字为“忘记密码？”，
+用于引导用户进行忘记密码相关的操作（同样暂时未设置具体链接地址） -->
+			<label class="forgot-password">
+				<a href="#">忘记密码？</a>
+			</label>
 		</div>
-
-		<script type="text/javascript" src="./js/login/particles.js"></script>
-		<script type="text/javascript" src="./js/login/background.js"></script>
-		<script type="text/javascript" src="./js/jquery.js"></script>
-		<script type="text/javascript" src="./js/layui/layui.js"></script>
-		<script type="text/javascript" src="./js/Cookie.js"></script>
-
-		//引入win10的api
-		<script type="text/javascript" src="MAIN/js/win10.child.js"></script>
-
-		<script>
-			//模块化调用layui
-			layui.use(['layer'], function() {
-				var layer = layui.layer;
-				$(document).ready(function() {
-					//alert("网页加载完毕");
-
-					//按钮点击事件
-					$('#btnLogin').click(function() {
-						//alert("按钮被点击");
-
-						loginName = $('#loginName').val();
-						var loginPwd = $('#loginPwd').val();
-						var params = "loginName=" + loginName + "&loginPwd=" + loginPwd;
-
-						if(loginName === "")
-							layer.tips("请输入用户名", "#loginName"); //layer.tips(“string","#吸附容器")
-						else if(loginPwd === "")
-							layer.tips("请输入密码", "#loginPwd");
+	</div>
+</div>
+
+<!-- 创建一个类名为"footer"的div元素，作为页面的脚注部分，用于显示版权等相关信息 -->
+<div class="footer">
+	<!-- 创建一个p段落元素，显示版权信息“© 2017”以及一个超链接（a href="#"），文字为“HotelBook System”，
+这里同样href="#"暂时未设置具体跳转地址，可能用于指向系统相关介绍等页面 -->
+	<p>© 2017
+		<a href="#">HotelBook System</a>
+	</p>
+</div>
+
+<!-- 引入particles.js文件，该文件可能用于实现页面上的粒子效果等特效相关的JavaScript功能，路径为js/login目录下 -->
+<script type="text/javascript" src="./js/login/particles.js"></script>
+<!-- 引入background.js文件，可能用于设置页面背景相关的JavaScript逻辑，同样位于js/login目录下 -->
+<script type="text/javascript" src="./js/login/background.js"></script>
+<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），方便后续进行DOM操作、事件处理以及AJAX交互等，路径为当前目录下的js/jquery.js -->
+<script type="text/javascript" src="./js/jquery.js"></script>
+<!-- 引入Layui框架的JavaScript脚本文件（layui.js），用于使用Layui框架提供的各种组件和功能，如弹出提示框、表单验证等，
+位于js/layui目录下 -->
+<script type="text/javascript" src="./js/layui/layui.js"></script>
+<!-- 引入Cookie.js文件，可能用于处理浏览器Cookie相关的操作，比如设置、获取、删除Cookie等功能，路径为当前目录下的js/Cookie.js -->
+<script type="text/javascript" src="./js/Cookie.js"></script>
+
+<!-- 引入win10.child.js文件，从注释看是用于引入win10的相关API，文件路径为MAIN/js目录下，
+这里可能是要在网页中使用一些特定的类似Windows 10系统风格的功能或交互逻辑（具体取决于该文件内容） -->
+<script type="text/javascript" src="MAIN/js/win10.child.js"></script>
+
+<script>
+	// 使用Layui框架的模块加载机制，加载['layer']模块，在加载完成后执行回调函数，
+	// 在回调函数内可以使用layer模块提供的功能，如弹出提示框等交互操作
+	layui.use(['layer'], function() {
+		var layer = layui.layer;
+		// 当DOM结构加载完成后（即整个HTML页面的元素都已解析完毕），执行以下函数内的代码，
+		// 相当于jQuery中的$(document).ready()函数的作用，确保在操作页面元素时它们已经存在
+		$(document).ready(function() {
+			// 这行代码原本是弹出一个提示框显示“网页加载完毕”，可能用于测试或者调试目的，
+			// 实际应用中如果不需要这样的提示可以注释掉或者删除
+			//alert("网页加载完毕");
+
+			// 为id为"btnLogin"的元素（即前面定义的登录按钮所在的div元素）绑定点击事件，
+			// 当按钮被点击时，会执行下面的回调函数内的代码
+			$('#btnLogin').click(function() {
+				// 这行代码原本也是弹出提示框显示“按钮被点击”，同样可用于测试或调试，
+				// 实际中可按需保留或去除
+				//alert("按钮被点击");
+
+				// 通过jQuery选择器（$('#loginName')）获取id为"loginName"的用户名输入框元素的值，
+				// 并将其存储在变量loginName中（这里没有使用var声明，可能是在外部有声明或者处于全局作用域，
+				// 不过更规范的做法建议加上var声明局部变量）
+				loginName = $('#loginName').val();
+				// 同样的方式获取id为"loginPwd"的密码输入框元素的值，存储在变量loginPwd中
+				var loginPwd = $('#loginPwd').val();
+				// 拼接一个字符串形式的参数，格式为"loginName=用户名值&loginPwd=密码值"，
+				// 用于后续发送AJAX请求时传递用户名和密码数据（这种拼接方式相对简单，实际应用中如果参数复杂可考虑使用更专业的参数序列化方式）
+				var params = "loginName=" + loginName + "&loginPwd=" + loginPwd;
+
+				// 判断用户名输入框的值是否为空，如果为空，通过layer.tips方法在用户名输入框（"#loginName"为选择器）旁边弹出提示框，
+				// 显示“请输入用户名”的提示信息，引导用户输入用户名
+				if(loginName === "")
+					layer.tips("请输入用户名", "#loginName"); //layer.tips(“string","#吸附容器")
+						// 判断密码输入框的值是否为空，如果为空，通过layer.tips方法在密码输入框（"#loginPwd"为选择器）旁边弹出提示框，
+				// 显示“请输入密码”的提示信息，提醒用户输入密码
+				else if(loginPwd === "")
+					layer.tips("请输入密码", "#loginPwd");
+				else {
+					// 使用jQuery的$.post方法发起一个异步POST请求，向服务器端的baseUrl + '/QueryLoginNameServlet'地址发送数据，
+					// baseUrl可能是在全局变量中定义的基础地址，QueryLoginNameServlet应该是服务器端用于处理用户名验证逻辑的Servlet等程序，
+					// params是前面拼接好的包含用户名和密码的参数，在请求成功的回调函数中根据服务器返回的数据（data）进行不同的处理
+					$.post(baseUrl + '/QueryLoginNameServlet', params, function(data) {
+						if(data === '-1')
+								// 如果服务器返回的数据为'-1'，表示用户名不存在，通过layer.msg方法弹出一个提示框，
+								// 设置动画效果为6，告知用户用户名不存在，提示用户检查输入的用户名是否正确
+							layer.msg("用户名不存在", {
+								anim: 6
+							});
+						else if(data === '0')
+								// 如果返回数据为'0'，表示密码不正确，同样弹出提示框，设置动画效果为6，提示用户密码输入有误，需要重新输入密码
+							layer.msg("密码不正确", {
+								anim: 6
+							});
 						else {
-							//发出ajax请求，调用后端功能
-							$.post(baseUrl + '/QueryLoginNameServlet', params, function(data) {
-								if(data === '-1')
-									layer.msg("用户名不存在", {
-										anim: 6
-									});
-								else if(data === '0')
-									layer.msg("密码不正确", {
-										anim: 6
-									});
-								else {
-									layer.msg('登录成功', {
-										icon: 16,
-										shade: 0.01
-									});
-
-									//根据写入的session值得到结果
-									$.post(baseUrl + '/QueryLoginInfoServlet', function(loginInfo) {
-
-										//数据返回样例
-										<%--{"loginId":1,"loginName":"root","loginPwd":"toor","loginNickName":"管理员","loginAdmin":0}--%>
-
-										//取值方法
-										var obj = JSON.parse(loginInfo);
-										//alert(obj.loginName);
-										//alert(obj.loginPwd);
-										//alert(obj.loginNickName);
-										//alert(obj.loginAdmin);
-
-										//设置cookie
-										setCookie("loginName", loginName);
-										setCookie("loginNickName", obj.loginNickName);
-										setCookie("loginAdmin", obj.loginAdmin);
-									});
-
-									setTimeout(function() {
-										location.href = 'MAIN/main.html';
-									}, 1000); //等待一段时间后跳入
-								}
+							// 如果返回的数据既不是'-1'也不是'0'，则认为登录成功，通过layer.msg方法弹出提示框，
+							// 设置图标为16（可能是表示成功的图标样式），阴影透明度为0.01，告知用户登录成功
+							layer.msg('登录成功', {
+								icon: 16,
+								shade: 0.01
 							});
-						}
-					}); //button
-				}); //jquery
-			}); //layui
-		</script>
 
-	</body>
+							// 再次发起一个异步POST请求，向服务器端的baseUrl + '/QueryLoginInfoServlet'地址发送请求，
+							// 该请求可能是用于获取登录用户的详细信息，在请求成功的回调函数中对返回的登录信息（loginInfo）进行处理
+							$.post(baseUrl + '/QueryLoginInfoServlet', function(loginInfo) {
+
+								// 以下几行代码是原本的注释内容，展示了服务器返回的登录信息数据的示例格式，
+								// 是一个JSON格式的字符串，包含了如登录ID、用户名、密码、昵称、管理员权限等信息，方便后续解析和使用数据时参考
+								// 数据返回样例
+								<%--{"loginId":1,"loginName":"root","loginPwd":"toor","loginNickName":"管理员","loginAdmin":0}--%>
+
+								// 通过JSON.parse方法将服务器返回的JSON格式的登录信息字符串（loginInfo）解析为JavaScript对象，
+								// 以便后续可以通过对象属性的方式获取具体的信息值，存储在变量obj中
+								var obj = JSON.parse(loginInfo);
+								// 这几行代码原本是用于弹出提示框显示解析后的登录信息的各个属性值，同样可用于测试或调试目的，
+								// 实际应用中可根据需要保留或去除，比如可能会将这些信息存储到Cookie或者用于页面其他地方的展示等
+								//alert(obj.loginName);
+								//alert(obj.loginPwd);
+								//alert(obj.loginNickName);
+								//alert(obj.loginAdmin);
+
+								// 使用自定义的setCookie函数（应该是在前面引入的Cookie.js文件中定义）设置名为"loginName"的Cookie，
+								// 值为当前登录的用户名（loginName），用于在浏览器端保存用户登录的相关信息，方便后续页面使用或者实现自动登录等功能
+								setCookie("loginName", loginName);
+								// 类似地，设置名为"loginNickName"的Cookie，值为从服务器返回的登录用户昵称（obj.loginNickName）
+								setCookie("loginNickName", obj.loginNickName);
+								// 设置名为"loginAdmin"的Cookie，值为从服务器返回的登录用户管理员权限标识（obj.loginAdmin），
+								// 不同的权限值可能在后续页面中用于控制不同的操作权限和显示内容等
+								setCookie("loginAdmin", obj.loginAdmin);
+							});
+
+							// 使用setTimeout函数设置一个定时器，在1000毫秒（1秒）后执行里面的函数，
+							// 函数内通过location.href属性将页面重定向到'MAIN/main.html'页面，
+							// 实现登录成功后等待一段时间自动跳转到系统的主页面的功能
+							setTimeout(function() {
+								location.href = 'MAIN/main.html';
+							}, 1000); //等待一段时间后跳入
+						}
+					});
+				}
+			}); //button
+		}); //jquery
+	}); //layui
+</script>
+
+</body>
 
 </html>

src/webapp/loginTable.jsp

@@ -1,79 +1,128 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面内容类型为text/html（即HTML格式页面），并指定字符编码为UTF-8，
+保证页面能正确显示各类字符，避免出现乱码情况 -->
 <html>
 
 <head>
+    <!-- 设置HTML页面的字符编码为utf-8，再次明确页面字符编码规范，有助于浏览器准确解析页面内容 -->
     <meta charset="utf-8">
+    <!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户明确当前页面所属的系统或功能 -->
     <title>酒店管理系统</title>
+    <!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（当前目录下的js/layui/css/layui.css），
+media="all"表示该样式适用于所有的媒体类型，也就是在各种设备上都应用此样式 -->
     <link rel="stylesheet" href="./js/layui/css/layui.css" media="all">
+    <!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），用于在页面中使用各种图标，
+路径为当前目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css -->
     <link rel="stylesheet" href="./MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
+    <!-- 引入Layui框架的JavaScript脚本文件（layui.js），该文件包含了Layui框架的各种功能实现，
+是后续使用Layui组件和功能的基础，路径为当前目录下的js/layui/layui.js -->
     <script src="./js/layui/layui.js"></script>
+    <!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
+方便简化JavaScript编程，这里的路径指向当前目录下的js/jquery.js -->
     <script src="./js/jquery.js"></script>
+    <!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了项目中通用的函数、变量或者其他自定义逻辑，
+路径为当前目录下的js/global.js -->
     <script src="./js/global.js"></script>
+    <!-- 引入自定义的Cookie操作相关的JavaScript脚本文件（Cookie.js），用于处理浏览器Cookie的设置、获取、删除等操作，
+路径为当前目录下的js/Cookie.js -->
     <script src="./js/Cookie.js"></script>
     <style>
         body {
-            margin: 10px;
+        // 设置页面主体（body）元素的外边距为10px，用于控制页面内容与浏览器窗口边缘的距离，使页面布局更美观
+        margin: 10px;
         }
 
         .layui-elem-field legend {
-            font-size: 14px;
+        // 设置Layui框架中<fieldset>元素内<legend>元素（通常用于显示字段集标题）的字体大小为14px
+        font-size: 14px;
         }
 
         .layui-field-title {
-            margin: 25px 0 15px;
+        // 设置Layui框架中具有layui-field-title类的元素的外边距，上外边距为25px，下外边距为15px，左右外边距为0，
+        // 用于调整这类元素在页面中的布局间距
+        margin: 25px 0 15px;
         }
     </style>
 </head>
 
 <body>
+<!-- 创建一个<fieldset>元素，应用Layui的样式类（layui-elem-field layui-field-title），并设置顶部外边距为30px，
+用于对页面中的一组相关功能按钮等元素进行分组显示，使其在页面布局上更清晰 -->
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
     <legend>
         <div>
             <div class="layui-inline">
+                <!-- 创建一个Layui风格的按钮（layui-btn），样式为默认的主要按钮样式（layui-btn-primary），
+同时应用Font Awesome字体图标库的图标类（fa fa-pencil-square-o）来显示一个铅笔图标，按钮id为"insertButton"，文字为“新增”，
+点击该按钮可触发新增相关的功能操作 -->
                 <button class="layui-btn layui-btn-primary fa fa-pencil-square-o " id="insertButton"> 新增</button>
             </div>
             <div class="layui-inline">
+                <!-- 类似地，创建另一个Layui按钮，样式为默认按钮样式，应用Font Awesome的下载图标类（fa fa-cloud-download），
+id为"toXlsButton"，文字为“导出”，用于触发导出相关功能 -->
                 <button class="layui-btn layui-btn-primary fa  fa-cloud-download" id="toXlsButton"> 导出</button>
             </div>
             <div class="layui-inline">
+                <!-- 创建一个普通按钮（type="button"），应用Layui默认按钮样式，Font Awesome的上传图标类（fa fa-cloud-upload），
+id为"upload"，文字为“导入”，用于触发导入相关功能 -->
                 <button type="button" class="layui-btn layui-btn-primary fa fa-cloud-upload" id="upload"> 导入</button>
             </div>
         </div>
     </legend>
 </fieldset>
+<!-- 创建一个空的HTML表格元素，id为"tableID"，后续会通过JavaScript（使用Layui的表格组件）动态填充表格内容 -->
 <table id="tableID"></table>
 <script type="text/html" id="barAuth">
+    <!-- 定义一段HTML模板代码，id为"barAuth"，用于在Layui表格的某一列中显示操作按钮，这里定义了两个超链接（a标签），
+应用Layui按钮的样式类（layui-btn layui-btn-xs），并通过lay-event属性分别定义了点击事件的名称（"edit"表示改密，"del"表示删除），
+用于在表格中针对每一行数据提供相应的操作按钮 -->
     <a class="layui-btn layui-btn-xs" lay-event="edit">改密</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>
 <script>
-
-    layui.use(['util', 'layer', 'table','upload'], function () {
+    // 使用Layui框架的模块加载机制，加载['util', 'layer', 'table', 'upload']这几个模块，
+    // 并在加载完成后执行回调函数，在回调函数内可以使用这些模块提供的功能，
+    // 比如操作表格、弹出提示框、处理文件上传等功能
+    layui.use(['util', 'layer', 'table', 'upload'], function () {
         $(document).ready(function () {
             var table = layui.table,
                 layer = layui.layer,
                 upload = layui.upload,
                 util = layui.util;
 
-            upload.render({ //允许上传的文件后缀
+            // 使用Layui的上传组件（upload）进行相关配置，用于实现文件上传功能
+            upload.render({
+                // 通过elem属性指定触发文件上传的DOM元素选择器，这里绑定到id为"upload"的元素（即前面的导入按钮）
                 elem: '#upload'
-                ,url: baseUrl + '/UploadFileServlet'
-                ,accept: 'file' //普通文件
-                ,exts: 'xlsx' //只允许上传excel文件
-                ,before: function(){
+                // 设置上传文件的请求地址，baseUrl可能是在全局变量中定义的基础地址，UploadFileServlet应该是服务器端用于处理文件上传的Servlet等程序
+                , url: baseUrl + '/UploadFileServlet'
+                // 设置允许上传的文件类型为普通文件（file表示任意类型的普通文件，与一些特殊类型如图片、视频等区分开）
+                , accept: 'file'
+                // 进一步限制只允许上传扩展名为.xlsx的Excel文件，用于对上传文件的格式进行筛选控制
+                , exts: 'xlsx'
+                // 在文件上传前执行的回调函数，这里通过layer.msg方法弹出提示框显示“文件上传中”，告知用户文件正在上传的状态
+                , before: function () {
                     layer.msg('文件上传中');
                 }
-                ,success: function(res){
+                // 文件上传成功后的回调函数，参数res包含了服务器返回的响应数据，这里简单地通过alert弹出响应数据中的msg属性值，
+                // 实际应用中可能需要根据具体的返回数据结构进行更合理的处理，比如判断上传结果并给用户相应提示等
+                , success: function (res) {
                     alert(res.msg);
                 }
             });
 
             var countNum;
+            // 使用Layui的表格组件（table）创建并渲染一个表格，配置相关参数来定义表格的各种属性和行为
             var tableIns = table.render({
-                elem: '#tableID',
-                id: 'tableID',
-                url: baseUrl + '/LoginTableServlet',
-                cols: [
+                // 通过elem属性指定表格对应的DOM元素选择器，这里绑定到id为"tableID"的空表格元素
+                elem: '#tableID'
+                // 为表格设置一个唯一的标识id，这里同样设置为"tableID"，方便后续对表格进行操作，比如重新加载数据等
+                , id: 'tableID'
+                // 设置表格数据的请求地址，向服务器端的baseUrl + '/LoginTableServlet'地址获取表格数据，
+                // LoginTableServlet应该是用于处理表格数据查询等相关逻辑的后端程序
+                , url: baseUrl + '/LoginTableServlet'
+                // 定义表格的列信息，是一个二维数组，每个子数组表示一行的列配置，这里配置了多列的字段名、标题、宽度、排序、固定列等属性
+                , cols: [
                     [{
                         field: 'loginId',
                         title: '用户ID',
@@ -93,17 +142,23 @@
                         toolbar: '#barAuth',
                         width: 150
                     }]
-                ],
-                page: true,
-                where: {
+                ]
+                // 设置表格支持分页功能，Layui会根据后端返回的数据自动进行分页显示等相关处理
+                , page: true
+                // 可以向服务器传递额外的查询参数，这里设置make参数为0，具体含义取决于后端服务器对该参数的处理逻辑，
+                // 可能用于区分不同的查询条件或数据筛选情况等
+                , where: {
                     make: 0
-                },
-                done: function (res, curr, count) {
+                }
+                // 表格数据加载完成后的回调函数，参数res表示服务器返回的数据，curr表示当前页码，count表示总数据条数，
+                // 这里将总数据条数存储在countNum变量中，可能用于后续其他相关的逻辑处理（如显示数据总数等）
+                , done: function (res, curr, count) {
                     countNum = count;
                 }
             });
 
-            //监听工具条
+            // 监听Layui表格的工具条事件，当点击表格中具有lay-event属性定义的操作按钮（如前面定义的"edit"或"del"按钮）时，
+            // 会触发这个回调函数，obj参数包含了与该操作相关的数据、事件等信息
             table.on('tool', function (obj) {
                 var data = obj.data,
                     layEvent = obj.event;
@@ -111,32 +166,46 @@
                 var loginName = data.loginName;
                 var loginNameNow = getCookie("loginName");
                 if (layEvent === 'del') {
-                    if (loginName != loginNameNow) {
+                    // 判断要删除的数据对应的用户名（loginName）与当前登录的用户名（loginNameNow）是否不相等，
+                    // 如果不相等，说明不是当前登录账号的数据，允许进行删除操作
+                    if (loginName!= loginNameNow) {
+                        // 通过layer.confirm方法弹出一个确认框，询问用户是否确定要删除该条数据，设置了确认框的垂直偏移量为180px，
+                        // 并定义了两个按钮的文字（['是滴', '手滑']），点击不同按钮会执行对应的回调函数
                         layer.confirm('您确定要删除该条数据吗？', {
                             offset: '180px',
                             btn: ['是滴', '手滑']
                         }, function () {
+                            // 通过Layui的表格组件（table）重新加载表格数据，向服务器传递新的查询参数，
+                            // 这里设置make参数为4，loginId参数为要删除的数据对应的用户ID（loginId），
+                            // 具体的参数含义和服务器端的处理逻辑相关，可能用于告知服务器执行删除操作并更新表格数据显示等
                             table.reload('tableID', {
                                 where: {
                                     make: 4,
                                     loginId: loginId
                                 }
                             });
+                            // 通过layer.msg方法弹出提示框，显示“删除结果如下”，设置垂直偏移量为250px，图标为1（可能表示某种提示图标样式），
+                            // 告知用户删除操作已执行，可查看相应结果
                             layer.msg('删除结果如下', {
                                 offset: '250px',
                                 icon: 1
                             });
                         }, function () {
+                            // 如果用户点击了“手滑”（取消）按钮，通过layer.msg方法弹出提示框，显示“删除操作已取消”，
+                            // 设置垂直偏移量为250px，告知用户删除操作已取消，不进行实际的删除行为
                             layer.msg('删除操作已取消', {
                                 offset: '250px'
                             });
                         });
                     } else {
+                        // 如果要删除的数据对应的用户名与当前登录用户名相等，说明是当前登录账号，不允许删除，
+                        // 通过layer.msg方法弹出提示框，显示“当前登陆账号禁止删除”，设置垂直偏移量为250px，告知用户不能删除该账号数据
                         layer.msg('当前登陆账号禁止删除', {
                             offset: '250px'
                         });
                     }
                 } else if (layEvent === 'edit') {
+                    // 当点击表格中的“改密”（edit）按钮时，执行以下逻辑，弹出一个密码输入框，提示用户输入旧密码
                     layer.prompt({
                         title: '请输入旧密码',
                         formType: 1,
@@ -144,9 +213,13 @@
                         maxlength: 18
                     }, function (value, index) {
                         var params = "loginName=" + loginName + "&loginPwd=" + value;
+                        // 使用jQuery的$.post方法发起一个异步POST请求，向服务器端的baseUrl + '/QueryLoginNameServlet'地址发送数据，
+                        // QueryLoginNameServlet应该是用于验证密码是否正确的后端程序，在请求成功的回调函数（updateCheck）中根据服务器返回的数据进行后续处理
                         $.post(baseUrl + '/QueryLoginNameServlet', params, function updateCheck(data) {
                             layer.close(index);
                             if (data === "0") {
+                                // 如果服务器返回的数据为"0"，表示密码不正确，通过layer.alert方法弹出一个警告提示框，
+                                // 设置标题为“警告”，图标为2（表示警告的图标样式），动画效果为6，垂直偏移量为220px，告知用户密码输入有误
                                 layer.alert('密码不正确！', {
                                     title: '警告',
                                     icon: 2,
@@ -154,6 +227,7 @@
                                     offset: '220px'
                                 });
                             } else {
+                                // 如果密码验证通过（服务器返回的数据不是"0"），再次弹出一个密码输入框，提示用户输入新密码
                                 layer.prompt({
                                     title: '请输入新密码',
                                     formType: 1,
@@ -161,6 +235,7 @@
                                     maxlength: 18
                                 }, function (value1, index1) {
                                     var pwd1 = value1;
+                                    // 接着又弹出一个密码输入框，提示用户再次输入新密码，用于确认密码输入一致
                                     layer.prompt({
                                         title: '请再次输入新密码',
                                         formType: 1,
@@ -168,8 +243,10 @@
                                         maxlength: 18
                                     }, function (value2, index2) {
                                         var pwd2 = value2;
-                                        if (pwd2 != pwd1) {
+                                        if (pwd2!= pwd1) {
                                             layer.close(index2);
+                                            // 如果两次输入的新密码不一致，通过layer.alert方法弹出警告提示框，显示“两次输入的值不一致！”，
+                                            // 设置相关提示框属性，告知用户密码输入不一致，需要重新输入
                                             layer.alert('两次输入的值不一致！', {
                                                 title: '警告',
                                                 icon: 2,
@@ -180,8 +257,12 @@
                                             layer.close(index1);
                                             layer.close(index2);
                                             params = "loginName=" + loginName + "&loginPwd=" + value2;
+                                            // 当两次新密码输入一致后，发起一个异步POST请求，向服务器端的baseUrl + '/UpdatePwdServlet'地址发送数据，
+                                            // UpdatePwdServlet应该是用于更新密码的后端程序，在请求成功的回调函数中根据服务器返回的数据判断密码修改是否成功
                                             $.post(baseUrl + '/UpdatePwdServlet', params, function updateCheck(data) {
                                                 if (data === '1') {
+                                                    // 如果服务器返回的数据为'1'，表示密码修改成功，通过layer.alert方法弹出成功提示框，
+                                                    // 设置标题为“成功”，图标为6（表示成功的图标样式），动画效果为1，垂直偏移量为220px，告知用户密码修改成功
                                                     layer.alert('修改成功！', {
                                                         title: '成功',
                                                         icon: 6,
@@ -189,75 +270,5 @@
                                                         offset: '220px'
                                                     });
                                                 } else {
-                                                    layer.alert('修改失败！', {
-                                                        title: '失败',
-                                                        icon: 2,
-                                                        anim: 6,
-                                                        offset: '220px'
-                                                    });
-                                                }
-                                            });
-                                        }
-                                    });
-                                });
-
-                            }
-                        });
-                    });
-
-                }
-            });
-
-            //新增
-            $('#insertButton').click(function () {
-                layer.open({
-                    title: "新增",
-                    btn: ['关闭'],
-                    yes: function (index) {
-                        tableIns.reload({
-                            where: {
-                                make: 0
-                            }
-                        });
-                        layer.close(index); //关闭弹窗
-                    },
-                    type: 2,
-                    area: ['450px', '500px'],
-                    fixed: false,
-                    maxmin: true,
-                    content: '/hb/insertLogin.jsp',
-                    cancel: function () {
-                        tableIns.reload({
-                            where: {
-                                make: 0
-                            }
-                        });
-                    }
-                });
-
-            });
-
-            //导出
-            $('#toXlsButton').click(function () {
-                location.href = baseUrl + '/LoginExcelServlet';
-                layer.alert('Excel文件生成完成！', {
-                    title: '成功',
-                    icon: 6,
-                    anim: 1,
-                    offset: '250px'
-                });
-            });
-
-            //回到顶端
-            util.fixbar({
-                showHeight: 2,
-                click: function (type) {
-                    console.log(type);
-                }
-            });
-        });
-    });
-</script>
-</body>
-
-</html>
+    // 如果服务器返回的数据不是'1'，表示密码修改失败，同样弹出提示框，设置标题为“失败”，图标为2（表示失败的图标样式），
+    // 动画效果为6，垂直偏移量为220

src/webapp/nav.html

@@ -1,149 +1,199 @@
 <!-- saved from url=(0043)http://hi.baidu.com/com/error/?from=oldblog -->
+<!-- 这看起来像是浏览器保存页面时添加的注释信息，用于标记页面原始的来源网址等相关信息，不过一般对页面功能无实质影响 -->
 <HTML>
 
-	<HEAD>
-		<TITLE>nav</TITLE>
-		<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
-		<!--STATUS OK-->
-		<META http-equiv=Content-Type content="text/html; charset=utf-8">
-
-		<style>
-			.mod-page-body {
-				height: auto;
-				_height: 100%;
-				min-height: 100%;
-				zoom: 1;
-			}
-			
-			.mod-page-body .mod-page-main .x-page-container {
-				padding: 0;
-				margin: 0;
-				zoom: 1
-			}
-			
-			.mod-page-body {
-				color: #454545;
-				zoom: 1
-			}
-			
-			.mod-page-body .mod-page-main {
-				padding-top: 50px
-			}
-			
-			.mod-page-body .mod-page-main {
-				padding-bottom: 85px
-			}
-			
-			.wordwrap {
-				word-break: break-all;
-				word-wrap: break-word
-			}
-			
-			pre.wordwrap {
-				white-space: pre-wrap
-			}
-			
-			.clearfix:after {
-				content: '\20';
-				display: block;
-				height: 0;
-				clear: both
-			}
-			
-			.clearfix {
-				zoom: 1
-			}
-			
-			.grid-98 {
-				overflow: hidden;
-				margin: 0 auto;
-				padding: 0
-			}
-			
-			.grid-98 {
-				width: 980px
-			}
-			
-			.mod-footer {
-				padding: 30px 0 15px 0;
-				width: 100%;
-				height: 40px;
-				position: relative;
-				margin-top: -85px;
-				clear: both;
-				zoom: 1
-			}
-			
-			.mod-footer .hidden-box {
-				line-height: 0;
-				height: 0;
-				overflow: hidden
-			}
-			
-			.mod-footer .footer-box {
-				text-align: center;
-				font-family: Arial, simsun;
-				font-size: 12px
-			}
-			
-			.mod-footer .footer-box .copy-box {
-				color: #959595;
-				line-height: 12px;
-				height: 12px;
-				overflow: hidden
-			}
-			
-			.mod-footer .footer-box .inner-box {
-				margin-bottom: 10px;
-				line-height: 14px;
-				height: 14px;
-				overflow: hidden;
-				color: #3FA7CB
-			}
-			
-			.mod-footer .hidden-box {
-				line-height: 0;
-				height: 0;
-				overflow: hidden
-			}
-			
-			.mod-page-body
-		</style>
-		<STYLE type=text/css>
-			.mod-notfound {
-				BORDER-RIGHT: #444444 1px solid;
-				BORDER-TOP: #444444 1px solid;
-				MARGIN-TOP: 10px;
-				BACKGROUND: #F0F0F0;
-				BORDER-LEFT: #444444 1px solid;
-				BORDER-BOTTOM: #444444 1px solid;
-				HEIGHT: 380px;
-				TEXT-ALIGN: center;
-				border-radius: 10px
-			}
-		</STYLE>
-	</HEAD>
-	<META content="MSHTML 6.00.6000.17117" name=GENERATOR>
-	</HEAD>
-
-	<BODY bgcolor="#f0f0f0">
-		<SECTION class=mod-page-body>
-			<DIV class="mod-page-main wordwrap clearfix">
-				<DIV class=x-page-container>
-					<DIV class="mod-notfound grid-98">
-						<IMG class=img-notfound height=300 src="./img/nav.jpg" width=786>
-						<P style="FONT-SIZE: 18px; LINE-HEIGHT: 50px">推開窗 回到夢裡的故鄉</P>
-					</DIV>
-				</DIV>
-			</DIV>
-		</SECTION>
-		<FOOTER class="mod-footer mod-cs-footer">
-			<DIV class="clearfix hidden-box"></DIV>
-			<DIV class=footer-box>
-				<DIV class=copy-box>©2017&nbsp;酒店管理系统</DIV>
+<HEAD>
+	<!-- 设置页面的标题为“nav”，该标题通常会显示在浏览器的标题栏中，方便用户识别当前页面的主题或功能 -->
+	<TITLE>nav</TITLE>
+	<!-- 引入一个图标文件（img目录下的windows.ico图标），设置为页面的图标（favicon），
+rel属性表示关联关系，type属性指定图标文件的类型，用于在浏览器的标签页、书签栏等地方显示该图标，增强页面辨识度 -->
+	<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
+	<!-- 这可能是某种状态标识注释，写着“STATUS OK”，或许是开发过程中用于标记页面相关状态的说明，实际对页面展示和功能没有直接作用 -->
+	<!--STATUS OK-->
+	<!-- 设置HTML页面的元信息（META），通过http-equiv属性指定等效的HTTP头部字段，这里设置Content-Type表示内容类型，
+content属性具体定义了类型为“text/html”（即HTML格式页面）以及字符编码为“utf-8”，确保页面能正确显示字符，避免乱码 -->
+	<META http-equiv=Content-Type content="text/html; charset=utf-8">
+
+	<style>
+		.mod-page-body {
+		// 设置元素的高度为自动，根据内容自适应高度，同时设置了一些浏览器兼容性相关的属性，
+		// _height属性（可能针对特定浏览器）设置为100%，min-height设置最小高度为100%，zoom:1常用于解决IE浏览器下的一些布局问题，触发hasLayout属性
+		height: auto;
+			_height: 100%;
+			min-height: 100%;
+			zoom: 1;
+		}
+
+		.mod-page-body.mod-page-main.x-page-container {
+		// 设置内边距为0，外边距为0，同样zoom:1用于浏览器兼容性处理，用于清除浮动等布局相关问题，使该容器元素内部布局更规整
+		padding: 0;
+			margin: 0;
+			zoom: 1
+		}
+
+		.mod-page-body {
+		// 设置元素内文字颜色为#454545这种深灰色，并且再次添加zoom:1用于浏览器兼容性相关的布局处理
+		color: #454545;
+			zoom: 1
+		}
+
+		.mod-page-body.mod-page-main {
+		// 设置该元素的顶部内边距为50px，用于调整内部内容与顶部的距离，使页面布局更美观
+		padding-top: 50px
+		}
+
+		.mod-page-body.mod-page-main {
+		// 设置该元素的底部内边距为85px，类似顶部内边距的作用，调整内容与底部的距离，方便后续布局其他元素（如底部版权等信息）
+		padding-bottom: 85px
+		}
+
+		.wordwrap {
+		// 设置文字的换行规则，word-break: break-all表示允许单词内换行，
+		// word-wrap: break-word表示如果单词过长则强制换行，保证文字在容器内合理显示，避免溢出
+		word-break: break-all;
+			word-wrap: break-word
+		}
+
+		.pre.wordwrap {
+		// 对于<pre>元素应用.wordwrap类时，设置其空白符处理方式为pre-wrap，
+		// 即保留空白符的同时也能根据容器宽度自动换行，方便显示格式化的文本内容
+		white-space: pre-wrap
+		}
+
+		.clearfix:after {
+		// 使用:after伪元素，添加一个内容为空的字符（'\20'，可能是空格之类的占位，不同浏览器有不同处理方式），
+		// 并设置为块级元素，高度为0，用于清除浮动，确保父元素能正确包含浮动的子元素，维持布局的正常显示
+		content: '\20';
+			display: block;
+			height: 0;
+			clear: both
+		}
+
+		.clearfix {
+		// 为应用.clearfix类的元素添加zoom:1属性，同样用于解决特定浏览器（如IE）下的布局问题，触发hasLayout属性，配合:after伪元素实现清除浮动等布局效果
+		zoom: 1
+		}
+
+		.grid-98 {
+		// 设置元素超出部分隐藏，使其不会显示在容器外面，并且设置水平方向上居中（margin: 0 auto），
+		// 内边距设置为0，用于布局一个宽度固定且水平居中的容器，方便页面内容的整体排版
+		overflow: hidden;
+			margin: 0 auto;
+			padding: 0
+		}
+
+		.grid-98 {
+		// 明确设置该元素的宽度为980px，结合前面的居中设置等，常用于构建页面的主体内容区域宽度，适配常见的屏幕分辨率等情况
+		width: 980px
+		}
+
+		.mod-footer {
+		// 设置底部元素（.mod-footer）的内边距，上内边距为30px，下内边距为15px，左右内边距为0，
+		// 同时设置宽度为100%铺满整个父元素宽度，高度为40px，用于定义底部区域的大小和内部内容的布局空间
+		padding: 30px 0 15px 0;
+			width: 100%;
+			height: 40px;
+		// 设置相对定位（position: relative），用于后续调整其内部元素的位置等，
+		// margin-top: -85px将元素向上移动85px，可能是为了使其与上面的内容重叠一部分，实现特定的布局效果，
+		// clear: both用于清除浮动，避免受到上面浮动元素的影响，保证在底部正确显示，zoom:1用于浏览器兼容性布局处理
+		position: relative;
+			margin-top: -85px;
+			clear: both;
+			zoom: 1
+		}
+
+		.mod-footer.hidden-box {
+		// 设置行高为0，高度为0，并且超出部分隐藏，可能用于隐藏一些不需要显示但又在HTML结构中存在的元素，或者用于创建一些空白占位等布局用途
+		line-height: 0;
+			height: 0;
+			overflow: hidden
+		}
+
+		.mod-footer.footer-box {
+		// 设置文本居中对齐，定义字体为Arial和宋体（simsun，针对中文显示），字体大小为12px，用于规范底部版权等文字的显示样式
+		text-align: center;
+			font-family: Arial, simsun;
+			font-size: 12px
+		}
+
+		.mod-footer.footer-box.copy-box {
+		// 设置文字颜色为#959595这种浅灰色，行高为12px，高度为12px，超出部分隐藏，用于设置版权相关文字的样式和显示效果
+		color: #959595;
+			line-height: 12px;
+			height: 12px;
+			overflow: hidden
+		}
+
+		.mod-footer.footer-box.inner-box {
+		// 设置底部其他相关元素（.inner-box）的底部外边距为10px，行高为14px，高度为14px，超出部分隐藏，颜色为#3FA7CB这种蓝色，
+		// 用于区分不同的底部文字内容，调整其显示布局和样式
+		margin-bottom: 10px;
+			line-height: 14px;
+			height: 14px;
+			overflow: hidden;
+			color: #3FA7CB
+		}
+
+		.mod-footer.hidden-box {
+		// 再次出现相同的样式设置，可能是重复定义或者用于覆盖之前的设置，作用与前面的.hidden-box样式中关于隐藏元素的设置相同
+		line-height: 0;
+			height: 0;
+			overflow: hidden
+		}
+
+		.mod-page-body
+	</style>
+	<STYLE type=text/css>
+		.mod-notfound {
+		// 设置元素的右边框为1px的实线，颜色为#444444这种深灰色，同理设置上边框、左边框和下边框，
+		// 背景颜色设置为#F0F0F0浅灰色，高度为380px，文本居中对齐，并且设置边框圆角为10px，用于创建一个具有特定样式的、带边框和圆角的容器元素，
+		// 可能用于显示特定的提示信息等内容，比如这里可能是用于展示页面出错或未找到相关内容的提示区域样式
+		BORDER-RIGHT: #444444 1px solid;
+			BORDER-TOP: #444444 1px solid;
+			MARGIN-TOP: 10px;
+			BACKGROUND: #F0F0F0;
+			BORDER-LEFT: #444444 1px solid;
+			BORDER-BOTTOM: #444444 1px solid;
+			HEIGHT: 380px;
+			TEXT-ALIGN: center;
+			border-radius: 10px
+		}
+	</STYLE>
+</HEAD>
+<META content="MSHTML 6.00.6000.17117" name=GENERATOR>
+</HEAD>
+
+<BODY bgcolor="#f0f0f0">
+<!-- 创建一个<SECTION>元素，应用类名.mod-page-body，用于划分页面的主体内容区域，结合前面定义的相关样式来控制该区域的布局和显示效果 -->
+<SECTION class=mod-page-body>
+	<!-- 在<SECTION>元素内创建一个<DIV>元素，应用多个类名（mod-page-main wordwrap clearfix），
+用于放置主要的页面内容，其中“wordwrap”类控制文字换行，“clearfix”类用于清除浮动等布局处理 -->
+	<DIV class="mod-page-main wordwrap clearfix">
+		<!-- 在上述<DIV>元素内再创建一个<DIV>元素，应用类名.x-page-container，可能作为更具体的页面内容容器，方便后续进一步布局子元素 -->
+		<DIV class=x-page-container>
+			<!-- 创建一个<DIV>元素，应用类名.mod-notfound grid-98，结合前面定义的样式，它具有特定的边框、背景、高度等样式，
+并且宽度为980px，水平居中，用于展示特定的内容，这里可能是在页面出现某种情况（如未找到对应内容）时显示相关提示及图片等 -->
+			<DIV class="mod-notfound grid-98">
+				<!-- 在该<DIV>元素内插入一张图片，应用类名.img-notfound，设置图片的高度为300px，宽度为786px，图片来源路径为./img/nav.jpg -->
+				<IMG class=img-notfound height=300 src="./img/nav.jpg" width=786>
+				<!-- 创建一个段落元素<P>，设置字体大小为18px，行高为50px，里面包含一段文字“推開窗 回到夢裡的故鄉”，用于显示特定的提示性文字内容 -->
+				<P style="FONT-SIZE: 18px; LINE-HEIGHT: 50px">推開窗 回到夢裡的故鄉</P>
 			</DIV>
-		</FOOTER>
+		</DIV>
+	</DIV>
+</SECTION>
+<!-- 创建一个<FOOTER>元素，应用类名.mod-footer mod-cs-footer，用于构建页面的底部区域，结合前面定义的底部样式来显示版权等相关信息 -->
+<FOOTER class="mod-footer mod-cs-footer">
+	<!-- 在<FOOTER>元素内创建一个<DIV>元素，应用类名.clearfix hidden-box，可能用于清除浮动或者作为隐藏的布局占位元素等用途 -->
+	<DIV class="clearfix hidden-box"></DIV>
+	<!-- 再创建一个<DIV>元素，应用类名.footer-box，用于放置底部具体的文字内容，按照前面定义的.footer-box样式进行显示 -->
+	<DIV class=footer-box>
+		<!-- 在.footer-box内又创建一个<DIV>元素，应用类名.copy-box，用于显示版权相关的文字，按照.copy-box样式设置显示效果，
+这里显示“©2017&nbsp;酒店管理系统”，表示版权归属及系统名称等信息 -->
+		<DIV class=copy-box>©2017&nbsp;酒店管理系统</DIV>
+	</DIV>
+</FOOTER>
 
-	</BODY>
+</BODY>
 
 </HTML>

src/webapp/webpage/SystemSetting/AuthTable.jsp

@@ -1,209 +1,296 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面的内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
+确保页面中的字符能被正确解析和显示，避免出现乱码问题 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<title>酒店管理系统</title>
-		<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
-		<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
-		<script src="../../js/layui/layui.js"></script>
-		<script src="../../js/jquery.js"></script>
-		<script src="../../js/global.js"></script>
-		<style>
-			body {
-				margin: 10px;
-			}
-			
-			.layui-elem-field legend {
-				font-size: 14px;
-			}
-			
-			.layui-field-title {
-				margin: 25px 0 15px;
-			}
-		</style>
-	</head>
+<head>
+	<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户知晓当前页面所属的系统名称 -->
+	<title>酒店管理系统</title>
+	<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
+media="all"表示此样式适用于所有媒体类型，也就是在各种设备上都会应用该样式 -->
+	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
+	<!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），用于在页面中使用各种图标，
+其路径为上级目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css -->
+	<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
+	<!-- 引入Layui框架的JavaScript脚本文件（layui.js），这是使用Layui框架各种功能和组件的基础，
+路径指向上级目录下的js/layui/layui.js -->
+	<script src="../../js/layui/layui.js"></script>
+	<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
+方便简化JavaScript编程，其路径为上级目录下的js/jquery.js -->
+	<script src="../../js/jquery.js"></script>
+	<!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了整个系统页面通用的一些变量定义、函数等逻辑，
+路径为上级目录下的js/global.js -->
+	<script src="../../js/global.js"></script>
+	<style>
+		body {
+		// 设置页面主体（body）元素的外边距为10像素，用于调整页面内容与浏览器边界的距离，使页面布局更美观
+		margin: 10px;
+		}
 
-	<body>
-		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
-			<legend>
-				<div>
-					<div class="layui-inline">
-						<div class="layui-input-inline">
-							<input class="layui-input" id="AuthITEM" placeholder="权限名称">
-						</div>
-						<button class="layui-btn fa fa-search" id="searchAuthITEM"> 搜索</button>
-					</div>
-					<div class="layui-inline">
-						<button class="layui-btn fa fa-refresh" id="refresh"> 刷新</button>
-					</div>
-					<div class="layui-inline">
-						<button class="layui-btn fa fa-pencil-square-o " id="insertAuth"> 新增</button>
-					</div>
-					<div class="layui-inline">
-						<button class="layui-btn fa fa-save" id="toXls"> 导出</button>
-					</div>
+		.layui-elem-field legend {
+		// 设置具有layui-elem-field类的元素内的<legend>元素的字体大小为14像素，用于规范这类元素内标题文字的显示大小
+		font-size: 14px;
+		}
+
+		.layui-field-title {
+		// 设置具有layui-field-title类的元素的外边距，上外边距为25像素，下外边距为15像素，用于调整该元素在页面中的垂直间距，使其布局更合理
+		margin: 25px 0 15px;
+		}
+	</style>
+</head>
+
+<body>
+<!-- 创建一个<fieldset>元素，应用类名“layui-elem-field layui-field-title”，并通过内联样式设置上外边距为30像素，
+用于划分页面中的一个区域，通常用于对相关内容进行分组展示，结合Layui的样式类呈现出特定的外观效果 -->
+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
+	<legend>
+		<div>
+			<div class="layui-inline">
+				<div class="layui-input-inline">
+					<!-- 创建一个输入框（input）元素，应用类名“layui-input”，设置其id为“AuthITEM”，
+placeholder属性设置提示文字为“权限名称”，用于用户输入搜索关键词，以查找相关的权限信息 -->
+					<input class="layui-input" id="AuthITEM" placeholder="权限名称">
 				</div>
-			</legend>
-		</fieldset>
-		<div id="toxlsTable">
-			<%--方法级渲染表格--%>
-			<table id="tableAuth"></table>
+				<!-- 创建一个按钮（button）元素，应用类名“layui-btn fa fa-search”，设置其id为“searchAuthITEM”，文字为“搜索”，
+点击该按钮可触发搜索相关的功能，其中“fa fa-search”类可能是来自Font Awesome图标库，用于显示搜索图标 -->
+				<button class="layui-btn fa fa-search" id="searchAuthITEM"> 搜索</button>
+			</div>
+			<div class="layui-inline">
+				<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-refresh”，设置其id为“refresh”，文字为“刷新”，
+点击该按钮可触发刷新页面数据等相关功能，“fa fa-refresh”类用于显示刷新图标 -->
+				<button class="layui-btn fa fa-refresh" id="refresh"> 刷新</button>
+			</div>
+			<div class="layui-inline">
+				<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-pencil-square-o ”，设置其id为“insertAuth”，文字为“新增”，
+点击该按钮可触发新增权限相关数据的功能，“fa fa-pencil-square-o ”类用于显示编辑图标 -->
+				<button class="layui-btn fa fa-pencil-square-o " id="insertAuth"> 新增</button>
+			</div>
+			<div class="layui-inline">
+				<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-save”，设置其id为“toXls”，文字为“导出”，
+点击该按钮可触发将数据导出为Excel文件等相关功能，“fa fa-save”类用于显示保存图标 -->
+				<button class="layui-btn fa fa-save" id="toXls"> 导出</button>
+			</div>
 		</div>
-		<script type="text/html" id="barAuth">
-			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
-			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
-			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
-		</script>
-		<script>
-			/**
-			 * 权限表 全部完成
-			 * 2017.11.15 1:33
-			 */
-			layui.use(['util', 'layer', 'table'], function() {
-				$(document).ready(function() {
-					var table = layui.table,
-						layer = layui.layer,
-						util = layui.util;
-					var countNum;
-					//方法级渲染
-					var tableIns = table.render({
-						elem: '#tableAuth' //绑定元素-->对应页面table的ID
-							,
-						id: 'tableAuth' //表格容器索引
-							,
-						url: baseUrl + '/AuthInfoServlet' //数据接口
-							,
-						limit: 30,
-						cols: [
-							[ //表头
-								//field字段名、title标题名、width列宽、sort排序、fixed固定列、toolbar绑定工具条
-								{
-									field: 'authId',
-									title: 'ID',
-									width: 100,
-									sort: true,
-									fixed: true
-								}, {
-									field: 'authItem',
-									title: '权限名称'
-								}, {
-									field: 'isRead',
-									title: '可读'
-								}, {
-									field: 'isWrite',
-									title: '可写'
-								}, {
-									field: 'isChange',
-									title: '可改'
-								}, {
-									field: 'isDelete',
-									title: '可删'
-								}, {
-									field: 'right',
-									title: '管理',
-									align: 'center',
-									toolbar: '#barAuth',
-									width: 200
-								}
-							]
-						],
-						page: true //是否开启分页
-							,
-						where: {
-							make: 0
-						} //接口的其它参数
-						,
-						done: function(res, curr, count) {
-							countNum = count;
-						}
-					});
+	</legend>
+</fieldset>
+<!-- 创建一个id为“toxlsTable”的<div>元素，用于包裹下面的表格元素，可能作为后续对表格进行整体操作或布局调整的一个容器 -->
+<div id="toxlsTable">
+	<!-- 这是一段HTML注释，说明下面的<table>元素是采用方法级渲染表格的方式来进行后续操作，
+此处只是先定义了一个空的表格，其具体内容和样式等会通过JavaScript代码中的表格渲染方法来动态添加 -->
+	<%--方法级渲染表格--%>
+	<table id="tableAuth"></table>
+</div>
+<!-- 创建一个<script>标签，设置其type属性为“text/html”，并设置id为“barAuth”，里面包含了一些HTML代码片段，
+通常用于作为Layui表格组件中工具栏的模板定义，定义了“查看”“编辑”“删除”等操作按钮 -->
+<script type="text/html" id="barAuth">
+	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
+	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
+	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
+</script>
+<script>
+	/**
+	 * 权限表 全部完成
+	 * 2017.11.15 1:33
+	 * 这里可能是一个简单的注释说明，表示权限表相关功能的代码已全部完成，后面跟着的时间可能是完成代码编写或修改的时间记录
+	 */
+	// 使用Layui框架的模块加载机制，加载'util'（可能是Layui提供的工具模块）、'layer'（用于弹出层等交互功能模块）、
+	// 'table'（用于表格相关操作的模块）这几个模块，并在加载完成后执行回调函数，在回调函数内进行页面的各种交互逻辑实现
+	layui.use(['util', 'layer', 'table'], function () {
+		// 当DOM文档加载完成后执行此回调函数，确保页面元素都已加载完毕后再操作元素，避免出现找不到元素等问题
+		$(document).ready(function () {
+			var table = layui.table,
+					layer = layui.layer,
+					util = layui.util;
+			var countNum;
+			// 方法级渲染表格操作，使用Layui的表格模块（table）的render方法来渲染表格，配置表格的各种属性
+			var tableIns = table.render({
+				// 指定表格渲染的DOM元素选择器，这里选择id为“tableAuth”的元素（即前面定义的空表格元素）作为表格的挂载点
+				elem: '#tableAuth' //绑定元素-->对应页面table的ID
+				,
+				// 给表格设置一个唯一的id，方便后续对表格进行一些操作（如重新加载等），这里设置为“tableAuth”与挂载点的id保持一致
+				id: 'tableAuth' //表格容器索引
+				,
+				// 设置表格数据的请求地址，通过baseUrl（应该是在全局脚本或其他地方定义的基础URL）加上具体的Servlet路径来获取数据，
+				// 这里请求的是权限信息相关的数据接口（AuthInfoServlet）
+				url: baseUrl + '/AuthInfoServlet' //数据接口
+				,
+				// 设置每页显示的数据条数为30条，用于控制表格分页时每页的数据量
+				limit: 30,
+				cols: [
+					// 定义表格的列配置，每一个对象表示一列的相关属性设置
+					[ //表头
+						// 定义每列的相关属性，包括field字段名（一般与后端返回的数据字段对应，用于绑定数据）、
+						// title标题名（显示在表头位置，让用户知道该列数据的含义）、width列宽、sort排序（设置该列可排序，用户点击表头时可按照此列数据进行升序或降序排列）、
+						// fixed固定列（设置该列固定在表格的某个位置，不随滚动条滚动而移动，常用于重要的、需要始终展示的列）、
+						// toolbar绑定工具条（指定该列使用的工具栏模板，用于显示操作按钮）等属性
+						{
+							field: 'authId',
+							title: 'ID',
+							width: 100,
+							sort: true,
+							fixed: true
+						}, {
+						field: 'authItem',
+						title: '权限名称'
+					}, {
+						field: 'isRead',
+						title: '可读'
+					}, {
+						field: 'isWrite',
+						title: '可写'
+					}, {
+						field: 'isChange',
+						title: '可改'
+					}, {
+						field: 'isDelete',
+						title: '可删'
+					}, {
+						field: 'right',
+						title: '管理',
+						align: 'center',
+						toolbar: '#barAuth',
+						width: 200
+					}
+					]
+				],
+				// 设置表格开启分页功能，Layui会自动处理分页相关的显示和交互逻辑
+				page: true //是否开启分页
+				,
+				// 设置向服务器请求数据时额外携带的参数，这里设置“make”参数为0，具体含义可能根据后端接口要求以及代码中的逻辑约定而定，
+				// 一般用于区分不同的请求场景或操作类型等，此处可能表示正常加载数据的情况
+				where: {
+					make: 0
+				} //接口的其它参数
+				,
+				done: function (res, curr, count) {
+					// 在表格渲染完成且数据加载完毕后执行此回调函数，将返回的数据总数赋值给countNum变量，
+					// 可能用于后续其他地方统计或判断数据量等情况
+					countNum = count;
+				}
+			});
 
-					//监听工具条
-					table.on('tool', function(obj) { //tool是工具条事件名
-						var data = obj.data,
-							layEvent = obj.event; //获得 lay-event 对应的值
-						//从前当前行获取列数据
-						var authId = data.authId;
-						var authItem = data.authItem;
-						var isRead = data.isRead;
-						var isWrite = data.isWrite;
-						var isChange = data.isChange;
-						var isDelete = data.isDelete;
+			// 监听表格的工具条事件，当用户点击表格中的操作按钮（如“查看”“编辑”“删除”等）时触发相应的逻辑处理，
+			// 'tool'是Layui表格组件中定义的工具条事件名，通过这个监听可以获取到用户点击的按钮对应的事件以及相关数据等信息
+			table.on('tool', function (obj) { //tool是工具条事件名
+				var data = obj.data,
+						layEvent = obj.event; //获得 lay-event 对应的值
+				// 从当前行的数据对象（data）中获取“authId”字段的值，赋值给变量authId，
+				// 一般用于后续操作中传递该条权限记录的唯一标识，比如编辑、删除操作时需要告诉后端要操作哪条权限记录
+				var authId = data.authId;
+				// 从当前行的数据对象获取“authItem”字段的值，赋值给变量authItem，用于后续可能涉及该权限名称相关的操作等情况
+				var authItem = data.authItem;
+				// 类似地获取“isRead”字段的值，用于后续操作中对可读权限等级相关的处理
+				var isRead = data.isRead;
+				// 获取“isWrite”字段的值，用于可写权限等级相关操作
+				var isWrite = data.isWrite;
+				// 获取“isChange”字段的值，用于可改权限等级相关操作
+				var isChange = data.isChange;
+				// 获取“isDelete”字段的值，用于可删权限等级相关操作
+				var isDelete = data.isDelete;
 
-						if(layEvent === 'detail') { //查看功能
-							layer.alert('权限项：' + data.authItem + '<br>最低可读权限等级：' + data.isRead + '<br>最低可写权限等级：' +
-								data.isWrite + '<br>最低可改权限等级：' + data.isChange + '<br>最低可删权限等级：' + data.isDelete, {
-									skin: 'layui-layer-lan',
-									closeBtn: 0,
-									title: '您当前选择的权限值信息',
-									anim: 4,
-									offset: '180px'
-								});
+				if (layEvent === 'detail') { //查看功能
+					// 当点击“查看”按钮时，使用Layui的layer模块的alert方法弹出一个提示框，显示该条权限数据的详细信息，
+					// 包括权限项名称、各个权限等级（可读、可写、可改、可删）等字段的值，设置提示框的样式、标题、关闭按钮显示、动画效果、垂直偏移位置等属性
+					layer.alert('权限项：' + data.authItem + '<br>最低可读权限等级：' + data.isRead + '<br>最低可写权限等级：' +
+							data.isWrite + '<br>最低可改权限等级：' + data.isChange + '<br>最低可删权限等级：' + data.isDelete, {
+						skin: 'layui-layer-lan',
+						closeBtn: 0,
+						title: '您当前选择的权限值信息',
+						anim: 4,
+						offset: '180px'
+					});
 
-						} else if(layEvent === 'del') { //删除功能
-							layer.alert('本条目禁止删除！', {
-								title: '警告',
-								icon: 4,
-								anim: 6,
-								offset: '250px'
-							});
+				} else if (layEvent === 'del') { //删除功能
+					// 当点击“删除”按钮时，使用Layui的layer模块的alert方法弹出一个警告框，提示用户本条目禁止删除，
+					// 设置警告框的标题、图标、动画效果、垂直偏移位置等属性，告知用户不能执行删除操作
+					layer.alert('本条目禁止删除！', {
+						title: '警告',
+						icon: 4,
+						anim: 6,
+						offset: '250px'
+					});
 
-						} else if(layEvent === 'edit') { //编辑功能
-							//layer.prompt(options, yes) - 输入层
-							//formType:输入框类型，支持0（文本）默认1（密码）2（多行文本） maxlength: 140, //可输入文本的最大长度，默认500
+				} else if (layEvent === 'edit') { //编辑功能
+					// 编辑功能逻辑，首先弹出一个输入框（使用Layui的layer模块的prompt方法），用于让用户输入最低可读权限等级，
+					// 设置输入框的标题、类型（formType为0表示文本输入框）、初始值（使用当前行获取的isRead值作为默认值）、位置、最大输入长度等属性，
+					// 用户输入完成并点击确认后会执行相应的回调函数，回调函数中可以获取用户输入的值（IsRead）进行后续处理
+					layer.prompt({
+						title: '请输入最低可读权限等级',
+						formType: 0,
+						value: isRead,
+						offset: '220px',
+						maxlength: 1
+					}, function (IsRead, index) {
+						layer.close(index);
+						// 关闭上一个输入框弹出层后，再弹出一个输入框，用于让用户输入最低可写权限等级，同样设置相关属性，
+						// 初始值为当前行的isWrite值，用户确认输入后执行回调函数获取输入的值（IsWrite）
+						layer.prompt({
+							title: '请输入最低可写权限等级',
+							formType: 0,
+							value: isWrite,
+							offset: '220px',
+							maxlength: 1
+						}, function (IsWrite, index) {
+							layer.close(index);
+							// 继续弹出输入框，用于输入最低可改权限等级，设置属性并获取用户输入的值（IsChange）
 							layer.prompt({
-								title: '请输入最低可读权限等级',
+								title: '请输入最低可改权限等级',
 								formType: 0,
-								value: isRead,
+								value: isChange,
 								offset: '220px',
 								maxlength: 1
-							}, function(IsRead, index) {
+							}, function (IsChange, index) {
 								layer.close(index);
+								// 再次弹出输入框，用于输入最低可删权限等级，设置属性并获取用户输入的值（IsDelete）
 								layer.prompt({
-									title: '请输入最低可写权限等级',
+									title: '请输入最低可改权限等级',
 									formType: 0,
-									value: isWrite,
+									value: isDelete,
 									offset: '220px',
 									maxlength: 1
-								}, function(IsWrite, index) {
+								}, function (IsDelete, index) {
 									layer.close(index);
-									layer.prompt({
-										title: '请输入最低可改权限等级',
-										formType: 0,
-										value: isChange,
-										offset: '220px',
-										maxlength: 1
-									}, function(IsChange, index) {
-										layer.close(index);
-										layer.prompt({
-											title: '请输入最低可改权限等级',
-											formType: 0,
-											value: isDelete,
-											offset: '220px',
-											maxlength: 1
-										}, function(IsDelete, index) {
-											layer.close(index);
-											//isNaN() 函数用于检查其参数是否是非数字值,如果是数字返回true
-											if(isNaN(IsRead) || isNaN(IsWrite) || isNaN(IsChange) || isNaN(IsDelete)) {
-												layer.msg('您所输入的值类型不合法', {
-													offset: '250px'
-												});
-											} else { //传数据
-												table.reload('tableAuth', {
-													where: {
-														make: 2,
-														authId: authId,
-														authItem: authItem,
-														isRead: IsRead,
-														isWrite: IsWrite,
-														isChange: IsChange,
-														isDelete: IsDelete
-													}
-												});
-												layer.msg('修改成功', {
-													offset: '250px'
-												});
+									// 使用isNaN函数判断用户输入的各个权限等级值（IsRead、IsWrite、IsChange、IsDelete）是否为非数字值，
+									// 如果有任何一个是非数字值，则执行以下逻辑，弹出提示框告知用户输入的值类型不合法，设置提示框的位置属性
+									if (isNaN(IsRead) || isNaN(IsWrite) || isNaN(IsChange) || isNaN(IsDelete)) {
+										layer.msg('您所输入的值类型不合法', {
+											offset: '250px'
+										});
+									} else { //传数据
+										// 如果用户输入的所有权限等级值都是数字类型（合法数字），则执行以下逻辑，
+										// 使用之前定义的表格实例（tableIns）的reload方法重新加载表格数据，通过where属性设置向服务器传递的参数，
+										// 包括操作
+										table.reload('tableAuth', {
+											// 使用Layui的表格（table）模块的reload方法重新加载id为“tableAuth”的表格数据，
+											// 通过传入的配置对象的where属性来设置向服务器传递的参数，以告知服务器此次操作的相关条件及要更新的数据等信息
+											where: {
+												// 设置操作类型参数“make”为2，根据前面代码中的约定（可能是与后端协商好的规则），此值代表修改操作，
+												// 用于告知后端此次是对表格数据进行修改相关的请求
+												make: 2,
+												// 将当前行获取到的权限记录的唯一标识“authId”传递给后端，后端可依据此标识准确找到要修改的对应权限记录，
+												// 确保修改操作作用在正确的数据行上
+												authId: authId,
+												// 传递当前权限记录的权限名称“authItem”，可能后端需要接收此名称来判断唯一性或者用于更新对应的数据字段等操作，
+												// 具体取决于后端的业务逻辑实现
+												authItem: authItem,
+												// 传递用户新输入的最低可读权限等级值“IsRead”给后端，后端会用此新值更新对应权限记录中的可读权限等级字段，
+												// 实现数据的修改更新
+												isRead: IsRead,
+												// 传递用户输入的最低可写权限等级值“IsWrite”给后端，用于更新对应记录的可写权限等级字段
+												isWrite: IsWrite,
+												// 传递用户输入的最低可改权限等级值“IsChange”给后端，以更新相应的可改权限等级字段内容
+												isChange: IsChange,
+												// 传递用户输入的最低可删权限等级值“IsDelete”给后端，使后端能更新对应权限记录的可删权限等级字段数据
+												isDelete: IsDelete
+											}
+										});
+// 使用Layui的layer模块的msg方法弹出一个提示消息框，显示文字“修改成功”，告知用户此次权限数据的修改操作已成功完成，
+// 并通过配置对象设置提示框的垂直偏移位置为距离顶部250px，确定提示框在页面中的显示位置
+										layer.msg('修改成功', {
+											offset: '250px'
+										});
 											}
 										});
 									});
@@ -212,70 +299,94 @@
 						}
 					});
 
-					//刷新
-					$('#refresh').click(function() {
-						tableIns.reload({
-							where: {
-								make: 0,
-								page: 1
-							}
-						});
-					});
-
-					//新增
-					$('#insertAuth').click(function() {
-						layer.alert('本条目禁止新增！', {
-							title: '警告',
-							icon: 4,
-							anim: 6,
-							offset: '250px'
-						});
-					});
+			// 刷新功能逻辑，为id为“refresh”的元素（即页面中的刷新按钮）绑定点击事件处理函数，当按钮被点击时执行以下操作
+			$('#refresh').click(function() {
+				// 使用之前定义的表格实例（tableIns）的reload方法重新加载表格数据，通过设置相关参数（make为0，page为1）来刷新表格展示内容，
+				// 这里“make”参数为0可能表示正常的重载数据操作（按照代码中的约定逻辑），page为1表示重新加载第一页的数据，实现刷新页面表格数据的功能
+				tableIns.reload({
+					where: {
+						make: 0,
+						page: 1
+					}
+				});
+			});
 
-					//搜索权限项目
-					$('#searchAuthITEM').click(function() {
-						var authItem = $('#AuthITEM').val();
-						if(authItem === "")
-							layer.msg('您必须输入值', {
-								offset: '250px'
-							});
-						else if(authItem.length > 10)
-							layer.msg('您所输入的值长度不合法', {
-								offset: '250px'
-							});
-						else {
-							layer.msg('搜索结果', {
-								offset: '250px'
-							});
-							//与tableIns.reload方法类似，这种方法是取表格容器索引值
-							table.reload('tableAuth', {
-								where: {
-									make: 3,
-									authItem: authItem
-								}
-							});
-						}
+			// 新增功能逻辑，为id为“insertAuth”的元素（即页面中的新增按钮）绑定点击事件处理函数，当按钮被点击时执行以下操作
+			$('#insertAuth').click(function() {
+				// 使用Layui的layer模块的alert方法弹出一个警告框，显示文字“本条目禁止新增！”，告知用户当前不允许进行新增权限条目的操作，
+				// 同时设置警告框的标题为“警告”，图标为4（一般对应警告相关的图标样式，由Layui框架定义），动画效果为6，垂直偏移位置为距离顶部250px
+				layer.alert('本条目禁止新增！', {
+					title: '警告',
+					icon: 4,
+					anim: 6,
+					offset: '250px'
+				});
+			});
 
+			// 搜索权限项目功能逻辑，为id为“searchAuthITEM”的元素（即页面中的搜索权限项目按钮）绑定点击事件处理函数，当按钮被点击时执行以下操作
+			$('#searchAuthITEM').click(function() {
+				// 获取id为“AuthITEM”的输入框元素的值（即用户输入的搜索关键词，也就是权限名称相关内容），并赋值给变量authItem，
+				// 用于后续对用户输入内容的合法性判断以及作为搜索条件传递给后端进行数据查询等操作
+				var authItem = $('#AuthITEM').val();
+				if (authItem === "") {
+					// 判断用户输入的搜索关键词（authItem）是否为空字符串，如果是空字符串，则执行以下操作，
+					// 使用Layui的layer模块的msg方法弹出提示消息框，显示文字“您必须输入值”，提示用户必须输入内容才能进行搜索操作，
+					// 并设置提示框的垂直偏移位置为距离顶部250px
+					layer.msg('您必须输入值', {
+						offset: '250px'
 					});
-
-					//导出
-					$('#toXls').click(function() {
-						location.href = baseUrl + '/AuthInfoExcelServlet';
-						layer.alert('Excel文件生成完成！', {
-							title: '成功',
-							icon: 6,
-							anim: 1,
-							offset: '250px'
-						});
+				} else if (authItem.length > 10) {
+					// 如果用户输入的搜索关键词长度大于10个字符，则执行以下操作，
+					// 使用Layui的layer模块的msg方法弹出提示消息框，显示文字“您所输入的值长度不合法”，提示用户输入的搜索内容长度不符合要求，
+					// 并设置提示框的垂直偏移位置为距离顶部250px
+					layer.msg('您所输入的值长度不合法', {
+						offset: '250px'
 					});
-
-					//固定块  -- 就是那个回到顶部
-					util.fixbar({
-						showHeight: 2,
-						click: function(type) {
-							console.log(type);
+				} else {
+					// 如果用户输入的搜索关键词不为空且长度合法（小于等于10个字符），则执行以下操作，
+					// 先使用Layui的layer模块的msg方法弹出提示消息框，显示文字“搜索结果”，告知用户即将展示搜索结果，
+					// 并设置提示框的垂直偏移位置为距离顶部250px
+					layer.msg('搜索结果', {
+						offset: '250px'
+					});
+					// 使用Layui的表格（table）模块的reload方法重新加载id为“tableAuth”的表格数据，
+					// 通过配置对象的where属性设置向服务器传递的参数，将“make”参数设置为3（按照代码约定，可能代表搜索操作），
+					// 并将用户输入的权限名称（authItem）传递给后端，让后端根据此条件查询符合要求的数据并返回更新表格展示内容，实现搜索功能
+					table.reload('tableAuth', {
+						where: {
+							make: 3,
+							authItem: authItem
 						}
 					});
+				}
+
+			});
+			// 导出功能逻辑，为id为“toXls”的元素（即页面中的导出按钮）绑定点击事件处理函数，当按钮被点击时执行以下操作
+			$('#toXls').click(function() {
+				// 通过修改浏览器的location.href属性，跳转到“baseUrl + '/AuthInfoExcelServlet'”这个地址，
+				// 一般是向服务器端发起请求，让服务器端执行生成Excel文件的相关逻辑，比如从数据库获取权限数据并整理成Excel格式返回给浏览器端下载等操作
+				location.href = baseUrl + '/AuthInfoExcelServlet';
+				// 使用Layui的layer模块的alert方法弹出一个提示消息框，显示文字“Excel文件生成完成！”，告知用户Excel文件已经成功生成，
+				// 并设置提示框的标题为“成功”，图标为6（一般对应成功的图标样式，由Layui框架定义），动画效果为1（也是由Layui框架定义的某种动画展示方式），
+				// 垂直偏移位置为距离顶部250px，方便用户知晓操作结果并进行后续的保存等相关操作
+				layer.alert('Excel文件生成完成！', {
+					title: '成功',
+					icon: 6,
+					anim: 1,
+					offset: '250px'
+				});
+			});
+
+			// 固定块功能逻辑，使用Layui的util模块的fixbar方法创建一个回到页面顶端的功能组件，通过传入配置对象来设置相关属性和行为
+			util.fixbar({
+				// 设置显示高度相关的参数为2，具体含义由Layui框架定义，可能与组件在页面中何时显示或者显示的具体高度等条件相关
+				showHeight: 2,
+				click: function(type) {
+					// 为回到顶端功能组件的点击事件设置回调函数，当用户点击该组件时，会接收到一个参数type（具体含义由Layui框架定义，可能与点击的具体位置等相关），
+					// 此处只是简单地将接收到的type参数打印到浏览器的控制台（一般用于调试目的，查看点击操作传递的相关信息）
+					console.log(type);
+				}
+			});
 				});
 			});
 		</script>

src/webapp/webpage/SystemSetting/FloorTable.jsp

@@ -1,272 +1,262 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面的内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
+确保页面中的字符能被正确解析和显示，避免出现乱码问题 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<title>酒店管理系统</title>
-		<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
-		<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
-		<script src="../../js/layui/layui.js"></script>
-		<script src="../../js/jquery.js"></script>
-		<script src="../../js/global.js"></script>
-		<script src="../../js/toExcel/xlsx.full.min.js"></script>
-		<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
-		<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
-		<style>
-			body {
-				margin: 10px;
-			}
-			
-			.layui-elem-field legend {
-				font-size: 14px;
-			}
-			
-			.layui-field-title {
-				margin: 25px 0 15px;
-			}
-		</style>
-	</head>
+<head>
+	<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户知晓当前页面所属的系统名称 -->
+	<title>酒店管理系统</title>
+	<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
+media="all"表示此样式适用于所有媒体类型，也就是在各种设备上都会应用该样式 -->
+	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
+	<!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），用于在页面中使用各种图标，
+其路径为上级目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css -->
+	<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
+	<!-- 引入Layui框架的JavaScript脚本文件（layui.js），这是使用Layui框架各种功能和组件的基础，
+路径指向上级目录下的js/layui/layui.js -->
+	<script src="../../js/layui/layui.js"></script>
+	<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
+方便简化JavaScript编程，其路径为上级目录下的js/jquery.js -->
+	<script src="../../js/jquery.js"></script>
+	<!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了整个系统页面通用的一些变量定义、函数等逻辑，
+路径为上级目录下的js/global.js -->
+	<script src="../../js/global.js"></script>
+	<!-- 引入处理Excel相关功能的JavaScript库（xlsx.full.min.js），可能用于后续将数据导出为Excel等操作，
+其路径指向上级目录下的js/toExcel/xlsx.full.min.js -->
+	<script src="../../js/toExcel/xlsx.full.min.js"></script>
+	<!-- 引入FileSaver.js脚本文件，该文件通常用于在浏览器端实现文件保存功能，
+比如配合前面的Excel库将生成的Excel文件保存到本地，其路径为上级目录下的js/toExcel/FileSaver.js -->
+	<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
+	<!-- 引入自定义的用于导出数据到Excel的脚本文件（Export2Excel.js），里面应该包含了具体的导出逻辑和相关功能实现，
+其路径为上级目录下的js/toExcel/Export2Excel.js -->
+	<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
+	<style>
+		body {
+		// 设置页面主体（body）元素的外边距为10像素，用于调整页面内容与浏览器边界的距离，使页面布局更美观
+		margin: 10px;
+		}
 
-	<body>
-		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
-			<legend>
-				<div>
-					<div class="layui-inline">
-						<div class="layui-input-inline">
-							<input class="layui-input" id="inputSearch" placeholder="楼层名称">
-						</div>
-						<button class="layui-btn fa fa-search" id="searchButton"> 搜索</button>
-					</div>
-					<div class="layui-inline">
-						<button class="layui-btn fa fa-refresh" id="refreshButton"> 刷新</button>
-					</div>
-					<div class="layui-inline">
-						<button class="layui-btn fa fa-pencil-square-o " id="insertButton"> 新增</button>
-					</div>
-					<div class="layui-inline">
-						<button class="layui-btn fa fa-save" id="toXlsButton"> 导出</button>
-					</div>
+		.layui-elem-field legend {
+		// 设置具有layui-elem-field类的元素内的<legend>元素的字体大小为14像素，用于规范这类元素内标题文字的显示大小
+		font-size: 14px;
+		}
+
+		.layui-field-title {
+		// 设置具有layui-field-title类的元素的外边距，上外边距为25像素，下外边距为15像素，用于调整该元素在页面中的垂直间距，使其布局更合理
+		margin: 25px 0 15px;
+		}
+	</style>
+</head>
+
+<body>
+<!-- 创建一个<fieldset>元素，应用类名“layui-elem-field layui-field-title”，并通过内联样式设置上外边距为30像素，
+用于划分页面中的一个区域，通常用于对相关内容进行分组展示，结合Layui的样式类呈现出特定的外观效果 -->
+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
+	<legend>
+		<div>
+			<div class="layui-inline">
+				<div class="layui-input-inline">
+					<!-- 创建一个输入框（input）元素，应用类名“layui-input”，设置其id为“inputSearch”，
+placeholder属性设置提示文字为“楼层名称”，用于用户输入搜索关键词，以查找相关的楼层信息 -->
+					<input class="layui-input" id="inputSearch" placeholder="楼层名称">
 				</div>
-			</legend>
-		</fieldset>
-		<div id="toxlsTable">
-			<table id="tableID"></table>
+				<!-- 创建一个按钮（button）元素，应用类名“layui-btn fa fa-search”，设置其id为“searchButton”，文字为“搜索”，
+点击该按钮可触发搜索相关的功能，其中“fa fa-search”类可能是来自Font Awesome图标库，用于显示搜索图标 -->
+				<button class="layui-btn fa fa-search" id="searchButton"> 搜索</button>
+			</div>
+			<div class="layui-inline">
+				<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-refresh”，设置其id为“refreshButton”，文字为“刷新”，
+点击该按钮可触发刷新页面数据等相关功能，“fa fa-refresh”类用于显示刷新图标 -->
+				<button class="layui-btn fa fa-refresh" id="refreshButton"> 刷新</button>
+			</div>
+			<div class="layui-inline">
+				<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-pencil-square-o ”，设置其id为“insertButton”，文字为“新增”，
+点击该按钮可触发新增楼层相关数据的功能，“fa fa-pencil-square-o ”类用于显示编辑图标 -->
+				<button class="layui-btn fa fa-pencil-square-o " id="insertButton"> 新增</button>
+			</div>
+			<div class="layui-inline">
+				<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-save”，设置其id为“toXlsButton”，文字为“导出”，
+点击该按钮可触发将数据导出为Excel文件等相关功能，“fa fa-save”类用于显示保存图标 -->
+				<button class="layui-btn fa fa-save" id="toXlsButton"> 导出</button>
+			</div>
 		</div>
-		<script type="text/html" id="barAuth">
-			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
-			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
-			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
-		</script>
-		<script>
-			/**
-			 * 公共模板部分，自制模板修改
-			 * 规定：make 0重载 1新增 2修改 3搜索 4删除
-			 *
-			 * 这个模板来自权限表的jsp与js,因为大体类似，前端可以参照同一结构
-			 * 一些变量名换成了与具体项无关的名称，需要修改的部分通过注释注明
-			 * 原注释可以参考最初的版本 : AuthTable.jsp
-			 */
+	</legend>
+</fieldset>
+<!-- 创建一个id为“toxlsTable”的<div>元素，用于包裹下面的表格元素，可能作为后续对表格进行整体操作或布局调整的一个容器 -->
+<div id="toxlsTable">
+	<!-- 创建一个空的<table>元素，设置其id为“tableID”，后续会通过JavaScript代码动态渲染表格内容并填充数据到这个表格中 -->
+	<table id="tableID"></table>
+</div>
+<!-- 创建一个<script>标签，设置其type属性为“text/html”，并设置id为“barAuth”，里面包含了一些HTML代码片段，
+通常用于作为Layui表格组件中工具栏的模板定义，定义了“查看”“编辑”“删除”等操作按钮 -->
+<script type="text/html" id="barAuth">
+	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
+	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
+	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
+</script>
+<script>
+	/**
+	 * 公共模板部分，自制模板修改
+	 * 规定：make 0重载 1新增 2修改 3搜索 4删除
+	 *
+	 * 这个模板来自权限表的jsp与js,因为大体类似，前端可以参照同一结构
+	 * 一些变量名换成了与具体项无关的名称，需要修改的部分通过注释注明
+	 * 原注释可以参考最初的版本 : AuthTable.jsp
+	 */
 
-			layui.use(['util', 'layer', 'table'], function() {
-				$(document).ready(function() {
-					var table = layui.table,
-						layer = layui.layer,
-						util = layui.util;
-					var countNum;
-					var tableIns = table.render({
-						elem: '#tableID',
-						id: 'tableID',
-						url: baseUrl + '/FloorInfoServlet',
-						cols: [
-							[{
-								field: 'floorId',
-								title: 'ID',
-								width: 100,
-								sort: true,
-								fixed: true
-							}, {
-								field: 'floorName',
-								title: '楼层名称'
-							}, {
-								field: 'right',
-								title: '管理',
-								align: 'center',
-								toolbar: '#barAuth',
-								width: 200
-							}]
-						],
-						page: true,
-						where: {
-							make: 0
-						},
-						done: function(res, curr, count) {
-							countNum = count;
-						}
-					});
+	// 使用Layui框架的模块加载机制，加载'util'（可能是Layui提供的工具模块）、'layer'（用于弹出层等交互功能模块）、
+	// 'table'（用于表格相关操作的模块）这几个模块，并在加载完成后执行回调函数，在回调函数内进行页面的各种交互逻辑实现
+	layui.use(['util', 'layer', 'table'], function () {
+		// 当DOM文档加载完成后执行此回调函数，确保页面元素都已加载完毕后再操作元素，避免出现找不到元素等问题
+		$(document).ready(function () {
+			var table = layui.table,
+					layer = layui.layer,
+					util = layui.util;
+			var countNum;
 
-					//监听工具条
-					table.on('tool', function(obj) {
-						var data = obj.data,
-							layEvent = obj.event;
-						var floorId = data.floorId;
-						var floorName = data.floorName;
+			// 使用Layui的表格模块（table）的render方法来渲染表格，配置表格的各种属性
+			var tableIns = table.render({
+				// 指定表格渲染的DOM元素选择器，这里选择id为“tableID”的元素（即前面定义的空表格元素）作为表格的挂载点
+				elem: '#tableID',
+				// 给表格设置一个唯一的id，方便后续对表格进行一些操作（如重新加载等），这里设置为“tableID”与挂载点的id保持一致
+				id: 'tableID',
+				// 设置表格数据的请求地址，通过baseUrl（应该是在全局脚本或其他地方定义的基础URL）加上具体的Servlet路径来获取数据，
+				// 这里请求的是楼层信息相关的数据接口（FloorInfoServlet）
+				url: baseUrl + '/FloorInfoServlet',
+				cols: [
+					// 定义表格的列配置，每一个对象表示一列的相关属性设置
+					[{
+						// 设置列对应的字段名称为“floorId”，一般与后端返回的数据字段对应，用于绑定数据，这里表示楼层的ID
+						field: 'floorId',
+						// 设置列的标题为“ID”，显示在表头位置，让用户知道该列数据的含义
+						title: 'ID',
+						// 设置该列的宽度为100像素，用于控制表格列的显示宽度
+						width: 100,
+						// 设置该列可排序，用户点击表头时可按照此列数据进行升序或降序排列
+						sort: true,
+						// 设置该列固定在表格左侧，不随滚动条滚动而移动，常用于重要的、需要始终展示的列
+						fixed: true
+					}, {
+						field: 'floorName',
+						title: '楼层名称'
+					}, {
+						field: 'right',
+						title: '管理',
+						align: 'center',
+						// 指定该列使用的工具栏模板，这里使用前面定义的id为“barAuth”的模板，用于显示操作按钮
+						toolbar: '#barAuth',
+						width: 200
+					}]
+				],
+				// 设置表格开启分页功能，Layui会自动处理分页相关的显示和交互逻辑
+				page: true,
+				// 设置向服务器请求数据时额外携带的参数，这里设置“make”参数为0，具体含义根据注释中的规定是用于重载数据，
+				// 一般用于区分不同的请求场景或操作类型等
+				where: {
+					make: 0
+				},
+				done: function (res, curr, count) {
+					// 在表格渲染完成且数据加载完毕后执行此回调函数，将返回的数据总数赋值给countNum变量，
+					// 可能用于后续其他地方统计或判断数据量等情况
+					countNum = count;
+				}
+			});
 
-						if(layEvent === 'detail') { //查看功能
-							layer.alert('ID：' + floorId + '<br>楼层名称：' + floorName, {
-								skin: 'layui-layer-lan',
-								closeBtn: 0,
-								title: '您当前选择的楼层值信息',
-								anim: 4,
-								offset: '180px'
-							});
-						} else if(layEvent === 'del') {
-							layer.confirm('您确定要删除该条数据吗？', {
-								offset: '180px',
-								btn: ['是滴', '手滑']
-							}, function() {
-								table.reload('tableID', {
-									where: {
-										make: 4,
-										floorId: floorId
-									}
-								});
-								layer.msg('删除结果如下', {
-									offset: '250px',
-									icon: 1
-								});
-							}, function() {
-								layer.msg('删除操作已取消', {
-									offset: '250px'
-								});
-							});
-						} else if(layEvent === 'edit') {
-							layer.prompt({
-								title: '请输入楼层名称',
-								formType: 0,
-								value: floorName,
-								offset: '220px',
-								maxlength: 10
-							}, function(value, index) {
-								var params = "new=" + value + "&old=" + floorName;
-								$.post(baseUrl + '/QueryFloorNameServlet', params, function updateCheck(data) {
-									if(data === "1" || data === "2") {
-										layer.close(index);
-										table.reload('tableID', {
-											where: {
-												make: 2,
-												floorId: floorId,
-												floorName: value
-											}
-										});
-										layer.msg('修改结果如下', {
-											offset: '250px'
-										});
-									} else {
-										layer.alert('该楼层名称已经存在！', {
-											title: '警告',
-											icon: 4,
-											anim: 6,
-											offset: '220px'
-										});
-									}
-								});
-							});
-						}
-					});
+			// 监听表格的工具条事件，当用户点击表格中的操作按钮（如“查看”“编辑”“删除”等）时触发相应的逻辑处理，
+			// 'tool'是Layui表格组件中定义的工具条事件名，通过这个监听可以获取到用户点击的按钮对应的事件以及相关数据等信息
+			table.on('tool', function (obj) {
+				var data = obj.data,
+						layEvent = obj.event;
+				var floorId = data.floorId;
+				var floorName = data.floorName;
 
-					//搜索
-					$('#searchButton').click(function() {
-						var inputTxt = $('#inputSearch').val();
-						if(inputTxt === "")
-							layer.msg('您必须输入值', {
-								offset: '250px'
-							});
-						else if(inputTxt.length > 10)
-							layer.msg('您所输入的值长度不合法', {
-								offset: '250px'
-							});
-						else {
-							tableIns.reload({
-								where: {
-									make: 3,
-									floorName: inputTxt
-								}
-							});
-							layer.msg('搜索结果', {
-								offset: '250px'
-							});
-						}
+				if (layEvent === 'detail') { //查看功能
+					// 当点击“查看”按钮时，使用Layui的layer模块的alert方法弹出一个提示框，显示该条楼层数据的详细信息，
+					// 包括ID、楼层名称等字段的值，设置提示框的样式、标题、关闭按钮显示、动画效果、垂直偏移位置等属性
+					layer.alert('ID：' + floorId + '<br>楼层名称：' + floorName, {
+						skin: 'layui-layer-lan',
+						closeBtn: 0,
+						title: '您当前选择的楼层值信息',
+						anim: 4,
+						offset: '180px'
 					});
-
-					//刷新
-					$('#refreshButton').click(function() {
-						tableIns.reload({
+				} else if (layEvent === 'del') {
+					// 当点击“删除”按钮时，使用Layui的layer模块的confirm方法弹出一个确认框，询问用户是否确定要删除该条数据，
+					// 设置确认框的位置、按钮文字等属性，用户点击不同按钮会执行相应的回调函数
+					layer.confirm('您确定要删除该条数据吗？', {
+						offset: '180px',
+						btn: ['是滴', '手滑']
+					}, function () {
+						// 如果用户点击“是滴”按钮，重新加载表格数据，通过设置“make”参数为4以及传递要删除的记录的“floorId”，
+						// 向后端发送请求，让后端执行删除操作并更新表格数据，这里应该是与后端约定好的参数传递和操作逻辑
+						table.reload('tableID', {
 							where: {
-								make: 0,
-								page: 1
+								make: 4,
+								floorId: floorId
 							}
 						});
-					});
-
-					//新增
-					$('#insertButton').click(function() {
-						layer.prompt({
-							title: '请输入楼层名称',
-							formType: 0,
-							offset: '220px',
-							maxlength: 10
-						}, function(inputValue, index) {
-							var params = "new=" + inputValue + "&old=" + inputValue;
-							$.post(baseUrl + '/QueryFloorNameServlet', params, function(data) {
-								if(data === "1") {
-									layer.close(index);
-									table.reload('tableID', {
-										where: {
-											make: 1,
-											floorName: inputValue
-										}
-									});
-									layer.msg('新增楼层成功', {
-										offset: '250px'
-									});
-									tableIns.reload({
-										where: {
-											make: 0
-										}
-									});
-								} else {
-									layer.alert('该楼层名称已经存在！', {
-										title: '警告',
-										icon: 4,
-										anim: 6,
-										offset: '220px'
-									});
-								}
-							});
+						// 弹出一个提示框（使用Layui的layer模块的msg方法），告知用户删除操作的结果，设置提示框的位置、图标等属性
+						layer.msg('删除结果如下', {
+							offset: '250px',
+							icon: 1
 						});
-					});
-
-					//导出
-					$('#toXlsButton').click(function() {
-						location.href = baseUrl + '/FloorInfoExcelServlet';
-						layer.alert('Excel文件生成完成！', {
-							title: '成功',
-							icon: 6,
-							anim: 1,
+					}, function () {
+						// 如果用户点击“手滑”按钮（即取消删除操作），弹出一个提示框告知用户删除操作已取消，设置提示框的位置属性
+						layer.msg('删除操作已取消', {
 							offset: '250px'
 						});
 					});
-
-					//回到顶端
-					util.fixbar({
-						showHeight: 2,
-						click: function(type) {
-							console.log(type);
-						}
+				} else if (layEvent === 'edit') {
+					// 编辑功能逻辑，弹出一个输入框（使用Layui的layer模块的prompt方法），让用户输入修改后的楼层名称，
+					// 设置输入框的标题、类型、初始值、位置、最大输入长度等属性，用户输入完成并点击确认后会执行相应的回调函数，
+					// 回调函数中可以获取用户输入的值进行后续处理
+					layer.prompt({
+						title: '请输入楼层名称',
+						formType: 0,
+						value: floorName,
+						offset: '220px',
+						maxlength: 10
+					}, function (value, index) {
+						var params = "new=" + value + "&old=" + floorName;
+						// 使用jQuery的$.post方法向服务器发送POST请求，请求地址为baseUrl加上'/QueryFloorNameServlet'，
+						// 传递参数params（包含新的楼层名称和旧的楼层名称等信息），并在请求成功后执行回调函数（这里命名为updateCheck）处理返回的数据
+						$.post(baseUrl + '/QueryFloorNameServlet', params, function updateCheck(data) {
+							if (data === "1" || data === "2") {
+								layer.close(index);
+								// 如果服务器返回的数据为“1”或“2”，表示修改操作可以进行，重新加载表格数据，
+								// 通过设置“make”参数为2以及传递要修改的记录的“floorId”和新的“floorName”（用户输入的值），
+								// 向后端发送请求，让后端执行修改操作并更新表格数据
+								table.reload('tableID', {
+									where: {
+										make: 2,
+										floorId: floorId,
+										floorName: value
+									}
+								});
+								// 弹出一个提示框告知用户修改结果，设置提示框的位置属性
+								layer.msg('修改结果如下', {
+									offset: '250px'
+								});
+							} else {
+								// 如果服务器返回的数据不是“1”或“2”，表示该楼层名称已经存在，弹出一个警告框（使用Layui的layer模块的alert方法），
+								// 提示用户该楼层名称已存在，设置警告框的标题、图标、动画效果、位置等属性
+								layer.alert('该楼层名称已经存在！', {
+									title: '警告',
+									icon: 4,
+									anim: 6,
+									offset: '220px'
+								});
+							}
+						});
 					});
-				});
+				}
 			});
-		</script>
-	</body>
 
-</html>
+			// 搜索功能逻辑，为id为“searchButton”的元素（即页面中的搜索按钮）绑定点击事件处理函数，当按钮被点击时执行以下逻辑
+			// 先获取id为“inputSearch”的输入框元素的值（即用户输入的搜索关键词内容），赋值给变量inputTxt，用于后续判断和操作
+			$('#searchButton').click(function () {
+				var inputTxt = $('#inputSearch').val();
+				if (inputTxt === "") {
+	// 判断用户输入的搜索关键词是否为空字符串，如果是，则使用L

src/webapp/webpage/SystemSetting/LogTable.jsp

@@ -1,64 +1,100 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面的内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
+确保页面中的字符能被正确解析和显示，避免出现乱码问题 -->
 <html>
 
 <head>
+    <!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
     <meta charset="utf-8">
+    <!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户知晓当前页面所属的系统名称 -->
     <title>酒店管理系统</title>
+    <!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
+media="all"表示此样式适用于所有媒体类型，也就是在各种设备上都会应用该样式 -->
     <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
+    <!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），用于在页面中使用各种图标，
+其路径为上级目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css -->
     <link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
+    <!-- 引入Layui框架的JavaScript脚本文件（layui.js），这是使用Layui框架各种功能和组件的基础，
+路径指向上级目录下的js/layui/layui.js -->
     <script src="../../js/layui/layui.js"></script>
+    <!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
+方便简化JavaScript编程，其路径为上级目录下的js/jquery.js -->
     <script src="../../js/jquery.js"></script>
+    <!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了整个系统页面通用的一些变量定义、函数等逻辑，
+路径为上级目录下的js/global.js -->
     <script src="../../js/global.js"></script>
     <style>
         body {
-            margin: 10px;
+        // 设置页面主体（body）元素的外边距为10像素，用于调整页面内容与浏览器边界的距离，使页面布局更美观
+        margin: 10px;
         }
 
         .layui-elem-field legend {
-            font-size: 14px;
+        // 设置具有layui-elem-field类的元素内的<legend>元素的字体大小为14像素，用于规范这类元素内标题文字的显示大小
+        font-size: 14px;
         }
 
         .layui-field-title {
-            margin: 25px 0 15px;
+        // 设置具有layui-field-title类的元素的外边距，上外边距为25像素，下外边距为15像素，用于调整该元素在页面中的垂直间距，使其布局更合理
+        margin: 25px 0 15px;
         }
     </style>
 </head>
 
 <body>
+<!-- 创建一个<fieldset>元素，应用类名“layui-elem-field layui-field-title”，并通过内联样式设置上外边距为30像素，
+用于划分页面中的一个区域，通常用于对相关内容进行分组展示，结合Layui的样式类呈现出特定的外观效果 -->
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
     <legend>
         <div>
             <div class="layui-inline">
+                <!-- 创建一个按钮（button）元素，应用类名“layui-btn fa fa-save”，设置其id为“toXls”，文字为“导出当前数据”，
+点击该按钮可触发将当前页面表格数据导出为Excel文件等相关功能，“fa fa-save”类用于显示保存图标 -->
                 <button class="layui-btn fa fa-save" id="toXls"> 导出当前数据</button>
             </div>
         </div>
     </legend>
 </fieldset>
+<!-- 这是一段HTML注释，说明下面的<table>元素是采用方法级渲染表格的方式来进行后续操作，
+此处只是先定义了一个空的表格，其具体内容和样式等会通过JavaScript代码中的表格渲染方法来动态添加 -->
 <%--方法级渲染表格--%>
 <table id="tableLogInfo"></table>
+<!-- 创建一个<script>标签，设置其type属性为“text/html”，并设置id为“barAuth”，里面包含了一些HTML代码片段，
+通常用于作为Layui表格组件中工具栏的模板定义，这里定义了一个“删除”操作按钮 -->
 <script type="text/html" id="barAuth">
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>
 <script>
+    // 使用Layui框架的模块加载机制，加载'util'（可能是Layui提供的工具模块）、'layer'（用于弹出层等交互功能模块）、
+    // 'table'（用于表格相关操作的模块）这几个模块，并在加载完成后执行回调函数，在回调函数内进行页面的各种交互逻辑实现
     layui.use(['util', 'layer', 'table'], function () {
+        // 当DOM文档加载完成后执行此回调函数，确保页面元素都已加载完毕后再操作元素，避免出现找不到元素等问题
         $(document).ready(function () {
             var table = layui.table,
                 layer = layui.layer,
                 util = layui.util;
             var countNum;
 
-            //方法级渲染
+            // 方法级渲染表格操作，使用Layui的表格模块（table）的render方法来渲染表格，配置表格的各种属性
             var tableIns = table.render({
+                // 指定表格渲染的DOM元素选择器，这里选择id为“tableLogInfo”的元素（即前面定义的空表格元素）作为表格的挂载点
                 elem: '#tableLogInfo' //绑定元素-->对应页面table的ID
                 ,
+                // 给表格设置一个唯一的id，方便后续对表格进行一些操作（如重新加载等），这里设置为“tableLogInfo”与挂载点的id保持一致
                 id: 'tableLogInfo' //表格容器索引
                 ,
+                // 设置表格数据的请求地址，通过baseUrl（应该是在全局脚本或其他地方定义的基础URL）加上具体的Servlet路径来获取数据
                 url: baseUrl + '/LogInfoServlet' //数据接口
                 ,
+                // 设置每页显示的数据条数为30条，用于控制表格分页时每页的数据量
                 limit: 30,
                 cols: [
+                    // 定义表格的列配置，每一个对象表示一列的相关属性设置
                     [ //表头
-                        //field字段名、title标题名、width列宽、sort排序、fixed固定列、toolbar绑定工具条
+                        // 定义每列的相关属性，包括field字段名（一般与后端返回的数据字段对应，用于绑定数据）、
+                        // title标题名（显示在表头位置，让用户知道该列数据的含义）、width列宽、sort排序（设置该列可排序，用户点击表头时可按照此列数据进行升序或降序排列）、
+                        // fixed固定列（设置该列固定在表格的某个位置，不随滚动条滚动而移动，常用于重要的、需要始终展示的列）、
+                        // toolbar绑定工具条（指定该列使用的工具栏模板，用于显示操作按钮）等属性
                         {
                             field: 'logId',
                             title: '日志编号',
@@ -90,39 +126,53 @@
                     }
                     ]
                 ],
+                // 设置表格开启分页功能，Layui会自动处理分页相关的显示和交互逻辑
                 page: true //是否开启分页
                 ,
+                // 设置向服务器请求数据时额外携带的参数，这里设置“make”参数为0，具体含义可能根据后端接口要求而定，
+                // 一般用于区分不同的请求场景或操作类型等
                 where: {
                     make: 0
                 } //接口的其它参数
                 ,
                 done: function (res, curr, count) {
+                    // 在表格渲染完成且数据加载完毕后执行此回调函数，将返回的数据总数赋值给countNum变量，
+                    // 可能用于后续其他地方统计或判断数据量等情况
                     countNum = count;
                 }
             });
 
-            //监听工具条
+            // 监听表格的工具条事件，当用户点击表格中的操作按钮（如“删除”等）时触发相应的逻辑处理，
+            // 'tool'是Layui表格组件中定义的工具条事件名，通过这个监听可以获取到用户点击的按钮对应的事件以及相关数据等信息
             table.on('tool', function (obj) { //tool是工具条事件名
                 var data = obj.data,
                     layEvent = obj.event; //获得 lay-event 对应的值
-                //从前当前行获取列数据
+                // 从当前行的数据对象（data）中获取“logId”字段的值，赋值给变量logId，
+                // 一般用于后续操作中传递该条日志记录的唯一标识，比如删除操作时需要告诉后端要删除哪条日志记录
                 var logId = data.logId;
 
                 if (layEvent === 'del') { //删除功能
+                    // 使用Layui的layer模块的confirm方法弹出一个确认框，询问用户是否确定要删除该条数据，
+                    // 设置确认框的位置、按钮文字等属性，用户点击不同按钮会执行相应的回调函数
                     layer.confirm('您确定要删除该条数据吗？', {
                         offset: '180px',
                         btn: ['是滴', '手滑']
                     }, function () {
+                        // 如果用户点击“是滴”按钮，重新加载表格数据，通过设置“make”参数为1以及传递要删除的记录的“logId”，
+                        // 向后端发送请求，让后端执行删除操作并更新表格数据，这里应该是与后端约定好的参数传递和操作逻辑
                         tableIns.reload({
                             where: {
                                 make: 1,
                                 logId: logId
                             }
                         });
+                        // 弹出一个提示框（使用Layui的layer模块的msg方法），告知用户删除操作的结果，设置提示框的位置、图标等属性
                         layer.msg('删除结果如下', {
                             offset: '250px',
                             icon: 1
                         });
+                        // 此处原本可能想再次重新加载表格数据（比如刷新页面数据），但代码被注释掉了，
+                        // 可能是后续发现这样的操作不符合实际需求或者存在一些问题导致暂时不需要执行这部分逻辑
                         // tableIns.reload({
                         //     where: {
                         //         make: 0,
@@ -130,6 +180,7 @@
                         //     }
                         // });
                     }, function () {
+                        // 如果用户点击“手滑”按钮（即取消删除操作），弹出一个提示框告知用户删除操作已取消，设置提示框的位置属性
                         layer.msg('删除操作已取消', {
                             offset: '250px'
                         });
@@ -137,7 +188,15 @@
                 }
             });
 
-            //刷新
+            // 为id为“refresh”的元素（可能是页面上的刷新按钮，但代码中未看到该元素的定义，可能存在遗漏或者后续需要添加的情况）绑定点击事件处理函数，
+            // 当按钮被点击时，使用之前定义的表格实例（tableIns）的reload方法重新加载表格数据，通过设置相关参数（make为0，page为1）来刷新表格展示内容，
+            // 一般用于重新获取最新的数据并更新页面显示
+            // 此处假设页面上后续会添加对应的“refresh”按钮元素来触发这个刷新功能
+            // 目前代码逻辑中，如果不存在这个按钮元素，这部分代码暂时不会生效
+            // 可以检查是否遗漏了HTML中按钮元素的定义或者根据实际情况进行调整完善
+            // 示例：<button id="refresh">刷新</button> 类似这样的按钮元素定义
+            // 然后再通过这个点击事件来实现刷新表格数据的功能
+            // 刷新
             $('#refresh').click(function () {
                 tableIns.reload({
                     where: {
@@ -147,7 +206,13 @@
                 });
             });
 
-            //导出
+            // 为id为“toXls”的元素（即页面中的导出按钮，前面定义的那个用于导出当前数据的按钮）绑定点击事件处理函数，
+            // 当按钮被点击时，通过修改浏览器的location.href属性，跳转到“baseUrl + '/LogInfoExcelServlet'”这个地址，
+            // 一般是向服务器端发起请求，让服务器端执行生成Excel文件的相关逻辑，比如从数据库获取数据并整理成Excel格式返回给浏览器端下载等操作
+            // 导出操作完成后，使用Layui的layer模块的alert方法弹出一个提示消息框，显示文字“Excel文件生成完成！”，
+            // 并设置提示框的标题为“成功”，图标为6（一般对应成功的图标样式，由Layui框架定义），动画效果为1（也是由Layui框架定义的某种动画展示方式），
+            // 垂直偏移位置为距离顶部250px，用于告知用户Excel文件已经成功生成，可以进行后续操作（比如保存等）
+            // 导出
             $('#toXls').click(function () {
                 location.href = baseUrl + '/LogInfoExcelServlet';
                 layer.alert('Excel文件生成完成！', {
@@ -158,7 +223,11 @@
                 });
             });
 
-            //固定块  -- 就是那个回到顶部
+            // 使用Layui的util模块的fixbar方法创建一个回到页面顶端的功能组件，通过传入配置对象来设置相关属性和行为，
+            // 这里设置showHeight为2（具体含义由Layui框架定义，可能与显示的高度等相关条件有关），
+            // 并为点击事件设置回调函数，当用户点击该组件时，会接收到一个参数type（具体含义由Layui框架定义，可能与点击的具体位置等相关），
+            // 此处只是简单地将接收到的type参数打印到浏览器的控制台（一般用于调试目的，查看点击操作传递的相关信息）
+            // 固定块  -- 就是那个回到顶部
             util.fixbar({
                 showHeight: 2,
                 click: function (type) {

src/webapp/webpage/SystemSetting/RoomTypeTable.jsp

@@ -1,343 +1,488 @@
-<%@ page contentType="text/html;charset=UTF-8" %>
+<%@ page contentType="text/html;<%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面的内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
+确保页面中的字符能被正确解析和显示，避免出现乱码问题 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<title>酒店管理系统</title>
-		<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
-		<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
-		<script src="../../js/layui/layui.js"></script>
-		<script src="../../js/jquery.js"></script>
-		<script src="../../js/global.js"></script>
-		<script src="../../js/toExcel/xlsx.full.min.js"></script>
-		<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
-		<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
-		<style>
-			body {
-				margin: 10px;
-			}
-			
-			.layui-elem-field legend {
-				font-size: 14px;
-			}
-			
-			.layui-field-title {
-				margin: 25px 0 15px;
-			}
-		</style>
-	</head>
+<head>
+	<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户知晓当前页面所属的系统名称 -->
+	<title>酒店管理系统</title>
+	<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
+media="all"表示此样式适用于所有媒体类型，也就是在各种设备上都会应用该样式 -->
+	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
+	<!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），用于在页面中使用各种图标，
+其路径为上级目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css -->
+	<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
+	<!-- 引入Layui框架的JavaScript脚本文件（layui.js），这是使用Layui框架各种功能和组件的基础，
+路径指向上级目录下的js/layui/layui.js -->
+	<script src="../../js/layui/layui.js"></script>
+	<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
+方便简化JavaScript编程，其路径为上级目录下的js/jquery.js -->
+	<script src="../../js/jquery.js"></script>
+	<!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了整个系统页面通用的一些变量定义、函数等逻辑，
+路径为上级目录下的js/global.js -->
+	<script src="../../js/global.js"></script>
+	<!-- 引入处理Excel相关功能的JavaScript库（xlsx.full.min.js），可能用于后续将数据导出为Excel等操作，
+其路径指向上级目录下的js/toExcel/xlsx.full.min.js -->
+	<script src="../../js/toExcel/xlsx.full.min.js"></script>
+	<!-- 引入FileSaver.js脚本文件，该文件通常用于在浏览器端实现文件保存功能，
+比如配合前面的Excel库将生成的Excel文件保存到本地，其路径为上级目录下的js/toExcel/FileSaver.js -->
+	<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
+	<!-- 引入自定义的用于导出数据到Excel的脚本文件（Export2Excel.js），里面应该包含了具体的导出逻辑和相关功能实现，
+其路径为上级目录下的js/toExcel/Export2Excel.js -->
+	<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
+	<style>
+		body {
+		// 设置页面主体（body）元素的外边距为10像素，用于调整页面内容与浏览器边界的距离，使页面布局更美观
+		margin: 10px;
+		}
 
-	<body>
-		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
-			<legend>
-				<div>
-					<div class="layui-inline">
-						<div class="layui-input-inline">
-							<input class="layui-input" id="inputSearch" placeholder="房间类型">
-						</div>
-						<button class="layui-btn fa fa-search" id="searchButton"> 搜索</button>
-					</div>
-					<div class="layui-inline">
-						<button class="layui-btn fa fa-refresh" id="refreshButton"> 刷新</button>
-					</div>
-					<div class="layui-inline">
-						<button class="layui-btn fa fa-pencil-square-o " id="insertButton"> 新增</button>
-					</div>
-					<div class="layui-inline">
-						<button class="layui-btn fa fa-save" id="toXlsButton"> 导出</button>
-					</div>
+		.layui-elem-field legend {
+		// 设置具有layui-elem-field类的元素内的<legend>元素的字体大小为14像素，用于规范这类元素内标题文字的显示大小
+		font-size: 14px;
+		}
+
+		.layui-field-title {
+		// 设置具有layui-field-title类的元素的外边距，上外边距为25像素，下外边距为15像素，用于调整该元素在页面中的垂直间距，使其布局更合理
+		margin: 25px 0 15px;
+		}
+	</style>
+</head>
+
+<body>
+<!-- 创建一个<fieldset>元素，应用类名“layui-elem-field layui-field-title”，并通过内联样式设置上外边距为30像素，
+用于划分页面中的一个区域，通常用于对相关内容进行分组展示，结合Layui的样式类呈现出特定的外观效果 -->
+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
+	<legend>
+		<div>
+			<div class="layui-inline">
+				<div class="layui-input-inline">
+					<!-- 创建一个输入框（input）元素，应用类名“layui-input”，设置其id为“inputSearch”，
+placeholder属性设置提示文字为“房间类型”，用于用户输入搜索关键词，以查找相关的房间类型信息 -->
+					<input class="layui-input" id="inputSearch" placeholder="房间类型">
 				</div>
-			</legend>
-		</fieldset>
-		<div id="toxlsTable">
-			<table id="tableID"></table>
+				<!-- 创建一个按钮（button）元素，应用类名“layui-btn fa fa-search”，设置其id为“searchButton”，文字为“搜索”，
+点击该按钮可触发搜索相关的功能，其中“fa fa-search”类可能是来自Font Awesome图标库，用于显示搜索图标 -->
+				<button class="layui-btn fa fa-search" id="searchButton"> 搜索</button>
+			</div>
+			<div class="layui-inline">
+				<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-refresh”，设置其id为“refreshButton”，文字为“刷新”，
+点击该按钮可触发刷新页面数据等相关功能，“fa fa-refresh”类用于显示刷新图标 -->
+				<button class="layui-btn fa fa-refresh" id="refreshButton"> 刷新</button>
+			</div>
+			<div class="layui-inline">
+				<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-pencil-square-o ”，设置其id为“insertButton”，文字为“新增”，
+点击该按钮可触发新增房间类型等相关数据的功能，“fa fa-pencil-square-o ”类用于显示编辑图标 -->
+				<button class="layui-btn fa fa-pencil-square-o " id="insertButton"> 新增</button>
+			</div>
+			<div class="layui-inline">
+				<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-save”，设置其id为“toXlsButton”，文字为“导出”，
+点击该按钮可触发将数据导出为Excel文件等相关功能，“fa fa-save”类用于显示保存图标 -->
+				<button class="layui-btn fa fa-save" id="toXlsButton"> 导出</button>
+			</div>
 		</div>
-		<script type="text/html" id="barAuth">
-			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
-			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
-			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
-		</script>
-		<script>
-			layui.use(['util', 'layer', 'table'], function() {
-				$(document).ready(function() {
-					var table = layui.table,
-						layer = layui.layer,
-						util = layui.util;
-					var countNum;
-					var tableIns = table.render({
-						elem: '#tableID',
-						id: 'tableID',
-						url: baseUrl + '/RoomTypeServlet',
-						cols: [
-							[{
-								field: 'typeId',
-								title: 'ID',
-								sort: true,
-								fixed: true,
-                                width: 150
-							}, {
-								field: 'typeName',
-								title: '类型名称'
-							}, {
-								field: 'price',
-								title: '价格'
-							}, {
-								field: 'splicPrice',
-								title: '拼房价格'
-							}, {
-								field: 'exceedance',
-								title: '可超预定数'
-							}, {
-								field: 'isSplice',
-								title: '是否可拼房'
-							}, {
-								field: 'right',
-								title: '管理',
-								align: 'center',
-								toolbar: '#barAuth',
-								width: 200
-							}]
-						],
-						page: true,
-						where: {
-							make: 0
-						},
-						done: function(res, curr, count) {
-							countNum = count;
-						}
-					});
+	</legend>
+</fieldset>
+<!-- 创建一个id为“toxlsTable”的<div>元素，用于包裹下面的表格元素，可能作为后续对表格进行整体操作或布局调整的一个容器 -->
+<div id="toxlsTable">
+	<!-- 创建一个空的<table>元素，设置其id为“tableID”，后续会通过JavaScript代码动态渲染表格内容并填充数据到这个表格中 -->
+	<table id="tableID"></table>
+</div>
+<!-- 创建一个<script>标签，设置其type属性为“text/html”，并设置id为“barAuth”，里面包含了一些HTML代码片段，
+通常用于作为Layui表格组件中工具栏的模板定义，定义了“查看”“编辑”“删除”等操作按钮 -->
+<script type="text/html" id="barAuth">
+	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
+	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
+	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
+</script>
+<script>
+	// 使用Layui框架的模块加载机制，加载'util'（可能是Layui提供的工具模块）、'layer'（用于弹出层等交互功能模块）、
+	// 'table'（用于表格相关操作的模块）这几个模块，并在加载完成后执行回调函数，在回调函数内进行页面的各种交互逻辑实现
+	layui.use(['util', 'layer', 'table'], function () {
+		// 当DOM文档加载完成后执行此回调函数，确保页面元素都已加载完毕后再操作元素，避免出现找不到元素等问题
+		$(document).ready(function () {
+			var table = layui.table,
+					layer = layui.layer,
+					util = layui.util;
+			var countNum;
+			// 使用Layui的表格模块（table）的render方法来渲染表格，配置表格的各种属性
+			var tableIns = table.render({
+				// 指定表格渲染的DOM元素选择器，这里选择id为“tableID”的元素（即前面定义的空表格元素）作为表格的挂载点
+				elem: '#tableID',
+				// 给表格设置一个唯一的id，方便后续对表格进行一些操作（如重新加载等），这里设置为“tableID”与挂载点的id保持一致
+				id: 'tableID',
+				// 设置表格数据的请求地址，通过baseUrl（应该是在全局脚本或其他地方定义的基础URL）加上具体的Servlet路径来获取数据
+				url: baseUrl + '/RoomTypeServlet',
+				cols: [
+					// 定义表格的列配置，每一个对象表示一列的相关属性设置
+					[{
+						// 设置列对应的字段名称为“typeId”，一般与后端返回的数据字段对应，用于绑定数据
+						field: 'typeId',
+						// 设置列的标题为“ID”，显示在表头位置，让用户知道该列数据的含义
+						title: 'ID',
+						// 设置该列可排序，用户点击表头时可按照此列数据进行升序或降序排列
+						sort: true,
+						// 设置该列固定在表格左侧，不随滚动条滚动而移动，常用于重要的、需要始终展示的列
+						fixed: true,
+						width: 150
+					}, {
+						field: 'typeName',
+						title: '类型名称'
+					}, {
+						field: 'price',
+						title: '价格'
+					}, {
+						field: 'splicPrice',
+						title: '拼房价格'
+					}, {
+						field: 'exceedance',
+						title: '可超预定数'
+					}, {
+						field: 'isSplice',
+						title: '是否可拼房'
+					}, {
+						field: 'right',
+						title: '管理',
+						align: 'center',
+						// 指定该列使用的工具栏模板，这里使用前面定义的id为“barAuth”的模板，用于显示操作按钮
+						toolbar: '#barAuth',
+						width: 200
+					}]
+				],
+				// 设置表格开启分页功能，Layui会自动处理分页相关的显示和交互逻辑
+				page: true,
+				// 设置向服务器请求数据时额外携带的参数，这里设置“make”参数为0，具体含义可能根据后端接口要求而定，
+				// 一般用于区分不同的请求场景或操作类型等
+				where: {
+					make: 0
+				},
+				done: function (res, curr, count) {
+					// 在表格渲染完成且数据加载完毕后执行此回调函数，将返回的数据总数赋值给countNum变量，
+					// 可能用于后续其他地方统计或判断数据量等情况
+					countNum = count;
+				}
+			});
 
-					//监听工具条
-					table.on('tool', function(obj) {
-						var data = obj.data,
-							layEvent = obj.event;
-						var typeId = data.typeId;
-						var typeName = data.typeName;
-						var price = data.price;
-						var splicPrice = data.splicPrice;
-						var exceedance = data.exceedance;
-						var isSplice = data.isSplice;
+			// 监听表格的工具条事件，当用户点击表格中的操作按钮（如“查看”“编辑”“删除”等）时触发相应的逻辑处理
+			table.on('tool', function (obj) {
+				var data = obj.data,
+						layEvent = obj.event;
+				var typeId = data.typeId;
+				var typeName = data.typeName;
+				var price = data.price;
+				var splicPrice = data.splicPrice;
+				var exceedance = data.exceedance;
+				var isSplice = data.isSplice;
 
-						if(layEvent === 'detail') {
-							layer.alert(
-								'ID：' + typeId + '<br>类型名称：' + typeName + '<br>价格：' + price +
-								'<br>拼房价格：' + splicPrice + '<br>可超预定数：' + exceedance + '<br>是否可拼房：' + isSplice, {
-									skin: 'layui-layer-lan',
-									closeBtn: 0,
-									title: '您当前选择的房间类型信息',
-									anim: 4,
-									offset: '180px'
-								});
-						} else if(layEvent === 'del') {
-							layer.confirm('您确定要删除该条数据吗？', {
-								offset: '180px',
-								btn: ['是滴', '手滑']
-							}, function() {
-								table.reload('tableID', {
-									where: {
-										make: 4,
-										typeId: typeId
-									}
-								});
-								layer.msg('删除结果如下', {
-									offset: '250px',
-									icon: 1
-								});
-							}, function() {
-								layer.msg('删除操作已取消', {
-									offset: '250px'
-								});
+				if (layEvent === 'detail') {
+					// 当点击“查看”按钮时，弹出一个提示框（使用Layui的layer模块的alert方法），显示该条房间类型数据的详细信息，
+					// 包括ID、类型名称、价格等各个字段的值，设置提示框的样式、标题等相关属性
+					layer.alert(
+							'ID：' + typeId + '<br>类型名称：' + typeName + '<br>价格：' + price +
+							'<br>拼房价格：' + splicPrice + '<br>可超预定数：' + exceedance + '<br>是否可拼房：' + isSplice, {
+								skin: 'layui-layer-lan',
+								closeBtn: 0,
+								title: '您当前选择的房间类型信息',
+								anim: 4,
+								offset: '180px'
 							});
-						} else if(layEvent === 'edit') {
-							//编辑
-							layer.prompt({
-								title: '请输入类型名称',
-								formType: 0,
-								value: typeName,
-								offset: '220px',
-								maxlength: 10
-							}, function(NewTypeName, index) {
-								var params = "new=" + NewTypeName + "&old=" + typeName;
-								$.post(baseUrl + '/QueryRoomTypeNameServlet', params, function(data) {
-									if(data === "1" || data === "2") {
-										if(NewTypeName.length < 3)
-											layer.alert('长度不符合！', {
+				} else if (layEvent === 'del') {
+					// 当点击“删除”按钮时，弹出一个确认框（使用Layui的layer模块的confirm方法），询问用户是否确定要删除该条数据，
+					// 设置确认框的位置、按钮文字等属性，用户点击不同按钮会执行相应的回调函数
+					layer.confirm('您确定要删除该条数据吗？', {
+						offset: '180px',
+						btn: ['是滴', '手滑']
+					}, function () {
+						// 如果用户点击“是滴”按钮，重新加载表格数据，通过设置“make”参数为4以及传递要删除的记录的“typeId”，
+						// 向后端发送请求，让后端执行删除操作并更新表格数据，这里应该是与后端约定好的参数传递和操作逻辑
+						table.reload('tableID', {
+							where: {
+								make: 4,
+								typeId: typeId
+							}
+						});
+						// 弹出一个提示框（使用Layui的layer模块的msg方法），告知用户删除操作的结果，设置提示框的位置、图标等属性
+						layer.msg('删除结果如下', {
+							offset: '250px',
+							icon: 1
+						});
+					}, function () {
+						// 如果用户点击“手滑”按钮（即取消删除操作），弹出一个提示框告知用户删除操作已取消，设置提示框的位置属性
+						layer.msg('删除操作已取消', {
+							offset: '250px'
+						});
+					});
+				} else if (layEvent === 'edit') {
+					// 编辑操作逻辑，当点击“编辑”按钮时，以下是一系列的交互流程用于让用户输入修改后的各项数据，并进行合法性校验等操作
+
+					// 弹出一个输入框（使用Layui的layer模块的prompt方法），让用户输入修改后的类型名称，设置输入框的标题、初始值、位置、最大输入长度等属性，
+					// 用户输入完成并点击确认后会执行相应的回调函数，回调函数中可以获取用户输入的值进行后续处理
+					layer.prompt({
+						title: '请输入类型名称',
+						formType: 0,
+						value: typeName,
+						offset: '220px',
+						maxlength: 10
+					}, function (NewTypeName, index) {
+						var params = "new=" + NewTypeName + "&old=" + typeName;
+						// 使用jQuery的$.post方法向服务器发送POST请求，请求地址为baseUrl加上'/QueryRoomTypeNameServlet'，
+						// 传递参数params（包含新的类型名称和旧的类型名称等信息），并在请求成功后执行回调函数处理返回的数据
+						$.post(baseUrl + '/QueryRoomTypeNameServlet', params, function (data) {
+							if (data === "1" || data === "2") {
+								if (NewTypeName.length < 3)
+										// 如果返回的数据为“1”或“2”且用户输入的新类型名称长度小于3，弹出一个警告框（使用Layui的layer模块的alert方法），
+										// 提示用户输入的长度不符合要求，设置警告框的标题、图标、动画效果、位置等属性
+									layer.alert('长度不符合！', {
+										title: '警告',
+										icon: 4,
+										anim: 6,
+										offset: '220px'
+									});
+								else {
+									layer.close(index);
+									layer.prompt({
+										title: '请输入价格',
+										formType: 0,
+										value: price,
+										offset: '220px',
+										maxlength: 10
+									}, function (NewPrice, index) {
+										if (isNaN(NewPrice)) {
+											// 如果用户输入的价格不是数字（通过isNaN函数判断），弹出一个提示框告知用户输入的值类型不合法，设置提示框的位置属性
+											layer.msg('您所输入的值类型不合法', {
+												// 使用Layui的layer模块的msg方法弹出一个提示消息框，显示文字为“您所输入的值类型不合法”，
+												// 并通过传入的配置对象设置提示框的垂直偏移位置为距离顶部250px，用于提示用户输入的数据类型不符合要求
+												offset: '250px'
+											});
+										else {
+												// 当满足前面的条件判断不成立时（即输入的值类型合法等情况），执行以下逻辑，此处通常用于关闭当前的输入框弹出层
+												layer.close(index);
+												layer.prompt({
+													// 使用Layui的layer模块的prompt方法再次弹出一个输入框，用于让用户输入拼房价格相关信息，
+													// 设置输入框的标题为“请输入拼房价格”，提示用户要输入的内容
+													title: '请输入拼房价格',
+													// 设置输入框的类型为0，一般表示普通文本输入框（不同的formType值对应不同的输入框类型，如密码框等有不同的设置）
+													formType: 0,
+													// 设置输入框的初始值为变量splicPrice的值，即显示之前的拼房价格作为默认值，方便用户参考修改
+													value: splicPrice,
+													// 设置输入框弹出层的垂直偏移位置为距离顶部220px，确定其在页面中的显示位置
+													offset: '220px',
+													// 设置输入框允许用户输入的最大长度为10个字符，对用户输入内容长度进行限制
+													maxlength: 10
+												}, function (NewSplicPrice, index) {
+													// 为输入框添加一个回调函数，当用户在输入框中输入内容并确认后，会触发此回调函数，
+													// 函数接收用户输入的值（NewSplicPrice）以及输入框所在的弹出层索引（index）作为参数，用于后续处理用户输入的数据
+													if (isNaN(NewSplicPrice)) {
+														// 通过isNaN函数判断用户输入的NewSplicPrice值是否为非数字类型，如果是，则执行以下逻辑
+														layer.msg('您所输入的值类型不合法', {
+															// 使用Layui的layer模块的msg方法弹出提示消息框，显示文字“您所输入的值类型不合法”，
+															// 并设置提示框的垂直偏移位置为距离顶部250px，用于提示用户输入的数据类型不符合要求
+															offset: '250px'
+														});
+													} else {
+														// 如果用户输入的值是数字类型（即通过isNaN判断为合法数字），执行以下逻辑，先关闭当前的输入框弹出层
+														layer.close(index);
+														layer.prompt({
+															// 再次使用Layui的layer模块的prompt方法弹出一个输入框，用于让用户输入可超预定数相关信息，
+															// 设置输入框的标题为“请输入可超预定数”，提示用户要输入的内容
+															title: '请输入可超预定数',
+															formType: 0,
+															// 设置输入框的初始值为变量isSplice的值，即显示之前的对应数据作为默认值，方便用户参考修改
+															value: isSplice,
+															offset: '220px',
+															maxlength: 10
+														}, function (NewExceedance, index) {
+															// 为这个新的输入框添加回调函数，当用户输入并确认后触发，接收用户输入的值（NewExceedance）和弹出层索引（index）作为参数
+															if (isNaN(NewExceedance)) {
+																// 判断用户输入的NewExceedance值是否为非数字类型，如果是，则执行以下逻辑
+																layer.msg('您所输入的值类型不合法', {
+																	offset: '250px'
+																});
+															} else {
+																// 如果用户输入的值是数字类型（合法数字），执行以下逻辑，先关闭当前的输入框弹出层
+																layer.close(index);
+																layer.prompt({
+																	// 又一次使用Layui的layer模块的prompt方法弹出一个输入框，用于让用户输入是否可拼房相关信息，
+																	// 设置输入框的标题为“是否可拼房（Y/N）”，明确提示用户输入的格式要求
+																	title: '是否可拼房（Y/N）',
+																	formType: 0,
+																	// 设置输入框的初始值为变量isSplice的值，显示之前的对应数据作为默认值，方便用户参考修改
+																	value: isSplice,
+																	offset: '220px',
+																	maxlength: 10
+																}, function (NewIsSplice, index) {
+																	// 为这个输入框添加回调函数，当用户输入并确认后触发，接收用户输入的值（NewIsSplice）和弹出层索引（index）作为参数
+																	if (NewIsSplice.valueOf() === "Y" || NewIsSplice.valueOf() === "N") {
+																		// 判断用户输入的NewIsSplice值是否为“Y”或者“N”（符合是否可拼房的预期输入格式要求），如果是，则执行以下逻辑，
+																		// 使用之前定义的表格实例（tableIns）的reload方法重新加载表格数据，通过where属性设置向服务器传递的参数，
+																		// 包括操作类型（make为2）、记录的ID（typeId）以及用户修改后的各项数据（如类型名称、价格等），
+																		// 让后端根据这些参数更新对应的数据并返回新的表格数据进行展示
+																		tableIns.reload({
+																			where: {
+																				make: 2,
+																				typeId: typeId,
+																				typeName: NewTypeName,
+																				price: NewPrice,
+																				splicPrice: NewSplicPrice,
+																				exceedance: NewExceedance,
+																				isSplice: NewIsSplice
+																			}
+																		});
+																		// 关闭当前的输入框弹出层，完成整个编辑数据并更新表格的操作流程
+																		layer.close(index);
+																	} else {
+																		// 如果用户输入的NewIsSplice值不符合“Y”或者“N”的格式要求，执行以下逻辑，
+																		// 使用Layui的layer模块的msg方法弹出提示消息框，显示文字“您所输入的值类型不合法”，
+																		// 并设置提示框的垂直偏移位置为距离顶部260px，用于提示用户输入的数据不符合要求
+																		layer.msg('您所输入的值类型不合法', {
+																			offset: '260px'
+																		});
+																	}
+																});
+															}
+														});
+													}
+												});
+											}
+										} else {
+											// 如果前面的其他条件判断都不满足（比如与后端交互返回的数据不符合预期的特定值情况），执行以下逻辑，
+											// 使用Layui的layer模块的alert方法弹出一个警告框，显示文字“已存在同名项！”，提示用户输入的类型名称已经存在，不能重复使用
+											layer.alert('已存在同名项！', {
 												title: '警告',
 												icon: 4,
 												anim: 6,
 												offset: '220px'
 											});
-										else {
-											layer.close(index);
-											layer.prompt({
-												title: '请输入价格',
-												formType: 0,
-												value: price,
-												offset: '220px',
-												maxlength: 10
-											}, function(NewPrice, index) {
-												if(isNaN(NewPrice)) {
-													layer.msg('您所输入的值类型不合法', {
-														offset: '250px'
-													});
-												} else {
-													layer.close(index);
-													layer.prompt({
-														title: '请输入拼房价格',
-														formType: 0,
-														value: splicPrice,
-														offset: '220px',
-														maxlength: 10
-													}, function(NewSplicPrice, index) {
-														if(isNaN(NewSplicPrice)) {
-															layer.msg('您所输入的值类型不合法', {
-																offset: '250px'
-															});
-														} else {
-															layer.close(index);
-															layer.prompt({
-																title: '请输入可超预定数',
-																formType: 0,
-																value: exceedance,
-																offset: '220px',
-																maxlength: 10
-															}, function(NewExceedance, index) {
-																if(isNaN(NewExceedance)) {
-																	layer.msg('您所输入的值类型不合法', {
-																		offset: '250px'
-																	});
-																} else {
-																	layer.close(index);
-																	layer.prompt({
-																		title: '是否可拼房（Y/N）',
-																		formType: 0,
-																		value: isSplice,
-																		offset: '220px',
-																		maxlength: 10
-																	}, function(NewIsSplice, index) {
-																		if(NewIsSplice.valueOf() === "Y" || NewIsSplice.valueOf() === "N") {
-																			tableIns.reload({
-																				where: {
-																					make: 2,
-																					typeId: typeId,
-																					typeName: NewTypeName,
-																					price: NewPrice,
-																					splicPrice: NewSplicPrice,
-																					exceedance: NewExceedance,
-																					isSplice: NewIsSplice
-																				}
-																			});
-																			layer.close(index);
-																		} else {
-																			layer.msg('您所输入的值类型不合法', {
-																				offset: '260px'
-																			});
-																		}
-																	});
-																}
-															});
-														}
-													});
-												}
-											});
 										}
+									});
+								});
+
+// 搜索
+								$('#searchButton').click(function () {
+									// 为id为“searchButton”的元素（即页面中的搜索按钮）绑定点击事件处理函数，当按钮被点击时执行以下逻辑
+									var inputTxt = $('#inputSearch').val();
+									// 获取id为“inputSearch”的输入框元素的值（即用户输入的搜索关键词内容），并赋值给变量inputTxt，用于后续判断和操作
+									if (inputTxt === "") {
+										// 判断用户输入的搜索关键词是否为空字符串，如果是，则执行以下逻辑，
+										// 使用Layui的layer模块的msg方法弹出提示消息框，显示文字“您必须输入值”，
+										// 并设置提示框的垂直偏移位置为距离顶部250px，提示用户必须输入搜索内容才能进行搜索操作
+										layer.msg('您必须输入值', {
+											offset: '250px'
+										});
+									} else if (inputTxt.length > 10) {
+										// 如果用户输入的搜索关键词长度大于10个字符，则执行以下逻辑，
+										// 使用Layui的layer模块的msg方法弹出提示消息框，显示文字“您所输入的值长度不合法”，
+										// 并设置提示框的垂直偏移位置为距离顶部250px，提示用户输入的搜索内容长度不符合要求
+										layer.msg('您所输入的值长度不合法', {
+											offset: '250px'
+										});
 									} else {
-										layer.alert('已存在同名项！', {
-											title: '警告',
-											icon: 4,
-											anim: 6,
-											offset: '220px'
+										// 如果用户输入的搜索关键词不为空且长度合法（小于等于10个字符），执行以下逻辑，
+										// 先使用Layui的layer模块的msg方法弹出提示消息框，显示文字“搜索结果”，告知用户即将展示搜索结果，
+										// 并设置提示框的垂直偏移位置为距离顶部250px
+										layer.msg('搜索结果', {
+											offset: '250px'
 										});
+										// 使用之前定义的表格实例（tableIns）的reload方法重新加载表格数据，通过where属性设置向服务器传递的参数，
+										// 包括操作类型（make为3）以及用户输入的搜索关键词（typeName），让后端根据这些参数查询并返回符合条件的数据来更新表格展示内容
+										table.reload('tableID', {
+											where: {
+												make: 3,
+												typeName: inputTxt
+											}
+										})
 									}
 								});
-							});
-						}
-					});
 
-					//搜索
-					$('#searchButton').click(function() {
-						var inputTxt = $('#inputSearch').val();
-						if(inputTxt === "")
-							layer.msg('您必须输入值', {
-								offset: '250px'
-							});
-						else if(inputTxt.length > 10)
-							layer.msg('您所输入的值长度不合法', {
-								offset: '250px'
-							});
-						else {
-							layer.msg('搜索结果', {
-								offset: '250px'
-							});
-							table.reload('tableID', {
-								where: {
-									make: 3,
-									typeName: inputTxt
-								}
-							})
-						}
-					});
+// 刷新
+								$('#refreshButton').click(function () {
+									// 为id为“refreshButton”的元素（即页面中的刷新按钮）绑定点击事件处理函数，当按钮被点击时执行以下逻辑
+									// 此处代码注释中描述了存在的一些问题，大致是在删除操作触发外键依赖后，会出现500异常，
+									// 通过消息回传参数再执行刷新操作时，框架会出现问题，导致往后端传入的分页参数固定为1，表格的重载刷新功能失效，
+									// 当前暂时发现是删除操作引起的异常，先采用强制刷新整个页面的方式来解决此处的异常情况
+									// 以下原本是想通过表格实例（tableIns）的reload方法重新加载表格数据，设置相关参数（make为0，page为1）来刷新表格，
+									// 但由于存在上述问题，暂时注释掉了这段代码
+									// tableIns.reload({
+									//     where: {
+									//         make: 0,
+									//         page: 1
+									//     }
+									// });
+									// 使用JavaScript的location对象的reload方法强制刷新整个页面，这是一种简单粗暴的解决当前刷新异常问题的临时办法
+									location.reload();
+								});
 
-					//刷新
-					$('#refreshButton').click(function() {
-						// 简述此处存在的BUG 删除操作触发外键依赖后，出500异常
-						// 通过msg回传参数，尔后执行刷新操作时，框架本身死掉
-						// 即往后端传入的分页参数固定为1，表格的重载刷新失效
-						// 暂时只发现删除引起的异常，先通过强制刷新解决此处异常
-						// tableIns.reload({
-						// 	where: {
-						// 		make: 0,
-						// 		page: 1
-						// 	}
-						// });
-						location.reload();
-					});
+// 新增
+								$('#insertButton').click(function () {
+									// 为id为“insertButton”的元素（即页面中的新增按钮）绑定点击事件处理函数，当按钮被点击时执行以下逻辑，
+									// 使用Layui的layer模块的open方法弹出一个新的窗口（弹窗），用于新增房间类型相关数据的操作界面展示等功能
+									layer.open({
+										// 设置弹窗的标题为“新增”，明确此弹窗的用途是进行新增数据操作
+										title: "新增",
+										// 设置弹窗的按钮文字数组，这里只设置了一个“关闭”按钮，用于关闭弹窗操作
+										btn: ['关闭'],
+										yes: function (index) {
+											// 为弹窗的“是”（这里对应“关闭”按钮，因为只有一个按钮）按钮点击事件设置回调函数，
+											// 当按钮被点击时，先使用之前定义的表格实例（tableIns）的reload方法重新加载表格数据，
+											// 通过where属性设置操作类型（make为0），让后端获取最新的数据并更新表格展示内容，
+											// 然后使用Layui的layer模块的close方法关闭当前的弹窗
+											tableIns.reload({
+												where: {
+													make: 0
+												}
+											});
+											layer.close(index); //关闭弹窗
+										},
+										// 设置弹窗的类型为2，一般对应页面层类型（不同类型有不同的展示和交互特点，具体由Layui框架定义）
+										type: 2,
+										// 设置弹窗的宽度为780px，高度为450px，确定弹窗的大小尺寸，用于展示合适的新增数据操作界面
+										area: ['780px', '450px'],
+										fixed: false,
+										maxmin: true,
+										// 设置弹窗加载的内容页面地址，这里指向“/hb/webpage/SystemSetting/insertRomeType.jsp”，
+										// 即当弹窗打开时会加载这个JSP页面作为新增数据的操作界面
+										content: '/hb/webpage/SystemSetting/insertRomeType.jsp',
+										cancel: function () {
+											// 为弹窗的取消操作（比如点击弹窗右上角的关闭按钮等取消行为）设置回调函数，
+											// 当取消操作发生时，同样使用表格实例（tableIns）的reload方法重新加载表格数据，
+											// 通过where属性设置操作类型（make为0），让后端获取最新的数据并更新表格展示内容
+											tableIns.reload({
+												where: {
+													make: 0
+												}
+											});
+										}
+									});
+								});
 
-					//新增
-					$('#insertButton').click(function() {
-						layer.open({
-							title: "新增",
-							btn: ['关闭'],
-							yes: function(index) {
-								tableIns.reload({
-									where: {
-										make: 0
-									}
+// 导出
+								$('#toXlsButton').click(function () {
+									// 为id为“toXlsButton”的元素（即页面中的导出按钮）绑定点击事件处理函数，当按钮被点击时执行以下逻辑，
+									// 通过修改浏览器的location.href属性，跳转到“baseUrl + '/RoomInfoExcelServlet'”这个地址，
+									// 一般是向服务器端发起请求，让服务器端执行生成Excel文件的相关逻辑，比如从数据库获取数据并整理成Excel格式返回给浏览器端下载等操作
+									location.href = baseUrl + '/RoomInfoExcelServlet';
+									layer.alert('Excel文件生成完成！', {
+										// 使用Layui的layer模块的alert方法弹出一个提示消息框，显示文字“Excel文件生成完成！”，
+										// 并设置提示框的标题为“成功”，图标为6（一般对应成功的图标样式，由Layui框架定义），动画效果为1（也是由Layui框架定义的某种动画展示方式），
+										// 垂直偏移位置为距离顶部250px，用于告知用户Excel文件已经成功生成，可以进行后续操作（比如保存等）
+										title: '成功',
+										icon: 6,
+										anim: 1,
+										offset: '250px'
+									});
 								});
-								layer.close(index); //关闭弹窗
-							},
-							type: 2,
-							area: ['780px', '450px'],
-							fixed: false,
-							maxmin: true,
-							content: '/hb/webpage/SystemSetting/insertRomeType.jsp',
-							cancel: function() {
-								tableIns.reload({
-									where: {
-										make: 0
+
+// 回到顶端
+								util.fixbar({
+									// 使用Layui的util模块的fixbar方法创建一个回到页面顶端的功能组件，通过传入配置对象来设置相关属性和行为
+									showHeight: 2,
+									click: function (type) {
+										// 为回到顶端功能组件的点击事件设置回调函数，当用户点击该组件时，会接收到一个参数type（具体含义由Layui框架定义，可能与点击的具体位置等相关），
+										// 此处只是简单地将接收到的type参数打印到浏览器的控制台（一般用于调试目的，查看点击操作传递的相关信息）
+										console.log(type);
 									}
 								});
-							}
-						});
-					});
-
-					//导出
-					$('#toXlsButton').click(function() {
-						location.href = baseUrl + '/RoomInfoExcelServlet';
-						layer.alert('Excel文件生成完成！', {
-							title: '成功',
-							icon: 6,
-							anim: 1,
-							offset: '250px'
-						});
-					});
-
-					//回到顶端
-					util.fixbar({
-						showHeight: 2,
-						click: function(type) {
-							console.log(type);
-						}
 					});
 				});
 			});

src/webapp/webpage/SystemSetting/SystemMain.jsp

@@ -1,15 +1,24 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置此页面的内容类型为“text/html”（表明是HTML格式页面），同时指定字符编码为“UTF-8”，
+这样能确保页面中的字符可以被正确解析和显示，避免出现乱码情况 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<title>酒店管理系统</title>
+<head>
+	<!-- 设置HTML页面的字符编码为“utf-8”，这是再次明确页面所遵循的字符编码标准，辅助浏览器准确读取和展示页面里的文字内容等信息 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏位置，方便用户识别当前页面所属的系统或应用名称 -->
+	<title>酒店管理系统</title>
+</head>
 
-	</head>
-
-	<frameset cols="200,*" frameborder="0">
-		<frame name="nav" src="SystemNav.jsp" />
-		<frame name="system" src="../../nav.html" />
-	</frameset>
+<!-- 使用<frameset>标签定义页面的框架集，通过cols属性设置框架的列布局，这里表示将页面划分为两列，
+第一列宽度为200像素，第二列宽度自适应（“*”表示剩余的所有宽度空间），frameborder属性设置为“0”表示框架之间没有边框显示 -->
+<frameset cols="200,*" frameborder="0">
+	<!-- 在框架集中定义一个<frame>框架元素，设置其name属性为“nav”，用于给该框架命名，方便后续通过链接的target属性等方式来指定内容在该框架中显示，
+src属性指定了此框架初始加载的页面来源为“SystemNav.jsp”，也就是这个框架会首先展示“SystemNav.jsp”页面的内容，通常用于放置导航相关的功能模块 -->
+	<frame name="nav" src="SystemNav.jsp" />
+	<!-- 再定义另一个<frame>框架元素，name属性为“system”用于命名，src属性指定其初始加载的页面来源为“../../nav.html”，
+即该框架初始会展示上级目录的上级目录下的“nav.html”页面内容，一般用于承载系统的主要功能页面展示等内容 -->
+	<frame name="system" src="../../nav.html" />
+</frameset>
 
 </html>

src/webapp/webpage/SystemSetting/SystemNav.jsp

@@ -1,51 +1,96 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面内容类型为text/html（即HTML格式页面），并指定字符编码为UTF-8，
+保证页面能正确显示各类字符，避免出现乱码情况 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-		<title>酒店管理系统</title>
-		<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
-		<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
-		<script src="../../js/toExcel/xlsx.full.min.js"></script>
-		<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
-		<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
-	</head>
+<head>
+	<!-- 设置HTML页面的字符编码为utf-8，再次明确页面字符编码规范，有助于浏览器准确解析页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的视口（viewport）相关属性，width=device-width表示页面宽度与设备屏幕宽度相同，
+initial-scale=1设置初始缩放比例为1，即页面按原始大小显示，maximum-scale=1限制最大缩放比例为1，防止用户过度缩放页面，常用于移动端页面适配，确保页面在不同设备上显示效果相对合理 -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户明确当前页面所属的系统或功能 -->
+	<title>酒店管理系统</title>
+	<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
+media="all"表示该样式适用于所有的媒体类型，也就是在各种设备上都应用此样式 -->
+	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
+	<!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），用于在页面中使用各种图标，
+路径为上级目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css -->
+	<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
+	<!-- 引入处理Excel相关功能的JavaScript库（xlsx.full.min.js），可能用于后续将数据导出为Excel等操作，
+路径指向上级目录下的js/toExcel/xlsx.full.min.js -->
+	<script src="../../js/toExcel/xlsx.full.min.js"></script>
+	<!-- 引入FileSaver.js脚本文件，该文件通常用于在浏览器端实现文件保存功能，
+比如配合前面的Excel库将生成的Excel文件保存到本地，路径为上级目录下的js/toExcel/FileSaver.js -->
+	<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
+	<!-- 引入自定义的用于导出数据到Excel的脚本文件（Export2Excel.js），里面应该包含了具体的导出逻辑和相关功能实现，
+路径为上级目录下的js/toExcel/Export2Excel.js -->
+	<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
+</head>
 
-	<body>
-		<div class="layui-side layui-bg-black">
-			<div class="layui-side-scroll">
-				<ul class="layui-nav layui-nav-tree">
-					<li class="layui-nav-item layui-nav-itemed">
-						<a>基础功能设置</a>
-						<dl class="layui-nav-child">
-							<dd>
-								<a href="RoomTypeTable.jsp" target="system">房间类型</a>
-							</dd>
-							<dd>
-								<a href="FloorTable.jsp" target="system">楼层信息</a>
-							</dd>
-						</dl>
-					</li>
-					<li class="layui-nav-item">
-						<a>附属功能设置</a>
-						<dl class="layui-nav-child">
-							<dd>
-                                <a href="LogTable.jsp" target="system">日志管理</a>
-							</dd>
-                            <dd>
-                                <a href="AuthTable.jsp" target="system">权限管理</a>
-                            </dd>
-						</dl>
-					</li>
-				</ul>
-			</div>
-		</div>
-		<script src="../../js/layui/layui.js"></script>
-		<script src="../../js/jquery.js"></script>
-		<script>
-			layui.use('element', function() {});
-		</script>
-	</body>
+<body>
+<!-- 创建一个具有Layui样式类（layui-side layui-bg-black）的<div>元素，用于构建页面侧边栏，
+设置背景颜色为黑色（layui-bg-black），作为页面布局的一部分，通常用于放置导航等功能菜单 -->
+<div class="layui-side layui-bg-black">
+	<!-- 在侧边栏的<div>元素内创建一个可滚动的区域（layui-side-scroll），当侧边栏内容较多时，
+方便用户通过滚动条查看全部内容，提高用户体验 -->
+	<div class="layui-side-scroll">
+		<!-- 创建一个无序列表（ul），应用Layui的导航样式类（layui-nav layui-nav-tree），用于构建树形导航菜单，
+是页面导航功能的主要HTML结构体现 -->
+		<ul class="layui-nav layui-nav-tree">
+			<!-- 创建一个列表项（li），应用Layui的导航菜单项样式类（layui-nav-item layui-nav-itemed），表示该项处于展开状态（layui-nav-itemed），
+用于展示一个一级导航菜单选项，这里显示文字为“基础功能设置” -->
+			<li class="layui-nav-item layui-nav-itemed">
+				<!-- 在列表项内创建一个超链接（a标签），文字为“基础功能设置”，点击该链接可能会触发一些相关的功能或展开收起对应的子菜单等操作，
+目前这里未设置具体的链接地址，可能通过JavaScript等方式来实现交互逻辑 -->
+				<a>基础功能设置</a>
+				<!-- 创建一个定义列表（dl），应用Layui的导航子菜单样式类（layui-nav-child），用于展示“基础功能设置”菜单项的子菜单内容 -->
+				<dl class="layui-nav-child">
+					<!-- 在定义列表中创建一个描述项（dd），用于放置具体的子菜单选项 -->
+					<dd>
+						<!-- 创建一个超链接（a标签），设置链接地址为“RoomTypeTable.jsp”，并指定在名为“system”的目标框架（或窗口）中打开（target="system"），
+文字为“房间类型”，点击该链接可跳转到对应的页面，用于查看或设置房间类型相关信息 -->
+						<a href="RoomTypeTable.jsp" target="system">房间类型</a>
+					</dd>
+					<dd>
+						<!-- 类似地，创建另一个超链接，链接地址为“FloorTable.jsp”，同样在“system”目标中打开，文字为“楼层信息”，
+用于跳转到楼层信息相关页面进行操作 -->
+						<a href="FloorTable.jsp" target="system">楼层信息</a>
+					</dd>
+				</dl>
+			</li>
+			<li class="layui-nav-item">
+				<!-- 创建另一个一级导航菜单项，应用样式类（layui-nav-item），文字为“附属功能设置”，用于展示另一个不同功能分类的导航选项 -->
+				<a>附属功能设置</a>
+				<dl class="layui-nav-child">
+					<dd>
+						<!-- 创建超链接，链接地址为“LogTable.jsp”，在“system”目标中打开，文字为“日志管理”，用于跳转到日志管理相关页面进行操作，
+比如查看系统操作记录等功能 -->
+						<a href="LogTable.jsp" target="system">日志管理</a>
+					</dd>
+					<dd>
+						<!-- 再创建一个超链接，链接地址为“AuthTable.jsp”，在“system”目标中打开，文字为“权限管理”，用于跳转到权限管理相关页面，
+可进行用户权限配置等相关操作 -->
+						<a href="AuthTable.jsp" target="system">权限管理</a>
+					</dd>
+				</dl>
+			</li>
+		</ul>
+	</div>
+</div>
+<!-- 引入Layui框架的JavaScript脚本文件（layui.js），该文件包含了Layui框架的各种功能实现，
+是后续使用Layui组件和功能的基础，路径为上级目录下的js/layui/layui.js -->
+<script src="../../js/layui/layui.js"></script>
+<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
+方便简化JavaScript编程，这里的路径指向上级目录下的js/jquery.js -->
+<script src="../../js/jquery.js"></script>
+<script>
+	// 使用Layui框架的模块加载机制，加载'element'模块，
+	// 并在加载完成后执行回调函数，不过目前回调函数内为空，
+	// 通常在回调函数中可以使用'element'模块提供的功能来操作页面元素、实现动态交互等功能，
+	// 比如控制页面布局、菜单展开收起等效果（这里可能后续会补充具体逻辑）
+	layui.use('element', function () {});
+</script>
+</body>
 
 </html>

src/webapp/webpage/SystemSetting/insertRomeType.jsp

@@ -1,108 +1,163 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置此页面内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
+这样能确保页面中的字符可被正确解析和显示，避免出现乱码情况 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<title>新增房间类型</title>
-		<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
-		<script src="../../js/layui/layui.js"></script>
-		<script src="../../js/jquery.js"></script>
-		<script src="../../js/global.js"></script>
-	</head>
+<head>
+	<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面所遵循的字符编码标准，辅助浏览器准确读取页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的标题为“新增房间类型”，该标题会显示在浏览器的标题栏中，方便用户知晓当前页面的主要功能 -->
+	<title>新增房间类型</title>
+	<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
+media="all"表示该样式适用于所有媒体类型，也就是在各种设备上都应用此样式 -->
+	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
+	<!-- 引入Layui框架的JavaScript脚本文件（layui.js），该文件包含了Layui框架的各种功能实现，
+是后续使用Layui组件和功能的基础 -->
+	<script src="../../js/layui/layui.js"></script>
+	<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，方便简化JavaScript编程 -->
+	<script src="../../js/jquery.js"></script>
+	<!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了整个系统页面通用的一些变量定义、函数等逻辑 -->
+	<script src="../../js/global.js"></script>
+</head>
 
-	<body>
-		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
-			<legend>新增房间类型</legend>
-		</fieldset>
-		<form class="layui-form" action="">
-			<div class="layui-form-item">
-				<label class="layui-form-label">类型名称</label>
-				<div class="layui-input-block">
-					<input type="text" name="typeName" lay-verify="required|typeName" autocomplete="off" placeholder="请输入类型名称" class="layui-input">
-				</div>
+<body>
+<!-- 创建一个<fieldset>元素，应用类名“layui-elem-field layui-field-title”，并通过内联样式设置上外边距为20像素，
+用于划分页面中的一个区域，通常用于对相关内容进行分组展示，结合Layui的样式呈现出特定的外观效果，此处用于显示“新增房间类型”的标题区域 -->
+<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
+	<legend>新增房间类型</legend>
+</fieldset>
+<!-- 创建一个表单（form）元素，应用类名“layui-form”，并设置其action属性为空（目前未指定表单提交的具体地址，可能后续通过JavaScript动态设置等方式来处理表单提交），
+用于收集用户输入的新增房间类型相关信息 -->
+<form class="layui-form" action="">
+	<!-- 创建一个表单项目（form-item）元素，用于包裹表单内的一组相关输入元素，这里用于输入“类型名称”相关内容 -->
+	<div class="layui-form-item">
+		<!-- 创建一个标签（label）元素，应用类名“layui-form-label”，用于显示“类型名称”文字提示，告知用户对应输入框的用途 -->
+		<label class="layui-form-label">类型名称</label>
+		<!-- 创建一个输入框容器（layui-input-block）元素，用于包裹实际的输入框元素，使其在布局上符合Layui框架的样式规范 -->
+		<div class="layui-input-block">
+			<!-- 创建一个文本输入框（input）元素，设置其类型为“text”（普通文本输入框），name属性为“typeName”（用于在表单提交时标识该输入项的数据名称），
+lay-verify属性设置了验证规则（“required|typeName”，表示该输入框必填且要符合自定义的“typeName”验证规则），autocomplete属性设置为“off”（关闭浏览器自动完成功能），
+placeholder属性设置提示文字为“请输入类型名称”，class属性应用“layui-input”样式类，使其呈现出Layui框架中输入框的外观样式 -->
+			<input type="text" name="typeName" lay-verify="required|typeName" autocomplete="off" placeholder="请输入类型名称" class="layui-input">
+		</div>
+	</div>
+	<!-- 创建另一个表单项目元素，用于包裹下面一组与价格相关的输入元素 -->
+	<div class="layui-form-item">
+		<!-- 创建一个内联布局的容器（layui-inline）元素，用于让内部的元素水平排列，这里用于放置“价格”相关的输入框和标签 -->
+		<div class="layui-inline">
+			<!-- 创建一个标签元素，显示文字“价格”，用于提示用户对应输入框的用途 -->
+			<label class="layui-form-label">价格</label>
+			<!-- 创建一个内联输入框容器（layui-input-inline）元素，用于包裹价格输入框，使其在布局上呈现内联效果，与其他元素水平排列 -->
+			<div class="layui-input-inline">
+				<!-- 创建一个文本输入框元素，设置类型为“text”，name属性为“price”（用于表单提交时标识数据名称），lay-verify属性设置验证规则为“required|number”（必填且必须是数字），
+autocomplete属性为“off”，placeholder属性设置提示文字为“￥”（表示人民币符号，提示用户输入价格格式），应用“layui-input”样式类 -->
+				<input type="text" name="price" lay-verify="required|number" autocomplete="off" placeholder="￥" class="layui-input">
 			</div>
-			<div class="layui-form-item">
-				<div class="layui-inline">
-					<label class="layui-form-label">价格</label>
-					<div class="layui-input-inline">
-						<input type="text" name="price" lay-verify="required|number" autocomplete="off" placeholder="￥" class="layui-input">
-					</div>
-				</div>
-				<div class="layui-inline">
-					<label class="layui-form-label">拼房价格</label>
-					<div class="layui-input-inline">
-						<input type="text" name="splicPrice" lay-verify="required|number" autocomplete="off" placeholder="￥" class="layui-input">
-					</div>
-				</div>
+		</div>
+		<!-- 再创建一个内联布局容器元素，用于放置“拼房价格”相关的输入框和标签，与“价格”输入框水平排列显示 -->
+		<div class="layui-inline">
+			<label class="layui-form-label">拼房价格</label>
+			<div class="layui-input-inline">
+				<!-- 创建一个文本输入框元素，用于输入拼房价格，设置与“价格”输入框类似的属性，name属性为“splicPrice”，验证规则等也按要求设置 -->
+				<input type="text" name="splicPrice" lay-verify="required|number" autocomplete="off" placeholder="￥" class="layui-input">
 			</div>
-			<div class="layui-form-item">
-				<div class="layui-inline">
-					<label class="layui-form-label">可超预定数</label>
-					<div class="layui-input-inline">
-						<input type="text" name="exceedance" lay-verify="required|number" autocomplete="off" class="layui-input">
-					</div>
-				</div>
+		</div>
+	</div>
+	<!-- 创建一个表单项目元素，用于包裹“可超预定数”相关的输入元素 -->
+	<div class="layui-form-item">
+		<!-- 创建一个内联布局容器元素，用于放置“可超预定数”的标签和输入框 -->
+		<div class="layui-inline">
+			<label class="layui-form-label">可超预定数</label>
+			<div class="layui-input-inline">
+				<!-- 创建一个文本输入框元素，设置类型为“text”，name属性为“exceedance”，lay-verify属性设置验证规则为“required|number”（必填且必须是数字），
+autocomplete属性为“off”，应用“layui-input”样式类，用于用户输入可超预定的数量 -->
+				<input type="text" name="exceedance" lay-verify="required|number" autocomplete="off" class="layui-input">
 			</div>
-			<div class="layui-form-item">
-				<label class="layui-form-label">是否可拼房</label>
-				<div class="layui-input-block">
-					<input type="radio" name="isSplice" value="Y" title="是" checked="">
-					<input type="radio" name="isSplice" value="N" title="否">
-				</div>
-			</div>
-			<div class="layui-form-item">
-				<div class="layui-input-block">
-					<button class="layui-btn" lay-submit lay-filter="insertRome">立即提交</button>
-					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
-				</div>
-			</div>
-		</form>
+		</div>
+	</div>
+	<!-- 创建一个表单项目元素，用于包裹“是否可拼房”相关的单选按钮元素 -->
+	<div class="layui-form-item">
+		<label class="layui-form-label">是否可拼房</label>
+		<div class="layui-input-block">
+			<!-- 创建一个单选按钮（input type="radio"）元素，设置name属性为“isSplice”（用于将多个单选按钮归为一组，同一组内只能选择一个选项），
+value属性为“Y”（表示选择“是”的对应值），title属性设置显示文字为“是”，并设置为默认选中（checked属性），用于让用户选择是否可拼房的选项 -->
+			<input type="radio" name="isSplice" value="Y" title="是" checked="">
+			<!-- 再创建一个单选按钮元素，同样name属性为“isSplice”，value属性为“N”（表示选择“否”的对应值），title属性设置显示文字为“否”，用于用户选择另一个选项 -->
+			<input type="radio" name="isSplice" value="N" title="否">
+		</div>
+	</div>
+	<!-- 创建一个表单项目元素，用于包裹提交按钮和重置按钮 -->
+	<div class="layui-form-item">
+		<div class="layui-input-block">
+			<!-- 创建一个按钮（button）元素，应用类名“layui-btn”，并设置lay-submit属性（表示该按钮可触发表单提交操作）和lay-filter属性为“insertRome”（用于后续在JavaScript中监听该按钮的提交事件），
+文字为“立即提交”，点击该按钮可提交表单数据，进行新增房间类型的操作 -->
+			<button class="layui-btn" lay-submit lay-filter="insertRome">立即提交</button>
+			<!-- 创建一个按钮元素，设置类型为“reset”（表示重置按钮，点击可重置表单内所有输入框的值为初始状态），应用类名“layui-btn layui-btn-primary”，文字为“重置”，用于重置表单内容 -->
+			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
+		</div>
+	</div>
+</form>
 
-		<script>
-			layui.use(['form', 'layedit', 'laydate'], function() {
-				var form = layui.form,
-					layer = layui.layer;
+<script>
+	// 使用Layui框架的模块加载机制，加载'form'（用于表单相关操作和验证的模块）、'layedit'（可能用于富文本编辑相关功能的模块，此处暂未使用到相关功能）、
+	// 'laydate'（可能用于日期选择相关功能的模块，此处也暂未使用到相关功能）这几个模块，并在加载完成后执行回调函数，在回调函数内进行页面相关逻辑处理
+	layui.use(['form', 'layedit', 'laydate'], function () {
+		var form = layui.form,
+				layer = layui.layer;
 
-				//自定义验证规则
-				form.verify({
-					typeName: function(value) {
-						if(value.length < 3) {
-							return '房间类型至少3个字符';
-						}
+		// 自定义验证规则，通过Layui的form模块的verify方法来定义验证逻辑，这里定义了名为“typeName”的验证规则，用于验证“类型名称”输入框的输入内容
+		form.verify({
+			typeName: function (value) {
+				// 判断输入的“类型名称”（value）的字符长度是否小于3，如果小于3则返回提示文字“房间类型至少3个字符”，表示不符合要求
+				if (value.length < 3) {
+					return '房间类型至少3个字符';
+				}
 
-						if(value.length > 10) {
-							return '房间类型至多10个字符'
-						}
-					}
-				});
+				// 判断输入的“类型名称”（value）的字符长度是否大于10，如果大于10则返回提示文字“房间类型至多10个字符”，表示不符合要求
+				if (value.length > 10) {
+					return '房间类型至多10个字符'
+				}
+			}
+		});
 
-				//监听提交
-				form.on('submit(insertRome)', function(data) {
-					$.post(baseUrl + '/InsertRoomTypeServlet', JSON.stringify(data.field), function(code) {
-						if(code === 1) {
-							layer.alert('插入成功！', {
-								title: '成功',
-								icon: 6,
-								anim: 5
-							});
-						} else if(code === 0) {
-							layer.alert('已存在同名项！', {
-								title: '重复',
-								icon: 4,
-								anim: 6
-							});
-						} else {
-							layer.alert('插入失败！', {
-								title: '异常',
-								icon: 6,
-								anim: 6
-							});
-						}
+		// 监听表单的提交事件，通过Layui的form模块的on方法监听“submit”事件，并且指定监听的过滤器为“insertRome”（与前面表单提交按钮的lay-filter属性对应），
+		// 当点击“立即提交”按钮触发表单提交时，会执行此回调函数，函数接收表单数据等相关信息作为参数（data）
+		form.on('submit(insertRome)', function (data) {
+			// 使用jQuery的$.post方法向服务器发送POST请求，请求地址为baseUrl（应该是在全局定义的基础URL）加上'/InsertRoomTypeServlet'，
+			// 将表单数据（data.field，经过Layui处理后的表单字段数据对象）转换为JSON字符串后作为请求参数发送给服务器，
+			// 并在请求成功后执行回调函数，回调函数接收服务器返回的响应码（code）作为参数，用于根据不同的响应码进行相应的提示处理
+			$.post(baseUrl + '/InsertRoomTypeServlet', JSON.stringify(data.field), function (code) {
+				if (code === 1) {
+					// 如果服务器返回的响应码为1，表示插入操作成功，使用Layui的layer模块的alert方法弹出一个提示框，显示文字“插入成功！”，
+					// 并设置提示框的标题为“成功”，图标为6（一般对应成功的图标样式，由Layui框架定义），动画效果为5（也是由Layui框架定义的某种动画展示方式）
+					layer.alert('插入成功！', {
+						title: '成功',
+						icon: 6,
+						anim: 5
+					});
+				} else if (code === 0) {
+					// 如果服务器返回的响应码为0，表示插入操作失败，原因是已存在同名项，使用Layui的layer模块的alert方法弹出提示框，显示文字“已存在同名项！”，
+					// 设置提示框的标题为“重复”，图标为4（一般对应警告等相关的图标样式），动画效果为6
+					layer.alert('已存在同名项！', {
+						title: '重复',
+						icon: 4,
+						anim: 6
+					});
+				} else {
+					// 如果服务器返回的响应码既不是1也不是0，表示出现其他异常情况，使用Layui的layer模块的alert方法弹出提示框，显示文字“插入失败！”，
+					// 设置提示框的标题为“异常”，图标为6，动画效果为6，告知用户插入操作出现异常
+					layer.alert('插入失败！', {
+						title: '异常',
+						icon: 6,
+						anim: 6
 					});
-					return false;
-				});
+				}
 			});
-		</script>
-	</body>
+			// 返回false，表示阻止表单默认的提交行为，因为这里通过AJAX方式（$.post）自行向服务器发送请求并处理响应了，不需要浏览器进行默认的表单提交跳转等操作
+			return false;
+		});
+	});
+</script>
+</body>
 
 </html>

src/webapp/webpage/billinfo/billInfoHeader.jsp

@@ -1,39 +1,73 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面的内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
+确保页面中的字符能被正确解析和显示，避免出现乱码问题 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-		<title>酒店管理系统</title>
-		<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
-		<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
-		<script src="../../js/toExcel/xlsx.full.min.js"></script>
-		<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
-		<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
-	</head>
+<head>
+	<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的视口（viewport）相关属性，width=device-width表示页面宽度等于设备宽度，
+initial-scale=1表示初始缩放比例为1（即不缩放），maximum-scale=1表示最大缩放比例为1（限制用户不能放大页面），
+用于适配不同移动设备屏幕，确保页面在移动端能合理显示 -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户知晓当前页面所属的系统名称 -->
+	<title>酒店管理系统</title>
+	<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
+media="all"表示此样式适用于所有媒体类型，也就是在各种设备上都会应用该样式 -->
+	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
+	<!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），用于在页面中使用各种图标，
+其路径为上级目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css -->
+	<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
+	<!-- 引入处理Excel相关功能的JavaScript库（xlsx.full.min.js），可能用于后续将数据导出为Excel等操作，
+其路径指向上级目录下的js/toExcel/xlsx.full.min.js -->
+	<script src="../../js/toExcel/xlsx.full.min.js"></script>
+	<!-- 引入FileSaver.js脚本文件，该文件通常用于在浏览器端实现文件保存功能，
+比如配合前面的Excel库将生成的Excel文件保存到本地，其路径为上级目录下的js/toExcel/FileSaver.js -->
+	<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
+	<!-- 引入自定义的用于导出数据到Excel的脚本文件（Export2Excel.js），里面应该包含了具体的导出逻辑和相关功能实现，
+其路径为上级目录下的js/toExcel/Export2Excel.js -->
+	<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
+</head>
 
-	<body class="layui-layout-body">
-		<div class="layui-layout layui-layout-admin">
-			<div class="layui-header">
-				<div class="layui-logo">酒店管理系统</div>
-				<!-- 头部区域（可配合layui已有的水平导航） -->
-				<ul class="layui-nav layui-layout-left">
-					<li class="layui-nav-item">
-						<a href="此处填充地址" target="billInfo">账单结算</a>
-					</li>
-					<li class="layui-nav-item">
-						<a href="此处填充地址" target="billInfo">账单管理</a>
-					</li>
-			</div>
-		</div>
+<body class="layui-layout-body">
+<!-- 创建一个布局容器（layui-layout）元素，并应用类名“layui-layout-admin”，通常这是Layui框架中用于构建后台管理系统页面布局的基础结构，
+可以方便地划分出头部、侧边栏、主体内容、底部等区域 -->
+<div class="layui-layout layui-layout-admin">
+	<!-- 创建一个用于表示页面头部的<div>元素，在Layui的布局结构中，该元素内放置头部相关的内容，如网站logo、导航菜单等 -->
+	<div class="layui-header">
+		<!-- 创建一个带有类名“layui-logo”的<div>元素，用于显示网站的logo或名称，这里显示文字“酒店管理系统”，作为页面的标识 -->
+		<div class="layui-logo">酒店管理系统</div>
+		<!-- 这是一段HTML注释，说明下面的代码用于构建头部区域，并且可以配合Layui已有的水平导航组件来实现更丰富的导航功能 -->
+		<!-- 头部区域（可配合layui已有的水平导航） -->
+		<ul class="layui-nav layui-layout-left">
+			<!-- 创建一个列表项（li）元素，应用类名“layui-nav-item”，作为导航栏中的一个菜单项 -->
+			<li class="layui-nav-item">
+				<!-- 创建一个超链接（a）元素，设置其href属性为“此处填充地址”（这里应该后续要替换为实际的链接地址，指向账单结算相关页面），
+target属性设置为“billInfo”（可能用于在特定的iframe或者页面区域展示链接内容等，不过此处未看到对应定义，可能需要完善），文字为“账单结算”，
+点击该链接可跳转到账单结算相关页面 -->
+				<a href="此处填充地址" target="billInfo">账单结算</a>
+			</li>
+			<li class="layui-nav-item">
+				<!-- 与上面的菜单项类似，创建一个超链接元素，href属性同样需填充实际地址，用于跳转到账单管理相关页面，文字为“账单管理” -->
+				<a href="此处填充地址" target="billInfo">账单管理</a>
+			</li>
+		</ul>
+	</div>
+</div>
 
-		<script src="../../js/layui/layui.js"></script>
-		<script src="../../js/jquery.js"></script>
+<!-- 引入Layui框架的JavaScript脚本文件（layui.js），这是使用Layui框架各种功能和组件的基础，
+路径指向上级目录下的js/layui/layui.js -->
+<script src="../../js/layui/layui.js"></script>
+<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
+方便简化JavaScript编程，其路径为上级目录下的js/jquery.js -->
+<script src="../../js/jquery.js"></script>
 
-		<script>
-			//JavaScript代码区域
-			layui.use('element', function() {});
-		</script>
-	</body>
+<script>
+	//JavaScript代码区域
+	// 使用Layui框架的模块加载机制，加载' element '（Layui中用于操作页面元素、动态渲染页面结构等相关功能的模块），
+	// 并在加载完成后执行回调函数，不过此处回调函数内暂时没有具体的逻辑代码（可能后续需要添加实现具体功能的代码）
+	layui.use('element', function() {});
+</script>
+</body>
 
 </html>

src/webapp/webpage/billinfo/billInfoMain.jsp

@@ -1,14 +1,25 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面的内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
+确保页面中的字符能被正确解析和显示，避免出现乱码问题 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<title>酒店管理系统</title>
-	</head>
+<head>
+	<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户知晓当前页面所属的系统名称 -->
+	<title>酒店管理系统</title>
+</head>
 
-	<frameset rows="60,*" frameborder="0">
-		<frame name="Header" src="billInfoHeader.jsp" />
-		<frame name="billInfo" src="../../nav.html" />
-	</frameset>
+<!-- 使用<frameset>标签定义一个框架集，通过rows属性将页面划分为上下两部分，
+"60,*"表示上面部分高度为60像素（通常用于放置如标题栏、导航栏等固定高度的区域），下面部分占据剩余的所有空间（*代表自适应剩余高度），
+frameborder属性设置为“0”表示框架之间的边框不显示，创建出一个分区域布局的页面框架结构 -->
+<frameset rows="60,*" frameborder="0">
+	<!-- 在框架集中定义一个<frame>元素，设置其name属性为“Header”，用于给这个框架命名（方便后续通过超链接的target属性等方式来指定内容在该框架中显示），
+src属性指定了此框架要加载显示的页面文件为“billInfoHeader.jsp”，也就是这个框架初始会展示“billInfoHeader.jsp”页面的内容，通常用于放置页面的头部相关内容 -->
+	<frame name="Header" src="billInfoHeader.jsp" />
+	<!-- 再定义一个<frame>元素，name属性设置为“billInfo”，同样是给框架命名方便后续操作，
+src属性指定加载“../../nav.html”文件作为此框架要显示的内容，这个框架一般用于放置页面的主体导航或者主要内容部分 -->
+	<frame name="billInfo" src="../../nav.html" />
+</frameset>
 
 </html>

src/webapp/webpage/orderInfo/selectRoomType.jsp

@@ -1,77 +1,107 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置此页面内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
+这样能确保页面中的字符可被正确解析和显示，避免出现乱码情况 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
-		<script src="../../js/layui/layui.js"></script>
-		<script src="../../js/jquery.js"></script>
-		<script src="../../js/global.js"></script>
-		<style>
-			.fixDiv {
-				position: sticky;
-				bottom: 0;
-				background-color: white;
-				BORDER-BOTTOM: #e1e1e1 1px solid;
-				BORDER-TOP: #e1e1e1 1px solid;
-				BORDER-RIGHT: #e1e1e1 1px solid;
-				BORDER-LEFT: #e1e1e1 1px solid;
-				border-radius: 10px
-			}
-		</style>
-	</head>
+<head>
+	<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面所遵循的字符编码标准，辅助浏览器准确读取页面内容 -->
+	<meta charset="utf-8">
+	<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
+media="all"表示该样式适用于所有媒体类型，也就是在各种设备上都应用此样式 -->
+	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
+	<!-- 引入Layui框架的JavaScript脚本文件（layui.js），该文件包含了Layui框架的各种功能实现，
+是后续使用Layui组件和功能的基础 -->
+	<script src="../../js/layui/layui.js"></script>
+	<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，方便简化JavaScript编程 -->
+	<script src="../../js/jquery.js"></script>
+	<!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了整个系统页面通用的一些变量定义、函数等逻辑 -->
+	<script src="../../js/global.js"></script>
+	<style>
+		.fixDiv {
+		// 将类名为“fixDiv”的元素设置为粘性定位（sticky），使其在滚动页面时，当到达特定位置（这里是底部，由bottom: 0指定）时会固定在相应位置，
+		// 常用于创建如底部固定栏等效果
+		position: sticky;
+			bottom: 0;
+		// 设置元素的背景颜色为白色，用于定义该固定栏的背景颜色显示效果
+		background-color: white;
+		// 设置元素的下边框样式，宽度为1px，颜色为#e1e1e1（一种浅灰色），样式为实线，用于给该固定栏添加下边框的视觉效果
+		BORDER-BOTTOM: #e1e1e1 1px solid;
+		// 设置元素的上边框样式，与下边框类似，宽度、颜色、样式相同，添加一个上边框
+		BORDER-TOP: #e1e1e1 1px solid;
+		// 设置元素的右边框样式，同样是1px宽、#e1e1e1颜色的实线边框
+		BORDER-RIGHT: #e1e1e1 1px solid;
+		// 设置元素的左边框样式，和其他边框保持一致，使该固定栏四周都有边框显示
+		BORDER-LEFT: #e1e1e1 1px solid;
+		// 设置元素的边框圆角为10px，使该固定栏的四个角呈现出圆角的外观效果，更加美观
+		border-radius: 10px
+		}
+	</style>
+</head>
 
-	<body>
-		<table id="dataTable" class='layui-table'>
-			<tr>
-				<th>ID</th>
-				<th>类型名称</th>
-				<th>价格</th>
-				<th>拼房价格</th>
-				<th>可超预定数</th>
-				<th>是否可拼房</th>
-			</tr>
-		</table>
-		<div class="fixDiv">
-			<label class="layui-form-label">当前选中：</label>
-			<div class="layui-input-inline">
-				<input type="text" id="tId" class="layui-input" placeholder="ID" readonly>
-			</div>
-			<div class="layui-input-inline">
-				<input type="text" id="tPrice" class="layui-input" placeholder="价格" readonly>
-			</div>
-		</div>
+<body>
+<!-- 创建一个表格（table）元素，设置其id为“dataTable”，并应用类名“layui-table”（该类名可能来自Layui框架，用于给表格应用默认的样式等效果），
+用于展示数据，目前只定义了表头部分，后续会通过JavaScript动态添加表格行数据 -->
+<table id="dataTable" class='layui-table'>
+	<tr>
+		<!-- 创建表头行中的单元格（th）元素，用于显示列标题“ID”，表示该列数据为记录的唯一标识 -->
+		<th>ID</th>
+		<th>类型名称</th>
+		<th>价格</th>
+		<th>拼房价格</th>
+		<th>可超预定数</th>
+		<th>是否可拼房</th>
+	</tr>
+</table>
+<!-- 创建一个应用类名“fixDiv”的<div>元素，根据前面定义的样式，这个元素会作为一个底部固定的区域显示，
+里面通常放置一些固定展示或者与当前选中行数据相关的内容 -->
+<div class="fixDiv">
+	<!-- 创建一个标签（label）元素，应用类名“layui-form-label”，用于显示文字“当前选中：”，作为提示信息，告知用户下方输入框所展示数据的含义 -->
+	<label class="layui-form-label">当前选中：</label>
+	<div class="layui-input-inline">
+		<!-- 创建一个文本输入框（input）元素，设置其类型为“text”，id为“tId”，应用类名“layui-input”（应用Layui框架中输入框的样式），
+placeholder属性设置提示文字为“ID”，并设置为只读（readonly），用于展示当前选中行对应的“ID”数据，用户不能直接编辑此输入框内容 -->
+		<input type="text" id="tId" class="layui-input" placeholder="ID" readonly>
+	</div>
+	<div class="layui-input-inline">
+		<!-- 与上面的输入框类似，创建一个文本输入框用于展示当前选中行对应的“价格”数据，设置id为“tPrice”，提示文字为“价格”，同样为只读状态 -->
+		<input type="text" id="tPrice" class="layui-input" placeholder="价格" readonly>
+	</div>
+</div>
 
-		<script>
-			//网页加载完毕
-			$(document).ready(function() {
+<script>
+	// 当整个网页的DOM结构加载完毕后，会执行此回调函数，确保在操作页面元素之前，元素都已经在页面中加载完成，避免出现找不到元素等问题
+	$(document).ready(function () {
 
-				//发出ajax请求，调用后端数据
-				$.getJSON(baseUrl + '/selectRomeTypeIdServlet', function(data) {
+		// 使用jQuery的$.getJSON方法发送一个AJAX请求，请求的地址是通过baseUrl（应该是在全局定义的基础URL）加上'/selectRomeTypeIdServlet'来确定，
+		// 期望获取的是JSON格式的数据，并且在请求成功后执行回调函数，将获取到的数据作为参数传入回调函数中进行后续处理，此请求通常用于从后端获取房间类型相关的数据
+		$.getJSON(baseUrl + '/selectRomeTypeIdServlet', function (data) {
 
-					//遍历响应的json数组
+			// 使用jQuery的$.each方法遍历从后端获取到的JSON数据（data参数），该JSON数据通常是一个数组形式（包含多个房间类型相关的对象数据），
+			// 每次循环会传递当前项的索引（index）和具体的数据对象（el）给回调函数，方便在循环中处理每一条数据记录
+			$.each(data, function (index, el) {
+				var tId = el.typeId;
+				var tPrice = el.price;
+				var html = '';
+				// 拼接一个HTML字符串，用于构建表格中的一行数据（<tr>元素及其内部的单元格数据），
+				// 同时给这行数据添加点击事件，当用户点击该行时，会将该行对应的“ID”和“价格”数据分别赋值给页面中对应的输入框（id为“tId”和“tPrice”的输入框）进行展示
+				html += '<tr onclick="tId.value=\'' + tId + '\',tPrice.value=\'' + tPrice + '\'" >';
+				html += '	<td>' + el.typeId + '</td>';
+				html += '	<td>' + el.typeName + '</td>';
+				html += '	<td>' + el.price + '</td>';
+				html += '	<td>' + el.splicPrice + '</td>';
+				html += '	<td>' + el.exceedance + '</td>';
+				html += '	<td>' + el.isSplice + '</td>';
+				html += '</tr>';
 
-					$.each(data, function(index, el) {
-						var tId = el.typeId;
-						var tPrice = el.price;
-						var html = '';
-						html += '<tr onclick="tId.value=\'' + tId + '\',tPrice.value=\'' + tPrice + '\'" >';
-						html += '	<td>' + el.typeId + '</td>';
-						html += '	<td>' + el.typeName + '</td>';
-						html += '	<td>' + el.price + '</td>';
-						html += '	<td>' + el.splicPrice + '</td>';
-						html += '	<td>' + el.exceedance + '</td>';
-						html += '	<td>' + el.isSplice + '</td>';
-						html += '</tr>';
+				// 将拼接好的包含一行数据的HTML字符串添加到id为“dataTable”的表格元素中，实现动态往表格里添加数据行的功能，
+				// 经过循环遍历整个JSON数据数组后，就能完整地在表格中展示所有房间类型的数据记录了
+				$('#dataTable').append(html);
 
-						//追加到表格中
-						$('#dataTable').append(html);
-
-					});
-
-				});
 			});
-		</script>
-	</body>
+
+		});
+	});
+</script>
+</body>
 
 </html>

src/webapp/webpage/searchTable/searchHeader.jsp

@@ -1,51 +1,92 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，用于设置页面的内容类型为“text/html”（即HTML格式页面），同时指定字符编码为“UTF-8”，
+以此保证页面中的字符可以被正确解析和显示，避免出现乱码情况 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-		<title>酒店管理系统</title>
-		<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
-		<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
-		<script src="../../js/toExcel/xlsx.full.min.js"></script>
-		<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
-		<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
-	</head>
+<head>
+	<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面视口（viewport）的相关属性，其中“width=device-width”表示页面宽度会根据设备屏幕宽度自适应调整，
+“initial-scale=1”表示页面初始的缩放比例为1（即不进行缩放），“maximum-scale=1”表示页面最大缩放比例限制为1，也就是禁止用户手动放大页面，
+这些设置常用于确保页面在各种移动设备上都能有较好的显示效果 -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	<!-- 设置页面的标题为“酒店管理系统”，此标题会显示在浏览器的标题栏位置，方便用户识别当前页面所属的系统名称 -->
+	<title>酒店管理系统</title>
+	<!-- 引入Layui框架的样式文件（layui.css），“href”属性指定了该文件的相对路径（上级目录下的js/layui/css/layui.css），
+“media”属性值为“all”，意味着该样式文件适用于所有的媒体类型，即无论页面在何种设备上展示，都会应用此样式 -->
+	<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
+	<!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），其路径为上级目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css，
+引入该文件后，页面就可以使用其中定义的各种图标样式来丰富页面的视觉效果 -->
+	<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
+	<!-- 引入处理Excel相关功能的JavaScript库文件（xlsx.full.min.js），该文件所在路径为上级目录下的js/toExcel/xlsx.full.min.js，
+通常用于后续实现将页面数据导出为Excel文件等相关操作 -->
+	<script src="../../js/toExcel/xlsx.full.min.js"></script>
+	<!-- 引入FileSaver.js脚本文件，它是一个用于在浏览器端实现文件保存功能的JavaScript库，其路径为上级目录下的js/toExcel/FileSaver.js，
+常配合其他相关库来实现将生成的文件（比如Excel文件）保存到本地的功能 -->
+	<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
+	<!-- 引入自定义的用于将数据导出到Excel的脚本文件（Export2Excel.js），其位于上级目录下的js/toExcel/Export2Excel.js路径中，
+文件内部应该包含了具体的导出数据到Excel的业务逻辑和相关功能实现代码 -->
+	<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
+</head>
 
-	<body class="layui-layout-body">
-		<div class="layui-layout layui-layout-admin">
-			<div class="layui-header">
-				<div class="layui-logo">酒店管理系统</div>
-				<!-- 头部区域（可配合layui已有的水平导航） -->
-				<ul class="layui-nav layui-layout-left">
-					<li class="layui-nav-item" lay-unselect>
-						<a href="../orderInfo/orderTable.jsp" target="search">预订单</a>
-					</li>
-					<li class="layui-nav-item" lay-unselect>
-						<a href="此处填充地址" target="search">入住单</a>
-					</li>
-					<li class="layui-nav-item" lay-unselect>
-						<a href="此处填充地址" target="search">账单明细</a>
-					</li>
-				</ul>
-				<ul class="layui-nav layui-layout-right">
-					<li class="layui-nav-item" lay-unselect>
-						<a href="此处填充地址" target="search">预订单历史</a>
-					</li>
-					<li class="layui-nav-item" lay-unselect>
-						<a href="此处填充地址" target="search">入住单历史</a>
-					</li>
-				</ul>
-			</div>
-		</div>
+<body class="layui-layout-body">
+<!-- 创建一个Layui框架的布局容器（layui-layout）元素，并为其添加类名“layui-layout-admin”，在Layui框架中，
+此类布局容器常用于搭建后台管理系统页面的整体布局结构，能够方便地划分出如头部、侧边栏、主体内容区域以及底部等不同的功能区域 -->
+<div class="layui-layout layui-layout-admin">
+	<!-- 创建一个用于表示页面头部的<div>元素，在Layui布局结构里，这个元素内部会放置各种与头部相关的内容，比如网站logo、导航菜单等 -->
+	<div class="layui-header">
+		<!-- 创建一个带有类名“layui-logo”的<div>元素，在该元素内显示文字“酒店管理系统”，作为网站的标识或者logo，方便用户快速识别页面所属系统 -->
+		<div class="layui-logo">酒店管理系统</div>
+		<!-- 这是一段HTML注释，用于提示当前代码区域（即下面的导航菜单代码部分）是用于构建页面头部区域的导航部分，
+并且这些导航菜单可以配合Layui框架已有的水平导航组件来实现更丰富的交互和展示效果 -->
+		<!-- 头部区域（可配合layui已有的水平导航） -->
+		<ul class="layui-nav layui-layout-left">
+			<!-- 创建一个列表项（li）元素，为其添加类名“layui-nav-item”以及“lay-unselect”属性，“layui-nav-item”表示这是导航栏中的一个菜单项，
+“lay-unselect”属性通常用于阻止某些默认的选择行为（比如在移动端可能出现的文本选中效果等），使页面展示更加符合预期 -->
+			<li class="layui-nav-item" lay-unselect>
+				<!-- 创建一个超链接（a）元素，设置其“href”属性值为“../orderInfo/orderTable.jsp”，指定了点击该链接后要跳转的页面相对路径，
+“target”属性值为“search”（此处可能是用于在特定的iframe或者页面区域展示链接内容，不过当前代码中未看到对应定义，可能后续需要完善），
+链接文字为“预订单”，意味着用户点击该链接可跳转到预订单相关页面 -->
+				<a href="../orderInfo/orderTable.jsp" target="search">预订单</a>
+			</li>
+			<li class="layui-nav-item" lay-unselect>
+				<!-- 与上面的菜单项类似，创建超链接元素，但“href”属性值为“此处填充地址”，说明此处后续需要替换为实际的链接地址，
+用于跳转到入住单相关页面，链接文字为“入住单” -->
+				<a href="此处填充地址" target="search">入住单</a>
+			</li>
+			<li class="layui-nav-item" lay-unselect>
+				<!-- 同样的，创建超链接元素，“href”属性也需后续填充实际地址，用于跳转到账单明细相关页面，链接文字为“账单明细” -->
+				<a href="此处填充地址" target="search">账单明细</a>
+			</li>
+		</ul>
+		<ul class="layui-nav layui-layout-right">
+			<!-- 创建一个列表项元素，同样添加“layui-nav-item”和“lay-unselect”属性，作为导航栏右侧的一个菜单项 -->
+			<li class="layui-nav-item" lay-unselect>
+				<!-- 创建超链接元素，“href”属性指向后续需填充的地址，“target”属性为“search”，链接文字为“预订单历史”，
+点击该链接理论上可跳转到预订单历史相关页面 -->
+				<a href="此处填充地址" target="search">预订单历史</a>
+			</li>
+			<li class="layui-nav-item" lay-unselect>
+				<!-- 创建超链接元素，“href”属性需填充实际地址，“target”属性为“search”，链接文字为“入住单历史”，用于跳转到入住单历史相关页面 -->
+				<a href="此处填充地址" target="search">入住单历史</a>
+			</li>
+		</ul>
+	</div>
+</div>
 
-		<script src="../../js/layui/layui.js"></script>
-		<script src="../../js/jquery.js"></script>
+<!-- 引入Layui框架的核心JavaScript脚本文件（layui.js），该文件所在路径为上级目录下的js/layui/layui.js，
+它是使用Layui框架各种功能和组件的基础，比如实现页面交互、组件渲染等都依赖于此文件 -->
+<script src="../../js/layui/layui.js"></script>
+<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery是一个广泛使用的JavaScript库，常用于操作DOM元素、处理页面事件、
+进行AJAX数据交互等操作，能够极大地简化JavaScript编程工作，其路径为上级目录下的js/jquery.js -->
+<script src="../../js/jquery.js"></script>
 
-		<script>
-			//JavaScript代码区域
-			layui.use('element', function() {});
-		</script>
-	</body>
+<script>
+	//JavaScript代码区域
+	// 使用Layui框架的模块加载机制，加载“element”模块（Layui框架中用于操作页面元素、实现动态渲染页面结构、
+	// 控制页面元素显示隐藏等相关功能的模块），并在加载完成后执行回调函数，不过当前回调函数内部为空，可能后续需要添加具体的业务逻辑代码来实现相应功能
+	layui.use('element', function() {});
+</script>
+</body>
 
 </html>

src/webapp/webpage/searchTable/searchMain.jsp

@@ -1,14 +1,27 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，用于设置页面的内容类型为“text/html”（也就是HTML格式的页面），同时指定字符编码为“UTF-8”，
+这样能保证页面中的字符都能被正确解析和显示，避免出现乱码问题 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<title>酒店管理系统</title>
-	</head>
+<head>
+	<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的标题为“酒店管理系统”，这个标题会显示在浏览器的标题栏上，方便用户知晓当前页面所属的系统名称 -->
+	<title>酒店管理系统</title>
+</head>
 
-	<frameset rows="60,*" frameborder="0">
-		<frame name="Header" src="searchHeader.jsp" />
-		<frame name="search" src="../../nav.html" />
-	</frameset>
+<!-- 使用<frameset>标签来定义一个框架集，通过rows属性将整个页面划分为上下两部分，
+属性值“60,*”表示上面部分的高度为60像素（通常可用于放置像页面头部、导航栏等这类相对固定高度的内容），
+下面部分则会占据剩余的全部空间（“*”代表自适应剩余高度）。同时，frameborder属性设置为“0”，
+意味着框架与框架之间的边框不会显示出来，以此构建出一个分区域布局的页面框架结构 -->
+<frameset rows="60,*" frameborder="0">
+	<!-- 在框架集中定义一个<frame>元素，设置它的name属性为“Header”，这个属性主要用于给该框架命名，
+方便后续通过超链接的target属性等方式来指定内容要在这个框架中进行显示。src属性则指定了此框架初始要加载并显示的页面文件为“searchHeader.jsp”，
+也就是该框架一开始会展示“searchHeader.jsp”页面的内容，一般用来放置页面头部相关的内容 -->
+	<frame name="Header" src="searchHeader.jsp" />
+	<!-- 再定义一个<frame>元素，将其name属性设置为“search”，同样是给框架起个名字便于后续操作使用，
+src属性指定要加载“../../nav.html”这个文件作为此框架要显示的内容，这个框架通常用于放置页面主体的导航或者主要内容等部分 -->
+	<frame name="search" src="../../nav.html" />
+</frameset>
 
 </html>