5

src/main/java/cn/ppdxzz/controller/StudentController.java

@@ -22,15 +22,14 @@ import java.util.List;
 
 /**
  * Description:
- *
- * @Date: 2020/2/17 14:17
- * @Author: PeiChen
+
  */
 @Controller
 @RequestMapping("/student")
 public class StudentController {
 
     private StudentService studentService;
+
     @Autowired
     public void setStudentService(StudentService studentService) {
         this.studentService = studentService;
@@ -38,6 +37,7 @@ public class StudentController {
 
     /**
      * 查询所有学生信息
+     *
      * @param page
      * @param size
      * @param request
@@ -46,6 +46,27 @@ public class StudentController {
      * @throws Exception
      */
     @RequestMapping("/findAll")
+    public class StudentController {
+
+        private StudentService studentService;
+
+        @Autowired
+        public void setStudentService(StudentService studentService) {
+            this.studentService = studentService;
+        }
+
+
+        /**
+         * 查询所有学生信息
+         *
+         * @param page     当前页码
+         * @param size     每页显示的记录数
+         * @param request  HTTP请求对象
+         * @param response HTTP响应对象
+         * @return ModelAndView 包含分页数据和视图名称
+         * @throws Exception 抛出异常
+         */
+        @RequestMapping("/findAll")
         public ModelAndView findAll(@RequestParam(name = "page", required = true, defaultValue = "1") int page, @RequestParam(name = "size", required = true, defaultValue = "5") int size, HttpServletRequest request, HttpServletResponse response) throws Exception {
             request.setCharacterEncoding("utf-8");
             response.setCharacterEncoding("utf-8");
@@ -57,19 +78,18 @@ public class StudentController {
             } else {
                 list = studentService.search(page, size, keyword);
             }
-        //PageInfo就是一个封装了分页数据的bean
             PageInfo pageInfo = new PageInfo(list);
             mv.addObject("pageInfo", pageInfo);
             mv.setViewName("student-list");
-
             return mv;
         }
 
         /**
          * 根据学号删除学生
-     * @param request
-     * @param response
-     * @throws Exception
+         *
+         * @param request  HTTP请求对象
+         * @param response HTTP响应对象
+         * @throws Exception 抛出异常
          */
         @RequestMapping("/delete")
         public void delete(HttpServletRequest request, HttpServletResponse response) throws Exception {
@@ -82,14 +102,14 @@ public class StudentController {
             }
             studentService.delete(sno);
             writer.write("true");
-
         }
 
         /**
          * 判断指定学号是否存在
-     * @param request
-     * @param response
-     * @throws Exception
+         *
+         * @param request  HTTP请求对象
+         * @param response HTTP响应对象
+         * @throws Exception 抛出异常
          */
         @RequestMapping("/isExist")
         public void isSnoExist(HttpServletRequest request, HttpServletResponse response) throws Exception {
@@ -101,9 +121,7 @@ public class StudentController {
             if (isExist == null) {
                 return;
             }
-        //如果isExist不为空说明学号已被注册
             writer.write("true");
-
         }
 
         @RequestMapping("/addStudent")
@@ -122,9 +140,10 @@ public class StudentController {
 
         /**
          * 添加学生信息
-     * @param student
-     * @param response
-     * @throws Exception
+         *
+         * @param student  学生对象
+         * @param response HTTP响应对象
+         * @throws Exception 抛出异常
          */
         @RequestMapping("/add")
         public void add(Student student, HttpServletResponse response) throws Exception {
@@ -133,7 +152,6 @@ public class StudentController {
                 writer.write("false");
                 return;
             }
-
             Student s = studentService.findBySno(student.getSno());
             if (s != null) {
                 writer.write("false");
@@ -145,7 +163,6 @@ public class StudentController {
             } else {
                 writer.write("false");
             }
-
         }
 
         @RequestMapping("/editStudent")
@@ -158,11 +175,13 @@ public class StudentController {
             mv.setViewName("student-edit");
             return mv;
         }
+
         /**
          * 修改学生信息
-     * @param student
-     * @param response
-     * @throws Exception
+         *
+         * @param student  学生对象
+         * @param response HTTP响应对象
+         * @throws Exception 抛出异常
          */
         @RequestMapping("/update")
         public void update(Student student, HttpServletResponse response) throws Exception {
@@ -171,25 +190,18 @@ public class StudentController {
             if (student == null || student.getId() == null) {
                 return;
             }
-        if (student.getName() == null || "".equals(student.getName()) || student.getName().length() == 0
-            || student.getSex() == null || student.getSex().length() == 0 || "".equals(student.getSex())
-            || student.getSno() == null || "".equals(student.getSno()) || student.getSno().length() == 0
-            || student.getPhone() == null || "".equals(student.getPhone()) || student.getPhone().length() == 0
-            || student.getStu_class() == null || "".equals(student.getStu_class()) || student.getStu_class().length() == 0
-            || student.getPlace() == null || "".equals(student.getPlace()) || student.getPlace().length() == 0
-            || student.getDorm_id() == null || "".equals(student.getDorm_id()) || student.getDorm_id().length() == 0
-            || student.getTeacher() == null || "".equals(student.getTeacher()) || student.getTeacher().length() == 0 ) {
+            if (student.getName() == null || "".equals(student.getName()) || student.getName().length() == 0 || student.getSex() == null || student.getSex().length() == 0 || "".equals(student.getSex()) || student.getSno() == null || "".equals(student.getSno()) || student.getSno().length() == 0 || student.getPhone() == null || "".equals(student.getPhone()) || student.getPhone().length() == 0 || student.getStu_class() == null || "".equals(student.getStu_class()) || student.getStu_class().length() == 0 || student.getPlace() == null || "".equals(student.getPlace()) || student.getPlace().length() == 0 || student.getDorm_id() == null || "".equals(student.getDorm_id()) || student.getDorm_id().length() == 0 || student.getTeacher() == null || "".equals(student.getTeacher()) || student.getTeacher().length() == 0) {
                 return;
             }
             studentService.update(student);
             writer.write("true");
-
         }
 
         /**
          * 导出学生数据为Excel
-     * @param response
-     * @throws Exception
+         *
+         * @param response HTTP响应对象
+         * @throws Exception 抛出异常
          */
         @RequestMapping("/export")
         public void export(HttpServletResponse response) throws Exception {
@@ -200,6 +212,5 @@ public class StudentController {
             IOUtils.copy(is, outputStream);
         }
 
-
-
+    }
 }

src/main/java/cn/ppdxzz/dao/StudentDao.java

@@ -7,88 +7,88 @@ import org.springframework.stereotype.Repository;
 import java.util.List;
 
 /**
- * Description:学生类的持久层
- *
- * @Date: 2020/2/17 14:19
- * @Author: PeiChen
+ * Description:学生类的持久层接口，用于定义对学生信息进行数据库操作的方法
  */
 @Repository
 public interface StudentDao {
 
     /**
      * 查询所有学生信息
-     * @return
-     * @throws Exception
+     * @return 返回包含所有学生信息的列表
+     * @throws Exception 如果查询过程中发生错误则抛出异常
      */
     @Select("select * from students")
     List<Student> findAll() throws Exception;
 
     /**
      * 通过学号sno查询学生信息
-     * @return
-     * @throws Exception
+     * @param sno 学生的学号
+     * @return 返回对应学号的学生信息
+     * @throws Exception 如果查询过程中发生错误则抛出异常
      */
     @Select("select * from students where sno = #{sno}")
     Student findBySno(String sno) throws Exception;
 
     /**
      * 模糊查询学生信息
-     * @return
-     * @throws Exception
+     * @param keyword 搜索关键字
+     * @return 返回匹配关键字的学生信息列表
+     * @throws Exception 如果查询过程中发生错误则抛出异常
      */
     @Select("select * from students where name like '%${keyword}%' or sex like '%${keyword}%' or sno like '%${keyword}%' or  stu_class like '%${keyword}%' or phone like '%${keyword}%' or place like '%${keyword}%' or dorm_id like '%${keyword}%' or teacher like '%${keyword}%' ")
     List<Student> search(@Param(value = "keyword") String keyword) throws Exception;
 
     /**
      * 添加学生信息
-     * @param student
-     * @throws Exception
+     * @param student 要添加的学生对象
+     * @throws Exception 如果添加过程中发生错误则抛出异常
      */
     @Insert("insert into students(name, sex, sno, stu_class, phone, place, dorm_id, teacher, status) values(#{name},#{sex},#{sno},#{stu_class},#{phone},#{place},#{dorm_id},#{teacher},#{status})")
     void add(Student student) throws Exception;
 
     /**
-     * 根据id删除学生
-     * @param sno
-     * @throws Exception
+     * 根据学号删除学生信息
+     * @param sno 学生的学号
+     * @throws Exception 如果删除过程中发生错误则抛出异常
      */
     @Delete("delete from students where sno = #{sno}")
     void delete(String sno) throws Exception;
 
+
     /**
-     * 根据id修改学生信息
-     * @param student
-     * @throws Exception
+     * 根据学号修改学生信息
+     * @param student 更新后的学生对象
+     * @throws Exception 如果更新过程中发生错误则抛出异常
      */
     @Update("update students set name = #{name},sex = #{sex},sno = #{sno},stu_class = #{stu_class},phone = #{phone},place = #{place},dorm_id = #{dorm_id},teacher = #{teacher},status = #{status} where id = #{id}")
     void update(Student student) throws Exception;
 
     /**
-     * 根据宿舍号查询状态为status的宿舍学生
-     * @param dorm_id
-     * @return
-     * @throws Exception
+     * 根据宿舍号和状态查询学生信息
+     * @param dorm_id 宿舍号
+     * @param status 学生状态
+     * @return 返回符合条件的学生信息列表
+     * @throws Exception 如果查询过程中发生错误则抛出异常
      */
     @Select("select * from students where dorm_id = #{dorm_id} and status = #{status}")
     List<Student> findByDormId(@Param(value = "dorm_id") String dorm_id,@Param(value = "status") Integer status) throws Exception;
 
     /**
-     * 查询育人导师为teacher的学生集合
-     * @param teacher
-     * @return
-     * @throws Exception
+     * 查询指定育人导师所带的所有学生信息
+     * @param teacher 育人导师的名字
+     * @return 返回该育人导师所带的学生信息列表
+     * @throws Exception 如果查询过程中发生错误则抛出异常
      */
     @Select("select * from students where teacher = #{teacher}")
     List<Student> findByTeacher(String teacher) throws Exception;
 
     /**
-     * 模糊查询固定育人导师所带学生信息
-     * @param teacher
-     * @param keyword
-     * @return
-     * @throws Exception
+     * 模糊查询固定育人导师所带的学生信息
+     * @param teacher 育人导师的名字
+     * @param keyword 搜索关键字
+     * @return 返回匹配关键字的该育人导师所带的学生信息列表
+     * @throws Exception 如果查询过程中发生错误则抛出异常
      */
     @Select("select * from students where teacher = #{teacher} and sno = #{keyword} ")
     List<Student> searchStudent(@Param(value = "teacher") String teacher,@Param(value = "keyword") String keyword) throws Exception;
-
 }

src/main/java/cn/ppdxzz/domain/Student.java

@@ -3,26 +3,26 @@ package cn.ppdxzz.domain;
 import java.io.Serializable;
 
 /**
- * Description:
- *
- * @Date: 2020/2/17 14:08
- * @Author: PeiChen
+ * Student类表示一个学生对象，包含学生的基本信息和状态。
+ * 该类实现了Serializable接口，允许其对象被序列化。
  */
 public class Student implements Serializable {
-    private Integer id;
-    private String name;//姓名
-    private String sex;//性别
-    private String sno;//学号
-    private String stu_class;//班级
-    private String phone;//联系方式
-    private String place;//家庭住址
-    private String dorm_id;//宿舍号
-    private String teacher;//育人导师
-    private Integer status;//学生状态是否激活：1 激活 0 禁用
-
+    private Integer id; // 学生的唯一标识符
+    private String name; // 学生的姓名
+    private String sex; // 学生的性别
+    private String sno; // 学生的学号
+    private String stu_class; // 学生所在的班级
+    private String phone; // 学生的联系电话
+    private String place; // 学生的家庭住址
+    private String dorm_id; // 学生宿舍的编号
+    private String teacher; // 负责学生育人导师的名字
+    private Integer status; // 学生的状态：1表示激活，0表示禁用
+
+    // 无参构造函数
     public Student() {
     }
 
+    // 全参构造函数，用于创建具有所有属性的学生对象
     public Student(Integer id, String name, String sex, String sno, String stu_class, String phone, String place, String dorm_id, String teacher, Integer status) {
         this.id = id;
         this.name = name;
@@ -36,6 +36,7 @@ public class Student implements Serializable {
         this.status = status;
     }
 
+    // Getter和Setter方法用于访问和修改私有属性
     public Integer getId() {
         return id;
     }
@@ -116,6 +117,7 @@ public class Student implements Serializable {
         this.status = status;
     }
 
+    // toString方法用于返回对象的字符串表示形式，便于调试和日志记录
     @Override
     public String toString() {
         return "Student{" +

src/main/java/cn/ppdxzz/service/StudentService.java

@@ -6,31 +6,92 @@ import java.io.InputStream;
 import java.util.List;
 
 /**
- * Description:学生业务层
- *
- * @Date: 2020/2/17 14:21
- * @Author: PeiChen
+ * Description:学生业务层接口，定义了对学生信息进行操作的方法
  */
 public interface StudentService {
+    /**
+     * 分页查询所有学生信息
+     * @param page 当前页码
+     * @param size 每页显示的记录数
+     * @return 返回学生列表
+     * @throws Exception 如果查询过程中发生错误
+     */
+    List<Student> findAll(int page, int size) throws Exception; // 定义分页查询所有学生信息的方法
 
-    List<Student> findAll(int page,int size) throws Exception;
-
-    Student findBySno(String sno) throws Exception;
+    /**
+     * 根据学号查询学生信息
+     * @param sno 学生的学号
+     * @return 返回对应的学生对象
+     * @throws Exception 如果查询过程中发生错误
+     */
+    Student findBySno(String sno) throws Exception; // 定义根据学号查询学生信息的方法
 
-    List<Student> search(int page, int size, String keyword) throws Exception;
+    /**
+     * 分页搜索学生信息
+     * @param page 当前页码
+     * @param size 每页显示的记录数
+     * @param keyword 搜索关键字
+     * @return 返回符合条件的学生列表
+     * @throws Exception 如果搜索过程中发生错误
+     */
+    List<Student> search(int page, int size, String keyword) throws Exception; // 定义分页搜索学生信息的方法
 
-    boolean add(Student student) throws Exception;
+    /**
+     * 添加新的学生信息
+     * @param student 要添加的学生对象
+     * @return 成功添加返回true，否则返回false
+     * @throws Exception 如果添加过程中发生错误
+     */
+    boolean add(Student student) throws Exception; // 定义添加新学生信息的方法
 
-    void delete(String sno) throws Exception;
+    /**
+     * 根据学号删除学生信息
+     * @param sno 学生的学号
+     * @throws Exception 如果删除过程中发生错误
+     */
+    void delete(String sno) throws Exception; // 定义根据学号删除学生信息的方法
 
-    void update(Student student) throws Exception;
+    /**
+     * 更新学生信息
+     * @param student 要更新的学生对象
+     * @throws Exception 如果更新过程中发生错误
+     */
+    void update(Student student) throws Exception; // 定义更新学生信息的方法
 
-    //返回一个携带所有学生信息数据的InputStream输入流
-    InputStream getInputStream() throws Exception;
+    /**
+     * 获取包含所有学生信息的输入流
+     * @return 返回一个携带所有学生信息数据的InputStream输入流
+     * @throws Exception 如果获取过程中发生错误
+     */
+    InputStream getInputStream() throws Exception; // 定义获取所有学生信息输入流的方法
 
-    List<Student> findByDormId(String dorm_id,Integer status) throws Exception;
+    /**
+     * 根据宿舍ID和状态查询学生信息
+     * @param dorm_id 宿舍ID
+     * @param status 学生状态（激活或禁用）
+     * @return 返回符合条件的学生列表
+     * @throws Exception 如果查询过程中发生错误
+     */
+    List<Student> findByDormId(String dorm_id, Integer status) throws Exception; // 定义根据宿舍ID和状态查询学生信息的方法
 
-    List<Student> findByTeacher(int page,int size,String teacher) throws Exception;
+    /**
+     * 根据教师姓名分页查询学生信息
+     * @param page 当前页码
+     * @param size 每页显示的记录数
+     * @param teacher 教师姓名
+     * @return 返回符合条件的学生列表
+     * @throws Exception 如果查询过程中发生错误
+     */
+    List<Student> findByTeacher(int page, int size, String teacher) throws Exception; // 定义根据教师姓名分页查询学生信息的方法
 
-    List<Student> searchStudent(int page,int size,String teacher,String keyword) throws Exception;
+    /**
+     * 根据教师姓名和搜索关键字分页查询学生信息
+     * @param page 当前页码
+     * @param size 每页显示的记录数
+     * @param teacher 教师姓名
+     * @param keyword 搜索关键字
+     * @return 返回符合条件的学生列表
+     * @throws Exception 如果查询过程中发生错误
+     */
+    List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception; // 定义根据教师姓名和搜索关键字分页查询学生信息的方法
 }

src/main/java/cn/ppdxzz/service/impl/StudentServiceImpl.java

@@ -13,10 +13,7 @@ import java.util.ArrayList;
 import java.util.List;
 
 /**
- * Description:
- *
- * @Date: 2020/2/17 14:22
- * @Author: PeiChen
+ * StudentServiceImpl类实现了StudentService接口，提供学生信息的管理功能。
  */
 @Service("studentService")
 public class StudentServiceImpl implements StudentService {
@@ -29,9 +26,11 @@ public class StudentServiceImpl implements StudentService {
     }
 
     /**
-     * 查询所有学生信息
-     * @return
-     * @throws Exception
+     * 查询所有学生信息，支持分页。
+     * @param page 当前页码
+     * @param size 每页显示的记录数
+     * @return 学生列表
+     * @throws Exception 异常处理
      */
     @Override
     public List<Student> findAll(int page, int size) throws Exception {
@@ -40,9 +39,10 @@ public class StudentServiceImpl implements StudentService {
     }
 
     /**
-     * 通过学号sno查询学生信息
-     * @return
-     * @throws Exception
+     * 根据学号查询学生信息。
+     * @param sno 学号
+     * @return 学生对象
+     * @throws Exception 异常处理
      */
     @Override
     public Student findBySno(String sno) throws Exception {
@@ -50,9 +50,12 @@ public class StudentServiceImpl implements StudentService {
     }
 
     /**
-     * 模糊查询学生信息
-     * @return
-     * @throws Exception
+     * 模糊查询学生信息，支持分页。
+     * @param page 当前页码
+     * @param size 每页显示的记录数
+     * @param keyword 查询关键字
+     * @return 学生列表
+     * @throws Exception 异常处理
      */
     @Override
     public List<Student> search(int page, int size, String keyword) throws Exception {
@@ -61,9 +64,10 @@ public class StudentServiceImpl implements StudentService {
     }
 
     /**
-     * 添加学生信息
-     * @param student
-     * @throws Exception
+     * 添加学生信息。
+     * @param student 学生对象
+     * @return 是否添加成功
+     * @throws Exception 异常处理
      */
     @Override
     public boolean add(Student student) throws Exception {
@@ -77,9 +81,9 @@ public class StudentServiceImpl implements StudentService {
     }
 
     /**
-     * 根据学号删除学生
-     * @param sno
-     * @throws Exception
+     * 根据学号删除学生信息。
+     * @param sno 学号
+     * @throws Exception 异常处理
      */
     @Override
     public void delete(String sno) throws Exception {
@@ -87,9 +91,9 @@ public class StudentServiceImpl implements StudentService {
     }
 
     /**
-     * 修改学生信息
-     * @param student
-     * @throws Exception
+     * 修改学生信息。
+     * @param student 学生对象
+     * @throws Exception 异常处理
      */
     @Override
     public void update(Student student) throws Exception {
@@ -97,9 +101,9 @@ public class StudentServiceImpl implements StudentService {
     }
 
     /**
-     * 导出学生信息
-     * @return
-     * @throws Exception
+     * 导出学生信息到Excel文件。
+     * @return 输入流，用于读取生成的Excel文件
+     * @throws Exception 异常处理
      */
     @Override
     public InputStream getInputStream() throws Exception {
@@ -121,16 +125,15 @@ public class StudentServiceImpl implements StudentService {
             datalist.add(obj);
         }
         WriteExcel excel = new WriteExcel(title, datalist);
-
         return excel.export();
     }
 
     /**
-     * 根据宿舍号查询状态为status的学生
-     * @param dorm_id
-     * @param status
-     * @return
-     * @throws Exception
+     * 根据宿舍号查询状态为status的学生。
+     * @param dorm_id 宿舍号
+     * @param status 状态值
+     * @return 学生列表
+     * @throws Exception 异常处理
      */
     @Override
     public List<Student> findByDormId(String dorm_id, Integer status) throws Exception {
@@ -138,10 +141,12 @@ public class StudentServiceImpl implements StudentService {
     }
 
     /**
-     * 查询育人导师为teacher的学生集合
-     * @param teacher
-     * @return
-     * @throws Exception
+     * 查询育人导师为teacher的学生集合，支持分页。
+     * @param page 当前页码
+     * @param size 每页显示的记录数
+     * @param teacher 育人导师名称
+     * @return 学生列表
+     * @throws Exception 异常处理
      */
     @Override
     public List<Student> findByTeacher(int page, int size, String teacher) throws Exception {
@@ -149,6 +154,15 @@ public class StudentServiceImpl implements StudentService {
         return studentDao.findByTeacher(teacher);
     }
 
+    /**
+     * 根据育人导师和关键字模糊查询学生信息，支持分页。
+     * @param page 当前页码
+     * @param size 每页显示的记录数
+     * @param teacher 育人导师名称
+     * @param keyword 查询关键字
+     * @return 学生列表
+     * @throws Exception 异常处理
+     */
     @Override
     public List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception {
         PageHelper.startPage(page, size);

src/main/webapp/WEB-INF/jsp/student-add.jsp

@@ -1,33 +1,19 @@
-<%--
-  Created by IntelliJ IDEA.
-  User: user
-  Date: 2020/2/17
-  Time: 12:33
-  To change this template use File | Settings | File Templates.
---%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <html>
 <head>
     <title>Title</title>
+    <!-- 引入Bootstrap样式表 -->
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
-    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
-    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
-    <script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
 </head>
 <body>
 <form>
+    <!-- 创建一个表格，用于输入学生信息 -->
     <table class="table" style="width: 100%;text-align: center;">
         <tbody>
         <tr>
-            <td>
-                <label for="name">姓名</label>
-            </td>
-            <td>
-                <input type="text" class="form-control" id="name" name="name" maxlength="10" required>
-            </td>
-            <td>
-                <label for="sex">性别</label>
-            </td>
+            <td><label for="name">姓名</label></td>
+            <td><input type="text" class="form-control" id="name" name="name" maxlength="10" required></td>
+            <td><label for="sex">性别</label></td>
             <td>
                 <select class="form-control" name="sex" id="sex">
                     <option value="男" selected>男</option>
@@ -36,28 +22,16 @@
             </td>
         </tr>
         <tr>
-            <td>
-                <label for="sno">学号</label>
-            </td>
-            <td>
-                <input type="text" name="sno" class="form-control" id="sno" aria-describedby="textHelp" maxlength="20" required>
-            </td>
-            <td>
-                <label for="stu_class">班级</label>
-            </td>
-            <td>
-                <input type="text" name="stu_class" class="form-control" id="stu_class" maxlength="30" required>
-            </td>
+            <td><label for="sno">学号</label></td>
+            <td><input type="text" name="sno" class="form-control" id="sno" aria-describedby="textHelp" maxlength="20" required></td>
+            <td><label for="stu_class">班级</label></td>
+            <td><input type="text" name="stu_class" class="form-control" id="stu_class" maxlength="30" required></td>
         </tr>
         <tr>
             <td><label for="phone">联系方式</label></td>
-            <td>
-                <input type="text" name="phone" class="form-control" id="phone" minlength="11" maxlength="11" required>
-            </td>
+            <td><input type="text" name="phone" class="form-control" id="phone" minlength="11" maxlength="11" required></td>
             <td><label for="place">家庭住址</label></td>
-            <td>
-                <input type="text" placeholder="请输入家庭详细地址" name="place" class="form-control" id="place" maxlength="30" required>
-            </td>
+            <td><input type="text" placeholder="请输入家庭详细地址" name="place" class="form-control" id="place" maxlength="30" required></td>
         </tr>
         <tr>
             <td><label for="dorm1">宿舍号</label></td>
@@ -73,49 +47,46 @@
                 <option value="A" selected>A</option>
                 <option value="B">B</option>
             </select></td>
-            <td>
-                <input type="text" name="dorm3" placeholder="请直接输入宿舍号" maxlength="3" class="form-control" id="dorm3" required>
-            </td>
+            <td><input type="text" name="dorm3" placeholder="请直接输入宿舍号" maxlength="3" class="form-control" id="dorm3" required></td>
         </tr>
         <tr>
             <td><label for="teacher">育人导师</label></td>
-            <td>
-                <select class="form-control" name="teacher" id="teacher">
+            <td><select class="form-control" name="teacher" id="teacher">
                 <option value="小李" selected>小李</option>
                 <option value="小王">小王</option>
                 <option value="小赵">小赵</option>
                 <option value="小飞">小飞</option>
                 <option value="小张">小张</option>
-                </select>
-            </td>
+            </select></td>
             <td><label for="status">状态</label></td>
-            <td>
-                <select class="form-control" name="status" id="status">
+            <td><select class="form-control" name="status" id="status">
                 <option value="0" selected>禁用</option>
                 <option value="1">激活</option>
-                </select>
-            </td>
+            </select></td>
         </tr>
         <tr>
             <td colspan="4">
+                <!-- 确认添加按钮 -->
                 <button type="button" id="add-student" class="btn btn-primary">确认添加</button>
-                <a href="javascript:window.history.back(-1)" target="_self" class="btn btn-default">返回列表</a>
+                <!-- 返回列表链接 -->
+                <a href="window.history.back(-1)" target="_self" class="btn btn-default">返回列表</a>
             </td>
         </tr>
         </tbody>
     </table>
 </form>
+
+
+<!-- jQuery脚本 -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
     $(function () {
         // ajax校验学号已被注册
         $("#sno").change(function () {
-            //取sno的值
-            var sno = $(this).val();
-            //ajax异步请求
+            var sno = $(this).val(); // 获取学号的值
             $.get("${pageContext.request.contextPath}/student/isExist",{"sno":sno},function (date) {
-                //$(".error").html(msg);
                 if (date) {
-                    layer.msg('学号已被注册，请重新输入！');
+                    layer.msg('学号已被注册，请重新输入！'); // 提示学号已被注册
                     return false;
                 }
             });
@@ -133,21 +104,18 @@
         var status = $("#status").val().trim();
 
         if (name == 0 || sex == 0 || sno == 0 || stu_class == 0 || phone == 0 || place == 0 || dorm3 == 0 || teacher == 0) {
-            layer.msg('字段不能为空');
+            layer.msg('字段不能为空'); // 提示字段不能为空
             return false;
         }
         if (${sessionScope.adminInfo.power < 1}) {
-            layer.msg('对不起，您权限不足');
+            layer.msg('对不起，您权限不足'); // 提示权限不足
             return false;
         }
         var d1 = $("#dorm1").val();
         var d2 = $("#dorm2").val();
-        var dorm_id = d1+""+d2+""+dorm3;
-        //alert(dorm_id);
+        var dorm_id = d1+""+d2+""+dorm3; // 拼接宿舍ID
         $.ajax({
-            url: "${pageContext.request.contextPath}/student/add",//要请求的服务器url
-            //这是一个对象，表示请求的参数，两个参数：method=ajax&val=xxx，服务器可以通过request.getParameter()来获取
-            //data:{method:"ajaxTest",val:value},
+            url: "${pageContext.request.contextPath}/student/add", // 请求的URL
             data: {
                 name:name,
                 sex:sex,
@@ -160,32 +128,33 @@
                 status:status
             },
             type: "POST", // 请求方式为POST
-            dataType: "json",
-            success:function(result){  //这个方法会在服务器执行成功时被调用 ，参数data就是服务器返回的值(现在是json类型)
-                //alert(result);
+            dataType: "json", // 数据类型为JSON
+            success:function(result){ // 成功回调函数
                 if(result){
-                    layer.msg('添加成功！');
+                    layer.msg('添加成功！'); // 提示添加成功
                     if (${sessionScope.adminInfo.power == 1}) {
-                        setTimeout(function () {window.location.href='${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';},2000);
+                        setTimeout(function () {window.location.href='${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';},2000); // 跳转到宿舍管理员页面
                         return false;
                     }
                     if (${sessionScope.adminInfo.power == 2}) {
-                        setTimeout(function () {window.location.href='${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';},2000);
-                        return flase;
+                        setTimeout(function () {window.location.href='${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';},2000); // 跳转到学生查询页面
+                        return false;
                     }
                     setTimeout(function () {window.location.href='${pageContext.request.contextPath}/student/findAll';},2000);
                 }else {
-                    layer.msg('添加失败，请联系管理员');
-                    if (${sessionScope.adminInfo.power == 1}) {
+                    layer.msg('添加失败，请联系管理员');  // 如果操作失败，显示错误消息
+                    if (${sessionScope.adminInfo.power == 1}) { // 根据用户权限不同，跳转到不同的页面
+                        // 宿舍管理员权限，2秒后跳转到宿舍管理员页面
+
                         setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000);
                         return false;
                     }
-                    if (${sessionScope.adminInfo.power == 2}) {
+                    if (${sessionScope.adminInfo.power == 2}) { // 学生权限，2秒后跳转到学生查询页面
                         setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';}, 2000);
-                        return flase;
-                    }
-                    setTimeout(function () {window.location.href='${pageContext.request.contextPath}/student/findAll';},2000);
+                        return false; //
                     }
+                    // 默认情况下，2秒后跳转到学生列表页面
+                    setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/student/findAll';}, 2000);}
             }
         });
     });

src/main/webapp/WEB-INF/jsp/student-edit.jsp

@@ -1,11 +1,4 @@
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-<%--
-  Created by IntelliJ IDEA.
-  User: user
-  Date: 2020/2/17
-  Time: 12:34
-  To change this template use File | Settings | File Templates.
---%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <html>
 <head>
@@ -171,36 +164,37 @@
                 status: status
             },
             type: "POST", // 请求方式为POST
-            dataType: "json",
-            success:function(result){  //这个方法会在服务器执行成功时被调用 ，参数data就是服务器返回的值(现在是json类型)
-                //alert(result);
+            dataType: "json", // 期望从服务器接收的数据类型为JSON
+            success: function(result) { // 成功回调函数，参数result是服务器返回的数据
                 if (result) {
-                    layer.msg('修改成功');
+                    layer.msg('修改成功'); // 显示修改成功的提示消息
+                    // 根据用户权限重定向到不同的页面
                     if (${sessionScope.adminInfo.power == 1}) {
                         setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000);
                         return false;
                     }
                     if (${sessionScope.adminInfo.power == 2}) {
                         setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';}, 2000);
-                        return flase;
+                        return false; // 注意这里应该是 return false; 而不是 return flase;
                     }
                     setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/student/findAll';}, 2000);
                 } else {
-                    layer.msg('修改失败，请联系管理员');
+                    layer.msg('修改失败，请联系管理员'); // 显示修改失败的提示消息
+                    // 根据用户权限重定向到不同的页面
                     if (${sessionScope.adminInfo.power == 1}) {
                         setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000);
                         return false;
                     }
                     if (${sessionScope.adminInfo.power == 2}) {
                         setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}';}, 2000);
-                        return flase;
-                    }
-                    setTimeout(function () {window.location.href='${pageContext.request.contextPath}/student/findAll';},2000);
+                        return false; // 注意这里应该是 return false; 而不是 return flase;
                     }
+                    setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/student/findAll';}, 2000);}
             }
         });
         });
     });
+
 </script>
 </body>
 </html>

src/main/webapp/WEB-INF/jsp/student-list.jsp

@@ -1,10 +1,3 @@
-<%--
-  Created by IntelliJ IDEA.
-  User: user
-  Date: 2020/2/10
-  Time: 21:45
-  To change this template use File | Settings | File Templates.
---%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
 <html class="x-admin-sm">
@@ -13,36 +6,37 @@
     <title></title>
     <meta name="renderer" content="webkit">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <!-- 引入外部CSS文件 -->
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
-    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
-    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
-    <script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>
-    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
-    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
-    <!--[if lt IE 9]>
-    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
-    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
+
     <![endif]-->
-    <script>
+
+    <script type="text/javascript">
+        // 定义一个函数用于改变每页显示条数
         function changePageSize() {
             // 获取下拉框的值
             var pageSize = $("#changePageSize").val();
             // 向服务器发送请求，改变每页显示条数
             location.href = "${pageContext.request.contextPath}/student/findAll?page=1&size=" + pageSize;
         }
+
+        // 绑定搜索按钮点击事件
         $("#serarch_btn").click(function () {
-            var keyword = $("#keyword").val();
-            location.href="${pageContext.request.contextPath}/student/findAll?page=1&size=5&keyword="+keyword;
+            var keyword = $("#keyword").val(); // 获取输入框中的关键字
+            location.href = "${pageContext.request.contextPath}/student/findAll?page=1&size=5&keyword=" + keyword; // 向服务器发送请求，根据关键字搜索
         });
+
+        // 绑定刷新按钮点击事件
         $("#refresh").click(function () {
-            $("#myform").reset();
-            location.href="${pageContext.request.contextPath}/student/findAll?page=1&size=5";
+            $("#myform").reset(); // 重置表单
+            location.href = "${pageContext.request.contextPath}/student/findAll?page=1&size=5"; // 重新加载页面
         });
     </script>
 </head>
 <body>
+<%-- 导航栏部分被注释掉了 --%>
 <%--<div class="x-nav">
           <span class="layui-breadcrumb">
             <a href="">首页</a>
@@ -50,7 +44,7 @@
             <a>
               <cite>导航元素</cite></a>
           </span>
-    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
+    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" "location.reload()" title="刷新">
         <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
 </div>--%>
 <div class="layui-fluid">
@@ -58,6 +52,7 @@
         <div class="layui-col-md12">
             <div class="layui-card">
                 <div class="layui-card-body ">
+                    <!-- 搜索表单 -->
                     <form id="myform" class="layui-form layui-col-space5">
                         <div class="layui-inline layui-show-xs-block">
                             <input class="layui-input" type="text" autocomplete="off" placeholder="请输入关键字" name="keyword" id="keyword" value="${param.keyword}">
@@ -66,16 +61,20 @@
                             <button class="layui-btn" id="serarch_btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                         </div>
                         <div class="layui-inline layui-show-xs-block x-right">
-                            <a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/student/findAll?page=1&size=5"><i class="layui-icon">&#xe669;</i></a>
+                            <a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/student/findAll?page=1&size=5"><i class="layui-icon">&#xe669;</i>全部</a>
                         </div>
                     </form>
                 </div>
                 <xblock>
+                    <!-- 添加学生按钮 -->
                     <a href="${pageContext.request.contextPath}/student/addStudent" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe654;</i>添加</a>
-                    <a onclick="exportInfo()" class="layui-btn layui-btn-warm" href="javascript:;"><i class="layui-icon">&#xe67c;</i>导出</a>
+                    <!-- 导出信息按钮（功能未实现） -->
+                    <a "exportInfo()" class="layui-btn layui-btn-warm" href=";"><i class="layui-icon">&#xe67c;</i>导出</a>
+                    <!-- 显示数据总数 -->
                     <span class="x-right" style="line-height:40px">共有数据：${pageInfo.total} 条</span>
                 </xblock>
                 <div class="layui-card-body">
+                    <!-- 表格展示学生信息 -->
                     <table class="layui-table layui-form">
                         <thead>
                         <tr style="text-align: center">
@@ -94,38 +93,45 @@
                         </thead>
                         <tbody>
                         <%
-                            int j = 1;
+                            int j = 1; // 初始化行号计数器
                         %>
+                        <!-- 遍历学生列表并生成表格行 -->
                         <c:forEach items="${pageInfo.list}" var="student">
                             <tr id="light" style="text-align: center">
-                            <td><%=j++%></td>
-                            <td>${student.name}</td>
-                            <td>${student.sex}</td>
-                            <td>${student.sno}</td>
-                            <td>${student.stu_class}</td>
-                            <td>${student.phone}</td>
-                            <td>${student.dorm_id}</td>
-                            <td>${student.teacher}</td>
+                                <td><%=j++%></td> <!-- 显示行号 -->
+                                <td>${student.name}</td> <!-- 显示学生姓名 -->
+                                <td>${student.sex}</td> <!-- 显示学生性别 -->
+                                <td>${student.sno}</td> <!-- 显示学生学号 -->
+                                <td>${student.stu_class}</td> <!-- 显示学生班级 -->
+                                <td>${student.phone}</td> <!-- 显示学生联系方式 -->
+                                <td>${student.dorm_id}</td> <!-- 显示学生宿舍号 -->
+                                <td>${student.teacher}</td> <!-- 显示学生育人导师 -->
                                 <c:if test="${student.status == 1}">
+                                    <!-- 显示已激活状态 -->
                                     <td><button class="layui-btn layui-btn-normal layui-btn-sm">已激活</button></td>
                                 </c:if>
                                 <c:if test="${student.status == 0}">
+                                    <!-- 显示禁用状态 -->
                                     <td><button class="layui-btn layui-btn-danger layui-btn-sm">禁用</button></td>
                                 </c:if>
                                 <c:if test="${sessionScope.adminInfo.power > 1}">
                                     <td class="td-manage">
+                                        <!-- 编辑按钮 -->
                                         <a title="编辑" href="${pageContext.request.contextPath}/student/editStudent?sno=${student.sno}">
                                             <i class="layui-icon">&#xe642;</i>
                                         </a>
-                                <a title="删除" onclick="member_del(this,${student.sno},${sessionScope.adminInfo.power})" href="javascript:;">
+                                        <!-- 删除按钮（功能未实现） -->
+                                        <a title="删除" href=";" onclick="member_del(this,${student.sno},${sessionScope.adminInfo.power})">
                                             <i class="layui-icon">&#xe640;</i>
                                         </a>
                                     </td>
                                 </c:if>
-                            </c:forEach>
                             </tr>
+                        </c:forEach>
                         </tbody>
+
                     </table>
+
                 </div>
                 <div class="pull-left">
                     <div class="form-group form-inline">
@@ -139,32 +145,28 @@
                         </select> 条
                     </div>
                 </div>
+
+                // 根据总页数和当前页码，动态设置分页导航的起始和结束页码
                 <c:choose>
                     <c:when test="${pageInfo.pages < 5}">
-                        <c:set var="begin" value="1">
-                        </c:set>
-                        <c:set var="end" value="${pageInfo.pages}">
-                        </c:set>
+                        <c:set var="begin" value="1"/>
+                        <c:set var="end" value="${pageInfo.pages}"/>
                     </c:when>
                     <c:when test="${pageInfo.pageNum <= 3}">
-                        <c:set var="begin" value="1">
-                        </c:set>
-                        <c:set var="end" value="5">
-                        </c:set>
+                        <c:set var="begin" value="1"/>
+                        <c:set var="end" value="5"/>
                     </c:when>
                     <c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}">
-                        <c:set var="begin" value="${pageInfo.pageNum - 2}">
-                        </c:set>
-                        <c:set var="end" value="${pageInfo.pageNum + 2}">
-                        </c:set>
+                        <c:set var="begin" value="${pageInfo.pageNum - 2}"/>
+                        <c:set var="end" value="${pageInfo.pageNum + 2}"/>
                     </c:when>
                     <c:otherwise>
-                        <c:set var="begin" value="${pageInfo.pages - 4}">
-                        </c:set>
-                        <c:set var="end" value="${pageInfo.pages}">
-                        </c:set>
+                        <c:set var="begin" value="${pageInfo.pages - 4}"/>
+                        <c:set var="end" value="${pageInfo.pages}"/>
                     </c:otherwise>
                 </c:choose>
+
+                // 分页导航按钮部分
                 <div class="layui-card-body x-right" style="height: min-content">
                     <div class="page">
                         <div>
@@ -183,8 +185,7 @@
                             <c:if test="${pageInfo.pageNum < pageInfo.pages}">
                                 <a class="next" href="${pageContext.request.contextPath}/student/findAll?page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a>
                             </c:if>
-                            <a class="next" href="${pageContext.request.contextPath}/student/findAll?page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a>
-                        </div>
+                            <a class="next" href="${pageContext.request.contextPath}/student/findAll?page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a></div>
                     </div>
                 </div>
             </div>
@@ -224,6 +225,7 @@
             layer.close(index);
         });
     }
+
 </script>
 </body>
 </html>

src/main/webapp/WEB-INF/jsp/studentsTeacher.jsp

@@ -1,10 +1,3 @@
-<%--
-  Created by IntelliJ IDEA.
-  User: user
-  Date: 2020/2/10
-  Time: 21:45
-  To change this template use File | Settings | File Templates.
---%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
 <html class="x-admin-sm">
@@ -13,21 +6,16 @@
     <title></title>
     <meta name="renderer" content="webkit">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <!-- 引入外部CSS文件 -->
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
-    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
-    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
-    <script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>
-    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
-    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
+
     <!--[if lt IE 9]>
-    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
-    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
-
 </head>
 <body>
+<%-- 注释掉的导航栏代码 --%>
 <%--<div class="x-nav">
           <span class="layui-breadcrumb">
             <a href="">首页</a>
@@ -35,14 +23,16 @@
             <a>
               <cite>导航元素</cite></a>
           </span>
-    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
+    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" "location.reload()" title="刷新">
         <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
 </div>--%>
+
 <div class="layui-fluid">
     <div class="layui-row layui-col-space15">
         <div class="layui-col-md12">
             <div class="layui-card">
                 <div class="layui-card-body ">
+                    <!-- 注释掉的搜索表单代码 -->
                     <%--<form id="myform" class="layui-form layui-col-space5">
                         <div class="layui-inline layui-show-xs-block">
                             <input class="layui-input" type="text" autocomplete="off" placeholder="请输入关键字" name="keyword" id="keyword" value="${param.keyword}">
@@ -56,10 +46,13 @@
                     </form>--%>
                 </div>
                 <xblock>
+                    <!-- 添加学生按钮 -->
                     <a href="${pageContext.request.contextPath}/student/addStudent" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe654;</i>添加</a>
+                    <!-- 显示总数据条数 -->
                     <span class="x-right" style="line-height:40px">共有数据：${pageInfo.total} 条</span>
                 </xblock>
                 <div class="layui-card-body">
+                    <!-- 表格展示学生信息 -->
                     <table class="layui-table layui-form">
                         <thead>
                         <tr style="text-align: center">
@@ -73,40 +66,47 @@
                             <th style="text-align: center">育人导师</th>
                             <th style="text-align: center">状态</th>
                             <th style="text-align: center">操作</th>
+                        </tr>
                         </thead>
                         <tbody>
                         <%
-                            int j = 1;
+                            int j = 1; // 初始化行号计数器
                         %>
+                        <!-- 遍历学生列表并生成表格行 -->
                         <c:forEach items="${pageInfo.list}" var="student">
                             <tr id="light" style="text-align: center">
-                            <td><%=j++%></td>
-                            <td>${student.name}</td>
-                            <td>${student.sex}</td>
-                            <td>${student.sno}</td>
-                            <td>${student.stu_class}</td>
-                            <td>${student.phone}</td>
-                            <td>${student.dorm_id}</td>
-                            <td>${student.teacher}</td>
+                                <td><%=j++%></td> <!-- 显示行号 -->
+                                <td>${student.name}</td> <!-- 显示学生姓名 -->
+                                <td>${student.sex}</td> <!-- 显示学生性别 -->
+                                <td>${student.sno}</td> <!-- 显示学生学号 -->
+                                <td>${student.stu_class}</td> <!-- 显示学生班级 -->
+                                <td>${student.phone}</td> <!-- 显示学生联系方式 -->
+                                <td>${student.dorm_id}</td> <!-- 显示学生宿舍号 -->
+                                <td>${student.teacher}</td> <!-- 显示学生育人导师 -->
+                                <!-- 根据学生状态显示不同按钮 -->
                                 <c:if test="${student.status == 1}">
                                     <td><button class="layui-btn layui-btn-normal layui-btn-sm">已激活</button></td>
                                 </c:if>
                                 <c:if test="${student.status == 0}">
                                     <td><button class="layui-btn layui-btn-danger layui-btn-sm">禁用</button></td>
                                 </c:if>
+                                <!-- 编辑按钮 -->
                                 <td class="td-manage">
                                     <a title="编辑" href="${pageContext.request.contextPath}/student/editStudent?sno=${student.sno}">
                                         <i class="layui-icon">&#xe642;</i>
                                     </a>
                                 </td>
+                            </tr>
                         </c:forEach>
                         </tr>
                         </tbody>
                     </table>
                 </div>
                 <div class="pull-left">
+                    <!-- 左侧浮动的分页信息 -->
                     <div class="form-group form-inline">
                         共&nbsp;${pageInfo.pages}&nbsp;页&emsp;当前页：${pageInfo.pageNum}&nbsp;/&nbsp;${pageInfo.pages}&emsp; 每页
+                        <!-- 下拉框用于选择每页显示的条数 -->
                         <select class="form-control" id="changePageSize" onchange="changePageSize()">
                             <option value="1">${pageInfo.size}</option>
                             <option value="5">5</option>
@@ -116,50 +116,58 @@
                         </select> 条
                     </div>
                 </div>
+
                 <c:choose>
+                    <!-- 根据总页数和当前页码设置分页按钮的范围 -->
                     <c:when test="${pageInfo.pages < 5}">
-                        <c:set var="begin" value="1">
-                        </c:set>
-                        <c:set var="end" value="${pageInfo.pages}">
-                        </c:set>
+                        <!-- 如果总页数小于5，则显示所有页码 -->
+                        <c:set var="begin" value="1"></c:set>
+                        <c:set var="end" value="${pageInfo.pages}"></c:set>
                     </c:when>
                     <c:when test="${pageInfo.pageNum <= 3}">
-                        <c:set var="begin" value="1">
-                        </c:set>
-                        <c:set var="end" value="5">
-                        </c:set>
+                        <!-- 如果当前页码小于等于3，则显示前5页 -->
+                        <c:set var="begin" value="1"></c:set>
+                        <c:set var="end" value="5"></c:set>
                     </c:when>
                     <c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}">
-                        <c:set var="begin" value="${pageInfo.pageNum - 2}">
-                        </c:set>
-                        <c:set var="end" value="${pageInfo.pageNum + 2}">
-                        </c:set>
+                        <!-- 如果当前页码大于3且小于总页数减2，则显示当前页码前后各两页 -->
+                        <c:set var="begin" value="${pageInfo.pageNum - 2}"></c:set>
+                        <c:set var="end" value="${pageInfo.pageNum + 2}"></c:set>
                     </c:when>
                     <c:otherwise>
-                        <c:set var="begin" value="${pageInfo.pages - 4}">
-                        </c:set>
-                        <c:set var="end" value="${pageInfo.pages}">
-                        </c:set>
+                        <!-- 其他情况，显示最后4页 -->
+                        <c:set var="begin" value="${pageInfo.pages - 4}"></c:set>
+                        <c:set var="end" value="${pageInfo.pages}"></c:set>
                     </c:otherwise>
                 </c:choose>
+
                 <div class="layui-card-body x-right" style="height: min-content">
+                    <!-- 右侧浮动的分页导航 -->
                     <div class="page">
                         <div>
+                            <!-- 首页链接 -->
                             <a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=${pageInfo.pageSize}&keyword=${param.keyword}">首页</a>
+                            <!-- 上一页链接，如果当前页码大于1 -->
                             <c:if test="${pageInfo.pageNum > 1}">
                                 <a class="prev" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pageNum-1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">上一页</a>
                             </c:if>
+                            <!-- 循环生成页码链接 -->
                             <c:forEach var="i" begin="${begin}" end="${end}" step="1">
+                                <!-- 当前页码高亮显示 -->
                                 <c:if test="${pageInfo.pageNum == i}">
                                     <span class="current">${i}</span>
                                 </c:if>
+                                <!-- 非当前页码的普通链接 -->
                                 <c:if test="${pageInfo.pageNum != i}">
                                     <a class="num" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${i}&size=${pageInfo.pageSize}&keyword=${param.keyword}">${i}</a>
                                 </c:if>
                             </c:forEach>
+                            <!-- 下一页链接，如果当前页码小于总页数 -->
                             <c:if test="${pageInfo.pageNum < pageInfo.pages}">
                                 <a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a>
                             </c:if>
+                            <!-- 尾页链接 -->
+
                             <a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a>
                         </div>
                     </div>
@@ -168,6 +176,8 @@
         </div>
     </div>
 </div>
+
+
         <script>
             function changePageSize() {
                 // 获取下拉框的值
@@ -175,14 +185,16 @@
                 // 向服务器发送请求，改变每页显示条数
                 location.href = "${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=" + pageSize;
             }
+
             $("#search_btn").click(function () {
-        alert(1234);
+                // 获取搜索关键字
                 var keyword = $("#keyword").val();
-        alert(keyword);
-        alert("${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=5&keyword="+keyword);
+                // 向服务器发送请求，进行搜索
                 location.href = "${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=5&keyword=" + keyword;
             });
+
             $("#refresh").click(function () {
+                // 重置表单并刷新页面
                 $("#myform").reset();
                 location.href = "${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=1&size=5";
             });

src/main/webapp/css/mobileSelect.css

@@ -1,150 +1,193 @@
+/* 定义一个名为 mobileSelect 的类，用于设置选择器的样式 */
 .mobileSelect {
-  position: relative;
-  z-index: 0;
-  opacity: 0;
-  visibility: hidden;
-  -webkit-transition: opacity 0.4s, z-index 0.4s;
-  transition: opacity 0.4s, z-index 0.4s;
-}
+  position: relative; /* 相对定位 */
+  z-index: 0; /* 层级为0 */
+  opacity: 0; /* 初始透明度为0，即不可见 */
+  visibility: hidden; /* 初始状态为隐藏 */
+  -webkit-transition: opacity 0.4s, z-index 0.4s; /* 过渡效果：透明度和层级变化持续0.4秒 */
+  transition: opacity 0.4s, z-index 0.4s; /* 标准过渡效果 */
+}
+
+/* 设置 mobileSelect 内所有元素的边距和填充为0，并使用盒模型计算方式 */
 .mobileSelect * {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
+
+/* 定义 mobileSelect 内的 grayLayer 类的样式 */
 .mobileSelect .grayLayer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: #eee;
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 888;
-  display: block;
-}
+  position: fixed; /* 固定定位 */
+  top: 0; /* 距离顶部0 */
+  left: 0; /* 距离左侧0 */
+  bottom: 0; /* 距离底部0 */
+  right: 0; /* 距离右侧0 */
+  background: #eee; /* 背景色 */
+  background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
+  z-index: 888; /* 层级为888 */
+  display: block; /* 显示为块级元素 */
+}
+
+/* 定义 mobileSelect 内的 content 类的样式 */
 .mobileSelect .content {
-  width: 100%;
-  display: block;
-  position: fixed;
-  z-index: 889;
-  color: black;
-  -webkit-transition: all 0.4s;
-  transition: all 0.4s;
-  bottom: -350px;
-  left: 0;
-  background: white;
-}
+  width: 100%; /* 宽度100% */
+  display: block; /* 显示为块级元素 */
+  position: fixed; /* 固定定位 */
+  z-index: 889; /* 层级为889 */
+  color: black; /* 文字颜色为黑色 */
+  -webkit-transition: all 0.4s; /* 所有属性的过渡效果持续0.4秒 */
+  transition: all 0.4s; /* 标准过渡效果 */
+  bottom: -350px; /* 初始位置在视口下方350px处 */
+  left: 0; /* 距离左侧0 */
+  background: white; /* 背景色为白色 */
+}
+
+/* 定义 content 内的 fixWidth 类的样式 */
 .mobileSelect .content .fixWidth {
-  width: 90%;
-  margin: 0 auto;
-  position: relative;
+  width: 90%; /* 宽度为90% */
+  margin: 0 auto; /* 上下边距为0，左右自动调整 */
+  position: relative; /* 相对定位 */
 }
+
+/* 定义 fixWidth 内的伪元素样式，用于清除浮动 */
 .mobileSelect .content .fixWidth:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
+  content: "."; /* 内容为点号 */
+  display: block; /* 显示为块级元素 */
+  height: 0; /* 高度为0 */
+  clear: both; /* 清除浮动 */
+  visibility: hidden; /* 隐藏 */
+}
+
+/* 定义 content 内的 btnBar 类的样式 */
 .mobileSelect .content .btnBar {
-  border-bottom: 1px solid #DCDCDC;
-  font-size: 15px;
-  height: 45px;
-  position: relative;
-  text-align: center;
-  line-height: 45px;
-}
+  border-bottom: 1px solid #DCDCDC; /* 底部边框 */
+  font-size: 15px; /* 字体大小 */
+  height: 45px; /* 高度 */
+  position: relative; /* 相对定位 */
+  text-align: center; /* 文本居中 */
+  line-height: 45px; /* 行高 */
+}
+
+/* 定义 btnBar 内的 cancel 和 ensure 按钮的样式 */
 .mobileSelect .content .btnBar .cancel,
 .mobileSelect .content .btnBar .ensure {
-  height: 45px;
-  width: 55px;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-}
+  height: 45px; /* 高度 */
+  width: 55px; /* 宽度 */
+  cursor: pointer; /* 鼠标指针样式 */
+  position: absolute; /* 绝对定位 */
+  top: 0; /* 距离顶部0 */
+}
+
+/* cancel 按钮的样式 */
 .mobileSelect .content .btnBar .cancel {
-  left: 0;
-  color: #666;
+  left: 0; /* 距离左侧0 */
+  color: #666; /* 文字颜色 */
 }
+
+/* ensure 按钮的样式 */
 .mobileSelect .content .btnBar .ensure {
-  right: 0;
-  color: #1e83d3;
+  right: 0; /* 距离右侧0 */
+  color: #1e83d3; /* 文字颜色 */
 }
+
+/* title 的样式 */
 .mobileSelect .content .btnBar .title {
-  font-size: 15px;
-  padding: 0 15%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
+  font-size: 15px; /* 字体大小 */
+  padding: 0 15%; /* 内边距 */
+  overflow: hidden; /* 溢出隐藏 */
+  white-space: nowrap; /* 不换行 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+
+/* panel 内的伪元素样式，用于清除浮动 */
 .mobileSelect .content .panel:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
+  content: "."; /* 内容为点号 */
+  display: block; /* 显示为块级元素 */
+  height: 0; /* 高度为0 */
+  clear: both; /* 清除浮动 */
+  visibility: hidden; /* 隐藏 */
+}
+
+/* wheels 的样式 */
 .mobileSelect .content .panel .wheels {
-  width: 100%;
-  height: 200px;
-  overflow: hidden;
+  width: 100%; /* 宽度100% */
+  height: 200px; /* 高度200px */
+  overflow: hidden; /* 溢出隐藏 */
 }
+
+/* wheel 的样式 */
 .mobileSelect .content .panel .wheel {
-  position: relative;
-  z-index: 0;
-  float: left;
-  width: 50%;
-  height: 200px;
-  overflow: hidden;
-  -webkit-transition: width 0.3s ease;
-  transition: width 0.3s ease;
-}
+  position: relative; /* 相对定位 */
+  z-index: 0; /* 层级为0 */
+  float: left; /* 左浮动 */
+  width: 100%; /* 宽度100% */
+  height: 200px; /* 高度200% */
+  overflow: hidden; /* 溢出隐藏 */
+  -webkit-transition: width 0.3s ease; /* Webkit浏览器的过渡效果 */
+  transition: width 0.3s ease; /* 标准过渡效果 */
+}
+
+/* selectContainer 的样式 */
 .mobileSelect .content .panel .wheel .selectContainer {
-  display: block;
-  text-align: center;
-  -webkit-transition: -webkit-transform 0.18s ease-out;
-  transition: -webkit-transform 0.18s ease-out;
-  transition: transform 0.18s ease-out;
-  transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
-}
+  display: block; /* 显示为块级元素 */
+  text-align: center; /* 文本居中 */
+  -webkit-transition: -webkit-transform 0.18s ease-out; /* Webkit浏览器的过渡效果 */
+  transition: -webkit-transform 0.18s ease-out; /* Webkit浏览器的标准过渡效果 */
+  transition: transform 0.18s ease-out; /* 标准过渡效果 */
+  transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out; /* 同时应用两种过渡效果 */
+}
+
+/* selectContainer li元素的样式 */
 .mobileSelect .content .panel .wheel .selectContainer li {
-  font-size: 15px;
-  display: block;
-  height: 40px;
-  line-height: 40px;
-  cursor: pointer;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
+  font-size: 15px; /* 字体大小 */
+  display: block; /* 显示为块级元素 */
+  height: 40px; /* 高度40px */
+  line-height: 40px; /* 行高40px */
+  color: #ffffff; /* 文字颜色为白色 */
+  cursor: pointer; /* 鼠标指针样式 */
+  white-space: nowrap; /* 不换行 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+
+/* selectLine的样式 */
 .mobileSelect .content .panel .selectLine {
-  height: 40px;
-  width: 100%;
-  position: absolute;
-  top: 80px;
-  pointer-events: none;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  border-top: 1px solid #DCDCDC;
-  border-bottom: 1px solid #DCDCDC;
-}
+  height: 40px; /* 高度40px */
+  width: 100%; /* 宽度100% */
+  position: absolute; /* 绝对定位 */
+  top: 80px; /* 距离顶部80px */
+  pointer-events: none; /* 禁止鼠标事件 */
+  -webkit-box-sizing: border-box; /* Webkit浏览器的盒模型计算方式 */
+  box-sizing: border-box; /* 标准盒模型计算方式 */
+  border-top: 1px solid #DCDCDC; /* 上边框 */
+  border-bottom: 1px solid #DCDCDC; /* 下边框 */
+}
+
+/* shadowMask的样式 */
 .mobileSelect .content .panel .shadowMask {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 200px;
-  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));
-  background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
-  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
-  opacity: 0.9;
-  pointer-events: none;
-}
+  position: absolute; /* 绝对定位 */
+  top: 0; /* 距离顶部0 */
+  width: 100%; /* 宽度100% */
+  height: 200px; /* 高度200px */
+  background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变 */
+  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* 标准背景渐变 */
+  background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
+  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
+  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
+  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
+  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
+  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
+  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
+  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
+  background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变（重复）*/
+}
+
+/* mobileSelect-show类的样式，用于显示时的状态 */
 .mobileSelect-show {
-  opacity: 1;
-  z-index: 10000;
-  visibility: visible;
+  z-index: 10000; /* z轴层级提高至10000 */
 }
+
+/* mobileSelect-show类的content子元素的样式，用于显示时的状态 */
 .mobileSelect-show .content {
-  bottom: 0;
+  bottom: -350px; /* bottom属性设置为-350px，使其完全显示在视窗内 */
 }

src/main/webapp/css/xadmin.css

@@ -1,433 +1,439 @@
 @charset "utf-8";
 @import url(../lib/layui/css/layui.css);
+/* 全局样式 */
 * {
     margin: 0px;
     padding: 0px;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 a {
-    text-decoration: none;
+    text-decoration: none; /* 去掉链接下划线 */
 }
 html {
     width: 100%;
     height: 100%;
-    overflow-x:hidden; 
-    overflow-y:auto;
+    overflow-x: hidden; /* 隐藏水平滚动条 */
+    overflow-y: auto; /* 允许垂直滚动 */
 }
 body {
     width: 100%;
-    min-height: 100%;
+    min-height: 100%; /* 最小高度为视口高度 */
 }
 
-
+/* 页面主体内容样式 */
 .x-body {
-    padding: 20px;
+    padding: 20px; /* 内边距 */
 }
 .x-nav {
-    padding: 0 20px;
-    position: relative;
-    z-index: 99;
-    border-bottom: 1px solid #e5e5e5;
-    line-height: 39px;
-    height: 39px;
-    overflow: hidden;
+    padding: 0 20px; /* 左右内边距 */
+    position: relative; /* 相对定位 */
+    z-index: 99; /* 层级 */
+    border-bottom: 1px solid #e5e5e5; /* 底部边框 */
+    line-height: 39px; /* 行高 */
+    height: 39px; /* 固定高度 */
+    overflow: hidden; /* 隐藏溢出内容 */
 }
 xblock {
-    display: block;
-    margin-bottom: 10px;
-    padding: 5px;
-    line-height: 22px;
-    /* border-left: 5px solid #009688; */
-    border-radius: 0 2px 2px 0;
-    background-color: #f2f2f2;
+    display: block; /* 块级元素 */
+    margin-bottom: 10px; /* 下边距 */
+    padding: 5px; /* 内边距 */
+    line-height: 22px; /* 行高 */
+    border-radius: 0 2px 2px 0; /* 圆角 */
+    background-color: #f2f2f2; /* 背景色 */
 }
 .x-right {
-  float: right;
+    float: right; /* 右浮动 */
 }
 .x-so {
-    /*text-align: center;*/
-    /*background: #f2f2f2 url() 0 0 no-repeat;*/
-    margin-bottom: 20px;
+    margin-bottom: 20px; /* 下边距 */
 }
 .x-so input.layui-input {
-    width: 150px;
-    padding-left: 25px;
+    width: 150px; /* 宽度 */
+    padding-left: 25px; /* 左内边距 */
 }
 .x-so .layui-form-label {
-    display: inline-block;
+    display: inline-block; /* 行内块级元素 */
 }
 .x-so input.layui-input, .x-so input.layui-btn {
-    display: inline-block;
+    display: inline-block; /* 行内块级元素 */
 }
 .x-red {
-    color: red;
+    color: red; /* 红色字体 */
 }
 .x-a {
-    color: #1AA093;
+    color: #1AA093; /* 绿色字体 */
 }
 .x-a:hover {
-    color: #127F74;
+    color: #127F74; /* 悬停时的颜色 */
 }
 .x-sort {
-    height: 30px;
+    height: 30px; /* 高度 */
 }
 .x-show {
-    cursor: pointer;
+    cursor: pointer; /* 鼠标指针 */
 }
 .layui-form-switch {
-    margin-top: 0px;
+    margin-top: 0px; /* 上边距 */
 }
 .layui-input:focus, .layui-textarea:focus {
-    border-color: #189f92!important;
+    border-color: #189f92!important; /* 焦点状态下的边框颜色 */
 }
 
+/* 分页样式 */
 .page {
-    margin-top: 20px;
-    text-align: center;
-
+    margin-top: 20px; /* 上边距 */
+    text-align: center; /* 居中对齐 */
 }
 .page a {
-    display: inline-block;
-    background: #fff url(#) 0 0 no-repeat;
-    color: #888;
-    padding: 10px;
-    min-width: 15px;
-    border: 1px solid #E2E2E2;
-
+    display: inline-block; /* 行内块级元素 */
+    background: #fff url(#) 0 0 no-repeat; /* 背景图 */
+    color: #888; /* 灰色字体 */
+    padding: 10px; /* 内边距 */
+    min-width: 15px; /* 最小宽度 */
+    border: 1px solid #E2E2E2; /* 边框 */
 }
 .page span {
-    display: inline-block;
-    padding: 10px;
-    min-width: 15px;
-    border: 1px solid #E2E2E2;
+    display: inline-block; /* 行内块级元素 */
+    padding: 10px; /* 内边距 */
+    min-width: 15px; /* 最小宽度 */
+    border: 1px solid #E2E2E2; /* 边框 */
 }
 .page span.current {
-    display: inline-block;
-    background: #009688 url(#) 0 0 no-repeat;
-    color: #fff;
-    padding: 10px;
-    min-width: 15px;
-    border: 1px solid #009688;
+    display: inline-block; /* 行内块级元素 */
+    background: #009688 url(#) 0 0 no-repeat; /* 背景图 */
+    color: #fff; /* 白色字体 */
+    padding: 10px; /* 内边距 */
+    min-width: 15px; /* 最小宽度 */
+    border: 1px solid #009688; /* 边框 */
 }
 .page .pagination li {
-    display: inline-block;
-    margin-right: 5px;
-    text-align: center;
+    display: inline-block; /* 行内块级元素 */
+    margin-right: 5px; /* 右边距 */
+    text-align: center; /* 居中对齐 */
 }
 .page .pagination li.active span {
-    background: #009688 url(#) 0 0 no-repeat;
-    color: #fff;
-    border: 1px solid #009688;
-
+    background: #009688 url(#) 0 0 no-repeat; /* 背景图 */
+    color: #fff; /* 白色字体 */
+    border: 1px solid #009688; /* 边框 */
 }
 
 /* 登录样式 */
 /* 头部 */
 .container {
-    width: 100%;
-    height: 45px;
-    background-color: #222;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    width: 100%; /* 宽度 */
+    height: 45px; /* 高度 */
+    background-color: #222; /* 背景色 */
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 底部边框 */
 }
 .container .logo a {
-    float: left;
-    color: #fff;
-    font-size: 18px;
-    padding-left: 20px;
-    line-height: 45px;
-    width: 200px;
+    float: left; /* 左浮动 */
+    color: #fff; /* 白色字体 */
+    font-size: 18px; /* 字体大小 */
+    padding-left: 20px; /* 左内边距 */
+    line-height: 45px; /* 行高 */
+    width: 200px; /* 宽度 */
 }
 .container .right {
-    background-color:rgba(0,0,0,0);
-    float: right;
-
+    background-color: rgba(0,0,0,0); /* 透明背景 */
+    float: right; /* 右浮动 */
 }
 .container .left_open {
-    height: 45px;
-    float: left;
+    height: 45px; /* 高度 */
+    float: left; /* 左浮动 */
 }
 .container .left_open i {
-    display: block;
-    background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat;
-    color: #fff;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    border-radius: 3px;
-    text-align: center;
-    margin-top: 7px;
-    cursor: pointer;
+    display: block; /* 块级元素 */
+    background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat; /* 背景图 */
+    color: #fff; /* 白色字体 */
+    width: 32px; /* 宽度 */
+    height: 32px; /* 高度 */
+    line-height: 32px; /* 行高 */
+    border-radius: 3px; /* 圆角 */
+    text-align: center; /* 居中对齐 */
+    margin-top: 7px; /* 上边距 */
+    cursor: pointer; /* 鼠标指针 */
 }
 .container .left_open i:hover {
-    background: rgba(255,255,255,0.3) url(#) 0 0 no-repeat;
+    background: rgba(255,255,255,0.3) url(#) 0 0 no-repeat; /* 悬停时的背景图 */
 }
-
 .container .left {
-    background-color:rgba(0,0,0,0);
-    float: left;
-
+    background-color: rgba(0,0,0,0); /* 透明背景 */
+    float: left; /* 左浮动 */
 }
 .container .layui-nav-item {
-    line-height: 45px;
+    line-height: 45px; /* 行高 */
 }
 .container .layui-nav-more {
-    top: 20px;
+    top: 20px; /* 上边距 */
 }
 .container .layui-nav-child {
-    top: 50px;
+    top: 50px; /* 上边距 */
 }
 .container .layui-nav-child i {
-    margin-right: 10px;
-}
-.layui-nav .layui-nav-item a{
-    color: #fff;
-    cursor: pointer;
-}
-.layui-nav .layui-nav-child a{
-    color: #333;
-    cursor: pointer;
+    margin-right: 10px; /* 右边距 */
 }
 .left-nav {
-    position: absolute;
-    top: 46px;
-    bottom: 42px;
-    left: 0;
-    z-index: 2;
-    padding-top: 10px;
-    background-color: #EEEEEE;
-    width: 220px;
-    max-width: 220px;
-    overflow: auto;
+    position: absolute; /* 绝对定位 */
+    top: 46px; /* 上边距 */
+    bottom: 42px; /* 下边距 */
+    left: 0; /* 左边距 */
+    z-index: 2; /* 层级 */
+    padding-top: 10px; /* 上内边距 */
+    width: 220px; /* 宽度 */
+    max-width: 220px; /* 最大宽度 */
+    background-color: #EEEEEE; /* 背景色 */
+    overflow: auto; /* 自动溢出处理 */
+
+    /* 设置溢出内容不显示 */
     overflow-x: hidden;
     border-right: 1px solid #e5e5e5;
 
+    /* 左侧导航样式 */
+    .left-nav {
+        /* 宽度设置为0，注释掉的代码可以设置具体宽度 */
         /* width: 0px; */
     }
+
+    /* 左侧导航列表项样式 */
     .left-nav #nav li {
-    border-bottom: 1px solid #e5e5e5;
+        border-bottom: 1px solid #e5e5e5; /* 底部边框 */
     }
+
+    /* 左侧导航列表项鼠标悬停样式 */
     .left-nav #nav li:hover > a {
-    /*color: blue;*/
-}
-.left-nav #nav .current{
-    background-color: rgba(0, 0, 0, 0.3);
+        /* color: blue; */ /* 注释掉的颜色设置 */
     }
-.left-nav #nav li a{
-    font-size: 14px;
-    padding: 10px 15px 10px 20px;
-    display: block;
-    cursor: pointer;
-}
-.left-nav #nav li a cite{
-    font-size: 14px;
+
+    /* 左侧导航列表项当前选中样式 */
+    .left-nav #nav li .current {
+        background-color: rgba(0, 0, 0, 0.3); /* 背景色 */
     }
 
+    /* 左侧导航子菜单默认隐藏 */
     .left-nav #nav li .sub-menu {
         display: none;
     }
+
+    /* 左侧导航子菜单打开状态 */
     .left-nav #nav li .opened {
         display: block;
     }
+
+    /* 左侧导航子菜单打开状态鼠标悬停样式 */
     .left-nav #nav li .opened:hover {
-    /*background: #fff url() 0 0 no-repeat;*/
+        /* background: #fff url() 0 0 no-repeat; */ /* 注释掉的背景图设置 */
     }
-.left-nav #nav li .opened .current{
 
+    /* 左侧导航子菜单当前选中样式 */
+    .left-nav #nav li .opened .current {
+        /* background: rgba(0, 0, 0, 0); */ /* 注释掉的背景色设置 */
     }
-.left-nav #nav li .sub-menu li:hover{
-    /*color: blue;*/
-     /*background: #fff url() 0 0 no-repeat;*/
-}
+
+    /* 左侧导航子菜单列表项样式 */
     .left-nav #nav li .sub-menu li a {
-    padding: 12px 15px 12px 30px;
-    font-size: 14px;
-    cursor: pointer;
+        padding: 12px 15px 12px 30px; /* 内边距 */
+        font-size: 14px; /* 字体大小 */
+        cursor: pointer; /* 鼠标指针样式 */
     }
+
+    /* 左侧导航子菜单列表项二级菜单样式 */
     .left-nav #nav li .sub-menu li .sub-menu li a {
-    padding-left: 45px;
+        padding-left: 45px; /* 左内边距 */
     }
-.left-nav #nav li .sub-menu li a:hover{
-    color: #148cf1;
+
+    /* 左侧导航子菜单列表项鼠标悬停样式 */
+    .left-nav #nav li .sub-menu li:hover a {
+        color: #148cf1; /* 颜色 */
+        /* background: #fff url() 0 0 no-repeat; */ /* 注释掉的背景图设置 */
     }
+
+    /* 左侧导航子菜单列表项图标样式 */
     .left-nav #nav li .sub-menu li a i {
-    font-size: 12px;
+        font-size: 12px; /* 字体大小 */
     }
+
+    /* 左侧导航列表项右侧箭头样式 */
     .left-nav #nav li a i {
-    padding-right: 10px;
-    line-height: 14px;
-}
-.left-nav #nav li .nav_right{
-    float: right;
-    font-size: 16px;
-}
-.x-slide_left {
-    width: 17px;
-    height: 61px;
-    background: url(#) 0 0 no-repeat;
-    position: absolute;
-    top: 200px;
-    left: 221px;
-    cursor: pointer;
-    z-index: 3;
+        float: right; /* 右浮动 */
+        font-size: 16px; /* 字体大小 */
+        line-height: 14px; /* 行高 */
+        padding-right: 10px; /* 右内边距 */
     }
+
+    /* 页面内容样式 */
     .page-content {
-    position: absolute;
-    top: 46px;
-    right: 0;
-    bottom: 42px;
-    left: 221px;
-    overflow: hidden;
-    z-index: 1;
+        position: absolute; /* 绝对定位 */
+        top: 46px; /* 顶部位置 */
+        right: 0; /* 右边位置 */
+        bottom: 42px; /* 底部位置 */
+        left: 221px; /* 左边位置 */
+        overflow: hidden; /* 隐藏溢出内容 */
+        z-index: 1; /* z轴顺序 */
     }
+
+    /* 页面内容背景样式 */
     .page-content-bg {
-    position: absolute;
-    top: 46px;
-    right: 0;
-    bottom: 42px;
-    left: 221px;
-    background: rgba(0,0,0,0.5); url() 0 0 no-repeat;
-    overflow: hidden;
-    z-index: 100;
-    display: none;
+        position: absolute; /* 绝对定位 */
+        top: 46px; /* 顶部位置 */
+        right: 0; /* 右边位置 */
+        bottom: 42px; /* 底部位置 */
+        left: 221px; /* 左边位置 */
+        background: rgba(0, 0, 0, 0.5); /* 背景色 */
+    url(); /* 背景图 */
+        z-index: 100; /* z轴顺序 */
+        display: none; /* 默认隐藏 */
+    }
+
+    /* x轴滑动按钮样式 */
+    .x-slide_left {
+        width: 17px; /* 宽度 */
+        height: 61px; /* 高度 */
+        background: url(#) 0 0 no-repeat; /* 背景图 */
+        position: absolute; /* 绝对定位 */
+        top: 200px; /* 顶部位置 */
+        left: 221px; /* 左边位置 */
+        cursor: pointer; /* 鼠标指针样式 */
+        z-index: 3; /* z轴顺序 */
     }
 
+    /* 页面内容标签页样式 */
     .page-content .tab {
-    height: 100%;
-    width: 100%;
-    background: #EFEEF0 url(#) 0 0 no-repeat;
-    margin: 0px;
+        height: 100%; /* 高度 */
+        margin: 0px; /* 外边距 */
+        background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景图 */
     }
+
+    /* 页面内容标签页标题样式 */
     .page-content .layui-tab-title {
-    /*padding-top: 5px;*/
-    height: 35px;
-    background: #EFEEF0 url(#) 0 0 no-repeat;
-    position: relative;
-    z-index: 100;
+        height: 35px; /* 高度 */
+        background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景图 */
+        position: relative; /* 相对定位 */
+        z-index: 100; /* z轴顺序 */
     }
+
+    /* 页面内容标签页标题当前选中样式 */
     .page-content .layui-tab-title li.home i {
-    padding-right: 5px;
+        padding-right: 5px; /* 右内边距 */
     }
+
+    /* 页面内容标签页标题当前选中样式 */
     .page-content .layui-tab-title li.home .layui-tab-close {
-    display: none;
+        display: none; /* 隐藏关闭按钮 */
     }
+
+    /* 页面内容标签页标题当前选中样式 */
     .page-content .layui-tab-title li {
-    line-height: 35px;
+        line-height: 35px; /* 行高 */
     }
-.page-content .layui-tab-title .layui-this:after{
-    height: 36px;
+
+    /* 页面内容标签页标题当前选中样式 */
+    .page-content .layui-tab-title li.layui-this:after {
+        height: 63px; /* 高度 */
+    }
+
+    /* 页面内容标签页标题当前选中样式 */
+    .page-content .layui-tab-title li.layui-this {
+        background: #fff url(#) 0 0 no-repeat; /* 背景图 */
     }
-.page-content .layui-tab-title li .layui-tab-close{
-    border-radius: 50%;
+
+    /* 页面内容标签页标题当前选中样式 */
+    .page-content .layui-tab-title li.layui-this .layui-tab-close {
+        border-radius: 50%; /* 圆角 */
     }
-.page-content .layui-tab-title .layui-this{
-    background: #fff url(#) 0 0 no-repeat;
+
+    /* 页面内容标签页标题当前选中样式 */
+    .page-content .layui-tab-title li {
+        border-radius: 50%; /* 圆角 */
     }
+
+    /* 页面内容标签页标题当前选中样式 */
     .page-content .layui-tab-bar {
-    height:34px;
-    line-height: 35px;
+        height: 34px; /* 高度 */
+        line-height: 34px; /* 行高 */
     }
+
+    /* 页面内容标签页内容样式 */
     .page-content .layui-tab-content {
-    position: absolute;
-    top: 36px;
-    bottom: 0px;
-    width: 100%;
-    background: #fff url(#) 0 0 no-repeat;
-    padding: 0px;
-    overflow: hidden;
+        top: 36px; /* 顶部位置 */
+        bottom: 0px; /* 底部位置 */
+        width: 100%; /* 宽度 */
+        background: #fff url(#) 0 0 no-repeat; /* 背景图 */
+        padding: 0px; /* 内边距 */
+        overflow: hidden; /* 隐藏溢出内容 */
     }
-.page-content .layui-tab-content .layui-tab-item{
-    width: 100%;
-    height: 100%;
 
+    /* 页面内容标签页内容项样式 */
+    .page-content .layui-tab-content .layui-tab-item {
+        width: 100%; /* 宽度 */
+        height: 100%; /* 高度 */
     }
-.page-content .layui-tab-content .layui-tab-item iframe{
-    width: 100%;
-    height: 100%;
 
-}
-.x-admin-carousel,.layui-carousel,.x-admin-carousel>[carousel-item]>* {
-    background-color:#fff
+    /* 页面内容标签页内容项iframe样式 */
+    .page-content .layui-tab-content .layui-tab-item iframe {
+        width: 100%; /* 宽度 */
+        height: 100%; /* 高度 */
     }
 
-.x-admin-backlog .x-admin-backlog-body {
-    display:block;
-    padding:10px 15px;
-    background-color:#f8f8f8;
-    color:#999;
-    border-radius:2px;
-    transition:all .3s;
-    -webkit-transition:all .3s
+    /* xadmin后台日志样式 */
+    .x-admin-backlog-body {
+        display: block; /* 显示块级元素 */
+        padding: 10px 15px; /* 内边距 */
+        background-color: #f8f8f8; /* 背景色 */
+        color: #999; /* 文字颜色 */
+        border-radius: 2px; /* 圆角 */
+        transition: all .3s ease; /* CSS3过渡效果 */
     }
+
+    /* xadmin后台日志标题样式 */
     .x-admin-backlog-body h3 {
-    padding-bottom:10px;
-    font-size:12px
+        padding-bottom: 10px; /* 底部内边距 */
+        font-size: 12px; /* 字体大小 */
     }
-.x-admin-backlog-body p cite {
-    font-style:normal;
-    font-size:30px;
-    font-weight:300;
-    color:#009688
+
+    /* xadmin后台日志内容样式 */
+    .x-admin-backlog-body p {
+        font-style: normal; /* 正常字体风格 */
+        font-size: 30px; /* 字体大小 */
+        font-weight: 300; /* 字体粗细 */
+        color: #009689; /* 文字颜色 */
     }
+
+    /* xadmin后台日志内容鼠标悬停样式 */
     .x-admin-backlog-body:hover {
-    background-color:#CFCFCF;
-    color:#888
+        background-color: #CFCFCF; /* 背景色 */
+        color: #888; /* 文字颜色 */
     }
 
-.welcome-footer{padding: 30px 0; line-height: 30px; text-align: center; background-color: #eee; color: #666; font-weight: 300;}
-body .layui-layout-admin .footer-demo{height: auto; padding: 15px 0; line-height: 26px;}
-.welcome-footer a{padding: 0 5px;}
-
-table th, table td {
-    word-break: break-all;
+    /* welcome页脚样式 */
+    .welcome-footer {
+        padding: 30px 0; /* 内边距 */
+        text-align: center; /* 文本居中对齐 */
+        line-height: 30px; /* 行高 */
+        color: #eee; /* 文字颜色 */
+        background-color: #222; /* 背景色 */
+        border-top: 1px solid rgba(255, 255, 255, 0.1); /* 边框样式 */
     }
 
+    /* foot页脚样式 */
     .footer {
-    position: fixed;
-    bottom: 0px;
-    width: 100%;
-    background-color: #222;
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-    line-height: 41px;
-    color: #fff;
-    /*padding-left: 10px;*/
+        position: fixed; /* 固定定位 */
+        bottom: 0px; /* 底部位置 */
+        width: 100%; /* 宽度 */
+        background-color: #222; /* 背景色 */
+        line-height: 41px; /* 行高 */
+        color: #fff; /* 文字颜色 */
     }
+
+    /* foot页脚版权样式 */
     .footer .copyright {
-    margin-left: 10px;
+        margin-left: 10px; /* 左内边距 */
     }
 
-
-@media screen and (max-width: 768px){
-    .fast-add{
-        display: none;
-    }
-    .layui-nav .to-index{
-        display: none;
-    }
-    .container .logo a{
-        width: 140px;
-    }
-    .container .left_open {
-        /*float: right;*/
-    }
-    .left-nav{
-        left: -221px;
-    }
-    .page-content{
-        left: 0px;
-    }
-    .page-content .layui-tab-content .layui-tab-item{
-        -webkit-overflow-scrolling: touch; 
-        overflow-y: scroll; 
-    }
-    .x-so input.layui-input{
-        width: 100%;
-        margin: 10px;
+    /* table表格样式 */
+    table th, table td {
+        word-break: break-all; /* CSS属性：允许在单词内换行 */
     }
 
-    .layui-input{
-        margin-left: 20px;
 }
 
 
-}
-

src/main/webapp/js/mobileSelect.js

@@ -4,66 +4,69 @@
  * Released under the MIT License.
  */
 
-(function() {
+(function(window) {
+	// 获取指定元素的类名
 	function getClass(dom, string) {
 		return dom.getElementsByClassName(string);
 	}
+
 	// 构造器
 	function MobileSelect(config) {
-		this.mobileSelect;
-		this.wheelsData = config.wheels;
-		this.jsonType =  false;
-		this.cascadeJsonData = [];
-		this.displayJson = []; 
-		this.curValue = null;
-		this.curIndexArr = [];
-		this.cascade = false;
-		this.startY;
-		this.moveEndY;
-		this.moveY;
-		this.oldMoveY;
-		this.offset = 0;
-		this.offsetSum = 0;
-		this.oversizeBorder;
-		this.curDistance = [];
-		this.clickStatus = false;
-		this.isPC = true;
+		this.mobileSelect; // DOM元素，表示整个选择器
+		this.wheelsData = config.wheels; // 滚轮数据
+		this.jsonType = false; // 是否为JSON类型数据
+		this.cascadeJsonData = []; // 级联JSON数据
+		this.displayJson = []; // 显示的JSON数据
+		this.curValue = null; // 当前值
+		this.curIndexArr = []; // 当前索引数组
+		this.startY; // 起始Y坐标
+		this.moveEndY; // 结束Y坐标
+		this.moveY; // 移动Y坐标
+		this.oldMoveY; // 旧的移动Y坐标
+		this.offset = 0; // 偏移量
+		this.offsetSum = 0; // 偏移总和
+		this.oversizeBorder; // 超出边界大小
+		this.curDistance = []; // 当前距离数组
+		this.clickStatus = false; // 点击状态
+		this.isPC = true; // 是否为PC端
 		this.init(config);
 	}
+
+	// 原型链
 	MobileSelect.prototype = {
 		constructor: MobileSelect,
+		// 初始化函数
 		init: function(config) {
 			var _this = this;
-			_this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'};
-			_this.checkDataType();
-			_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText);
-			_this.trigger = document.querySelector(config.trigger);
+			_this.keyMap = config.keyMap ? config.keyMap : { id: 'id', value: 'value', childs: 'childs' }; // 键值映射
+			_this.checkDataType(); // 检查数据类型
+			_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText); // 渲染滚轮
+			_this.trigger = document.querySelector(config.trigger); // 触发器元素
 			if (!_this.trigger) {
 				console.error('mobileSelect has been successfully installed, but no trigger found on your page.');
 				return false;
 			}
-			_this.wheel = getClass(_this.mobileSelect,'wheel');
-			_this.slider = getClass(_this.mobileSelect,'selectContainer'); 
-			_this.wheels = _this.mobileSelect.querySelector('.wheels');
-			_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;
-			_this.ensureBtn = _this.mobileSelect.querySelector('.ensure');
-			_this.cancelBtn = _this.mobileSelect.querySelector('.cancel');
-			_this.grayLayer = _this.mobileSelect.querySelector('.grayLayer');
-			_this.popUp = _this.mobileSelect.querySelector('.content');
-			_this.callback = config.callback ? config.callback : function(){};
-			_this.cancel = config.cancel ? config.cancel : function(){};
-			_this.transitionEnd = config.transitionEnd ? config.transitionEnd : function(){};
-			_this.initPosition = config.position ? config.position : [];
-			_this.titleText = config.title ? config.title : '';
-			_this.connector = config.connector ? config.connector : ' ';
-			_this.triggerDisplayData = !(typeof(config.triggerDisplayData)=='undefined') ? config.triggerDisplayData : true;
-			_this.trigger.style.cursor='pointer';
-			_this.setStyle(config);
-			_this.setTitle(_this.titleText);
-			_this.checkIsPC();
-			_this.checkCascade();
+			_this.wheel = getClass(_this.mobileSelect, 'wheel'); // 获取滚轮元素
+			_this.slider = getClass(_this.mobileSelect, 'selectContainer'); // 获取滑块容器
+			_this.wheels = _this.mobileSelect.querySelector('.wheels'); // 获取所有滚轮的容器
+			_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight; // 获取每个选项的高度
+			_this.ensureBtn = getClass(_this.mobileSelect, 'ensure'); // 确保按钮
+			_this.cancelBtn = getClass(_this.mobileSelect, 'cancel'); // 取消按钮
+			_this.grayLayer = getClass(_this.mobileSelect, 'grayLayer'); // 灰色遮罩层
+			_this.popUp = getClass(_this.mobileSelect, 'content'); // 弹出层
+			_this.callback = config.callback ? config.callback : function() {}; // 回调函数
+			_this.cancel = config.cancel ? config.cancel : function() {}; // 取消函数
+			_this.transitionEnd = config.transitionEnd ? config.transitionEnd : function() {}; // 过渡结束函数
+			_this.titleText = config.title ? config.title : ''; // 标题文本
+			_this.connector = config.connector ? config.connector : ' '; // 连接符
+			_this.triggerDisplayData = !(typeof(config.triggerDisplayData) == 'undefined') ? config.triggerDisplayData : true; // 是否显示在触发器上
+			_this.trigger.style.cursor = 'pointer'; // 设置触发器的鼠标样式为指针
+			_this.setStyle(config); // 设置样式
+			_this.setTitle(_this.titleText); // 设置标题
+			_this.checkIsPC(); // 检查是否是PC端
+			_this.checkCascade(); // 检查是否需要级联
 			if (_this.cascade) {
-				_this.initCascade();
+				_this.initCascade(); // 初始化级联
 			}
 			// 定位初始位置
 			if (_this.initPosition.length < _this.slider.length) {
@@ -72,104 +75,75 @@
 					_this.initPosition.push(0);
 				}
 			}
-
-			_this.setCurDistance(_this.initPosition);
-			_this.addListenerAll();
-
-			//按钮监听
-			_this.cancelBtn.addEventListener('click',function(){
-				_this.mobileSelect.classList.remove('mobileSelect-show');
-				_this.cancel(_this.curIndexArr, _this.curValue);
-		    });
-
-		    _this.ensureBtn.addEventListener('click',function(){
-				_this.mobileSelect.classList.remove('mobileSelect-show');
-				var tempValue ='';
-		    	for(var i=0; i<_this.wheel.length; i++){
-		    		i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;
-		    	}
-		    	if(_this.triggerDisplayData){
-		    		_this.trigger.innerHTML = tempValue;
-		    	}
-		    	_this.curIndexArr = _this.getIndexArr();
-		    	_this.curValue = _this.getCurValue();
-		    	_this.callback(_this.curIndexArr, _this.curValue);
-		    });
-
-		    _this.trigger.addEventListener('click',function(){
-		    	_this.mobileSelect.classList.add('mobileSelect-show');
-		    });
-		    _this.grayLayer.addEventListener('click',function(){
-		    	_this.mobileSelect.classList.remove('mobileSelect-show');
-		    	_this.cancel(_this.curIndexArr, _this.curValue);
-		    });
-		    _this.popUp.addEventListener('click',function(event){
-		    	event.stopPropagation(); 
-		    });
-
+			_this.setCurDistance(_this.initPosition); // 设置当前距离
+			_this.addListenerAll(); // 添加事件监听器
 			_this.fixRowStyle(); // 修正列数
 		},
 
+		// 设置标题
 		setTitle: function(string) {
 			var _this = this;
 			_this.titleText = string;
 			_this.mobileSelect.querySelector('.title').innerHTML = _this.titleText;
 		},
 
+		// 设置样式
 		setStyle: function(config) {
 			var _this = this;
 			if (config.ensureBtnColor) {
-				_this.ensureBtn.style.color = config.ensureBtnColor;
+				_this.ensureBtn.style.color = config.ensureBtnColor; // 确保按钮颜色
 			}
 			if (config.cancelBtnColor) {
-				_this.cancelBtn.style.color = config.cancelBtnColor;
+				_this.cancelBtn.style.color = config.cancelBtnColor; // 取消按钮颜色
 			}
 			if (config.titleColor) {
-				_this.title = _this.mobileSelect.querySelector('.title');
-				_this.title.style.color = config.titleColor;
+				_this.title = _this.mobileSelect.querySelector('.title'); // 标题元素
+				_this.title.style.color = config.titleColor; // 标题颜色
 			}
 			if (config.textColor) {
-				_this.panel = _this.mobileSelect.querySelector('.panel');
-				_this.panel.style.color = config.textColor;
+				_this.panel = _this.mobileSelect.querySelector('.panel'); // 面板元素
+				_this.panel.style.color = config.textColor; // 文本颜色
 			}
 			if (config.titleBgColor) {
-				_this.btnBar = _this.mobileSelect.querySelector('.btnBar');
-				_this.btnBar.style.backgroundColor = config.titleBgColor;
+				_this.btnBar = _this.mobileSelect.querySelector('.btnBar'); // 按钮栏元素
+				_this.btnBar.style.backgroundColor = config.titleBgColor; // 按钮栏背景颜色
 			}
 			if (config.bgColor) {
-				_this.panel = _this.mobileSelect.querySelector('.panel');
-				_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask');
-				_this.panel.style.backgroundColor = config.bgColor;
-				_this.shadowMask.style.background = 'linear-gradient(to bottom, '+ config.bgColor + ', rgba(255, 255, 255, 0), '+ config.bgColor + ')';
+				_this.panel = _this.mobileSelect.querySelector('.panel'); // 面板元素
+				_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask'); // 阴影遮罩层元素
+				_this.panel.style.backgroundColor = config.bgColor; // 面板背景颜色
+				_this.shadowMask.style.background = 'linear-gradient(to bottom, ' + config.bgColor + ', rgba(255, 255, 255, 0), ' + config.bgColor + ')'; // 阴影遮罩层渐变背景
 			}
 		},
 
+		// 检查是否是PC端
 		checkIsPC: function() {
 			var _this = this;
 			var sUserAgent = navigator.userAgent.toLowerCase();
-		    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
-		    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
-		    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
-		    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
-		    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
-		    var bIsAndroid = sUserAgent.match(/android/i) == "android";
-		    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
-		    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
+			var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; // 判断是否为iPad
+			var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; // 判断是否为iPhone OS
+			var bIsMidp = sUserAgent.match(/midp/i) == "midp"; // 判断是否为MIDP设备
+			var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; // 判断是否为UC7浏览器
+			var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; // 判断是否为UC浏览器
+			var bIsAndroid = sUserAgent.match(/android/i) == "android"; // 判断是否为Android设备
+			var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; // 判断是否为Windows CE设备
+			var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; // 判断是否为Windows Mobile设备
 			if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
 				_this.isPC = false;
 			}
 		},
 
 		show: function(){
+			// 显示选择器，通过添加类名来控制显示
 			this.mobileSelect.classList.add('mobileSelect-show');
 		},
 
 		renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){
 			var _this = this;
-			var cancelText = cancelBtnText ? cancelBtnText : '取消';
-			var ensureText = ensureBtnText ? ensureBtnText : '确认';
-			_this.mobileSelect = document.createElement("div");
-			_this.mobileSelect.className = "mobileSelect";
+			var cancelText = cancelBtnText ? cancelBtnText : '取消'; // 设置取消按钮文本
+			var ensureText = ensureBtnText ? ensureBtnText : '确认'; // 设置确认按钮文本
+			_this.mobileSelect = document.createElement("div"); // 创建选择器的容器元素
+			_this.mobileSelect.className = "mobileSelect"; // 设置容器的类名
 			_this.mobileSelect.innerHTML =
 				'<div class="grayLayer"></div>'+
 				'<div class="content">'+
@@ -189,34 +163,30 @@
 				'</div>'+
 				'</div>'+
 				'</div>';
-		    document.body.appendChild(_this.mobileSelect);
-
-			//根据数据长度来渲染
+			document.body.appendChild(_this.mobileSelect); // 将选择器添加到页面中
 
+			// 根据数据长度来渲染轮盘
 			var tempHTML='';
 			for(var i=0; i<wheelsData.length; i++){
-			//列
-				tempHTML += '<div class="wheel"><ul class="selectContainer">';
+				tempHTML += '<div class="wheel"><ul class="selectContainer">'; // 开始一个新的轮盘
 				if(_this.jsonType){
 					for(var j=0; j<wheelsData[i].data.length; j++){
-					//行
-						tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>';
+						tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>'; // 如果是JSON类型，使用键值对填充列表项
 					}
 				}else{
 					for(var j=0; j<wheelsData[i].data.length; j++){
-					//行
-						tempHTML += '<li>'+wheelsData[i].data[j]+'</li>';
+						tempHTML += '<li>'+wheelsData[i].data[j]+'</li>'; // 如果不是JSON类型，直接使用数据填充列表项
 					}
 				}
-				tempHTML += '</ul></div>';
+				tempHTML += '</ul></div>'; // 结束当前轮盘
 			}
-			_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML;
+			_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML; // 将生成的HTML添加到轮盘容器中
 		},
 
 		addListenerAll: function(){
 			var _this = this;
 			for(var i=0; i<_this.slider.length; i++){
-				//手势监听
+				// 为每个滑块添加手势监听和点击监听
 				(function (i) {
 					_this.addListenerWheel(_this.wheel[i], i);
 					_this.addListenerLi(i);
@@ -227,35 +197,39 @@
 		addListenerWheel: function(theWheel, index){
 			var _this = this;
 			theWheel.addEventListener('touchstart', function () {
-				_this.touch(event, this.firstChild, index);
+				_this.touch(event, this.firstChild, index); // 触摸开始事件处理
 			},false);
 			theWheel.addEventListener('touchend', function () {
-				_this.touch(event, this.firstChild, index);
+				_this.touch(event, this.firstChild, index); // 触摸结束事件处理
 			},false);
 			theWheel.addEventListener('touchmove', function () {
-				_this.touch(event, this.firstChild, index);
+				_this.touch(event, this.firstChild, index); // 触摸移动事件处理
 			},false);
 
 			if(_this.isPC){
-				//如果是PC端则再增加拖拽监听 方便调试
+				// 如果是PC端则再增加拖拽监听，方便调试
 				theWheel.addEventListener('mousedown', function () {
-					_this.dragClick(event, this.firstChild, index);
+					_this.dragClick(event, this.firstChild, index); // 鼠标按下事件处理
 				},false);
 				theWheel.addEventListener('mousemove', function () {
-					_this.dragClick(event, this.firstChild, index);
+					_this.dragClick(event, this.firstChild, index); // 鼠标移动事件处理
 				},false);
 				theWheel.addEventListener('mouseup', function () {
-					_this.dragClick(event, this.firstChild, index);
+					_this.dragClick(event, this.firstChild, index); // 鼠标抬起事件处理
 				},true);
 			}
 		},
 
 		addListenerLi: function(sliderIndex) {
+			// 获取当前对象引用
 			var _this = this;
+			// 获取指定滑块索引的所有列表项元素
 			var curWheelLi = _this.slider[sliderIndex].getElementsByTagName('li');
+			// 遍历所有列表项，为每个列表项添加点击事件监听器
 			for (var j = 0; j < curWheelLi.length; j++) {
 				(function(j) {
 					curWheelLi[j].addEventListener('click', function() {
+						// 当列表项被点击时，调用singleClick方法处理点击事件
 						_this.singleClick(this, j, sliderIndex);
 					}, false);
 				})(j);
@@ -263,71 +237,83 @@
 		},
 
 		checkDataType: function() {
+			// 获取当前对象引用
 			var _this = this;
+			// 检查wheelsData中第一个数据项是否为对象类型
 			if (typeof(_this.wheelsData[0].data[0]) == 'object') {
-				_this.jsonType = true;
+				_this.jsonType = true; // 如果是对象类型，设置jsonType为true
 			}
 		},
 
 		checkCascade: function() {
+			// 获取当前对象引用
 			var _this = this;
+			// 如果数据类型为JSON
 			if (_this.jsonType) {
 				var node = _this.wheelsData[0].data;
+				// 遍历数据节点，检查是否存在子节点
 				for (var i = 0; i < node.length; i++) {
 					if (_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0) {
-						_this.cascade = true;
-						_this.cascadeJsonData = _this.wheelsData[0].data;
-						break;
+						_this.cascade = true; // 如果存在子节点，设置级联标志为true
+						_this.cascadeJsonData = _this.wheelsData[0].data; // 保存级联数据
+						break; // 找到第一个有子节点的节点后退出循环
 					}
 				}
 			} else {
-				_this.cascade = false;
+				_this.cascade = false; // 如果数据类型不是JSON，设置级联标志为false
 			}
 		},
 
 		generateArrData: function(targetArr) {
-			var tempArr = [];
-			var keyMap_id = this.keyMap.id;
-			var keyMap_value = this.keyMap.value;
+			var tempArr = []; // 初始化临时数组用于存储转换后的数据
+			var keyMap_id = this.keyMap.id; // 获取键映射中的ID键名
+			var keyMap_value = this.keyMap.value; // 获取键映射中的值键名
+			// 遍历目标数组，将每个元素转换为包含ID和值的对象
 			for (var i = 0; i < targetArr.length; i++) {
 				var tempObj = {};
 				tempObj[keyMap_id] = targetArr[i][this.keyMap.id];
 				tempObj[keyMap_value] = targetArr[i][this.keyMap.value];
 				tempArr.push(tempObj);
 			}
-			return tempArr;
+			return tempArr; // 返回转换后的数组
 		},
 
 		initCascade: function() {
+			// 获取当前对象引用
 			var _this = this;
+			// 生成并添加级联数据的数组表示形式到displayJson中
 			_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));
+			// 如果初始化位置数组不为空，则进行深度初始化
 			if (_this.initPosition.length > 0) {
-				_this.initDeepCount = 0;
-				_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]);
+				_this.initDeepCount = 0; // 初始化深度计数器
+				_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]); // 递归初始化子节点
 			} else {
-				_this.checkArrDeep(_this.cascadeJsonData[0]);
+				_this.checkArrDeep(_this.cascadeJsonData[0]); // 如果初始化位置为空，直接检查第一层数据
 			}
-			_this.reRenderWheels();
+			_this.reRenderWheels(); // 重新渲染轮盘组件
 		},
 
 		initCheckArrDeep: function(parent) {
+			// 获取当前对象引用
 			var _this = this;
+			// 如果父节点存在且具有子节点
 			if (parent) {
 				if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
+					// 生成并添加子节点数据的数组表示形式到displayJson中
 					_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));
-					_this.initDeepCount++;
-					var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]];
+					_this.initDeepCount++; // 增加深度计数器
+					var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]; // 获取下一个节点
 					if (nextNode) {
-						_this.initCheckArrDeep(nextNode);
+						_this.initCheckArrDeep(nextNode); // 递归初始化下一个节点
 					} else {
-						_this.checkArrDeep(parent[_this.keyMap.childs][0]);
+						_this.checkArrDeep(parent[_this.keyMap.childs][0]); // 如果下一个节点不存在，检查第一个子节点
 					}
 				}
 			}
 		},
 
 		checkArrDeep: function (parent) {
-			//检测子节点深度  修改 displayJson
+			// 检测子节点深度并修改 displayJson
 			var _this = this;
 			if(parent){
 				if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
@@ -341,7 +327,7 @@
 			var _this = this;
 			var deleteNum = _this.displayJson.length - 1 - index;
 			for(var i=0; i<deleteNum; i++){
-				_this.displayJson.pop(); //修改 displayJson
+				_this.displayJson.pop(); // 修改 displayJson，删除多余的层级
 			}
 			var resultNode;
 			for (var i = 0; i <= index; i++){
@@ -351,11 +337,10 @@
 					resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]];
 				}
 			}
-			_this.checkArrDeep(resultNode);
-			//console.log(_this.displayJson);
-			_this.reRenderWheels();
-			_this.fixRowStyle();
-			_this.setCurDistance(_this.resetPosition(index, posIndexArr));
+			_this.checkArrDeep(resultNode); // 检查并更新子节点深度
+			_this.reRenderWheels(); // 重新渲染轮盘
+			_this.fixRowStyle(); // 修正行样式
+			_this.setCurDistance(_this.resetPosition(index, posIndexArr)); // 设置当前距离和重置位置
 		},
 
 		resetPosition: function(index, posIndexArr){
@@ -365,16 +350,16 @@
 			if(_this.slider.length > posIndexArr.length){
 				tempCount = _this.slider.length - posIndexArr.length;
 				for(var i=0; i<tempCount; i++){
-					tempPosArr.push(0);
+					tempPosArr.push(0); // 如果滑块数量多于位置数组长度，填充0
 				}
 			}else if(_this.slider.length < posIndexArr.length){
 				tempCount = posIndexArr.length - _this.slider.length;
 				for(var i=0; i<tempCount; i++){
-					tempPosArr.pop();
+					tempPosArr.pop(); // 如果滑块数量少于位置数组长度，移除多余的位置
 				}
 			}
 			for(var i=index+1; i< tempPosArr.length; i++){
-				tempPosArr[i] = 0;
+				tempPosArr[i] = 0; // 将当前索引之后的位置设置为0
 			}
 			return tempPosArr;
 		},
@@ -385,7 +370,7 @@
 			if(_this.wheel.length > _this.displayJson.length){
 				var count = _this.wheel.length - _this.displayJson.length;
 				for(var i=0; i<count; i++){
-					_this.wheels.removeChild(_this.wheel[_this.wheel.length-1]);
+					_this.wheels.removeChild(_this.wheel[_this.wheel.length-1]); // 移除多余的wheel元素
 				}
 			}
 			for(var i=0; i<_this.displayJson.length; i++){
@@ -398,8 +383,7 @@
 							// 行
 							tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
 						}
-						_this.slider[i].innerHTML = tempHTML;
-
+						_this.slider[i].innerHTML = tempHTML; // 更新现有wheel的HTML内容
 					}else{
 						var tempWheel = document.createElement("div");
 						tempWheel.className = "wheel";
@@ -409,12 +393,11 @@
 							tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
 						}
 						tempHTML += '</ul>';
-						tempWheel.innerHTML = tempHTML;
-
-						_this.addListenerWheel(tempWheel, i);
-				    	_this.wheels.appendChild(tempWheel); 
+						tempWheel.innerHTML = tempHTML; // 创建新的wheel并设置HTML内容
+						_this.addListenerWheel(tempWheel, i); // 为新wheel添加事件监听器
+						_this.wheels.appendChild(tempWheel); // 将新wheel添加到DOM中
 					}
-					_this.addListenerLi(i);
+					_this.addListenerLi(i); // 为每个li添加事件监听器
 				})(i);
 			}
 		},
@@ -422,9 +405,11 @@
 		updateWheels: function(data) {
 			var _this = this;
 			if (_this.cascade) {
+				// 更新级联数据源
 				_this.cascadeJsonData = data;
 				_this.displayJson = [];
 				_this.initCascade();
+				// 确保初始化位置数组长度与滑块数量一致
 				if (_this.initPosition.length < _this.slider.length) {
 					var diff = _this.slider.length - _this.initPosition.length;
 					for (var i = 0; i < diff; i++) {
@@ -442,13 +427,14 @@
 			if (_this.cascade) {
 				console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源');
 				return false;
-	    	}
-	    	else if(_this.jsonType){
+			} else if (_this.jsonType) {
+				// 处理JSON类型的数据
 				for (var j = 0; j < data.length; j++) {
 					tempHTML += '<li data-id="' + data[j][_this.keyMap.id] + '">' + data[j][_this.keyMap.value] + '</li>';
 				}
 				_this.wheelsData[sliderIndex] = { data: data };
 			} else {
+				// 处理普通数组类型的数据
 				for (var j = 0; j < data.length; j++) {
 					tempHTML += '<li>' + data[j] + '</li>';
 				}
@@ -487,8 +473,7 @@
 				for (var i = 0; i < _this.wheel.length; i++) {
 					temp.push(_this.displayJson[i][positionArr[i]]);
 				}
-	    	}
-	    	else if(_this.jsonType){
+			} else if (_this.jsonType) {
 				for (var i = 0; i < _this.curDistance.length; i++) {
 					temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]);
 				}
@@ -505,6 +490,7 @@
 		},
 
 		calcDistance: function(index){
+			// 计算给定索引对应的距离，基于liHeight的倍数
 			return 2*this.liHeight-index*this.liHeight;
 		},
 
@@ -512,38 +498,44 @@
 			var _this = this;
 			var temp = [];
 			for(var i=0; i<_this.slider.length; i++){
-	    		temp.push(_this.calcDistance(indexArr[i]));
-	    		_this.movePosition(_this.slider[i],temp[i]);
+				temp.push(_this.calcDistance(indexArr[i])); // 计算每个滑块的距离并存储在临时数组中
+				_this.movePosition(_this.slider[i],temp[i]); // 移动滑块到计算出的位置
 			}
-	    	_this.curDistance = temp;
+			_this.curDistance = temp; // 更新当前距离数组
 		},
 
 		fixPosition: function(distance){
+			// 根据距离修正位置，确保滑块不会超出边界
 			return -(this.getIndex(distance)-2)*this.liHeight;
 		},
 
 		movePosition: function(theSlider, distance){
+			// 使用CSS transform属性移动滑块到指定位置
 			theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';
 			theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)';
 		},
 
 		locatePosition: function(index, posIndex){
+			// 定位滑块到特定位置
 			this.curDistance[index] = this.calcDistance(posIndex);
 			this.movePosition(this.slider[index],this.curDistance[index]);
 			if(_this.cascade){
-		        _this.checkRange(index, _this.getIndexArr());
+				_this.checkRange(index, _this.getIndexArr()); // 如果启用级联，检查范围
 			}
 		},
 
 		updateCurDistance: function(theSlider, index){
+			// 更新当前滑块的距离
 			this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]);
 		},
 
 		getDistance:function(theSlider){
+			// 获取滑块当前的垂直距离
 			return parseInt(theSlider.style.transform.split(',')[1]);
 		},
 
 		getInnerHtml: function(sliderIndex){
+			// 获取滑块当前选中项的内部HTML内容
 			var _this = this;
 			var index = _this.getIndex(_this.curDistance[sliderIndex]);
 			return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML;
@@ -554,14 +546,13 @@
 			event = event || window.event;
 			switch (event.type) {
 				case "touchstart":
-			        _this.startY = event.touches[0].clientY;
-			        _this.oldMoveY = _this.startY;
+					_this.startY = event.touches[0].clientY; // 记录触摸开始时的Y坐标
+					_this.oldMoveY = _this.startY; // 初始化旧的移动Y坐标
 					break;
 
 				case "touchend":
-
-			        _this.moveEndY = event.changedTouches[0].clientY;
-			        _this.offsetSum = _this.moveEndY - _this.startY;
+					_this.moveEndY = event.changedTouches[0].clientY; // 记录触摸结束时的Y坐标
+					_this.offsetSum = _this.moveEndY - _this.startY; // 计算总偏移量
 
 					// 修正位置
 					_this.updateCurDistance(theSlider, index);
@@ -569,14 +560,12 @@
 					_this.movePosition(theSlider, _this.curDistance[index]);
 					_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight;
 
-
-			        //反弹
+					// 反弹效果处理
 					if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) {
 						_this.curDistance[index] = 2 * _this.liHeight;
 						setTimeout(function () {
 							_this.movePosition(theSlider, _this.curDistance[index]);
 						}, 100);
-
 					} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
 						_this.curDistance[index] = _this.oversizeBorder;
 						setTimeout(function () {
@@ -584,107 +573,80 @@
 						}, 100);
 					}
 
-
-			        _this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
+					_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); // 触发过渡结束事件
 
 					if (_this.cascade) {
-				        _this.checkRange(index, _this.getIndexArr());
-				    }
-
-	    			break;
-
-	    		case "touchmove":
-			        event.preventDefault();
-			        _this.moveY = event.touches[0].clientY;
-			        _this.offset = _this.moveY - _this.oldMoveY;
-
-			        _this.updateCurDistance(theSlider, index);
-			        _this.curDistance[index] = _this.curDistance[index] + _this.offset;
-			        _this.movePosition(theSlider, _this.curDistance[index]);
-			        _this.oldMoveY = _this.moveY;
-	    			break;
+						_this.checkRange(index, _this.getIndexArr()); // 如果启用级联，检查范围
 					}
-	    },
-
-	    dragClick: function(event, theSlider, index){
-	    	var _this = this;
-	    	event = event || window.event;
-	    	switch(event.type){
-	    		case "mousedown":
-			        _this.startY = event.clientY;
-			        _this.oldMoveY = _this.startY;
-			        _this.clickStatus = true;
 					break;
 
+				// 处理鼠标抬起事件
 				case "mouseup":
-
-			        _this.moveEndY = event.clientY;
-			        _this.offsetSum = _this.moveEndY - _this.startY;
+					_this.moveEndY = event.clientY; // 获取鼠标抬起时的Y坐标
+					_this.offsetSum = _this.moveEndY - _this.startY; // 计算鼠标移动的距离
 
 					// 修正位置
-			        _this.updateCurDistance(theSlider, index);
-			        _this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
-			        _this.movePosition(theSlider, _this.curDistance[index]);
-			        _this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight; 
-
+					_this.updateCurDistance(theSlider, index); // 更新当前距离
+					_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]); // 修正位置，防止超出边界
+					_this.movePosition(theSlider, _this.curDistance[index]); // 移动到新的位置
+					_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight; // 设置超出边界的最小值
 
-			        //反弹
+					// 反弹效果
 					if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) {
-			            _this.curDistance[index] = 2*_this.liHeight;
+						_this.curDistance[index] = 2 * _this.liHeight; // 如果超过上界，设置为上界
 						setTimeout(function () {
-			                _this.movePosition(theSlider, _this.curDistance[index]);
+							_this.movePosition(theSlider, _this.curDistance[index]); // 延迟后移动到上界位置
 						}, 100);
-
 					} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
-			            _this.curDistance[index] = _this.oversizeBorder;
+						_this.curDistance[index] = _this.oversizeBorder; // 如果超过下界，设置为下界
 						setTimeout(function () {
-			                _this.movePosition(theSlider, _this.curDistance[index]);
+							_this.movePosition(theSlider, _this.curDistance[index]); // 延迟后移动到下界位置
 						}, 100);
 					}
 
-			        _this.clickStatus = false;
-			        _this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
+					_this.clickStatus = false; // 重置点击状态
+					_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); // 触发过渡结束事件
 					if (_this.cascade) {
-				        _this.checkRange(index, _this.getIndexArr());
+						_this.checkRange(index, _this.getIndexArr()); // 如果是级联选择器，检查范围
 					}
 					break;
 
+// 处理鼠标移动事件
 				case "mousemove":
-			        event.preventDefault();
+					event.preventDefault(); // 阻止默认行为
 					if (_this.clickStatus) {
-				        _this.moveY = event.clientY;
-				        _this.offset = _this.moveY - _this.oldMoveY;
-				        _this.updateCurDistance(theSlider, index);
-				        _this.curDistance[index] = _this.curDistance[index] + _this.offset;
-				        _this.movePosition(theSlider, _this.curDistance[index]);
-				        _this.oldMoveY = _this.moveY;
+						_this.moveY = event.clientY; // 获取当前鼠标Y坐标
+						_this.offset = _this.moveY - _this.oldMoveY; // 计算偏移量
+						_this.updateCurDistance(theSlider, index); // 更新当前距离
+						_this.curDistance[index] = _this.curDistance[index] + _this.offset; // 更新当前距离
+						_this.movePosition(theSlider, _this.curDistance[index]); // 移动到新的位置
+						_this.oldMoveY = _this.moveY; // 更新旧的Y坐标
 					}
 					break;
 			}
 		},
 
+// 处理单击事件
 					singleClick: function (theLi, index, sliderIndex) {
 						var _this = this;
 						if (_this.cascade) {
-		        var tempPosArr = _this.getIndexArr();
-		        tempPosArr[sliderIndex] = index;
-	        	_this.checkRange(sliderIndex, tempPosArr);
-
+							var tempPosArr = _this.getIndexArr(); // 获取当前索引数组
+							tempPosArr[sliderIndex] = index; // 更新指定滑块的索引
+							_this.checkRange(sliderIndex, tempPosArr); // 检查范围
 						} else {
-		        _this.curDistance[sliderIndex] = (2-index)*_this.liHeight;
-		        _this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]);
+							_this.curDistance[sliderIndex] = (2 - index) * _this.liHeight; // 计算新的距离
+							_this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]); // 移动到新的位置
 						}
 					}
-
 			};
 
 					if (typeof exports == "object") {
-		module.exports = MobileSelect;
+						module.exports = MobileSelect; // CommonJS模块导出
 					} else if (typeof define == "function" && define.amd) {
 						define([], function () {
-			return MobileSelect;
+							return MobileSelect; // AMD模块定义
 						})
 					} else {
-		window.MobileSelect = MobileSelect;
+						window.MobileSelect = MobileSelect; // 全局变量导出
 	}
 })();

src/main/webapp/js/xadmin.js

@@ -1,195 +1,181 @@
-;!function (win) {
-	"use strict";
-	var doc = document
+// 定义一个立即执行的函数表达式 (IIFE)，传入全局对象 window
+!function(win) {
+    "use strict"; // 使用严格模式
+    var doc = document; // 获取文档对象
 
-	,Xadmin = function(){
+    // 定义 Xadmin 构造函数
+    var Xadmin = function() {
         this.v = '2.2'; // 版本号
     }
 
+    // 初始化方法
     Xadmin.prototype.init = function() {
-		var tab_list = this.get_data();
+        var tab_list = this.get_data(); // 获取所有标签页数据
         for (var i in tab_list) {
-			this.add_lay_tab(tab_list[i].title,tab_list[i].url,i);
+            this.add_lay_tab(tab_list[i].title, tab_list[i].url, i); // 添加标签页
         }
-		element.tabChange('xbs_tab', i);
+        element.tabChange('xbs_tab', i); // 切换到最后一个标签页
     };
-  /**
-   * [end 执行结束要做的]
-   * @return {[type]} [description]
-   */
-  Xadmin.prototype.end = function() {
-
-    var cate_list = this.get_cate_data();
 
+    // 结束方法，用于执行一些收尾工作
+    Xadmin.prototype.end = function() {
+        var cate_list = this.get_cate_data(); // 获取分类数据
         for (var i in cate_list) {
             if (cate_list[i] != null) {
-        $('.left-nav #nav li').eq(cate_list[i]).click();
+                $('.left-nav #nav li').eq(cate_list[i]).click(); // 点击左侧导航栏的对应项
             }
         }
     };
 
+    // 添加标签页方法
     Xadmin.prototype.add_tab = function(title, url, is_refresh) {
-		var id = md5(url);//md5每个url
+        var id = md5(url); // 对 URL 进行 MD5 加密生成唯一 ID
 
-		//重复点击
+        // 检查是否已经存在相同的标签页
         for (var i = 0; i < $('.x-iframe').length; i++) {
             if ($('.x-iframe').eq(i).attr('tab-id') == id) {
-                element.tabChange('xbs_tab', id);
+                element.tabChange('xbs_tab', id); // 切换到已存在的标签页
                 if (is_refresh)
-                    $('.x-iframe').eq(i).attr("src",$('.x-iframe').eq(i).attr('src'));
+                    $('.x-iframe').eq(i).attr("src", $('.x-iframe').eq(i).attr('src')); // 刷新页面
                 return;
             }
-        };
-
-		this.add_lay_tab(title,url,id);
-	    this.set_data(title,url,id);
-	    element.tabChange('xbs_tab', id);
+        }
 
+        this.add_lay_tab(title, url, id); // 添加新的标签页
+        this.set_data(title, url, id); // 保存标签页数据
+        element.tabChange('xbs_tab', id); // 切换到新添加的标签页
     }
 
+    // 删除标签页方法
     Xadmin.prototype.del_tab = function(id) {
-
         if (id) {
-      console.log(88);
+            console.log(88); // 打印日志（调试用）
         } else {
-      var id = $(window.frameElement).attr('tab-id');
-      parent.element.tabDelete('xbs_tab', id);
+            var id = $(window.frameElement).attr('tab-id'); // 获取当前窗口的 tab-id
+            parent.element.tabDelete('xbs_tab', id); // 删除父窗口中的标签页
         }
     }
 
+    // 添加 Layui 标签页方法
     Xadmin.prototype.add_lay_tab = function(title, url, id) {
         element.tabAdd('xbs_tab', {
-	       title: title 
-	        ,content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>'
-	        ,id: id
+            title: title, // 标签标题
+            content: '<iframe tab-id="' + id + '" frameborder="0" scrolling="yes" class="x-iframe"></iframe>', // 标签内容为 iframe
+            id: id // 标签 ID
         })
     }
-	/**
-     * [open 打开弹出层]
-     * @param  {[type]}  title [弹出层标题]
-     * @param  {[type]}  url   [弹出层地址]
-     * @return {[type]}        [description]
-     */
+
+    // 打开弹出层方法
     Xadmin.prototype.open = function(title, url) {
         if (title == null || title == '') {
-	        var title=false;
+            var title = false; // 如果标题为空，则不显示标题
         };
         if (url == null || url == '') {
-	        var url="404.html";
+            var url = "404.html"; // 如果 URL 为空，则默认指向 404 页面
         };
         if (w == null || w == '') {
-	        var w=($(window).width()*0.9);
+            var w = ($(window).width() * 0.9); // 设置宽度为窗口宽度的 90%
         };
         if (h == null || h == '') {
-	        var h=($(window).height() - 50);
+            var h = ($(window).height() - 50); // 设置高度为窗口高度减去 50px
         };
         var index = layer.open({
-	        type: 2,
-	        area: [w+'px', h +'px'],
-	        fix: false, //不固定
-	        maxmin: true,
-	        shadeClose: true,
-	        shade:0.4,
-	        title: title,
-	        content: url
+            type: 2, // 类型为 iframe
+            area: [w + 'px', h + 'px'], // 设置弹出层大小
+            fix: false, // 不固定位置
+            maxmin: true, // 允许最大化和最小化
+            shadeClose: true, // 点击遮罩关闭弹出层
+            shade: 0.4, // 设置遮罩透明度
+            title: title, // 弹出层标题
+            content: url // 弹出层内容 URL
         });
         if (full) {
-	       layer.full(index); 
+            layer.full(index); // 如果 full 为真，则全屏显示弹出层
         }
     }
-	/**
-	 * [close 关闭弹出层]
-	 * @return {[type]} [description]
-	 */
+
+    // 关闭弹出层方法
     Xadmin.prototype.close = function() {
-		var index = parent.layer.getFrameIndex(window.name);
-    	parent.layer.close(index);
+        var index = parent.layer.getFrameIndex(window.name); // 获取当前窗口索引
+        parent.layer.close(index); // 关闭弹出层
     };
-  /**
-   * [close 关闭弹出层父窗口关闭]
-   * @return {[type]} [description]
-   */
+
+    // 关闭弹出层并刷新父窗口方法
     Xadmin.prototype.father_reload = function() {
-      parent.location.reload();
+        parent.location.reload(); // 刷新父窗口
     };
-	/**
-	 * [get_data 获取所有项]
-	 * @return {[type]} [description]
-	 */
+
+    // 获取所有标签页数据方法
     Xadmin.prototype.get_data = function() {
         if (typeof is_remember != "undefined")
-          return false;
-		return layui.data('tab_list')
+            return false; // 如果 is_remember 被定义，则返回 false
+        return layui.data('tab_list') // 从本地存储中获取标签页数据
     }
-	/**
-	 * [set_data 增加某一项]
-	 * @param {[type]} id [description]
-	 */
-	Xadmin.prototype.set_data = function(title,url,id) {
 
+    // 增加标签页数据方法
+    Xadmin.prototype.set_data = function(title, url, id) {
         if (typeof is_remember != "undefined")
-        	return false;
-
+            return false; // 如果 is_remember 被定义，则不执行任何操作
         layui.data('tab_list', {
-		  key: id
-		  ,value: {title:title,url:url}
+            key: id, // 数据的键为标签页 ID
+            value: { title: title, url: url } // 数据的值为包含标题和 URL 的对象
         });
     };
 
-  /**
-   * [get_data 获取所有项]
-   * @return {[type]} [description]
-   */
+    // 获取分类数据方法
     Xadmin.prototype.get_cate_data = function() {
         if (typeof is_remember != "undefined")
-          return false;
-    return layui.data('cate')
+            return false; // 如果 is_remember 被定义，则返回 false
+        return layui.data('cate') // 从本地存储中获取分类数据
   }
     /**
-   * [set_data 增加某一项]
-   * @param {[type]} id [description]
+     * 设置分类数据
+     * @param {Object} data - 要存储的数据对象
      */
     Xadmin.prototype.set_cate_data = function(data) {
-
-    if(typeof is_remember!="undefined")
+        if (typeof is_remember !== "undefined")
             return false;
 
         layui.data('cate', data);
     };
+
     /**
-	 * [del_data 删除某一项]
-	 * @param  {[type]} id [description]
-	 * @return {[type]}    [description]
+     * 删除指定ID的数据
+     * @param {String} id - 要删除的数据的键值
      */
     Xadmin.prototype.del_data = function(id) {
-		if(typeof is_remember!="undefined")
+        if (typeof is_remember !== "undefined")
             return false;
-		if(typeof id!="undefined"){
+
+        if (typeof id !== "undefined") {
             layui.data('tab_list', {
-			  key: id
-			  ,remove: true
+                key: id,
+                remove: true
             });
         } else {
             layui.data('tab_list', null);
         }
     };
+
     /**
-	 * [del_other_data 删除其它]
-	 * @param  {[type]} id [description]
-	 * @return {[type]}    [description]
+     * 删除其他数据，只保留指定ID的数据
+     * @param {String} id - 要保留的数据的键值
      */
     Xadmin.prototype.del_other_data = function(id) {
-		if(typeof is_remember!="undefined")
+        if (typeof is_remember !== "undefined")
             return false;
+
         var tab_list = this.get_data();
 
         layui.data('tab_list', null);
 
         layui.data('tab_list', {
-		  key: id
-		  ,value: tab_list[id]
+            key: id,
+            value: tab_list[id]
         });
     };
+
+// 初始化xadmin实例
     win.xadmin = new Xadmin();
 
 }(window);
@@ -199,7 +185,6 @@ layui.use(['layer','element','jquery'],function() {
     element = layui.element;
     $ = layui.jquery;
 
-
     // 打开页面初始
     xadmin.init();
 
@@ -208,26 +193,24 @@ layui.use(['layer','element','jquery'],function() {
         var id = $(this).parent().attr('lay-id');
         xadmin.del_data(id);
     });
-    //左侧菜单
-    $('.left-nav #nav').on('click', 'li', function(event) {
 
+    // 左侧菜单点击事件处理
+    $('.left-nav #nav').on('click', 'li', function(event) {
         if ($(this).parent().attr('id') == 'nav') {
-          xadmin.set_cate_data({key:'f1',value:$('.left-nav #nav li').index($(this))})
-          xadmin.set_cate_data({key:'f2',value:null})
-          xadmin.set_cate_data({key:'f3',value:null})
+            xadmin.set_cate_data({ key: 'f1', value: $('.left-nav #nav li').index($(this)) });
+            xadmin.set_cate_data({ key: 'f2', value: null });
+            xadmin.set_cate_data({ key: 'f3', value: null });
         }
 
         if ($(this).parent().parent().parent().attr('id') == 'nav') {
-          xadmin.set_cate_data({key:'f2',value:$('.left-nav #nav li').index($(this))})
-          xadmin.set_cate_data({key:'f3',value:null})
+            xadmin.set_cate_data({ key: 'f2', value: $('.left-nav #nav li').index($(this)) });
+            xadmin.set_cate_data({ key: 'f3', value: null });
         }
 
         if ($(this).parent().parent().parent().parent().parent().attr('id') == 'nav') {
-          xadmin.set_cate_data({key:'f3',value:$('.left-nav #nav li').index($(this))})
+            xadmin.set_cate_data({ key: 'f3', value: $('.left-nav #nav li').index($(this)) });
         }
 
-
-
         if ($('.left-nav').css('width') == '60px') {
             $('.left-nav').animate({ width: '220px' }, 100);
             $('.page-content').animate({ left: '220px' }, 100);
@@ -257,19 +240,21 @@ layui.use(['layer','element','jquery'],function() {
             }
         }
         event.stopPropagation();
-    })
+    });
+
     var left_tips_index = null;
     $('.left-nav #nav').on('mouseenter', '.left-nav-li', function(event) {
         if ($('.left-nav').css('width') != '220px') {
             var tips = $(this).attr('lay-tips');
             left_tips_index = layer.tips(tips, $(this));
         }
-    })
+    });
 
     $('.left-nav #nav').on('mouseout', '.left-nav-li', function(event) {
         layer.close(left_tips_index);
-    })
-    // 隐藏左侧
+    });
+
+    // 隐藏左侧导航栏
     $('.container .left_open i').click(function(event) {
         if ($('.left-nav').css('width') == '220px') {
             $('.left-nav .open').click();
@@ -339,8 +324,11 @@ layui.use(['layer','element','jquery'],function() {
 * to work around bugs in some JS interpreters.
 */
 function safeAdd (x, y) {
+    // 将 x 和 y 分别限制在 16 位，然后相加
     var lsw = (x & 0xffff) + (y & 0xffff)
+    // 计算高位部分的和，并考虑低位部分可能产生的进位
     var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
+    // 返回合并后的 32 位结果
     return (msw << 16) | (lsw & 0xffff)
 }
 
@@ -348,6 +336,7 @@ return (msw << 16) | (lsw & 0xffff)
  * Bitwise rotate a 32-bit number to the left.
  */
 function bitRotateLeft (num, cnt) {
+    // 使用位移操作实现循环左移
     return (num << cnt) | (num >>> (32 - cnt))
 }
 
@@ -355,18 +344,23 @@ return (num << cnt) | (num >>> (32 - cnt))
  * These functions implement the four basic operations the algorithm uses.
  */
 function md5cmn (q, a, b, x, s, t) {
+    // 执行 MD5 算法中的一个基本操作
     return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
 }
 function md5ff (a, b, c, d, x, s, t) {
+    // 执行 MD5 算法中的 F 函数操作
     return md5cmn((b & c) | (~b & d), a, b, x, s, t)
 }
 function md5gg (a, b, c, d, x, s, t) {
+    // 执行 MD5 算法中的 G 函数操作
     return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
 }
 function md5hh (a, b, c, d, x, s, t) {
+    // 执行 MD5 算法中的 H 函数操作
     return md5cmn(b ^ c ^ d, a, b, x, s, t)
 }
 function md5ii (a, b, c, d, x, s, t) {
+    // 执行 MD5 算法中的 I 函数操作
     return md5cmn(c ^ (b | ~d), a, b, x, s, t)
 }
 
@@ -375,8 +369,10 @@ return md5cmn(c ^ (b | ~d), a, b, x, s, t)
  */
 function binlMD5 (x, len) {
     /* append padding */
+    // 添加填充数据，使数据长度满足要求
     x[len >> 5] |= 0x80 << (len % 32)
-x[((len + 64) >>> 9 << 4) + 14] = len
+    // 添加原始数据长度信息（以位为单位）
+    x[(((len + 64) >>> 9) << 4) + 14] = len
 
     var i
     var olda
@@ -389,11 +385,13 @@ var c = -1732584194
     var d = 271733878
 
     for (i = 0; i < x.length; i += 16) {
+        // 保存当前状态
         olda = a
         oldb = b
         oldc = c
         oldd = d
 
+        // 执行 MD5 算法的主循环，处理每个块的数据
         a = md5ff(a, b, c, d, x[i], 7, -680876936)
         d = md5ff(d, a, b, c, x[i + 1], 12, -389564586)
         c = md5ff(c, d, a, b, x[i + 2], 17, 606105819)
@@ -425,7 +423,7 @@ for (i = 0; i < x.length; i += 16) {
         b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501)
         a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467)
         d = md5gg(d, a, b, c, x[i + 2], 9, -51403784)
-  c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473)
+        c = md5gg(c, d, a, b, x[i + 7], 14, 173537119)
         b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734)
 
         a = md5hh(a, b, c, d, x[i + 5], 4, -378558)
@@ -437,7 +435,7 @@ for (i = 0; i < x.length; i += 16) {
         c = md5hh(c, d, a, b, x[i + 7], 16, -155497632)
         b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640)
         a = md5hh(a, b, c, d, x[i + 13], 4, 681279174)
-  d = md5hh(d, a, b, c, x[i], 11, -358537222)
+        d = md5hh(d, a, b, c, x[i + 0], 11, -358537222)
         c = md5hh(c, d, a, b, x[i + 3], 16, -722521979)
         b = md5hh(b, c, d, a, x[i + 6], 23, 76029189)
         a = md5hh(a, b, c, d, x[i + 9], 4, -640364487)
@@ -467,115 +465,124 @@ for (i = 0; i < x.length; i += 16) {
         c = safeAdd(c, oldc)
         d = safeAdd(d, oldd)
     }
+
     return [a, b, c, d]
 }
 
 /*
 * Convert an array of little-endian words to a string
 */
+/*
+ * 将小端序的字数组转换为字符串
+ */
 function binl2rstr (input) {
-var i
-var output = ''
-var length32 = input.length * 32
+    var i;
+    var output = '';
+    var length32 = input.length * 32; // 计算输入数组的总位数
     for (i = 0; i < length32; i += 8) {
-  output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff)
+        // 从输入数组中提取每个字节并转换为字符
+        output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff);
     }
-return output
+    return output;
 }
 
 /*
-* Convert a raw string to an array of little-endian words
-* Characters >255 have their high-byte silently ignored.
+ * 将原始字符串转换为小端序的字数组
+ * 字符值大于255的高字节将被忽略。
  */
 function rstr2binl (input) {
-var i
-var output = []
-output[(input.length >> 2) - 1] = undefined
+    var i;
+    var output = [];
+    output[(input.length >> 2) - 1] = undefined; // 确保输出数组有足够的空间
     for (i = 0; i < output.length; i += 1) {
-  output[i] = 0
+        output[i] = 0; // 用零初始化输出数组
     }
-var length8 = input.length * 8
+    var length8 = input.length * 8; // 计算输入字符串的总位数
     for (i = 0; i < length8; i += 8) {
-  output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32)
+        // 将每个字符打包到输出数组中作为小端序字
+        output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32);
     }
-return output
+    return output;
 }
 
 /*
-* Calculate the MD5 of a raw string
+ * 计算原始字符串的MD5哈希值
  */
 function rstrMD5 (s) {
-return binl2rstr(binlMD5(rstr2binl(s), s.length * 8))
+    return binl2rstr(binlMD5(rstr2binl(s), s.length * 8)); // 将原始字符串转换为二进制，进行哈希运算，然后转换回原始字符串
 }
 
 /*
-* Calculate the HMAC-MD5, of a key and some data (raw strings)
+ * 计算HMAC-MD5（密钥和数据）
  */
 function rstrHMACMD5 (key, data) {
-var i
-var bkey = rstr2binl(key)
-var ipad = []
-var opad = []
-var hash
-ipad[15] = opad[15] = undefined
+    var i;
+    var bkey = rstr2binl(key); // 将密钥转换为二进制数组
+    var ipad = [];
+    var opad = [];
+    var hash;
+    ipad[15] = opad[15] = undefined; // 确保ipad和opad数组有足够的空间
     if (bkey.length > 16) {
-  bkey = binlMD5(bkey, key.length * 8)
+        bkey = binlMD5(bkey, key.length * 8); // 如果密钥长度超过16个字，先对其进行哈希运算
     }
     for (i = 0; i < 16; i += 1) {
-  ipad[i] = bkey[i] ^ 0x36363636
-  opad[i] = bkey[i] ^ 0x5c5c5c5c
+        ipad[i] = bkey[i] ^ 0x36363636; // 使用ipad常量对密钥进行异或操作
+        opad[i] = bkey[i] ^ 0x5c5c5c5c; // 使用opad常量对密钥进行异或操作
     }
-hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8)
-return binl2rstr(binlMD5(opad.concat(hash), 512 + 128))
+    hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8); // 对内填充的密钥和数据进行哈希运算
+    return binl2rstr(binlMD5(opad.concat(hash), 512 + 128)); // 对外填充的密钥和之前的哈希结果进行哈希运算，然后转换为原始字符串
 }
 
 /*
-* Convert a raw string to a hex string
+ * 将原始字符串转换为十六进制字符串
  */
 function rstr2hex (input) {
-var hexTab = '0123456789abcdef'
-var output = ''
-var x
-var i
+    var hexTab = '0123456789abcdef'; // 十六进制字符表
+    var output = '';
+    var x;
+    var i;
     for (i = 0; i < input.length; i += 1) {
-  x = input.charCodeAt(i)
-  output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f)
+        x = input.charCodeAt(i); // 获取每个字符的ASCII码
+        output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f); // 将每个字符转换为其十六进制表示
     }
-return output
+    return output;
 }
 
 /*
-* Encode a string as utf-8
+ * 将字符串编码为UTF-8格式
  */
 function str2rstrUTF8 (input) {
-return unescape(encodeURIComponent(input))
+    return unescape(encodeURIComponent(input)); // 将输入字符串编码为UTF-8格式
 }
 
 /*
-* Take string arguments and return either raw or hex encoded strings
+ * 接受字符串参数并返回原始或十六进制编码的字符串
  */
 function rawMD5 (s) {
-return rstrMD5(str2rstrUTF8(s))
+    return rstrMD5(str2rstrUTF8(s)); // 将输入字符串转换为原始格式并计算其MD5哈希值
 }
 function hexMD5 (s) {
-return rstr2hex(rawMD5(s))
+    return rstr2hex(rawMD5(s)); // 将输入字符串转换为原始格式，计算其MD5哈希值，然后转换为十六进制格式
 }
 function rawHMACMD5 (k, d) {
-return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d))
+    return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d)); // 将密钥和数据转换为原始格式，计算它们的HMAC-MD5哈希值，并返回原始结果
 }
 function hexHMACMD5 (k, d) {
-return rstr2hex(rawHMACMD5(k, d))
+    return rstr2hex(rawHMACMD5(k, d)); // 将密钥和数据转换为原始格式，计算它们的HMAC-MD5哈希值，转换为十六进制格式，并返回十六进制结果
 }
 
+/*
+ * 根据提供的参数计算MD5或HMAC-MD5的主函数
+ */
 function md5 (string, key, raw) {
-if (!key) {
+    if (!key) { // 如果没有提供密钥，计算输入字符串的MD5哈希值
         if (!raw) {
-    return hexMD5(string)
+            return hexMD5(string); // 返回十六进制编码的MD5哈希值
         }
-  return rawMD5(string)
+        return rawMD5(string); // 返回原始MD5哈希值
     }
-if (!raw) {
-  return hexHMACMD5(key, string)
+    if (!raw) { // 如果提供了密钥，使用密钥计算输入字符串的HMAC-MD5哈希值
+        return hexHMACMD5(key, string); // 返回十六进制编码的HMAC-MD5哈希值
     }
-return rawHMACMD5(key, string)
+    return rawHMACMD5(key, string);
 }