diff --git a/wechat-master/web/index.jsp b/wechat-master/web/index.jsp
index 2ea9e27..9d07d8a 100644
--- a/wechat-master/web/index.jsp
+++ b/wechat-master/web/index.jsp
@@ -21,105 +21,139 @@
   Time: 15:55
  To change this template use File | Settings | File Templates.
 --%>
+<%-- JSP页面指令，设置内容类型、字符集和页面编码为UTF-8 --%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
+<%-- 引入JSTL核心标签库，用于在JSP中简化Java对象的操作 --%>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-<c:set var="host" value="localhost:8080/wechat"/>
-<%--设置主机名--%>
+<%-- 设置一个名为host的变量，值为localhost:8080/wechat（注意：这个设置实际上没有生效，因为缺少<c:set>标签的闭合和正确的使用方式） --%>
+<%-- 正确的<c:set>使用应该像这样：<c:set var="host" value="localhost:8080/wechat" scope="request|session|application|page"/>，但此处代码有误，仅作为注释说明意图 --%>
+<c:set var="host" value="localhost:8080/wechat"/> <%-- 设置主机名（此行代码有误，应包含在<c:set>标签内部，并指定作用域）--%>
+<%-- JSP注释，不会输出到客户端 --%>
+
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8"> <%-- 设置网页的字符编码为UTF-8 --%>
 
-    <title>wechat</title>
+    <title>wechat</title> <%-- 网页标题 --%>
+    <%-- 设置网页的图标，这里使用的是微信的一个图标链接 --%>
     <link rel="shortcut icon" type=image/x-icon href=https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico>
+    <%-- 引入Bootstrap的CSS文件，用于快速开发响应式页面 --%>
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <%-- 引入jQuery库，用于简化JavaScript的DOM操作和Ajax请求 --%>
     <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
+
     <!--BEGIN——发送请求脚本-->
     <script>
-        //post方法
+        // 定义postRequest函数，用于发送POST请求
         function postRequest(url, request, callback) {
             $.post(url, request, function (data, status) {
+                // 检查请求状态
                 if (status === 'error') {
                     alert("请求发送失败，请刷新浏览器重试或检查网络");
                 }
+                // 解析返回的JSON数据（这里使用eval有安全风险，建议使用JSON.parse）
                 var result = eval("(" + data + ")");
+                // 显示可能的消息提示
                 if (result.message != null && result.message !== '') {
                     alert("系统提示：" + result.message);
                 }
+                // 调用回调函数处理结果
                 callback(result);
-
             });
         }
 
-        //ajax方法
+        // 定义ajaxJsonRequest函数，用于发送JSON格式的POST请求
         function ajaxJsonRequest(url, data, callback) {
             $.ajax({
                 url: url,
                 type: 'POST',
-                data: data,
+                data: JSON.stringify(data), // 将数据转换为JSON字符串
                 dataType: 'json',
                 contentType: 'application/json',
                 success: function (data) {
+                    // 显示可能的消息提示
                     if (data.message != null && data.message !== '') {
                         alert("系统提示：" + data.message);
                     }
+                    // 调用回调函数处理结果
                     callback(data);
                 },
-                Error: function (xhr, error, exception) {
+                // 注意：这里的Error应该是error，JavaScript是大小写敏感的
+                error: function (xhr, error, exception) {
+                    // 显示错误提示
                     alert("请求发送失败，请刷新浏览器重试或检查网络");
                     alert(exception.toString());
-                    callback(data);
+                    // 注意：这里的callback(data);应该避免，因为data在这个作用域内未定义
+                    // 可以选择不调用callback，或者定义一个错误处理的结果传递给callback
                 }
             });
         }
-
-
     </script>
     <!--END——发送请求脚本-->
 </head>
 <body>
+<!-- 页面主体，设置背景颜色为浅灰色 -->
 <div class="page-body" style="background-color: #eee;">
-    <img id="background" src="${pageContext.request.contextPath}/upload/photo/${sessionScope.login.chatBackground}"
+    <!-- 背景图片，通过服务器路径动态加载 -->
+    <img id="background"
+         src="${pageContext.request.contextPath}/upload/photo/${sessionScope.login.chatBackground}"
          style="position: absolute;height: 100%;width: 100%">
 
-
-    <!--BEGIN——菜单列表-->
+    <!-- 菜单列表开始 -->
     <div class="menu">
+        <!-- 菜单头部 -->
         <div class="menu-head">
+            <!-- 菜单头部照片，点击时显示用户信息框 -->
             <div class="menu-head-photo">
                 <img src="${pageContext.request.contextPath}/upload/photo/${sessionScope.login.photo}"
                      class="menu-head-img"
                      onclick="showWindowOnRight('user-info-box')">
             </div>
+            <!-- 菜单头部信息，显示用户名 -->
             <div class="menu-head-info">
                 <h3 class="menu-head-nickname">${sessionScope.login.name}</h3>
             </div>
         </div>
+
+        <!-- 搜索框 -->
         <div class="menu-search">
             <i class="menu-search-icon"></i>
+            <!-- 输入框，用于搜索用户，输入时触发搜索功能 -->
             <input id="keyword" type="text" placeholder="搜索用户" class="menu-search-bar" oninput="enterClick('search')">
+            <!-- 搜索按钮，点击时调用搜索用户函数 -->
             <div id="search" onclick="searchUser()" class="search-button">搜索</div>
         </div>
+
+        <!-- 菜单选项 -->
         <div class="menu-option">
+            <!-- 聊天按钮，点击时显示聊天列表 -->
             <div class="menu-option-item">
                 <div id="chat" onclick="showWindowOnLeft('chat-list')" class="menu-option-button">聊天</div>
             </div>
+            <!-- 通讯录按钮，点击时显示通讯录列表 -->
             <div class="menu-option-item">
                 <div id="friend" onclick="showWindowOnLeft('friend-list')" class="menu-option-button">通讯录</div>
             </div>
+            <!-- 设置按钮，点击时显示设置列表 -->
             <div class="menu-option-item">
                 <div id="setting" onclick="showWindowOnLeft('setting-list')" class="menu-option-button">设置</div>
             </div>
+            <!-- 朋友圈按钮，点击时显示朋友圈列表 -->
             <div class="menu-option-item">
                 <div id="moment" onclick="showWindowOnLeft('moment-list')" class="menu-option-button">朋友圈</div>
             </div>
-
         </div>
-        <!--BEGIN——功能列表-->
+
+        <!-- 功能列表开始，默认加载聊天列表 -->
         <div id="menu-body" class="menu-body" data-window="chat-list" onload="document.getElementById('chat').click()">
+            <!-- 聊天列表容器，默认显示 -->
             <div id="chat-list" style="display: block"></div>
+            <!-- 通讯录列表容器，默认隐藏 -->
             <div id="friend-list" style="display: none">
-                <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
+                <!-- 添加好友按钮 -->
+                <button class="user-list-block-href"
+                        onmouseover="this.style.backgroundColor='#3A3F45'"
                         onmouseout="this.style.backgroundColor='#2e3238';"
                         onclick="document.getElementById('search').click()">
                     <div class="user-list-block">
@@ -131,7 +165,9 @@
                         </div>
                     </div>
                 </button>
-                <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
+                <!-- 创建群聊按钮 -->
+                <button class="user-list-block-href"
+                        onmouseover="this.style.backgroundColor='#3A3F45'"
                         onmouseout="this.style.backgroundColor='#2e3238';"
                         onclick="createChat()">
                     <div class="user-list-block">
@@ -143,7 +179,9 @@
                         </div>
                     </div>
                 </button>
-                <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
+                <!-- 加入群聊按钮 -->
+                <button class="user-list-block-href"
+                        onmouseover="this.style.backgroundColor='#3A3F45'"
                         onmouseout="this.style.backgroundColor='#2e3238';"
                         onclick="joinChat()">
                     <div class="user-list-block">
@@ -156,98 +194,85 @@
                     </div>
                 </button>
             </div>
-            <div id="article-list" style="display: none"></div>
-            <div id="moment-list" style="display: none">
-                <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
-                        onmouseout="this.style.backgroundColor='#2e3238';"
-                        onclick="showWindowOnRight('post-moment-box')">
-                    <div class="user-list-block">
-                        <div class="user-box">
-                            <div class="user-info">
-                                <h3 class="my-name">发朋友圈</h3>
-                                <p class="my-message">发布一条自己的朋友圈分享自己的动态</p>
-                            </div>
-                        </div>
-                    </div>
-                </button>
-                <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
-                        onmouseout="this.style.backgroundColor='#2e3238';"
-                        onclick="loadNews(document.getElementById('news-box').dataset.page)">
-                    <div class="user-list-block">
-                        <div class="user-box">
-                            <div class="user-info">
-                                <h3 class="my-name">查看朋友圈</h3>
-                                <p class="my-message">查看自己和朋友发的朋友圈</p>
-                            </div>
-                        </div>
-                    </div>
-                </button>
-                <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
-                        onmouseout="this.style.backgroundColor='#2e3238';"
-                        onclick="loadMyMoment(document.getElementById('moment-box').dataset.page)">
-                    <div class="user-list-block">
-                        <div class="user-box">
-                            <div class="user-info">
-                                <h3 class="my-name">我的朋友圈</h3>
-                                <p class="my-message">查看自己发布的朋友圈</p>
-                            </div>
-                        </div>
-                    </div>
-                </button>
-                <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
-                        onmouseout="this.style.backgroundColor='#2e3238';"
-                        onclick="loadPhoto(document.getElementById('photo-box').dataset.page)">
-                    <div class="user-list-block">
-                        <div class="user-box">
-                            <div class="user-info">
-                                <h3 class="my-name">朋友圈相册</h3>
-                                <p class="my-message">查看自己朋友圈中的照片</p>
-                            </div>
-                        </div>
-                    </div>
-                </button>
+        </div>
+        <!-- 功能列表结束 -->
+    </div>
+    <!-- 菜单列表结束 -->
+</div>
+</body>
+<!-- 隐藏的文章列表区域，初始时不显示 -->
+<div id="article-list" style="display: none"></div>
+
+<!-- 隐藏的朋友圈列表区域，初始时不显示 -->
+<div id="moment-list" style="display: none">
+    <!-- 发朋友圈按钮 --><!-- 鼠标悬停时改变背景色 --><!-- 鼠标移开时恢复背景色 -->
+    <button class="user-list-block-href"
+            onmouseover="this.style.backgroundColor='#3A3F45'"onmouseout="this.style.backgroundColor='#2e3238';" onclick="showWindowOnRight('post-moment-box')"> <!-- 点击时调用函数显示发布朋友圈的窗口 -->
+    <div class="user-list-block">
+        <div class="user-box">
+            <div class="user-info">
+                <h3 class="my-name">发朋友圈</h3> <!-- 按钮标题 -->
+                <p class="my-message">发布一条自己的朋友圈分享自己的动态</p> <!-- 按钮描述 -->
             </div>
-            <div id="setting-list" style="display: none">
-                <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
-                        onmouseout="this.style.backgroundColor='#2e3238';"
-                        onclick="showWindowOnRight('user-info-box')">
-                    <div class="user-list-block">
-                        <div class="user-box">
-                            <div class="user-info">
-                                <h3 class="my-name">更新个人信息</h3>
-                                <p class="my-message">更新昵称/头像/个性签名/微信号/...</p>
-                            </div>
-                        </div>
-                    </div>
-                </button>
-                <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
-                        onmouseout="this.style.backgroundColor='#2e3238';"
-                        onclick="updatePassword()">
-                    <div class="user-list-block">
-                        <div class="user-box">
-                            <div class="user-info">
-                                <h3 class="my-name">更新登陆密码</h3>
-                                <p class="my-message">更新账户的登陆密码</p>
-                            </div>
-                        </div>
-                    </div>
-                </button>
-                <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
-                        onmouseout="this.style.backgroundColor='#2e3238';"
-                        onclick="document.getElementById('background-upload').click()">
-                    <input type="file" name="file" id="background-upload"
-                           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
-                           oninput="updateBackground()"
-                           style="display: none">
-                    <div class="user-list-block">
-                        <div class="user-box">
-                            <div class="user-info">
-                                <h3 class="my-name">更换聊天背景</h3>
-                                <p class="my-message">上传一张自己的图片作为聊天窗口的背景图</p>
-                            </div>
-                        </div>
-                    </div>
-                </button>
+        </div>
+    </div>
+    </button>
+
+    <!-- 查看朋友圈按钮 -->
+    <button class="user-list-block-href"
+            onmouseover="this.style.backgroundColor='#3A3F45'"
+            onmouseout="this.style.backgroundColor='#2e3238';"
+            onclick="loadNews(document.getElementById('news-box').dataset.page)"> <!-- 点击时加载朋友圈 -->
+        <!-- 类似的结构，省略了内部HTML以节省空间 -->
+    </button>
+
+    <!-- 我的朋友圈按钮 -->
+    <button class="user-list-block-href"
+            onmouseover="this.style.backgroundColor='#3A3F45'"
+            onmouseout="this.style.backgroundColor='#2e3238';"
+            onclick="loadMyMoment(document.getElementById('moment-box').dataset.page)"> <!-- 点击时加载我的朋友圈 -->
+        <!-- 类似的结构，省略了内部HTML -->
+    </button>
+
+    <!-- 朋友圈相册按钮 -->
+    <button class="user-list-block-href"
+            onmouseover="this.style.backgroundColor='#3A3F45'"
+            onmouseout="this.style.backgroundColor='#2e3238';"
+            onclick="loadPhoto(document.getElementById('photo-box').dataset.page)"> <!-- 点击时加载朋友圈相册 -->
+        <!-- 类似的结构，省略了内部HTML -->
+    </button>
+</div>
+
+<!-- 隐藏的设置列表区域，初始时不显示 -->
+<div id="setting-list" style="display: none">
+    <!-- 更新个人信息按钮 -->
+    <button class="user-list-block-href"
+            onmouseover="this.style.backgroundColor='#3A3F45'"
+            onmouseout="this.style.backgroundColor='#2e3238';"
+            onclick="showWindowOnRight('user-info-box')"> <!-- 点击时显示更新个人信息的窗口 -->
+        <!-- 类似的结构，省略了内部HTML -->
+    </button>
+
+    <!-- 更新登陆密码按钮 -->
+    <button class="user-list-block-href"
+            onmouseover="this.style.backgroundColor='#3A3F45'"
+            onmouseout="this.style.backgroundColor='#2e3238';"
+            onclick="updatePassword()"> <!-- 点击时更新密码 -->
+        <!-- 类似的结构，省略了内部HTML -->
+    </button>
+
+    <!-- 更换聊天背景按钮 -->
+    <button class="user-list-block-href"
+            onmouseover="this.style.backgroundColor='#3A3F45'"
+            onmouseout="this.style.backgroundColor='#2e3238';"
+            onclick="document.getElementById('background-upload').click()"> <!-- 点击时触发隐藏的文件上传按钮 -->
+        <input type="file" name="file" id="background-upload"
+               accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+               oninput="updateBackground()"
+               style="display: none"> <!-- 隐藏的文件上传输入框 -->
+        <!-- 类似的结构，省略了内部HTML -->
+    </button>
+</div>
                 <button class="user-list-block-href" onmouseover="this.style.backgroundColor='#3A3F45'"
                         onmouseout="this.style.backgroundColor='#2e3238';"
                         onclick="logout()">
@@ -481,269 +506,535 @@
 </div>
 <!--BEGIN——监听键盘-->
 <script>
+    // 定义一个名为enterClick的函数，该函数接受一个参数button_id，表示要触发点击事件的按钮的ID
     function enterClick(button_id) {
+        // 为整个文档添加一个keydown事件监听器
+        // 当用户在键盘上按下任意键时，会触发这个监听器
         document.onkeydown = function (event) {
+            // 创建一个变量e来存储事件对象
+            // 这里的逻辑是为了兼容不同的浏览器获取事件对象的方式
             var e = event || window.event || arguments.callee.caller.arguments[0];
+
+            // 检查事件对象是否存在，并且按下的键是否是Enter键（键码为13）
             if (e && e.keyCode === 13) {
+                // 阻止事件冒泡（即阻止事件进一步向上传播到DOM树的更高层次）
                 event.cancelBubble = true;
+
+                // 阻止事件的默认行为（例如，在表单中按下Enter键可能会提交表单）
                 event.preventDefault();
+
+                // 停止事件传播（与cancelBubble类似，但更现代的方式）
                 event.stopPropagation();
+
+                // 使用JavaScript模拟点击具有指定ID的按钮
+                // 这将触发与该按钮关联的所有事件（如onclick事件处理器）
                 document.getElementById(button_id).click();
             }
         };
     }
 </script>
-<!--END——监听键盘-->
+
+<!-- 注释：这段代码的目的是允许用户通过按下Enter键来触发页面上某个按钮的点击事件。
+         这可以在表单提交、搜索查询或其他需要键盘交互的场景中非常有用。
+         要使用这个函数，你需要在页面加载后调用它，并传入你想要通过Enter键触发的按钮的ID。
+         例如：enterClick('myButtonId'); 其中'myButtonId'是你想要模拟点击的按钮的ID。 -->
 
 <!--BEGIN——程序执行脚本-->
 <script>
-
-
-    //创建群聊
+    // 定义一个名为createChat的函数，用于创建群聊
     function createChat() {
+        // 弹出一个对话框，提示用户输入群聊名称，默认名称为"广工夸夸群"
         var name = prompt("请输入群聊名称", "广工夸夸群");
+        // 如果用户取消输入，则name为null，函数直接返回，不继续执行
         if (name == null) {
             return;
         }
+        // 如果用户未输入任何内容（只按了确定），则显示警告并使用默认名称（但此逻辑在代码中未实际设置默认名称，可能是个遗漏）
         if (name === '') {
             alert("您没有设置群聊名称，将使用默认名称");
+            // 注意：这里应该设置name为默认名称，但代码中未实现
         }
+
+        // 弹出一个对话框，提示用户输入群号
         var number = prompt("请输入群号", "");
+        // 如果用户取消输入，则函数直接返回，不继续执行
         if (number == null) {
             return;
         }
+        // 如果用户未输入群号（只按了确定），则显示警告并退出函数
         if (number === '') {
             alert("群号不可为空，必须由6-20位数字组成");
             return;
         }
+        // 注意：这里应该添加对number是否为6-20位数字的检查，但代码中未实现
 
+        // 构建请求URL，注意这里的${host}是模板字符串的占位符，需要在服务器端或前端框架中替换为实际的主机地址
         var url = "http://${host}/wechat/chat?method=add.do";
+
+        // 构建请求体，包含当前登录用户的ID、群聊名称和群号
+        // 注意：这里的${sessionScope.login.id}同样是模板字符串的占位符，需要在服务器端或前端框架中替换为实际的用户ID
         var request = JSON.stringify({
             owner_id: "${sessionScope.login.id}",
             name: name,
             number: number
         });
+
+        // 发送AJAX请求到服务器，创建群聊
+        // 假设ajaxJsonRequest是一个自定义的函数，用于发送JSON格式的AJAX请求，并处理响应
         ajaxJsonRequest(url, request, function (result) {
+            // 检查服务器响应的状态码，如果为"SUCCESS"，则表示群聊创建成功
             if (result.status === "SUCCESS") {
+                // 调用addChat函数（未在代码中定义，可能是另一个自定义函数），将新创建的群聊添加到某个列表中
                 addChat(number);
             }
-        })
-    }
-
-    //修改好友信息
-    function updateFriend(id) {
-        var alias = prompt("请输入好友昵称", "蔡徐坤");
-        if (alias == null) {
-            return;
-        }
-        if (alias === '') {
-            alert("昵称不能为空");
-            return;
-        }
-        var description = prompt("请输入好友描述", "灵魂篮球练习生");
-        var url = "http://${host}/wechat/friend?method=update.do";
-        var request = JSON.stringify({
-            id: id,
-            alias: alias,
-            description: description
+            // 如果状态码不是"SUCCESS"，则可以在这里添加错误处理逻辑（但代码中未实现）
         });
-        ajaxJsonRequest(url, request, function (result) {
-            if (result.status === "SUCCESS") {
-                loadFriendList();
+
+
+        //修改好友信息
+        // 定义一个名为updateFriend的函数，它接收一个参数id，代表要更新信息的好友ID
+        function updateFriend(id) {
+            // 使用prompt函数弹出一个对话框，提示用户输入好友昵称，默认值为"蔡徐坤"
+            // prompt函数返回用户输入的值，如果用户取消输入，则返回null
+            var alias = prompt("请输入好友昵称", "蔡徐坤");
+
+            // 如果用户取消了输入（即alias为null），则直接返回，不执行后续操作
+            if (alias == null) {
+                return;
             }
-        })
-    }
 
-    //加入群聊
-    function joinChat() {
-        var number = prompt("请输入群号", "");
-        if (number == null) {
-            return;
+            // 如果用户输入了空字符串（即没有输入任何内容），则弹出警告对话框，提示昵称不能为空，并返回不执行后续操作
+            if (alias === '') {
+                alert("昵称不能为空");
+                return;
+            }
+
+            // 使用prompt函数再次弹出一个对话框，提示用户输入好友描述，默认值为"灵魂篮球练习生"
+            var description = prompt("请输入好友描述", "灵魂篮球练习生");
+
+            // 定义一个URL字符串，用于发送AJAX请求。这里${host}应该是一个占位符，表示服务器的地址，但在这个上下文中它不会被正确解析
+            // 正确的做法是在定义url之前确保host变量已经被正确赋值，或者使用字符串拼接的方式动态构建url
+            var url = "http://${host}/wechat/friend?method=update.do";
+
+            // 创建一个JSON对象，包含要发送到服务器的数据：好友ID、昵称和描述
+            var request = JSON.stringify({
+                id: id,
+                alias: alias,
+                description: description
+            });
+
+            // 调用一个名为ajaxJsonRequest的函数，发送一个AJAX请求到服务器
+            // 这个函数应该接收三个参数：请求的URL、要发送的数据（JSON字符串）、以及一个回调函数
+            // 回调函数会在请求完成后被调用，其参数result包含了服务器返回的结果
+            ajaxJsonRequest(url, request, function (result) {
+                // 检查服务器返回的结果状态
+                if (result.status === "SUCCESS") {
+                    // 如果状态为"SUCCESS"，则调用loadFriendList函数，可能是为了刷新好友列表
+                    loadFriendList();
+                }
+            });
         }
-        if (number === '') {
-            alert("群号不可为空");
-            return;
+    //加入群聊//
+        // 定义一个名为joinChat的函数，没有参数
+        function joinChat() {
+            // 使用prompt函数弹出一个对话框，提示用户输入群号，默认值为空字符串
+            var number = prompt("请输入群号", "");
+
+            // 如果用户取消了输入（即number为null），则直接返回，不执行后续操作
+            if (number == null) {
+                return;
+            }
+
+            // 如果用户输入了空字符串（即没有输入任何群号），则弹出警告对话框，提示群号不可为空，并返回不执行后续操作
+            if (number === '') {
+                alert("群号不可为空");
+                return;
+            }
+
+            // 使用prompt函数再次弹出一个对话框，提示用户输入加群申请，该申请会作为用户的第一条消息发送到群聊中，默认值为空字符串
+            var apply = prompt("请输入加群申请(加群申请会作为你的第一条消息发送到群聊中)", "");
+
+            // 使用confirm函数弹出一个确认对话框，询问用户是否确定发送加群申请
+            if (confirm("是否确定发送加群申请？")) {
+                // 这里的URL字符串包含了一个占位符${host}，它应该被替换为服务器的实际地址
+                // 但在这个上下文中，它不会被正确解析。正确的做法是使用字符串拼接来构建URL
+                var url = "http://${host}/wechat/chat";
+
+                // 创建一个对象，包含要发送到服务器的数据：方法名、用户ID（这里使用了另一个占位符${sessionScope.login.id}，它同样需要被替换为实际的用户ID）、群号和加群申请
+                // 注意：${sessionScope.login.id}这种占位符在JavaScript中通常不会被解析，它可能来自服务器端的模板引擎
+                var request = {
+                    method: "join.do",
+                    user_id: ${sessionScope.login.id}, // 这行代码在JavaScript中不会工作，需要替换为实际的用户ID
+                    number: number,
+                    apply: apply
+                };
+
+                // 调用一个名为postRequest的函数，发送一个POST请求到服务器
+                // 这个函数应该接收三个参数：请求的URL、要发送的数据（对象）、以及一个回调函数
+                // 回调函数会在请求完成后被调用，其参数result包含了服务器返回的结果
+                postRequest(url, request, function (result) {
+                    // 检查服务器返回的结果状态
+                    if (result.status === "SUCCESS") {
+                        // 如果状态为"SUCCESS"，则调用addChat函数，可能是为了将新加入的群聊添加到用户的聊天列表中
+                        // 注意：addChat函数在这段代码中没有定义，假设它在其他地方被定义
+                        addChat(number);
+                    }
+                });
+            } else {
+                // 如果用户取消了发送加群申请的确认，则直接返回，不执行后续操作
+                return;
+            }
         }
-        var apply = prompt("请输入加群申请(加群申请会作为你的第一条消息发送到群聊中)", "");
-        if (confirm("是否确定发送加群申请？")) {
+    //加载一个聊天
+        // 定义一个名为addChat的函数，接收一个参数number，代表群聊的编号
+        function addChat(number) {
+            // 这里的URL字符串包含了一个占位符${host}，它应该被替换为服务器的实际地址
+            // 但在JavaScript中，这种占位符不会被自动解析。正确的做法是使用字符串拼接或ES6模板字符串（需要反引号）
+            // 并确保host变量在JavaScript上下文中是可用的
             var url = "http://${host}/wechat/chat";
+
+            // 创建一个对象，包含要发送到服务器的数据：方法名、用户ID（这里使用了另一个占位符${sessionScope.login.id}）和群聊编号
+            // 注意：${sessionScope.login.id}这种占位符在JavaScript中不会工作，需要替换为实际的用户ID
             var request = {
-                method: "join.do",
-                user_id: ${sessionScope.login.id},
-                number: number,
-                apply: apply
+                method: "get.do", // 假设这是服务器处理GET请求的方法名
+                user_id: ${sessionScope.login.id}, // 这行代码在JavaScript中不会工作，需要替换为实际的用户ID
+                number: number // 群聊编号
             };
+
+            // 调用一个名为postRequest的函数，发送一个请求到服务器
+            // 注意：尽管函数名为postRequest，但根据请求的数据和方法名，这里可能是一个GET请求（取决于服务器端的实现）
+            // postRequest函数应该接收三个参数：请求的URL、要发送的数据（对象）、以及一个回调函数
+            // 回调函数会在请求完成后被调用，其参数result包含了服务器返回的结果
             postRequest(url, request, function (result) {
+                // 从返回的结果中提取群聊数据
+                var chat = result.data;
+
+                // 检查服务器返回的结果状态
                 if (result.status === "SUCCESS") {
-                    addChat(number);
+                    // 如果状态为"SUCCESS"，则调用loadChatListOnMenu函数，可能是为了更新菜单上的聊天列表
+                    // 注意：loadChatListOnMenu函数在这段代码中没有定义，假设它在其他地方被定义
+                    loadChatListOnMenu(chat);
+
+                    // 调用loadChatBox函数，可能是为了加载或更新当前选中的聊天框
+                    // 注意：loadChatBox函数在这段代码中没有定义，假设它在其他地方被定义
+                    loadChatBox(chat);
+
+                    // 调用loadUnReadMessageInAChat函数，可能是为了加载或更新指定聊天中的未读消息数
+                    // 注意：loadUnReadMessageInAChat函数在这段代码中没有定义，假设chat.id是群聊的唯一标识符，1可能表示某种状态或标志
+                    loadUnReadMessageInAChat(chat.id, 1);
                 }
+                // 如果结果状态不是"SUCCESS"，则这里没有处理逻辑。在实际应用中，可能需要添加错误处理或用户通知。
             });
-        } else {
-            return;
         }
-    }
 
-    //加载一个聊天
-    function addChat(number) {
-        var url = "http://${host}/wechat/chat";
-        var request = {
-            method: "get.do",
-            user_id: ${sessionScope.login.id},
-            number: number
-        };
-        postRequest(url, request, function (result) {
-            var chat = result.data;
-            if (result.status === "SUCCESS") {
-                loadChatListOnMenu(chat);
-                loadChatBox(chat);
-                loadUnReadMessageInAChat(chat.id, 1);
+    //更新密码
+        // 定义一个名为updatePassword的函数，该函数不接受任何参数
+        function updatePassword() {
+            // 使用prompt函数提示用户输入旧密码，并将输入值存储在old_password变量中
+            // 如果用户取消输入（点击取消按钮或关闭prompt对话框），则old_password将为null
+            var old_password = prompt("请输入旧密码", "");
+
+            // 如果用户没有输入旧密码（即点击了取消按钮或关闭了对话框），则直接返回，不执行后续操作
+            if (old_password == null) {
+                return;
             }
-        });
-    }
 
-    //更新密码
-    function updatePassword() {
-        var old_password = prompt("请输入旧密码", "");
-        if (old_password == null) {
-            return;
+            // 使用prompt函数提示用户输入新密码，并将输入值存储在new_password变量中
+            // 如果用户取消输入，则new_password将为null
+            var new_password = prompt("请输入新密码", "");
+
+            // 如果用户没有输入新密码，则直接返回，不执行后续操作
+            if (new_password == null) {
+                return;
+            }
+
+            // 检查新密码是否为空字符串，如果是，则显示一个警告对话框，提示用户密码必须为6-20位英文字母、数字或下划线组成
+            // 注意：这里的检查只针对空字符串，并没有检查密码的长度或字符组成
+            if (new_password === '') {
+                alert("密码必须为6-20位英文字母，数字或下划线组成");
+                return;
+            }
+
+            // 这里的URL字符串包含了一个占位符${host}，它应该被替换为服务器的实际地址
+            // 但在JavaScript中，这种占位符不会被自动解析。正确的做法是使用字符串拼接或ES6模板字符串（需要反引号）
+            // 并确保host变量在JavaScript上下文中是可用的
+            var url = "http://${host}/wechat/user";
+
+            // 创建一个对象，包含要发送到服务器的数据：方法名、用户ID（使用了另一个占位符${sessionScope.login.id}）、旧密码和新密码
+            // 注意：${sessionScope.login.id}这种占位符在JavaScript中不会工作，需要替换为实际的用户ID
+            var request = {
+                method: "updatepassword.do", // 假设这是服务器处理密码更新请求的方法名
+                user_id: ${sessionScope.login.id}, // 这行代码在JavaScript中不会工作，需要替换为实际的用户ID
+                old_password: old_password, // 用户输入的旧密码
+                new_password: new_password // 用户输入的新密码
+            };
+
+            // 调用一个名为postRequest的函数，发送一个POST请求到服务器
+            // 注意：postRequest函数在这段代码中没有定义，假设它在其他地方被定义，并且接受三个参数：请求的URL、要发送的数据（对象）、以及一个回调函数
+            // 回调函数在这个例子中没有被实现，但在实际应用中，它应该用于处理服务器返回的结果，比如显示成功或错误消息
+            postRequest(url, request, function (result) {
+                // 这里可以添加处理服务器返回结果的代码
+                // 比如：
+                // if (result.status === "SUCCESS") {
+                //     alert("密码更新成功！");
+                // } else {
+                //     alert("密码更新失败：" + result.message);
+                // }
+            });
         }
-        var new_password = prompt("请输入新密码", "");
-        if (new_password == null) {
-            return;
+
+    //注销登陆
+        // 定义一个名为logout的函数，该函数不接受任何参数
+        function logout() {
+            // 使用confirm函数显示一个确认对话框，询问用户是否确定要退出登录
+            // 如果用户点击“确定”，则返回true；如果用户点击“取消”，则返回false
+            if (confirm("是否确定要退出登陆？注销之后你需要重新登陆")) {
+
+                // 这里的URL字符串包含了一个占位符${host}，它应该被替换为服务器的实际地址
+                // 但在JavaScript中，这种占位符不会被自动解析。正确的做法是使用字符串拼接或ES6模板字符串（需要反引号）
+                // 并确保host变量在JavaScript上下文中是可用的
+                var url = 'http://${host}/wechat/user';
+
+                // 创建一个对象，包含要发送到服务器的数据：方法名和用户ID（使用了另一个占位符${sessionScope.login.id}）
+                // 注意：${sessionScope.login.id}这种占位符在JavaScript中不会工作，需要替换为实际的用户ID
+                var request = {
+                    method: "logout.do", // 假设这是服务器处理注销请求的方法名
+                    user_id: ${sessionScope.login.id} // 这行代码在JavaScript中不会工作，需要替换为实际的用户ID
+                };
+
+                // 显示一个警告对话框，告知用户正在退出登录
+                alert("正在退出登陆，请稍后...");
+
+                // 调用一个名为postRequest的函数，发送一个POST请求到服务器
+                // 注意：postRequest函数在这段代码中没有定义，假设它在其他地方被定义，并且接受三个参数：请求的URL、要发送的数据（对象）、以及一个回调函数
+                // 回调函数在这个例子中用于处理服务器返回的结果
+                postRequest(url, request, function (result) {
+                    // 检查服务器返回的结果状态
+                    if (result.status === 'SUCCESS') {
+                        // 如果注销成功，则重定向用户到登录页面
+                        // 注意：这里的${pageContext.request.contextPath}同样是一个占位符，它需要在服务器端被解析为应用的上下文路径
+                        // 在JavaScript中，你需要使用其他方式来获取这个路径，比如通过隐藏字段、全局变量或直接在JavaScript中硬编码
+                        window.location.href = '${pageContext.request.contextPath}/login.jsp';
+                    }
+                    // 如果注销失败，这里可以添加额外的处理逻辑，比如显示错误消息
+                    // 但在这个例子中，没有为失败情况编写处理代码
+                });
+
+            } else {
+                // 如果用户点击了取消按钮，则直接返回，不执行后续操作
+                return;
+            }
         }
-        if (new_password === '') {
-            alert("密码必须为6-20位英文字母，数字或下划线组成");
-            return;
+
+    //请求搜索用户结果
+        // 定义一个名为searchUser的函数，该函数不接受任何参数
+        function searchUser() {
+            // 从ID为"keyword"的DOM元素（通常是一个输入框）中获取用户输入的昵称
+            var name = document.getElementById("keyword").value;
+
+            // 检查输入框是否为空
+            if (name === '') {
+                // 如果为空，则显示一个警告对话框，提示用户输入昵称
+                alert("请在输入框输入用户的昵称进行搜索");
+                // 将焦点设置回输入框，方便用户直接开始输入
+                document.getElementById('keyword').focus();
+                // 终止函数的执行，不发送搜索请求
+                return;
+            }
+
+            // 定义一个URL字符串，它包含了一个占位符${host}，这个占位符应该在服务器端被替换为实际的服务器地址
+            // 在JavaScript中，你需要确保这个URL在发送请求之前是正确的
+            var url = "http://${host}/wechat/user";
+
+            // 创建一个对象，包含要发送到服务器的数据：方法名（"list.do"）和用户昵称（name）
+            var request = {
+                method: "list.do", // 假设这是服务器处理搜索请求的方法名
+                name: name // 用户输入的昵称
+            };
+
+            // 调用一个名为postRequest的函数，发送一个POST请求到服务器
+            // 注意：postRequest函数在这段代码中没有定义，假设它在其他地方被定义，并且接受三个参数：请求的URL、要发送的数据（对象）、以及一个回调函数
+            // 回调函数在这个例子中用于处理服务器返回的结果
+            postRequest(url, request, function (result) {
+                // 从服务器返回的结果中获取用户数据
+                var users = result.data;
+
+                // 检查返回的用户数据是否为空（即没有找到用户）
+                if (users.length == 0) {
+                    // 如果没有找到用户，则直接返回，不执行后续操作
+                    // 注意：这里可以添加一些额外的处理逻辑，比如显示一个消息告诉用户没有找到结果
+                    return;
+                }
+
+                // 调用一个名为loadSearchResult的函数，这个函数可能用于初始化搜索结果页面或区域
+                // 注意：loadSearchResult函数在这段代码中没有定义，假设它在其他地方被定义
+                loadSearchResult();
+
+                // 遍历返回的用户数据，对每个用户调用addSearchUserResultHtml函数来添加搜索结果到页面
+                for (var i = 0; i < users.length; i++) {
+                    // 假设addSearchUserResultHtml函数接受一个用户对象作为参数，并将该用户以某种形式添加到页面
+                    // 注意：addSearchUserResultHtml函数在这段代码中没有定义，假设它在其他地方被定义
+                    addSearchUserResultHtml(users[i]);
+                }
+            });
         }
-        var url = "http://${host}/wechat/user";
-        var request = {
-            method: "updatepassword.do",
-            user_id: ${sessionScope.login.id},
-            old_password: old_password,
-            new_password: new_password
-        };
-        postRequest(url, request, function (result) {
-        });
-    }
 
-    //注销登陆
-    function logout() {
-        if (confirm("是否确定要退出登陆？注销之后你需要重新登陆")) {
-            var url = 'http://${host}/wechat/user';
+    //显示群成员
+        // 定义一个名为showChatMember的函数，该函数接受一个参数chat_id，表示聊天室的唯一标识符
+        function showChatMember(chat_id) {
+            // 显示一个警告对话框，告知用户正在加载聊天信息
+            alert("正在加载聊天信息，请稍后...");
+
+            // 定义一个URL字符串，用于向服务器发送请求以获取聊天室成员信息
+            // 注意：这里的URL包含了一个占位符${host}，它应该在服务器端被替换为实际的服务器地址
+            // 在JavaScript中，你需要确保这个URL在发送请求之前是正确的
+            var url = "http://${host}/wechat/chat";
+
+            // 创建一个对象，包含要发送到服务器的数据：方法名（"member.do"）和聊天室ID（chat_id）
             var request = {
-                method: "logout.do",
-                user_id: ${sessionScope.login.id},
+                method: "member.do", // 假设这是服务器处理获取聊天室成员请求的方法名
+                chat_id: chat_id     // 调用函数时传入的聊天室ID
             };
-            alert("正在退出登陆，请稍后...");
+
+            // 调用一个名为postRequest的函数，用于发送POST请求到服务器
+            // 注意：postRequest函数在这段代码中没有定义，我们假设它在其他地方被定义，并且接受三个参数：请求的URL、要发送的数据（对象）、以及一个回调函数
+            // 回调函数在这个例子中用于处理服务器返回的结果
             postRequest(url, request, function (result) {
-                if (result.status === 'SUCCESS') {
-                    window.location.href = '${pageContext.request.contextPath}/login.jsp';
+                // 从服务器返回的结果中获取聊天室成员数据
+                var members = result.data;
+
+                // 检查返回的成员数据是否为空（即聊天室中没有成员）
+                if (members.length === 0) {
+                    // 如果没有成员，则直接返回，不执行后续操作
+                    // 注意：这里可以添加一些额外的处理逻辑，比如显示一个消息告诉用户聊天室为空
+                    return;
+                }
+
+                // 调用一个名为loadChatInfoHead的函数，可能用于加载聊天室的头部信息或初始化页面上的某个区域
+                // 注意：loadChatInfoHead函数在这段代码中没有定义，我们假设它在其他地方被定义，并且接受一个参数：聊天室ID
+                loadChatInfoHead(chat_id);
+
+                // 遍历返回的成员数据，对每个成员调用addMemberHtml函数来将成员信息添加到页面
+                for (var i = 0; i < members.length; i++) {
+                    // 假设addMemberHtml函数接受一个成员对象作为参数，并将该成员以某种形式（如HTML元素）添加到页面
+                    // 注意：addMemberHtml函数在这段代码中没有定义，我们假设它在其他地方被定义
+                    addMemberHtml(members[i]);
                 }
             });
-        } else {
-            return;
         }
-    }
 
+        // 清除聊天记录的函数
+        function deleteChatMessage(chat_id) {
+            // 定义一个URL字符串，用于向服务器发送请求以删除指定聊天室的聊天记录
+            // 注意：这里的URL包含了一个占位符${host}，它应该在服务器端被替换为实际的服务器地址
+            var url = "http://${host}/wechat/message";
 
-    //请求搜索用户结果
-    function searchUser() {
-        var name = document.getElementById("keyword").value;
-        if (name === '') {
-            alert("请在输入框输入用户的昵称进行搜索");
-            document.getElementById('keyword').focus();
-            return;
+            // 创建一个对象，包含要发送到服务器的数据：方法名（"clear.do"）、聊天室ID（chat_id）和当前登录用户的ID（从会话作用域中获取）
+            var request = {
+                method: "clear.do", // 假设这是服务器处理删除聊天记录请求的方法名
+                chat_id: chat_id,    // 调用函数时传入的聊天室ID
+                user_id: "${sessionScope.login.id}" // 从会话作用域中获取当前登录用户的ID，这里使用了服务器端模板语法
+            };
+
+            // 调用一个名为postRequest的函数，用于发送POST请求到服务器
+            // 注意：postRequest函数在这段代码中没有定义，我们假设它在其他地方被定义，并且接受三个参数：请求的URL、要发送的数据（对象）、以及一个回调函数
+            // 回调函数在这个例子中没有实现任何逻辑，但在实际应用中，你可能希望在这里处理服务器返回的结果，比如显示一个成功或失败的消息
+            postRequest(url, request, function (result) {
+                // 这里可以添加处理服务器返回结果的逻辑
+            });
         }
-        var url = "http://${host}/wechat/user";
-        var request = {
-            method: "list.do",
-            name: name
-        };
-        postRequest(url, request, function (result) {
-            var users = result.data;
-            if (users.length == 0) {
-                return;
-            }
-            loadSearchResult();
-            for (var i = 0; i < users.length; i++) {
-                addSearchUserResultHtml(users[i]);
-            }
-        })
-    }
 
-    //显示群成员
-    function showChatMember(chat_id) {
-        alert("正在加载聊天信息，请稍后...");
-        var url = "http://${host}/wechat/chat";
-        var request = {
-            method: "member.do",
-            chat_id: chat_id
-        };
-        postRequest(url, request, function (result) {
-            var members = result.data;
-            if (members.length === 0) {
-                return;
-            }
-            loadChatInfoHead(chat_id);
-            for (var i = 0; i < members.length; i++) {
-                addMemberHtml(members[i]);
-            }
-        })
-    }
+// 显示聊天窗口的函数
+        function showChatBox(chat_id) {
+            // 调用一个名为showWindowOnRight的函数，可能用于在屏幕右侧显示聊天窗口
+            // 注意：showWindowOnRight函数在这段代码中没有定义，我们假设它在其他地方被定义，并且接受一个参数：聊天室ID
+            showWindowOnRight(chat_id);
 
-    //清除聊天记录
-    function deleteChatMessage(chat_id) {
-        var url = "http://${host}/wechat/message";
-        var request = {
-            method: "clear.do",
-            chat_id: chat_id,
-            user_id: "${sessionScope.login.id}"
-        };
-        postRequest(url, request, function (result) {
-        })
-    }
+            // 定义一个URL字符串，用于向服务器发送请求以读取指定聊天室的聊天记录
+            var url = "http://${host}/wechat/message";
 
-    //显示聊天窗口
-    function showChatBox(chat_id) {
-        showWindowOnRight(chat_id);
+            // 创建一个对象，包含要发送到服务器的数据：方法名（"read.do"）、当前登录用户的ID（从会话作用域中获取）和聊天室ID（chat_id）
+            // 注意：这里的user_id字段使用了服务器端模板语法，但直接在JavaScript代码中这样写是不正确的。
+            // 在实际应用中，你需要确保这个值在发送请求之前被正确获取并替换到request对象中。
+            var request = {
+                method: "read.do", // 假设这是服务器处理读取聊天记录请求的方法名
+                user_id: ${sessionScope.login.id}, // 这里应该使用某种方式在客户端获取当前登录用户的ID，而不是直接使用服务器端模板语法
+                chat_id: chat_id    // 调用函数时传入的聊天室ID
+            };
 
-        var url = "http://${host}/wechat/message";
-        var request = {
-            method: "read.do",
-            user_id: ${sessionScope.login.id},
-            chat_id: chat_id
-        };
-        postRequest(url, request, function (result) {
+            // 注意：上面的request对象中user_id的值是不正确的，因为JavaScript无法直接解析服务器端的模板语法。
+            // 一种解决方案是在页面加载时通过某种方式（如AJAX请求）从服务器获取当前登录用户的ID，并将其存储在一个JavaScript变量中。
 
-        })
-    }
+            // 调用postRequest函数发送请求到服务器以读取聊天记录
+            // 回调函数在这个例子中没有实现任何逻辑，但在实际应用中，你可能希望在这里处理服务器返回的结果，比如将聊天记录显示在页面上
+            postRequest(url, request, function (result) {
+                // 这里可以添加处理服务器返回结果的逻辑，比如更新聊天窗口的内容
+            });
+        }
 
     //加载聊天列表，并且每个聊天加载隐藏的聊天窗口
-    function loadChatListAndBox() {
-        var url = "http://${host}/wechat/chat";
-        var request = {
-            method: "list.do",
-            id: "${sessionScope.login.id}"
-        };
-        postRequest(url, request, function (result) {
-            var chats = result.data;
-            console.log("查询到聊天窗口数量：" + chats.length);
-            for (var i = 0; i < chats.length; i++) {
-                loadChatListOnMenu(chats[i]);
-                loadChatBox(chats[i]);
-            }
-            loadUnReadMessage(1);
-        });
-    }
+        // 定义一个函数，用于加载聊天列表和聊天窗口
+        function loadChatListAndBox() {
+            // 定义一个URL字符串，用于向服务器发送请求以获取聊天列表
+            // 注意：这里的URL包含了一个占位符${host}，它应该在服务器端被替换为实际的服务器地址
+            var url = "http://${host}/wechat/chat";
 
+            // 创建一个对象，包含要发送到服务器的数据：方法名（"list.do"）、当前登录用户的ID（从会话作用域中获取）
+            // 注意：这里的id字段使用了服务器端模板语法，但在JavaScript中这种语法不会被自动解析。
+            // 在实际应用中，你需要确保这个值在发送请求之前被正确获取并替换到request对象中。
+            var request = {
+                method: "list.do", // 假设这是服务器处理获取聊天列表请求的方法名
+                id: "${sessionScope.login.id}" // 这里应该使用某种方式在客户端获取当前登录用户的ID，而不是直接使用服务器端模板语法
+            };
 
-    //加载加载好友列表
-    function loadFriendList() {
-        var url = "http://${host}/wechat/friend";
-        var request = {
-            method: "list.do",
-            user_id: "${sessionScope.login.id}"
-        };
+            // 注意：上面的request对象中id的值是不正确的，因为JavaScript无法直接解析服务器端的模板语法。
+            // 一种解决方案是在页面加载时通过某种方式（如AJAX请求）从服务器获取当前登录用户的ID，并将其存储在一个JavaScript变量中。
+            // 但在这个例子中，我们假设这个值会在服务器端被正确替换。
+
+            // 调用一个名为postRequest的函数，用于发送POST请求到服务器
+            // 注意：postRequest函数在这段代码中没有定义，我们假设它在其他地方被定义，并且接受三个参数：请求的URL、要发送的数据（对象）、以及一个回调函数
+            postRequest(url, request, function (result) {
+                // 处理服务器返回的结果
+                // 假设result是一个对象，它包含一个名为data的属性，该属性是一个数组，包含了聊天列表的信息
+                var chats = result.data;
+
+                // 在控制台输出查询到的聊天窗口数量
+                console.log("查询到聊天窗口数量：" + chats.length);
+
+                // 遍历聊天列表，为每个聊天项执行以下操作
+                for (var i = 0; i < chats.length; i++) {
+                    // 调用loadChatListOnMenu函数，可能用于在菜单或侧边栏中显示聊天列表项
+                    // 注意：loadChatListOnMenu函数在这段代码中没有定义，我们假设它在其他地方被定义，并且接受一个参数：聊天项的信息
+                    loadChatListOnMenu(chats[i]);
+
+                    // 调用loadChatBox函数，可能用于加载并显示聊天窗口
+                    // 注意：loadChatBox函数在这段代码中没有定义，我们假设它在其他地方被定义，并且接受一个参数：聊天项的信息
+                    // 这里可能存在一个问题：如果loadChatBox函数也发送异步请求到服务器，那么loadUnReadMessage函数可能会在聊天窗口完全加载之前执行。
+                    // 为了解决这个问题，你可能需要在loadChatBox函数内部或在其回调函数中调用loadUnReadMessage函数。
+                    loadChatBox(chats[i]);
+                }
+
+                // 调用loadUnReadMessage函数，可能用于加载未读消息的数量或详情
+                // 注意：loadUnReadMessage函数在这段代码中没有定义，我们假设它在其他地方被定义，并且接受一个参数（在这里是1，但不清楚这个参数的具体用途）。
+                // 同样，由于postRequest是异步的，loadUnReadMessage可能会在聊天窗口和列表加载完成之前执行。
+                // 如果loadUnReadMessage依赖于聊天列表或窗口的加载结果，你应该重新考虑这个函数的调用时机。
+                loadUnReadMessage(1);
+            });
+        }
+
+
+        // 定义一个函数loadFriendList，用于加载好友列表
+        function loadFriendList() {
+            // 定义一个URL模板字符串，其中${host}是一个占位符，需要在实际调用前替换为具体的服务器地址
+            var url = "http://${host}/wechat/friend";
+
+            // 定义一个请求对象，包含请求的方法和用户ID
+            // 注意：这里的method值"list.do"看起来不太标准，通常method是HTTP方法如"GET"或"POST"
+            // 这里可能是特定后端框架或API的约定
+            var request = {
+                method: "list.do",
+                user_id: "${sessionScope.login.id}" // 从会话作用域中获取当前登录用户的ID
+            };
         postRequest(url, request, function (result) {
             document.getElementById("friend-list").innerHTML = ' <button class="user-list-block-href" onmouseover="this.style.backgroundColor=\'#3A3F45\'"\n' +
                 '                        onmouseout="this.style.backgroundColor=\'#2e3238\';"\n' +
@@ -789,623 +1080,927 @@
     }
 
     //加载未读消息
-    function loadUnReadMessage(page) {
-        var url = "http://${host}/wechat/message";
-        var request = {
-            method: "unread.do",
-            user_id: "${sessionScope.login.id}",
-            page: page
-        };
-        postRequest(url, request, function (result) {
-            var messages = result.data;
-            console.log("查询到未读消息 ： " + messages.length)
+        // 定义一个函数，用于加载用户的未读消息
+        function loadUnReadMessage(page) {
+            // 构造请求的URL，但这里使用了模板字符串（${host}），这意味着实际使用时需要替换${host}为具体的服务器地址
+            var url = "http://${host}/wechat/message";
 
-            for (var i = messages.length - 1; i >= 0; i--) {
-                showMessage(messages[i]);
-            }
-        });
-    }
+            // 准备请求的数据，包括请求的方法（unread.do），用户的ID（从session中获取），以及请求的页码
+            var request = {
+                method: "unread.do",
+                user_id: "${sessionScope.login.id}", // 这里同样使用了模板字符串，需要从session中获取当前登录用户的ID
+                page: page // 请求的页码，用于分页加载消息
+            };
 
+            // 调用postRequest函数发送请求，这里假设postRequest是一个已经定义好的函数，用于发送POST请求
+            // 第三个参数是一个回调函数，当请求成功返回结果时会被调用
+            postRequest(url, request, function (result) {
+                // 从返回的结果中提取消息数据
+                var messages = result.data;
 
-    //加载一个聊天的未读消息
-    function loadUnReadMessageInAChat(chat_id, page) {
-        var url = "http://${host}/wechat/message";
-        var request = {
-            method: "unread.do",
-            user_id: "${sessionScope.login.id}",
-            chat_id: chat_id,
-            page: page
-        };
-        postRequest(url, request, function (result) {
-            var messages = result.data;
-            console.log("查询到未读消息 ： " + messages.length)
-            for (var i = messages.length - 1; i >= 0; i--) {
-                showMessage(messages[i]);
-            }
-        });
-    }
+                // 在控制台打印查询到的未读消息数量
+                console.log("查询到未读消息 ： " + messages.length);
+
+                // 逆序遍历消息数组，从最新的消息开始显示
+                for (var i = messages.length - 1; i >= 0; i--) {
+                    showMessage(messages[i]); // 调用showMessage函数显示消息，这里假设showMessage是一个已经定义好的函数
+                }
+            });
+        }
+
+// 定义一个函数，用于加载特定聊天中的未读消息
+        function loadUnReadMessageInAChat(chat_id, page) {
+            // 构造请求的URL，同样使用了模板字符串（${host}）
+            var url = "http://${host}/wechat/message";
+
+            // 准备请求的数据，包括请求的方法（unread.do），用户的ID（从session中获取），特定的聊天ID，以及请求的页码
+            var request = {
+                method: "unread.do",
+                user_id: "${sessionScope.login.id}", // 从session中获取当前登录用户的ID
+                chat_id: chat_id, // 特定的聊天ID
+                page: page // 请求的页码，用于分页加载消息
+            };
+
+            // 调用postRequest函数发送请求，并指定回调函数处理返回的结果
+            postRequest(url, request, function (result) {
+                // 从返回的结果中提取消息数据
+                var messages = result.data;
+
+                // 在控制台打印查询到的未读消息数量
+                console.log("查询到未读消息 ： " + messages.length);
+
+                // 逆序遍历消息数组，从最新的消息开始显示
+                for (var i = messages.length - 1; i >= 0; i--) {
+                    showMessage(messages[i]); // 调用showMessage函数显示消息
+                }
+            });
+        }
 
     //加载一个聊天中的所有消息
-    function loadAllMessage(page, chat_id) {
-        var url = "http://${host}/wechat/message";
-        var request = {
-            method: "list.do",
-            user_id: "${sessionScope.login.id}",
-            chat_id: chat_id,
-            page: page,
-        };
-        postRequest(url, request, function (result) {
-            document.getElementById(chat_id + "accept-message").innerHTML = '';
-            var messages = result.data;
-            for (var i = messages.length - 1; i >= 0; i--) {
-                showMessage(messages[i]);
-            }
-        });
-    }
+        // 定义一个函数，用于加载特定聊天中的所有消息
+        function loadAllMessage(page, chat_id) {
+            // 构造请求的URL，但这里使用了模板字符串（${host}），需要替换为实际的服务器地址
+            var url = "http://${host}/wechat/message";
 
-    //加载朋友圈动态
-    function loadNews(page) {
-        var url = "http://${host}/wechat/moment";
-        var request = {
-            method: "news.do",
-            user_id: "${sessionScope.login.id}",
-            page: page
-        };
-        alert("正在加载朋友圈动态，请稍后...");
-        postRequest(url, request, function (result) {
-            var news = result.data;
-            //加载之前先将之前的清空
-            document.getElementById('news-box-content').innerHTML = '';
-            for (var i = 0; i <= news.length - 1; i++) {
-                addNewsBlockHtml(news[i]);
-            }
-        });
-        showWindowOnRight('news-box');
-    }
+            // 准备请求的数据，包括请求的方法（list.do），用户的ID（从session中获取），特定的聊天ID，以及请求的页码
+            var request = {
+                method: "list.do",
+                user_id: "${sessionScope.login.id}", // 需要从session中获取当前登录用户的ID
+                chat_id: chat_id, // 特定的聊天ID
+                page: page // 请求的页码，用于分页加载消息
+            };
 
-    //加载我的朋友圈
-    function loadMyMoment(page) {
-        var url = "http://${host}/wechat/moment";
-        var request = {
-            method: "moment.do",
-            user_id: "${sessionScope.login.id}",
-            page: page
-        };
-        alert("正在加载您的朋友圈，请稍后...");
-        postRequest(url, request, function (result) {
-            var moments = result.data;
-            //加载之前先将之前的清空
-            document.getElementById('moment-box-content').innerHTML = '';
-            for (var i = 0; i < moments.length - 1; i++) {
-                addMomentBlockHtml(moments[i]);
-            }
-        });
-        showWindowOnRight('moment-box');
-    }
+            // 调用postRequest函数发送请求，并指定回调函数处理返回的结果
+            postRequest(url, request, function (result) {
+                // 清空指定聊天ID对应的消息显示区域的内容
+                document.getElementById(chat_id + "accept-message").innerHTML = '';
 
-    //查询朋友圈图片
-    function loadPhoto(page) {
-        var url = 'http://${host}/wechat/moment';
-        var request = {
-            method: "photo.do",
-            user_id: ${sessionScope.login.id},
-            page: page
-        };
-        alert("正在加载朋友圈相册，请稍后...");
-        postRequest(url, request, function (result) {
-            var photos = result.data;
-            //加载之前先将之前的清空
-            document.getElementById('photo-box-content').innerHTML = '';
-            for (var i = 0; i < photos.length; i++) {
-                addPhotoHtml(photos[i]);
-            }
-        });
-        showWindowOnRight('photo-box');
-    }
+                // 从返回的结果中提取消息数据
+                var messages = result.data;
 
-    //下一页
-    function nextNewsPage() {
-        var page = document.getElementById("news-box").dataset.page;
-        loadNews(page);
-        document.getElementById("news-box").dataset.page = page + 1;
-    }
+                // 逆序遍历消息数组，从最新的消息开始显示
+                for (var i = messages.length - 1; i >= 0; i--) {
+                    showMessage(messages[i]); // 调用showMessage函数显示消息，该函数需要在其他地方定义
+                }
+            });
+        }
 
-    //删除朋友圈
-    function deleteMoment(moment_id) {
-        if (confirm("是否确定要删除这条朋友圈？")) {
-            var url = 'http://${host}/wechat/moment';
+// 定义一个函数，用于加载朋友圈动态
+        function loadNews(page) {
+            // 构造请求的URL，使用模板字符串（${host}）
+            var url = "http://${host}/wechat/moment";
+
+            // 准备请求的数据，包括请求的方法（news.do），用户的ID（从session中获取），以及请求的页码
             var request = {
-                method: "delete.do",
-                moment_id: moment_id
+                method: "news.do",
+                user_id: "${sessionScope.login.id}", // 需要从session中获取当前登录用户的ID
+                page: page // 请求的页码，用于分页加载朋友圈动态
             };
+
+            // 弹出提示框，告知用户正在加载朋友圈动态
+            alert("正在加载朋友圈动态，请稍后...");
+
+            // 调用postRequest函数发送请求，并指定回调函数处理返回的结果
             postRequest(url, request, function (result) {
+                // 从返回的结果中提取朋友圈动态数据
+                var news = result.data;
+
+                // 清空朋友圈动态显示区域的内容
+                document.getElementById('news-box-content').innerHTML = '';
+
+                // 遍历朋友圈动态数组，并显示每条动态
+                for (var i = 0; i < news.length; i++) { // 注意这里的循环条件应该是 i < news.length，而不是 i <= news.length - 1
+                    addNewsBlockHtml(news[i]); // 调用addNewsBlockHtml函数添加朋友圈动态的HTML，该函数需要在其他地方定义
+                }
             });
-        } else {
-            return;
+
+            // 显示位于右侧的新闻框
+            showWindowOnRight('news-box'); // 该函数需要在其他地方定义
         }
-    }
 
-    //删除朋友圈评论
-    function deleteRemark(remark_id, moment_id) {
-        if (confirm("是否确定要删除这条评论？")) {
-            var url = 'http://${host}/wechat/remark';
+// 定义一个函数，用于加载我的朋友圈动态
+        function loadMyMoment(page) {
+            // 构造请求的URL，使用模板字符串（${host}）
+            var url = "http://${host}/wechat/moment";
+
+            // 准备请求的数据，包括请求的方法（moment.do），用户的ID（从session中获取），以及请求的页码
             var request = {
-                method: "delete.do",
-                remark_id: remark_id
+                method: "moment.do",
+                user_id: "${sessionScope.login.id}", // 需要从session中获取当前登录用户的ID
+                page: page // 请求的页码，用于分页加载用户自己的朋友圈动态
             };
+
+            // 弹出提示框，告知用户正在加载用户自己的朋友圈动态
+            alert("正在加载您的朋友圈，请稍后...");
+
+            // 调用postRequest函数发送请求，并指定回调函数处理返回的结果
             postRequest(url, request, function (result) {
-                addMomentDetailHtml(moment_id);
+                // 从返回的结果中提取用户自己的朋友圈动态数据
+                var moments = result.data;
+
+                // 清空用户自己的朋友圈动态显示区域的内容
+                document.getElementById('moment-box-content').innerHTML = '';
+
+                // 遍历用户自己的朋友圈动态数组，并显示每条动态
+                // 注意：这里的循环条件应该是 i < moments.length，而不是 i < moments.length - 1，以避免遗漏最后一条动态
+                for (var i = 0; i < moments.length; i++) {
+                    addMomentBlockHtml(moments[i]); // 调用addMomentBlockHtml函数添加用户自己的朋友圈动态的HTML，该函数需要在其他地方定义
+                }
             });
-        } else {
-            return;
+
+            // 显示位于右侧的朋友圈框
+            showWindowOnRight('moment-box'); // 该函数需要在其他地方定义
         }
-    }
+        // 查询朋友圈图片的函数
+        function loadPhoto(page) {
+            // 构建请求的URL，这里使用了模板字符串但${host}需要被替换为实际的主机名
+            var url = 'http://${host}/wechat/moment';
 
-    //删除好友
-    function deleteFriend(friend_id) {
-        if (confirm("是否确定要删除这个好友？")) {
-            var url = 'http://${host}/wechat/friend';
+            // 创建一个请求对象，包含了方法名、用户ID和当前页码
             var request = {
-                method: "delete.do",
-                user_id: ${sessionScope.login.id},
-                friend_id: friend_id
+                method: "photo.do", // 调用朋友圈图片列表的API方法
+                user_id: ${sessionScope.login.id}, // 当前登录用户的ID，这里${sessionScope.login.id}需要被替换为实际的用户ID
+                page: page // 当前请求的页码
             };
-            alert("正在删除好友，请稍后...");
+
+            // 弹出提示框，告知用户正在加载数据
+            alert("正在加载朋友圈相册，请稍后...");
+
+            // 发送POST请求，获取朋友圈图片数据
             postRequest(url, request, function (result) {
-                loadFriendList();
+                // 从响应结果中获取图片数据
+                var photos = result.data;
+
+                // 在加载新图片之前，先清空之前显示图片的元素内容
+                document.getElementById('photo-box-content').innerHTML = '';
+
+                // 遍历图片数据，为每个图片添加HTML到页面中
+                for (var i = 0; i < photos.length; i++) {
+                    addPhotoHtml(photos[i]); // 调用自定义函数addPhotoHtml来添加图片HTML，该函数未在代码片段中定义
+                }
             });
-        } else {
-            return;
+
+            // 显示图片查看窗口（假设是一个模态框或侧边栏）
+            showWindowOnRight('photo-box'); // 调用自定义函数showWindowOnRight来显示窗口，该函数未在代码片段中定义
         }
-    }
 
+// 下一页新闻（尽管函数名是nextNewsPage，但代码逻辑似乎与新闻无关，可能是复制粘贴时未更新）
+        function nextNewsPage() {
+            // 获取当前页码（这里假设是通过data-page属性存储的）
+            var page = document.getElementById("news-box").dataset.page;
 
-    //加好友
-    function addFriend(friend_id) {
+            // 调用加载新闻的函数（但函数名和逻辑似乎不匹配当前上下文，可能是加载朋友圈或其他内容的函数）
+            loadNews(page); // 调用自定义函数loadNews，该函数未在代码片段中定义
 
-        var url = "http://${host}/wechat/friend?method=add.do";
-        var description = prompt("请输入好友申请", "我是${sessionScope.login.name},快加我为好友吧！");
-        var alias = prompt("请输入好友备注", "");
-        if (description == null) {
-            return;
+            // 更新当前页码为下一页
+            document.getElementById("news-box").dataset.page = page + 1;
         }
-        var request = JSON.stringify({
-            user_id: "${sessionScope.login.id}",
-            friend_id: friend_id,
-            description: description,
-            alias: alias
-        });
-        if (alias == null) {
-            return;
+
+// 删除朋友圈的函数
+        function deleteMoment(moment_id) {
+            // 弹出确认框，询问用户是否确定要删除这条朋友圈
+            if (confirm("是否确定要删除这条朋友圈？")) {
+                // 构建请求的URL，同样${host}需要被替换为实际的主机名
+                var url = 'http://${host}/wechat/moment';
+
+                // 创建一个请求对象，包含了方法名和要删除的朋友圈ID
+                var request = {
+                    method: "delete.do", // 调用删除朋友圈的API方法
+                    moment_id: moment_id // 要删除的朋友圈ID
+                };
+
+                // 发送POST请求来删除朋友圈
+                postRequest(url, request, function (result) {
+                    // 删除操作完成后的回调，这里没有执行任何操作
+                });
+            } else {
+                // 如果用户取消删除，则直接返回
+                return;
+            }
         }
-        if (confirm("是否确定要发送好友申请？")) {
-            alert("正在发送好友申请，请稍后...");
-            ajaxJsonRequest(url, request, function (result) {
-            })
-        } else {
-            return;
+        // 删除朋友圈评论的函数
+        function deleteRemark(remark_id, moment_id) {
+            // 弹出确认框，询问用户是否确定要删除这条评论
+            if (confirm("是否确定要删除这条评论？")) {
+                // 构建请求的URL，这里${host}需要被替换为实际的主机名
+                var url = 'http://${host}/wechat/remark';
+
+                // 创建一个请求对象，包含了方法名和要删除的评论ID
+                var request = {
+                    method: "delete.do", // 调用删除评论的API方法
+                    remark_id: remark_id // 要删除的评论ID
+                };
+
+                // 发送POST请求来删除评论，并在回调中刷新朋友圈详情
+                postRequest(url, request, function (result) {
+                    // 调用自定义函数addMomentDetailHtml来刷新朋友圈详情，传入朋友圈ID
+                    addMomentDetailHtml(moment_id); // 该函数未在代码片段中定义
+                });
+            } else {
+                // 如果用户取消删除，则直接返回
+                return;
+            }
         }
-    }
 
-    //同意加好友
-    function agreeAddFriend(friend_id) {
-        if (confirm("是否确定同意好友申请？")) {
-            console.log("同意加好友：friend_id " + friend_id);
+// 删除好友的函数
+        function deleteFriend(friend_id) {
+            // 弹出确认框，询问用户是否确定要删除这个好友
+            if (confirm("是否确定要删除这个好友？")) {
+                // 构建请求的URL，这里${host}需要被替换为实际的主机名
+                var url = 'http://${host}/wechat/friend';
+
+                // 创建一个请求对象，包含了方法名、当前登录用户的ID和要删除的好友ID
+                var request = {
+                    method: "delete.do", // 调用删除好友的API方法
+                    user_id: ${sessionScope.login.id}, // 当前登录用户的ID，这里${sessionScope.login.id}需要被替换为实际的用户ID
+                    friend_id: friend_id // 要删除的好友ID
+                };
+
+                // 弹出提示框，告知用户正在删除好友
+                alert("正在删除好友，请稍后...");
+
+                // 发送POST请求来删除好友，并在回调中刷新好友列表
+                postRequest(url, request, function (result) {
+                    // 调用自定义函数loadFriendList来刷新好友列表
+                    loadFriendList(); // 该函数未在代码片段中定义
+                });
+            } else {
+                // 如果用户取消删除，则直接返回
+                return;
+            }
+        }
+
+// 加好友的函数
+        function addFriend(friend_id) {
+            // 构建请求的URL，这里${host}需要被替换为实际的主机名，并且包含了添加好友的方法名
             var url = "http://${host}/wechat/friend?method=add.do";
+
+            // 弹出提示框，让用户输入好友申请内容
+            var description = prompt("请输入好友申请", "我是${sessionScope.login.name},快加我为好友吧！");
+            // 弹出提示框，让用户输入好友备注
             var alias = prompt("请输入好友备注", "");
-            if (alias == null) {
+
+            // 如果用户取消了输入申请内容，则直接返回
+            if (description == null) {
                 return;
             }
+
+            // 创建一个请求对象，并转换为JSON字符串
             var request = JSON.stringify({
-                user_id: "${sessionScope.login.id}",
-                friend_id: friend_id,
-                alias: alias
+                user_id: "${sessionScope.login.id}", // 当前登录用户的ID，这里${sessionScope.login.id}需要被替换为实际的用户ID
+                friend_id: friend_id, // 要添加的好友ID
+                description: description, // 好友申请内容
+                alias: alias // 好友备注，如果用户没有输入，则此值为空字符串
             });
-            alert("正在同意好友申请，请稍后...");
-            ajaxJsonRequest(url, request, function (result) {
-            })
-        } else {
-            return;
+
+            // 检查用户是否输入了好友备注，但此检查似乎是多余的，因为即使alias为空字符串，也应该继续执行
+            // 如果真的需要这个检查，它应该在JSON.stringify之前进行，以避免创建一个不必要的属性
+            // 但由于之前的prompt已经处理了用户取消输入的情况（返回null），这里再次检查是否为null是多余的
+            // if (alias == null) {
+            //     return;
+            // }
+
+            // 弹出确认框，询问用户是否确定要发送好友申请
+            if (confirm("是否确定要发送好友申请？")) {
+                // 弹出提示框，告知用户正在发送好友申请
+                alert("正在发送好友申请，请稍后...");
+
+                // 发送AJAX请求来发送好友申请，注意这里使用的是ajaxJsonRequest，它可能是一个自定义的函数
+                // 用于发送JSON格式的请求体，并处理JSON格式的响应
+                ajaxJsonRequest(url, request, function (result) {
+                    // 发送好友申请后的回调，这里没有执行任何操作
+                    // 可以根据需要添加处理逻辑，比如显示成功或失败的消息
+                });
+            } else {
+                // 如果用户取消发送申请，则直接返回
+                return;
+            }
+        }
+    //同意加好友
+        function agreeAddFriend(friend_id) {
+            if (confirm("是否确定同意好友申请？")) {
+                console.log("同意加好友：friend_id " + friend_id);
+                var url = "http://${host}/wechat/friend?method=add.do";
+                var alias = prompt("请输入好友备注", "");
+                if (alias == null) {
+                    return;
+                }
+                var request = JSON.stringify({
+                    user_id: "${sessionScope.login.id}",
+                    friend_id: friend_id,
+                    alias: alias
+                });
+                alert("正在同意好友申请，请稍后...");
+                ajaxJsonRequest(url, request, function (result) {
+                })
+            } else {
+                return;
+            }
         }
-    }
 
 
-    //退出群聊
-    function quitChat(chat_id) {
-        if (confirm("是否确定要退出该群聊？")) {
-            var url = "http://${host}/wechat/chat?method=quit.do";
-            var request = JSON.stringify({
-                user_id: "${sessionScope.login.id}",
-                chat_id: chat_id,
-            });
-            alert("正在退出群聊，请稍后...");
-            ajaxJsonRequest(url, request, function (result) {
-            })
-        } else {
-            return;
+        //退出群聊
+        function quitChat(chat_id) {
+            if (confirm("是否确定要退出该群聊？")) {
+                var url = "http://${host}/wechat/chat?method=quit.do";
+                var request = JSON.stringify({
+                    user_id: "${sessionScope.login.id}",
+                    chat_id: chat_id,
+                });
+                alert("正在退出群聊，请稍后...");
+                ajaxJsonRequest(url, request, function (result) {
+                })
+            } else {
+                return;
+            }
         }
-    }
 
-    //更新个人信息
-    function updateUserInfo() {
-        if (confirm("是否确定更新个人信息？")) {
+        // 更新个人信息的函数
+        function updateUserInfo() {
+            // 使用confirm对话框询问用户是否确定更新个人信息
+            if (confirm("是否确定更新个人信息？")) {
+                // 构造一个JSON对象，包含用户ID、姓名、签名、微信ID、性别和位置信息
+                // 注意：这里使用innerText可能不正确，如果元素是input或textarea，应该使用value属性
+                var jsonStr = JSON.stringify({
+                    id: "${sessionScope.login.id}", // 应该是动态替换的用户ID
+                    name: document.getElementById("name").innerText, // 可能是innerText或value，取决于元素类型
+                    signature: document.getElementById("signature").innerText,
+                    wechat_id: document.getElementById("wechat_id").innerText,
+                    gender: document.getElementById("gender").innerText,
+                    location: document.getElementById("location").innerText
+                });
+
+                // 弹出一个警告框，通知用户正在更新个人信息
+                alert("正在更新个人信息，请稍后...");
+
+                // 定义一个URL，但注意${host}需要动态替换
+                var url = "http://${host}/wechat/user?method=update.do";
+
+                // 调用ajaxJsonRequest函数发送JSON请求到服务器以更新基本信息
+                // 假设ajaxJsonRequest是一个已定义的函数，用于处理JSON数据的发送和接收
+                ajaxJsonRequest(url, jsonStr, function (result) {
+                    // 这里是回调函数，当请求完成并返回结果时执行
+                    // 需要根据result.status的值来判断操作是否成功
+                    if ("SUCCESS" === result.status) {
+                        // 更新基本信息成功的处理逻辑（目前为空）
+                    } else {
+                        // 更新基本信息失败的处理逻辑（目前为空）
+                    }
+                });
+
+                // 更新头像的逻辑（与更新基本信息分开处理）
+                // 注意：这里的URL同样存在${host}和${sessionScope.login.id}的动态替换问题
+                url = "http://${host}/wechat/upload?method=uploadphoto.do&id=${sessionScope.login.id}&table=user";
+                // 调用uploadPhoto函数上传头像照片（假设uploadPhoto是一个已定义的函数）
+                uploadPhoto(url, 'user-photo');
+            } else {
+                // 如果用户点击了“取消”，则函数直接返回
+                return;
+            }
+        }
+
+// 更新聊天背景的函数
+        function updateBackground() {
+            // 调用imgPreview函数预览上传的背景图片（假设imgPreview是一个已定义的函数）
+            imgPreview(document.getElementById('background-upload'), 'background');
+
+            // 定义一个URL，但注意${host}和${sessionScope.login.id}需要动态替换
+            var url = "http://${host}/wechat/upload?method=background.do&id=${sessionScope.login.id}";
+
+            // 弹出一个警告框，通知用户正在更新聊天背景
+            alert("正在更新聊天背景，请稍后...");
+
+            // 调用uploadPhoto函数上传聊天背景照片
+            uploadPhoto(url, 'background-upload');
+        }
+
+// 发布朋友圈的函数
+        function postMoment() {
+            // 获取用户在朋友圈输入框中输入的内容
+            var content = document.getElementById("moment-content").value;
+
+            // 构造一个JSON对象，包含发布者的ID和朋友圈内容
             var jsonStr = JSON.stringify({
-                id: "${sessionScope.login.id}",
-                name: document.getElementById("name").innerText,
-                signature: document.getElementById("signature").innerText,
-                wechat_id: document.getElementById("wechat_id").innerText,
-                gender: document.getElementById("gender").innerText,
-                location: document.getElementById("location").innerText
+                owner_id: "${sessionScope.login.id}", // 应该是动态替换的用户ID
+                content: content
             });
-            //更新基本信息
-            alert("正在更新个人信息，请稍后...");
-            var url = "http://${host}/wechat/user?method=update.do";
-            ajaxJsonRequest(url, jsonStr, function (result) {
-                if ("SUCCESS" === result.status) {
-                } else {
-                }
-            });
-            //更新头像
-            url = "http://${host}/wechat/upload?method=uploadphoto.do&id=${sessionScope.login.id}&table=user";
-            uploadPhoto(url, 'user-photo');
-        } else {
-            return;
-        }
-    }
 
+            // 定义一个URL，但注意${host}需要动态替换
+            var url = "http://${host}/wechat/moment?method=add.do";
 
-    //更新聊天背景
-    function updateBackground() {
-        imgPreview(document.getElementById('background-upload'), 'background');
-        var url = "http://${host}/wechat/upload?method=background.do&id=${sessionScope.login.id}";
-        alert("正在更新聊天背景，请稍后...");
-        uploadPhoto(url, 'background-upload');
-    }
+            // 如果朋友圈内容不为空，则进行发布操作
+            if (!('' === content)) {
+                // 弹出一个警告框，通知用户正在发布朋友圈
+                alert("正在发布朋友圈，请稍后...");
 
-    //发布朋友圈
-    function postMoment() {
-        var content = document.getElementById("moment-content").value;
-        var jsonStr = JSON.stringify({
-            owner_id: "${sessionScope.login.id}",
-            content: content
-        });
-        var url = "http://${host}/wechat/moment?method=add.do";
-        if (!('' === content)) {
-            alert("正在发布朋友圈，请稍后...");
-            ajaxJsonRequest(url, jsonStr, function (result) {
-                if ("SUCCESS" === result.status) {
-                    //成功之后上传图片
-                    url = "http://${host}/wechat/upload?method=uploadphoto.do&id=" + result.data.id + "&table=moment";
-                    uploadPhoto(url, 'moment-photo');
+                // 调用ajaxJsonRequest函数发送JSON请求到服务器以发布朋友圈
+                ajaxJsonRequest(url, jsonStr, function (result) {
+                    // 这里是回调函数，当请求完成并返回结果时执行
+                    // 需要根据result.status的值来判断操作是否成功
+                    if ("SUCCESS" === result.status) {
+                        // 发布朋友圈成功的处理逻辑
+                        // 构造一个URL用于上传朋友圈图片，注意这里使用了result.data.id作为图片关联的ID
+                        url = "http://${host}/wechat/upload?method=uploadphoto.do&id=" + result.data.id + "&table=moment";
+                        // 调用uploadPhoto函数上传朋友圈照片
+                        uploadPhoto(url, 'moment-photo');
+                    } else {
+                        // 发布朋友圈失败的处理逻辑（目前为空）
+                    }
+                });
+
+                // 清空朋友圈输入框中的内容
+                document.getElementById("moment-content").value = '';
+            } else {
+                // 如果朋友圈内容为空，则弹出警告框提示用户
+                alert("发送内容不能为空");
+                // 函数返回，不继续执行发布操作
+                return;
+            }
+        }
+    //点赞朋友圈
+        // 点赞朋友圈动态的函数
+        function loveMoment(moment_id, moment_love) {
+            // 构造请求URL（注意：这里的${host}需要在服务器端替换为实际的主机地址）
+            var url = 'http://${host}/wechat/moment';
+
+            // 构造请求对象，包含点赞的方法名、朋友圈动态ID和当前登录用户的ID（需要在服务器端替换${sessionScope.login.id}）
+            var request = {
+                method: "love.do", // 假设这是后端处理点赞的接口方法名
+                moment_id: moment_id, // 朋友圈动态的ID
+                user_id: "${sessionScope.login.id}", // 当前登录用户的ID
+            };
+
+            // 发送请求到服务器（假设postRequest是一个已经定义好的函数，用于发送POST请求）
+            postRequest(url, request, function (result) {
+                // 从服务器响应中获取点赞结果
+                var islove = result.data; // 假设result.data是一个布尔值，表示点赞是否成功
+
+                // 获取当前点赞数的DOM元素，并读取其data-love属性（存储点赞数）
+                var loveElement = document.getElementById(moment_id + "love");
+                var love = parseInt(loveElement.dataset.love); // 将字符串转换为整数
+                console.log("当前点赞数: " + love);
+
+                // 根据点赞结果更新点赞数和DOM元素的显示内容
+                if (islove) {
+                    // 如果点赞成功，点赞数加1
+                    loveElement.innerText = '点赞(' + (love + 1) + ')';
+                    loveElement.dataset.love = love + 1;
                 } else {
+                    // 如果取消点赞（尽管这个函数名没有直接体现取消点赞的功能，但根据逻辑推断）
+                    // 点赞数减1（这里假设用户不能对自己已经点过的赞再次点击来减少点赞数，这个逻辑可能需要后端配合处理）
+                    loveElement.innerText = '点赞(' + (love - 1) + ')';
+                    loveElement.dataset.love = love - 1;
                 }
             });
-            document.getElementById("moment-content").value = '';
-        } else {
-            alert("发送内容不能为空");
-            return;
         }
-    }
 
-    //点赞朋友圈
-    function loveMoment(moment_id, moment_love) {
-        var url = 'http://${host}/wechat/moment';
-        var request = {
-            method: "love.do",
-            moment_id: moment_id,
-            user_id:${sessionScope.login.id},
-        };
-        postRequest(url, request, function (result) {
-            var islove = result.data;
-            var love = parseInt(document.getElementById(moment_id + "love").dataset.love);
-            console.log("当前点赞数" + love);
-            if (islove) {
-                document.getElementById(moment_id + "love").innerText = '点赞(' + (love + 1) + ')';
-                document.getElementById(moment_id + "love").dataset.love = love + 1;
-            } else {
-                document.getElementById(moment_id + "love").innerText = '点赞(' + (love - 1) + ')';
-                document.getElementById(moment_id + "love").dataset.love = love - 1;
+// 评论朋友圈动态的函数
+        function remarkMoment(moment_id) {
+            // 提示用户输入评论内容
+            var content = prompt("请输入评论", '');
+
+            // 如果用户取消输入或输入为空，则不进行后续操作
+            if (content == null || content.trim() === '') {
+                alert("评论内容不能为空");
+                return;
             }
-        });
-    }
 
+            // 获取当前时间的时间戳
+            var time = new Date().getTime();
 
-    //评论朋友圈//TODO
-    function remarkMoment(moment_id) {
-        var content = prompt("请输入评论", '');
-        if (content == null) {
-            return;
-        }
-        var time = new Date().getTime();
-        var url = "http://${host}/wechat/remark?method=add.do";
-        var request = JSON.stringify({
-            user_id: "${sessionScope.login.id}",
-            moment_id: moment_id,
-            time: time,
-            content: content
-        });
-        if (!('' === content || content == null)) {
+            // 构造请求URL（注意：这里的${host}需要在服务器端替换为实际的主机地址）
+            var url = "http://${host}/wechat/remark?method=add.do";
+
+            // 构造请求对象，并转换为JSON字符串（假设后端需要接收JSON格式的请求体）
+            var request = JSON.stringify({
+                user_id: "${sessionScope.login.id}", // 当前登录用户的ID（需要在服务器端替换）
+                moment_id: moment_id, // 朋友圈动态的ID
+                time: time, // 评论的时间戳
+                content: content // 评论内容
+            });
+
+            // 确认用户是否真的要发布评论
             if (confirm("是否确定要发布该评论？")) {
+                // 提示用户正在发布评论
                 alert("正在发布评论，请稍后...");
+
+                // 发送请求到服务器（假设ajaxJsonRequest是一个已经定义好的函数，用于发送带有JSON请求体的AJAX请求）
                 ajaxJsonRequest(url, request, function (result) {
-                    var remark = parseInt(document.getElementById(moment_id + "remark").dataset.remark);
-                    console.log("当前评论数" + remark);
-                    document.getElementById(moment_id + "remark").dataset.remark = remark + 1;
-                    document.getElementById(moment_id + "remark").innerText = '评论(' + (remark + 1) + ')';
+                    // 从服务器响应中获取评论结果（这里假设评论总是成功的，因为后端没有返回失败的情况）
+
+                    // 获取当前评论数的DOM元素，并读取其data-remark属性（存储评论数）
+                    var remarkElement = document.getElementById(moment_id + "remark");
+                    var remark = parseInt(remarkElement.dataset.remark); // 将字符串转换为整数
+                    console.log("当前评论数: " + remark);
+
+                    // 更新评论数和DOM元素的显示内容
+                    remarkElement.dataset.remark = remark + 1;
+                    remarkElement.innerText = '评论(' + (remark + 1) + ')';
+
+                    // 调用addMomentDetailHtml函数更新朋友圈详情页面的HTML结构（假设该函数已定义）
                     addMomentDetailHtml(moment_id);
-                })
+                });
             } else {
+                // 如果用户取消发布评论，则直接返回
                 return;
             }
-        } else {
-            alert("评论内容不能为空");
-            return;
-        }
-    }
-
-    //回复一条评论
-    function replyRemark(moment_id, user_name) {
-        var content = prompt("请输入回复", "");
-        if (content == null) {
-            return;
         }
-        content = "@" + user_name + " " + content;
-        var time = new Date().getTime();
-        var url = "http://${host}/wechat/remark?method=add.do";
-        var request = JSON.stringify({
-            user_id: "${sessionScope.login.id}",
-            moment_id: moment_id,
-            time: time,
-            content: content
-        });
-        if (!('' === content)) {
-            if (confirm("是否确定要发布该回复？")) {
-                alert("正在发布回复，请稍后...");
-                ajaxJsonRequest(url, request, function (result) {
-                    var remark = parseInt(document.getElementById(moment_id + "remark").dataset.remark);
-                    document.getElementById(moment_id + "remark").dataset.remark = remark + 1;
-                    document.getElementById(moment_id + "remark").innerText = '评论(' + (remark + 1) + ')';
-                    addMomentDetailHtml(moment_id);
 
-                })
+        // 定义一个函数用于回复评论
+        function replyRemark(moment_id, user_name) {
+            // 使用prompt弹窗提示用户输入回复内容，默认内容为空字符串
+            var content = prompt("请输入回复", "");
+            // 如果用户取消输入（即点击了取消按钮或关闭了弹窗），则直接返回，不执行后续操作
+            if (content == null) {
+                return;
+            }
+            // 在回复内容前添加@符号和用户名，以标识回复的对象
+            content = "@" + user_name + " " + content;
+            // 获取当前时间的时间戳
+            var time = new Date().getTime();
+            // 定义提交回复的URL地址，注意这里的${host}是模板变量，需要在服务器端渲染时替换为实际的主机地址
+            var url = "http://${host}/wechat/remark?method=add.do";
+            // 构建请求的数据对象，并转换为JSON字符串
+            // 注意这里的"${sessionScope.login.id}"也是模板变量，需要在服务器端渲染时替换为当前登录用户的ID
+            var request = JSON.stringify({
+                user_id: "${sessionScope.login.id}",
+                moment_id: moment_id,
+                time: time,
+                content: content
+            });
+            // 检查回复内容是否非空（实际上，由于前面的prompt和null检查，这里理论上不会为空）
+            if (!('' === content)) {
+                // 使用confirm弹窗询问用户是否确定要发布该回复
+                if (confirm("是否确定要发布该回复？")) {
+                    alert("正在发布回复，请稍后...");
+                    // 调用ajaxJsonRequest函数发送请求（注意：这个函数在代码片段中没有定义，可能是自定义的或来自某个库）
+                    ajaxJsonRequest(url, request, function (result) {
+                        // 获取当前评论数量的DOM元素，并解析其data-remark属性值（存储评论数量）
+                        var remark = parseInt(document.getElementById(moment_id + "remark").dataset.remark);
+                        // 更新评论数量，并更新DOM元素的innerText显示新的评论数量
+                        document.getElementById(moment_id + "remark").dataset.remark = remark + 1;
+                        document.getElementById(moment_id + "remark").innerText = '评论(' + (remark + 1) + ')';
+                        // 调用addMomentDetailHtml函数（这个函数在代码片段中没有定义，可能是用于更新动态详情的自定义函数）
+                        addMomentDetailHtml(moment_id);
+                    })
+                } else {
+                    // 如果用户取消发布，则直接返回
+                    return;
+                }
             } else {
+                // 理论上不会执行到这里，因为前面的逻辑已经确保了content非空
+                alert("回复内容不能为空");
                 return;
             }
-        } else {
-            alert("回复内容不能为空");
-            return;
         }
-    }
-
 
-    //上传图片
-    function uploadPhoto(url, photo_id) {
-        var formData = new FormData();
-        formData.append('photo', $(document.getElementById(photo_id))[0].files[0]);  //添加图片信息的参数
-        $.ajax({
-            url: url,
-            type: 'POST',
-            cache: false, //上传文件不需要缓存
-            data: formData,
-            processData: false, // 告诉jQuery不要去处理发送的数据
-            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
-            success: function (data) {
-                if (data.message != null && data.message !== '') {
-                    alert("系统提示：" + data.message);
+// 定义一个函数用于上传图片
+        function uploadPhoto(url, photo_id) {
+            // 创建一个FormData对象，用于存储要发送的文件数据
+            var formData = new FormData();
+            // 从指定的DOM元素（通过photo_id获取）中获取用户选择的文件，并添加到formData对象中
+            // 注意：$(document.getElementById(photo_id))[0]这部分代码看起来像是混合使用了jQuery和原生JavaScript，
+            // 实际上，应该直接使用$('#' + photo_id)[0]或document.getElementById(photo_id)来获取DOM元素
+            formData.append('photo', $(document.getElementById(photo_id))[0].files[0]);
+            // 使用jQuery的ajax方法发送POST请求
+            $.ajax({
+                url: url, // 请求的URL地址
+                type: 'POST', // 请求类型
+                cache: false, // 不缓存请求结果
+                data: formData, // 发送的数据
+                processData: false, // 不处理发送的数据（因为已经通过FormData处理）
+                contentType: false, // 不设置Content-Type请求头（由浏览器自动设置）
+                success: function (data) {
+                    // 请求成功时的回调函数
+                    if (data.message != null && data.message !== '') {
+                        alert("系统提示：" + data.message);
+                    }
+                },
+                Error: function (xhr, error, exception) {
+                    // 请求失败时的回调函数（注意：这里的Error应该是error，JavaScript中事件处理函数名称是大小写敏感的）
+                    alert(exception.toString());
                 }
-            },
-            Error: function (xhr, error, exception) {
-                alert(exception.toString());
-            }
-        })
-    }
-
+            })
+        }
     //加载聊天列表
-    function loadChatListOnMenu(chat) {
-        var chat_html = '<button class="user-list-block-href"  onmouseover="this.style.backgroundColor=\'#3A3F45\';" ' +
-            'onmouseout="this.style.backgroundColor=\'#2e3238\';"' +
-            'onclick="showChatBox(\'' + chat.id + '\')"><div class="user-list-block">\n' +
-            '                <div class="user-box" >\n' +
-            '                    <div class="user-photo">\n' +
-            '                        <img src="${pageContext.request.contextPath}/upload/photo/' + chat.photo + '" alt="用户头像" class="my-photo">\n' +
-            '                    </div>\n' +
-            '                    <div class="user-info">\n' +
-            '                        <h3 class="my-name">' + chat.name + '</h3>\n' +
-            '                        <p class="my-message" id="' + chat.id + 'new-message">没有新消息</p>\n' +
-            '                    </div>\n' +
-            '                </div>\n' +
-            '            </div></button>';
-        document.getElementById("chat-list").innerHTML += chat_html;
-    }
-
-    //加载通知列表
-    function loadNotify(notify) {
-        var html = '        <button class="user-list-block-href" onmouseover="this.style.backgroundColor=#3A3F45;"\n' +
-            '                        onmouseout="this.style.backgroundColor=#2e3238;"\n' +
-            '                        onclick="">\n' +
-            '                    <div class="user-list-block">\n' +
-            '                        <div class="user-box">\n' +
-            '                            <div class="user-photo">\n' +
-            '                                <img src="${pageContext.request.contextPath}/upload/photo/' + friend.photo + '  " alt="用户头像" class="my-photo">\n' +
-            '                            </div>\n' +
-            '                            <div class="user-info">\n' +
-            '                                <h3 class="my-name"></h3>\n' +
-            '                                <p class="my-message">' + friend.description + ' </p>\n' +
-            '                            </div>\n' +
-            '                        </div>\n' +
-            '                    </div>\n' +
-            '                    <button id="" onclick="postMoment()" style="float: right;\n' +
-            '                    background-color:#1AAD19;border: solid 1px;width: 100px;margin-right: 50px"\n' +
-            '                            contenteditable="false">发布\n' +
-            '                    </button>\n' +
-            '                </button>';
-        document.getElementById("notify-list").innerHTML += chat_html;
-    }
-
-    //加载好友列表
-    function loadFriendOnMenu(friend) {
-        var chat_html = '<button class="user-list-block-href"  onmouseover="this.style.backgroundColor=\'#3A3F45\';" ' +
-            'onmouseout="this.style.backgroundColor=\'#2e3238\';"' +
-            '><div class="user-list-block">\n' +
-            '                <div class="user-box" onclick="updateFriend(\'' + friend.id + '\')">\n' +
-            '                    <div class="user-photo">\n' +
-            '                        <img src="${pageContext.request.contextPath}/upload/photo/' + friend.photo + '" alt="用户头像" class="my-photo">\n' +
-            '                    </div>\n' +
-            '                    <div class="user-info">\n' +
-            '                        <h3 class="my-name">' + friend.alias + '</h3>\n' +
-            '                        <p class="my-message">' + friend.description + '</p>\n' +
-            '                    </div>\n' +
-            '                </div>\n' +
-            '            </div>  ' +
-            '<div class="menu-option-item">\n' +
-            '                <div id="chat" onclick="showChatBox(\'' + friend.chat_id + '\')" class="menu-option-button">发消息</div>\n' +
-            '            </div>          ' +
-            '<div class="menu-option-item">\n' +
-            '                <div id="chat"  onclick="deleteFriend(\'' + friend.friend_id + '\')" class="menu-option-button" style="float: right">删除好友</div>\n' +
-            '            </div></button>';
-        document.getElementById("friend-list").innerHTML += chat_html;
-    }
-
-    //加载好友通知
-    function loadAddFriendOnMenu(message) {
-        var chat_html = '<button class="user-list-block-href"  onmouseover="this.style.backgroundColor=\'#3A3F45\';" ' +
-            'onmouseout="this.style.backgroundColor=\'#2e3238\';"' +
-            '><div class="user-list-block">\n' +
-            '                <div class="user-box" >\n' +
-            '                    <div class="user-photo">\n' +
-            '                        <img src="${pageContext.request.contextPath}/upload/photo/' + message.sender_photo + '" alt="用户头像" class="my-photo">\n' +
-            '                    </div>\n' +
-            '                    <div class="user-info">\n' +
-            '                        <h3 class="my-name">' + message.sender_name + '</h3>\n' +
-            '                        <p class="my-message">' + message.content + '</p>\n' +
-            '                    </div>\n' +
-            '                </div>\n' +
-            '            </div>  ' +
-            '<div class="menu-option-item">\n' +
-            '                <div id="chat" onclick="agreeAddFriend(\'' + message.sender_id + '\')" class="menu-option-button">同意</div>\n' +
-            '            </div>          ';
-        document.getElementById("friend-list").innerHTML += chat_html;
-    }
-
-    //加载搜索结果页面，并显示
-    function loadSearchResult() {
-        document.getElementById("search-result-box").innerHTML =
-            '            <div class="info-box-head">          \n' +
-            '                <div class="info-box-title">                  \n' +
-            '                    <div class="info-box-title-box"><a class="info-box-title-text">用户列表</a></div>\n' +
-            '                </div>\n' +
-            '            </div>\n' +
-            '            <div class="info-detail-box">                  \n' +
-            '                <div id="content" class="info-detail">           \n' +
-            '                    <div></div>\n' +
-            '                </div>\n' +
-            '            </div>\n';
-
-        showWindowOnRight("search-result-box");
-    }
+        // 定义一个函数loadChatListOnMenu，接收一个chat对象作为参数
+        function loadChatListOnMenu(chat) {
+            // 构建一个HTML字符串，该字符串代表一个按钮，用于显示聊天信息
+            // 当鼠标悬停时，按钮背景色变为深灰色；鼠标移开时，背景色恢复为稍浅的灰色
+            // 点击按钮时，调用showChatBox函数，显示对应id的聊天框
+            var chat_html = '<button class="user-list-block-href" ' +
+                'onmouseover="this.style.backgroundColor=\'#3A3F45\';"' + // 鼠标悬停时改变背景色
+                'onmouseout="this.style.backgroundColor=\'#2e3238\';"' + // 鼠标移开时恢复背景色
+                'onclick="showChatBox(\'' + chat.id + '\')">' + // 点击按钮时显示聊天框
+                '<div class="user-list-block">\n' +
+                '                <div class="user-box" >\n' +
+                '                    <div class="user-photo">\n' +
+                '                        <!-- 用户头像的图片路径通过chat.photo获取，并拼接上下文路径 -->\n' +
+                '                        <img src="${pageContext.request.contextPath}/upload/photo/' + chat.photo + '" alt="用户头像" class="my-photo">\n' +
+                '                    </div>\n' +
+                '                    <div class="user-info">\n' +
+                '                        <!-- 显示用户的名字 -->\n' +
+                '                        <h3 class="my-name">' + chat.name + '</h3>\n' +
+                '                        <!-- 显示消息状态（默认“没有新消息”），id属性用于动态更新消息状态 -->\n' +
+                '                        <p class="my-message" id="' + chat.id + 'new-message">没有新消息</p>\n' +
+                '                    </div>\n' +
+                '                </div>\n' +
+                '            </div></button>';
+
+            // 将构建的HTML字符串添加到id为"chat-list"的元素内部，用于显示聊天列表
+            document.getElementById("chat-list").innerHTML += chat_html;
+        }
 
+        // 定义一个函数loadNotify，接收一个notify对象作为参数（但代码中似乎使用了未定义的friend对象）
+        function loadNotify(notify) {
+            // 注意：这里应该使用notify对象而不是friend对象，除非这是故意为之或者代码有误
+            var html = '        <button class="user-list-block-href" ' +
+                'onmouseover="this.style.backgroundColor=#3A3F45;"' + // 鼠标悬停时改变背景色（但缺少引号，应为\'#3A3F45\'）
+                'onmouseout="this.style.backgroundColor=#2e3238;"' + // 鼠标移开时恢复背景色（同样缺少引号）
+                'onclick="">' + // 这里onclick事件没有指定任何操作，可能是个占位符
+                '    <div class="user-list-block">' +
+                '        <div class="user-box">' +
+                '            <div class="user-photo">' +
+                '                <!-- 用户头像的图片路径似乎有误，使用了未定义的friend对象，并且路径字符串末尾有多余的空格 -->' +
+                '                <img src="${pageContext.request.contextPath}/upload/photo/' + friend.photo + '  " alt="用户头像" class="my-photo">' +
+                '            </div>' +
+                '            <div class="user-info">' +
+                '                <!-- 这里没有使用notify或friend对象的name属性来显示用户名，h3标签内为空 -->' +
+                '                <h3 class="my-name"></h3>' +
+                '                <!-- 使用了friend对象的description属性来显示通知内容 -->' +
+                '                <p class="my-message">' + friend.description + ' </p>' +
+                '            </div>' +
+                '        </div>' +
+                '        <!-- 下面的按钮似乎与通知项不直接相关，可能是个操作按钮，但放置位置可能不正确 -->' +
+                '        <button id="" onclick="postMoment()" style="float: right; background-color:#1AAD19; border: solid 1px; width: 100px; margin-right: 50px"' +
+                '                contenteditable="false">发布' +
+                '        </button>' +
+                '    </div>' +
+                '</button>'; // 注意：将整个通知项包裹在一个button元素内可能不是最佳实践，特别是内部还包含另一个button
+
+            // 注意：这里使用了未定义的变量chat_html，应该使用上面构建的html变量
+            document.getElementById("notify-list").innerHTML += chat_html; // 应改为 document.getElementById("notify-list").innerHTML += html;
+        }
+        // 定义一个函数loadFriendOnMenu，接收一个friend对象作为参数
+        function loadFriendOnMenu(friend) {
+            // 构建好友列表项的HTML字符串
+            var chat_html = '<button class="user-list-block-href" ' +
+                'onmouseover="this.style.backgroundColor=\'#3A3F45\';"' + // 鼠标悬停时改变背景色
+                'onmouseout="this.style.backgroundColor=\'#2e3238\';"' + // 鼠标移开时恢复背景色
+                '>' + // 注意：这里开始的button标签没有立即闭合，而是在内部添加了更多内容
+                '<div class="user-list-block">\n' +
+                '    <div class="user-box" onclick="updateFriend(\'' + friend.id + '\')">' + // 点击好友头像区域时调用updateFriend函数更新好友信息
+                '        <div class="user-photo">\n' +
+                '            <!-- 用户头像的图片路径，这里使用了JSP的EL表达式获取上下文路径，但在纯JavaScript中无法解析 -->' +
+                '            <img src="${pageContext.request.contextPath}/upload/photo/' + friend.photo + '" alt="用户头像" class="my-photo">\n' +
+                '        </div>\n' +
+                '        <div class="user-info">\n' +
+                '            <h3 class="my-name">' + friend.alias + '</h3>' + // 显示好友的别名
+                '            <p class="my-message">' + friend.description + '</p>' + // 显示好友的描述信息
+                '        </div>\n' +
+                '    </div>\n' +
+                '</div>  ' +
+                // 下面的div元素并不是button元素的直接子元素，但它们在button标签内部被关闭了，这是不正确的HTML结构
+                '<div class="menu-option-item">\n' +
+                '    <div id="chat" onclick="showChatBox(\'' + friend.chat_id + '\')" class="menu-option-button">发消息</div>\n' +
+                '</div>          ' +
+                '<div class="menu-option-item">\n' +
+                '    <!-- 注意：这里有两个id为"chat"的div元素，id应该是唯一的 -->' +
+                '    <div id="chat" onclick="deleteFriend(\'' + friend.friend_id + '\')" class="menu-option-button" style="float: right">删除好友</div>\n' +
+                '</div></button>'; // 这里button标签被关闭了，但整个结构看起来是不合理的，因为button内包含了多个块级元素和其他button不应包含的内容
+
+            // 将构建好的HTML字符串添加到页面的friend-list元素内
+            document.getElementById("friend-list").innerHTML += chat_html;
+        }
+        // 定义一个函数loadAddFriendOnMenu，接收一个message对象作为参数，该对象包含发送者信息和添加好友的通知内容
+        function loadAddFriendOnMenu(message) {
+            // 构建好友添加通知的HTML字符串
+            var chat_html = '<button class="user-list-block-href" ' +
+                'onmouseover="this.style.backgroundColor=\'#3A3F45\';"' + // 鼠标悬停时改变背景色
+                'onmouseout="this.style.backgroundColor=\'#2e3238\';"' + // 鼠标移开时恢复背景色
+                '>' + // 注意：这里开始的button标签没有立即闭合，而是在内部添加了更多内容
+                '<div class="user-list-block">\n' + // 用户列表块的开始
+                '    <div class="user-box" >\n' + // 用户盒子的开始，用于包裹用户信息和操作
+                '        <div class="user-photo">\n' + // 用户照片的开始
+                '            <!-- 用户头像的图片路径，这里使用了JSP的EL表达式获取上下文路径，但在纯JavaScript中无法解析 -->' +
+                '            <img src="${pageContext.request.contextPath}/upload/photo/' + message.sender_photo + '" alt="用户头像" class="my-photo">\n' + // 显示发送者的头像
+                '        </div>\n' +
+                '        <div class="user-info">\n' + // 用户信息的开始
+                '            <h3 class="my-name">' + message.sender_name + '</h3>' + // 显示发送者的名字
+                '            <p class="my-message">' + message.content + '</p>' + // 显示发送者的添加好友请求内容
+                '        </div>\n' +
+                '    </div>\n' + // 用户盒子的结束
+                '</div>  ' +
+                '<div class="menu-option-item">\n' + // 菜单选项项的开始，用于放置操作按钮
+                '    <div id="chat" onclick="agreeAddFriend(\'' + message.sender_id + '\')" class="menu-option-button">同意</div>\n' + // 同意按钮，点击后调用agreeAddFriend函数同意添加好友
+                '    <!-- 注意：这里使用了id="chat"，但在同一个页面上如果有多个这样的元素，id应该是唯一的。考虑使用class代替id，并修改相应的JavaScript代码 -->' +
+                '</div>          ' + // 菜单选项项的结束
+                '</button>'; // 这里button标签被关闭了，但整个结构看起来仍然是不合理的，因为button内包含了多个块级元素
+
+            // 将构建好的HTML字符串添加到页面的friend-list元素内
+            document.getElementById("friend-list").innerHTML += chat_html;
+        }
+        // 定义一个函数loadSearchResult，用于加载搜索结果页面的HTML结构
+        function loadSearchResult() {
+            // 设置搜索结果区域（search-result-box）的innerHTML，以显示搜索结果页面的基本结构
+            document.getElementById("search-result-box").innerHTML =
+                // 开始信息盒子头部的div，包含标题
+                '            <div class="info-box-head">          \n' +
+                // 信息盒子标题的开始
+                '                <div class="info-box-title">                  \n' +
+                // 信息盒子标题盒子，内部包含标题文本的超链接
+                '                    <div class="info-box-title-box"><a class="info-box-title-text">用户列表</a></div>\n' +
+                // 信息盒子标题的结束
+                '                </div>\n' +
+                // 信息盒子头部的结束
+                '            </div>\n' +
+                // 开始信息详情盒子的div，用于放置搜索结果的具体内容
+                '            <div class="info-detail-box">                  \n' +
+                // 信息详情盒子内部，包含一个用于放置实际搜索结果的div，但此时为空
+                '                <div id="content" class="info-detail">           \n' +
+                // 一个空的div，可能用于后续通过JavaScript动态添加搜索结果
+                '                    <div></div>\n' +
+                // 信息详情盒子的内容部分的结束
+                '                </div>\n' +
+                // 信息详情盒子的结束
+                '            </div>\n';
+
+            // 调用showWindowOnRight函数，可能用于显示或调整搜索结果区域的位置或样式
+            // 注意：这个函数在这段代码中并未定义，可能是在其他地方定义的
+            showWindowOnRight("search-result-box");
+        }
     //加载群聊信息
-    function loadChatInfoHead(chat_id) {
-        document.getElementById("search-result-box").innerHTML =
-            '                <div class="chat-box-title">       \n' +
-            '                        <a class="chat-box-title-text">聊天成员列表</a>       \n' +
-            '                </div>\n' +
-            '            <div class="info-detail-box">                  \n' +
-            '                <div id="content" class="info-detail">           \n' +
-            '                    <div></div>\n' +
-            '                </div>\n' +
-            '            </div>\n';
+        // 定义一个函数loadChatInfoHead，它接受一个参数chat_id，用于加载聊天信息的头部
+        function loadChatInfoHead(chat_id) {
+            // 注意：虽然函数接受了一个chat_id参数，但在当前代码段中并未使用这个参数
+
+            // 设置搜索结果区域（search-result-box）的innerHTML，以显示聊天信息页面的头部结构
+            document.getElementById("search-result-box").innerHTML =
+                // 开始聊天盒子标题的div
+                '                <div class="chat-box-title">       \n' +
+                // 聊天盒子标题内部，包含一个超链接，用于显示聊天成员列表的标题
+                '                        <a class="chat-box-title-text">聊天成员列表</a>       \n' +
+                // 聊天盒子标题的结束
+                '                </div>\n' +
+                // 开始信息详情盒子的div，用于放置聊天信息的具体内容（尽管当前为空）
+                '            <div class="info-detail-box">                  \n' +
+                // 信息详情盒子内部，包含一个用于放置实际聊天信息的div，但此时为空
+                // 这个div可能通过后续的JavaScript代码动态填充内容
+                '                <div id="content" class="info-detail">           \n' +
+                // 一个空的div，作为占位符，用于后续添加聊天信息
+                '                    <div></div>\n' +
+                // 信息详情盒子的内容部分的结束
+                '                </div>\n' +
+                // 信息详情盒子的结束
+                '            </div>\n';
+
+            // 调用showWindowOnRight函数，可能用于显示或调整聊天信息区域的位置或样式
+            // 注意：这个函数在这段代码中并未定义，可能是在其他地方定义的
+            // 同时，这个函数调用没有使用chat_id参数，如果需要根据chat_id来调整显示，可能需要在showWindowOnRight函数内部实现相关逻辑
+            showWindowOnRight("search-result-box");
+        }
+    //让该id对应的窗口显示出来，并把之前的隐藏起来
+        // 定义一个函数showWindowOnRight，用于显示页面右侧的窗口，并隐藏当前显示的窗口
+        function showWindowOnRight(window_id) {
+            // 获取当前页面右侧显示的窗口的ID，存储在data-window自定义属性中
+            var current_window = document.getElementById("right-page").dataset.window;
+            // 在控制台输出即将被隐藏的窗口ID
+            console.log("隐藏窗口id : " + current_window);
+            // 将当前显示的窗口隐藏（通过设置display属性为"none"）
+            document.getElementById(current_window).style.display = "none";
+            // 将指定的窗口显示出来（通过清空display属性，恢复默认显示）
+            document.getElementById(window_id).style.display = "";
+            // 更新页面右侧窗口的data-window自定义属性，记录当前显示的窗口ID
+            document.getElementById("right-page").dataset.window = window_id;
+            // 在控制台输出当前显示的窗口ID
+            console.log("当前窗口id : " + document.getElementById("right-page").dataset.window);
+        }
 
-        showWindowOnRight("search-result-box");
-    }
+        // 定义一个函数showWindowOnLeft，用于显示页面左侧的窗口，并隐藏当前显示的窗口
+        function showWindowOnLeft(window_id) {
+            // 获取当前页面左侧显示的窗口的ID，存储在data-window自定义属性中
+            var current_window = document.getElementById("menu-body").dataset.window;
+            // 在控制台输出即将被隐藏的窗口ID
+            console.log("隐藏窗口id : " + current_window);
+            // 将当前显示的窗口隐藏（通过设置display属性为"none"）
+            document.getElementById(current_window).style.display = "none";
+            // 将指定的窗口显示出来（通过清空display属性，恢复默认显示）
+            document.getElementById(window_id).style.display = "";
+            // 更新页面左侧窗口的data-window自定义属性，记录当前显示的窗口ID
+            document.getElementById("menu-body").dataset.window = window_id;
+            // 在控制台输出当前显示的窗口ID
+            console.log("当前窗口id : " + document.getElementById("menu-body").dataset.window);
+        }
 
-    //让该id对应的窗口显示出来，并把之前的隐藏起来
-    function showWindowOnRight(window_id) {
-        var current_window = document.getElementById("right-page").dataset.window;
-        console.log("隐藏窗口id : " + current_window);
-        document.getElementById(current_window).style.display = "none";
-        document.getElementById(window_id).style.display = "";
-        document.getElementById("right-page").dataset.window = window_id;
-        console.log("当前窗口id : " + document.getElementById("right-page").dataset.window);
-    }
 
-    //让该id对应的窗口显示出来，并把之前的隐藏起来
-    function showWindowOnLeft(window_id) {
-        var current_window = document.getElementById("menu-body").dataset.window;
-        console.log("隐藏窗口id : " + current_window);
-        document.getElementById(current_window).style.display = "none";
-        document.getElementById(window_id).style.display = "";
-        document.getElementById("menu-body").dataset.window = window_id;
-        console.log("当前窗口id : " + document.getElementById("menu-body").dataset.window);
-    }
+    //加载发朋友圈窗口
+        // 定义一个函数loadPostMomentBox，用于加载并显示发布朋友圈的HTML结构
+        function loadPostMomentBox() {
+            // 定义一个变量html，用于存储即将插入到页面中的HTML字符串
+            var html = '<div class="info-box" id="info-box">\n' + // 定义一个包含所有内容的div，并设置其ID为info-box
+                '            <div class="info-box-head">   \n' + // 定义头部区域
+                '                <div class="info-box-title">       \n' + // 定义标题区域
+                '                    <div class="info-box-title-box"><a class="info-box-title-text">写朋友圈</a></div>\n' + // 显示“写朋友圈”的链接
+                '                    <button id="post-moment" onclick="postMoment()"\n' + // 定义一个按钮，点击时调用postMoment函数
+                '                            style="float: right" contenteditable="false">发布\n' + // 按钮文本为“发布”，并设置其浮动到右侧，不可编辑
+                '                    </button>\n' +
+                '                </div>\n' +
+                '            </div>\n' +
+                // 以下是一个动态生成ID的部分，但这里直接写成了字符串，实际上应该使用模板字符串或拼接来动态设置
+                // 注意：这里的${sessionScope.login.id}info是一个占位符，它在实际应用中需要被替换为具体的用户ID
+                '            <div id="${sessionScope.login.id}info" class="info-detail-box">\n' + // 定义一个用于显示详细信息的div，ID应该根据用户ID动态生成
+                '                <div class="info-outline">\n' + // 定义信息的轮廓区域
+                '                    <div class="info-head-photo">\n' + // 定义头像区域
+                '                        <img id="preview" src="${pageContext.request.contextPath}/upload/photo/upload.jpg" class="info-head-img"\n' + // 显示一个预览图片，路径中包含上下文路径和默认图片
+                '                             onclick="document.getElementById(\'input_file\').click()">\n' + // 点击图片时触发文件输入框的点击事件
+                '                        <input type="file" name="file" id="input_file"\n' + // 定义一个文件输入框，用于上传图片
+                '                               accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"\n' + // 限制可上传的文件类型
+                '                               oninput="imgPreview(document.getElementById(\'input_file\'))" style="display: none">\n' + // 当文件输入发生变化时调用imgPreview函数预览图片，并隐藏输入框
+                '                    </div>\n' +
+                '                    <div class="info-head-info">\n' + // 定义头部信息区域
+                '                        <h3 class="info-head-nickname" style="    font-size: 30px;">单击左侧上传图片</h3>\n' + // 显示提示信息，引导用户上传图片
+                '                    </div>\n' +
+                '                </div>\n' +
+                '                <div class="info-detail">\n' + // 定义详细信息区域
+                '                    <div class="info-detail-block" style="margin-left: 20px">\n' + // 定义详细信息块，并设置其左边距
+                '                        <label for="moment-content"></label>\n' + // 定义一个label，但这里未使用for属性的关联功能
+                '                        <textarea class="input-text-content" style="    width: 70%;" id="moment-content" autofocus="autofocus" cols="100"\n' + // 定义一个文本区域，用于输入朋友圈内容，设置自动聚焦、宽度、列数等属性
+                '                                  contenteditable="true" onchange="enterClick(\'post-moment\')" placeholder="分享自己的动态..."\n' + // 设置内容可编辑，当内容变化时调用enterClick函数，并显示占位符
+                '                                  required="required" maxlength="300" oninput="enterClick(\'post-moment\')"></textarea>\n' + // 设置必填和最大字符数，当输入时调用enterClick函数
+                '                    </div>\n' +
+                '                </div>\n' +
+                '            </div>\n' +
+                '        </div>\n';
+
+            // 将上面定义的HTML字符串插入到ID为info-box的元素中
+            // 注意：这里有一个潜在的问题，如果页面上已经存在ID为info-box的元素，并且其中包含了其他内容，那么这些内容将被新内容替换
+            document.getElementById("info-box").innerHTML = html;
+        }
+        // 定义一个函数imgPreview，用于图片预览
+// 参数fileDom是文件输入域的DOM元素，preview是预览图片的容器（虽然此参数在代码片段中未使用）
+        function imgPreview(fileDom, preview) {
+            // 判断当前浏览器是否支持FileReader API
+            if (window.FileReader) {
+                var reader = new FileReader(); // 如果支持，则创建一个FileReader实例
+            } else {
+                // 如果不支持，则弹出提示信息
+                alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
+                return; // 并退出函数
+            }
+
+            // 从文件输入域获取用户选择的第一个文件
+            var file = fileDom.files[0];
+            // 定义一个正则表达式，用于匹配图片类型的MIME类型（如image/jpeg, image/png等）
+            var imageType = /^image\//;
+
+            // 判断选择的文件是否为图片
+            if (!imageType.test(file.type)) {
+                // 如果不是图片或文件已损坏，则弹出提示信息
+                alert("该文件不是图片或者已经损坏，请重新选择！");
+                return; // 并退出函数
+            }
+
+            // 获取文件大小（单位：MB）
+            var size = (file.size / 1024) / 1024;
+            console.log("size" + size); // 在控制台打印文件大小
+
+            // 判断文件大小是否超过5MB
+            if (size > 5) {
+                // 如果超过，则弹出提示信息
+                alert("图片大小不能大于5m！");
+                // 清空文件输入域的值，使用户可以重新选择文件
+                fileDom.value = "";
+                return; // 并退出函数
+            } else if (size <= 0) {
+                // 如果文件大小为0MB（虽然这种情况很少见），则弹出提示信息
+                alert("文件大小不能为0M！");
+                // 清空文件输入域的值
+                fileDom.value = "";
+                return; // 并退出函数
+            }
 
 
-    //加载发朋友圈窗口
-    function loadPostMomentBox() {
-        var html = '<div class="info-box" id="info-box">\n' +
-            '            <div class="info-box-head">   \n' +
-            '                <div class="info-box-title">       \n' +
-            '                    <div class="info-box-title-box"><a class="info-box-title-text">写朋友圈</a></div>\n' +
-            '                    <button id="post-moment" onclick="postMoment()"\n' +
-            '                            style="float: right" contenteditable="false">发布\n' +
-            '                    </button>\n' +
-            '                </div>\n' +
-            '            </div>\n' +
-            '            <div id="${sessionScope.login.id}info" class="info-detail-box">\n' +
-            '                <div class="info-outline">\n' +
-            '                    <div class="info-head-photo">\n' +
-            '                        <img id="preview" src="${pageContext.request.contextPath}/upload/photo/upload.jpg" class="info-head-img"\n' +
-            '                             onclick="document.getElementById(\'input_file\').click()">\n' +
-            '                        <input type="file" name="file" id="input_file"\n' +
-            '                               accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"\n' +
-            '                               oninput="imgPreview(document.getElementById(\'input_file\'))" style="display: none">\n' +
-            '                    </div>\n' +
-            '                    <div class="info-head-info">\n' +
-            '                        <h3 class="info-head-nickname" style="    font-size: 30px;">单击左侧上传图片</h3>\n' +
-            '                    </div>\n' +
-            '                </div>\n' +
-            '                <div class="info-detail">\n' +
-            '                    <div class="info-detail-block" style="margin-left: 20px">\n' +
-            '                        <label for="moment-content"></label>\n' +
-            '                        <textarea class="input-text-content" style="    width: 70%;" id="moment-content" autofocus="autofocus" cols="100"\n' +
-            '                                  contenteditable="true" onchange="enterClick(\'post-moment\')" placeholder="分享自己的动态..."\n' +
-            '                                  required="required" maxlength="300" oninput="enterClick(\'post-moment\')"></textarea>\n' +
-            '                    </div>\n' +
-            '                </div>\n' +
-            '            </div>\n' +
-            '        </div>\n';
-        document.getElementById("info-box").innerHTML = html;
-    }
-
-    //加载图片
-    function imgPreview(fileDom, preview) {
-        //判断是否支持FileReader
-        if (window.FileReader) {
-            var reader = new FileReader();
-        } else {
-            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
-        }
-        //获取文件
-        var file = fileDom.files[0];
-        var imageType = /^image\//;
-        //是否是图片
-        if (!imageType.test(file.type)) {
-            alert("该文件不是图片或者已经损坏，请重新选择！");
-            return;
-        }
-        //图片大小
-        var size = (file.size / 1024) / 1024;
-        console.log("size" + size);
-        if (size > 5) {
-            alert("图片大小不能大于5m！");
-            file.value = "";
-            return;
-        } else if (size <= 0) {
-            alert("文件大小不能为0M！");
-            file.value = "";
-            return;
         }
-
         //读取完成
         reader.onload = function (e) {
             //获取图片dom
@@ -1418,332 +2013,477 @@
     }
 
 
-    //动态加载聊天窗口，不显示loadAllMessage(page, chat_id)
+    // 定义一个函数loadChatBox，用于加载聊天窗口
+    // 参数chat是一个对象，包含了聊天窗口的相关信息，如id、name等
     function loadChatBox(chat) {
+        // 根据chat对象的信息，拼接出一个完整的HTML字符串
         var html =
-            '<div id="' + chat.id + '" class="chat-box" style="display: none;background: transparent;">\n' +
-            '            <div class="chat-box-title">\n' +
-            '                    <button onclick="quitChat(\'' + chat.id + '\')"\n' +
-            '                            class="button" contenteditable="false">退出聊天\n' +
-            '                    </button>\n' +
-            '         <button \n' +
-            '                            onclick="deleteChatMessage(\'' + chat.id + '\')"\n' +
-            '                            class="button" contenteditable="false">清除聊天记录\n' +
-            '                    </button>' +
-            '         <button \n' +
-            '                            onclick="showChatMember(\'' + chat.id + '\')"\n' +
-            '                            class="button" contenteditable="false">聊天信息\n' +
-            '                    </button>' +
-            '         <button \n' +
-            '                            onclick="loadAllMessage(\'1\',\'' + chat.id + '\')"\n' +
-            '                            class="button" contenteditable="false">加载已读消息\n' +
-            '                    </button>' +
-            '                    <p class="chat-box-title-text">\n' +
-            '                        ' + chat.name + '\n' +
-            '                    </p>\n' +
-
-            '            </div>\n' +
-            '<div class="chat-box-head">\n' +
-            '        </div>\n' +
-            '        <div id="' + chat.id + 'accept-message" class="chat-output-box" style="background: transparent;">\n' +
-            '        </div>\n' +
-            '        <div class="chat-input-box" style="background-color:#eee;" >\n' +
-            '            <button id="' + chat.id + 'send-button" onclick="sendMessage(\'' + chat.id + '\',\'user\')"  style="float: left" class="button">发送</button>\n' +
-
-
-            '      <input type="file" name="file" id="' + chat.id + 'send-file"\n' +
-            '                               oninput="send_file(document.getElementById(\'' + chat.id + 'send-file\'),\'' + chat.id + 'send-file\',\'' + chat.id + 'send-message\',\'' + chat.id + '\')"\n' +
-            '                               style="display: none">' +
-            '            <button onclick="document.getElementById(\'' + chat.id + 'send-file\').click()" style="float: left" class="' +
-            'button">文件</button>\n' +
-
-            '      <input type="file" name="file" id="' + chat.id + 'send-img"\n' +
-            '                               oninput="send_img(document.getElementById(\'' + chat.id + 'send-img\'),\'' + chat.id + 'send-img\',\'' + chat.id + 'send-message\',\'' + chat.id + '\')"\n' +
-            '                               style="display: none">' +
-            '            <button  onclick="document.getElementById(\'' + chat.id + 'send-img\').click()" style="float: left" class="button">图片</button>\n' +
-
-            '            <textarea id="' + chat.id + 'send-message" class="text-area" autofocus="autofocus" cols="100"\n' +
-            '                      required="required" maxlength="300"  oninput="enterClick(\'' + chat.id + 'send-button\')"></textarea>\n' +
-            '        </div></div>';
+            '<div id="' + chat.id + '" class="chat-box" style="display: none;background: transparent;">\n' + // 创建一个div作为聊天窗口的容器，初始状态为隐藏
+            '    <div class="chat-box-title">\n' + // 聊天窗口的标题栏
+            '        <button onclick="quitChat(\'' + chat.id + '\')" class="button" contenteditable="false">退出聊天</button>\n' + // 退出聊天的按钮
+            '        <button onclick="deleteChatMessage(\'' + chat.id + '\')" class="button" contenteditable="false">清除聊天记录</button>\n' + // 清除聊天记录的按钮
+            '        <button onclick="showChatMember(\'' + chat.id + '\')" class="button" contenteditable="false">聊天信息</button>\n' + // 显示聊天成员信息的按钮
+            // 注意：以下按钮调用了loadAllMessage函数，但您要求不显示这个函数调用，这里我保留了注释说明
+            '        <!-- <button onclick="loadAllMessage(\'1\',\'' + chat.id + '\')" class="button" contenteditable="false">加载已读消息</button> -->\n' +
+            '        <p class="chat-box-title-text">' + chat.name + '</p>\n' + // 聊天窗口的标题文本
+            '    </div>\n' +
+            '    <div class="chat-box-head">\n' + // 聊天窗口的头部（此处在您的代码中为空）
+            '    </div>\n' +
+            '    <div id="' + chat.id + 'accept-message" class="chat-output-box" style="background: transparent;">\n' + // 接收消息的区域
+            '    </div>\n' +
+            '    <div class="chat-input-box" style="background-color:#eee;">\n' + // 发送消息的区域
+            '        <button id="' + chat.id + 'send-button" onclick="sendMessage(\'' + chat.id + '\',\'user\')" style="float: left" class="button">发送</button>\n' + // 发送消息的按钮
+
+            // 文件发送的input元素，初始状态为隐藏，通过按钮点击触发选择文件
+            '        <input type="file" name="file" id="' + chat.id + 'send-file" oninput="send_file(document.getElementById(\'' + chat.id + 'send-file\'),\'' + chat.id + 'send-file\',\'' + chat.id + 'send-message\',\'' + chat.id + '\')" style="display: none">\n' +
+            '        <button onclick="document.getElementById(\'' + chat.id + 'send-file\').click()" style="float: left" class="button">文件</button>\n' +
+
+            // 图片发送的input元素，初始状态为隐藏，通过按钮点击触发选择图片
+            '        <input type="file" name="file" id="' + chat.id + 'send-img" oninput="send_img(document.getElementById(\'' + chat.id + 'send-img\'),\'' + chat.id + 'send-img\',\'' + chat.id + 'send-message\',\'' + chat.id + '\')" style="display: none">\n' +
+            '        <button onclick="document.getElementById(\'' + chat.id + 'send-img\').click()" style="float: left" class="button">图片</button>\n' +
+
+            '        <textarea id="' + chat.id + 'send-message" class="text-area" autofocus="autofocus" cols="100" required="required" maxlength="300" oninput="enterClick(\'' + chat.id + 'send-button\')"></textarea>\n' + // 输入消息的文本区域
+            '    </div>\n' +
+            '</div>';
+
+        // 将拼接好的HTML字符串添加到页面的指定位置（right-page元素内）
         document.getElementById("right-page").innerHTML += html;
     }
-
     //发送消息
+    /**
+     * 通过WebSocket发送消息的函数
+     * @param {string} chat_id - 聊天室的唯一标识符
+     * @param {string} type - 消息的类型（例如：文本、图片等）
+     */
     function sendMessage(chat_id, type) {
+        // 检查WebSocket连接是否为null，如果是，则提示用户正在初始化连接
         if (websocket === null) {
             alert("正在初始化websocket连接，第一次连接需要加载数据，请稍后...");
-            return;
+            return; // 退出函数
         }
+
+        // 检查WebSocket连接是否为空字符串，如果是，则提示用户已断开连接，并建议刷新浏览器
         if (websocket === '') {
             alert("您已断开与服务器的连接，可能您的账号已在别处登陆，请刷新浏览器重新连接服务器");
-            return;
+            return; // 退出函数
         }
+
+        // 获取输入框中的消息内容
         var content = document.getElementById(chat_id + 'send-message').value;
-        if (!('' === content)) {
+
+        // 检查消息内容是否为空，如果不为空则继续发送消息
+        if (content !== '') {
+            // 从会话作用域中获取当前登录用户的ID（这里假设是服务器端模板语言插入的值）
             var user_id = "${sessionScope.login.id}";
+
+            // 获取当前时间的时间戳
             var time = new Date().getTime();
-            websocket.send(JSON.stringify({
-                sender_id: user_id,
-                chat_id: chat_id,
-                content: content,
-                type: type,
-                time: time
-            }));
-            //发送完之后将消息清空
+
+            // 构造要发送的消息对象，并转换为JSON字符串
+            var message = JSON.stringify({
+                sender_id: user_id, // 发送者ID
+                chat_id: chat_id,   // 聊天室ID
+                content: content,   // 消息内容
+                type: type,         // 消息类型
+                time: time          // 发送时间
+            });
+
+            // 通过WebSocket发送消息
+            websocket.send(message);
+
+            // 发送完消息后，清空输入框
             document.getElementById(chat_id + 'send-message').value = '';
         } else {
+            // 如果消息内容为空，则提示用户发送内容不能为空
             alert("发送内容不能为空");
-            return;
+            return; // 退出函数
         }
     }
 
-    //发送文件
+    /**
+     * 发送文件到服务器的函数
+     * @param {HTMLInputElement} fileDom - 文件选择输入框的DOM元素
+     * @param {string} file_id - 文件选择输入框的ID（虽然这里未直接使用，但可能是为了兼容性保留）
+     * @param {string} preview - 用于显示文件链接或预览的DOM元素的ID
+     * @param {string} chat_id - 聊天室的唯一标识符
+     */
     function send_file(fileDom, file_id, preview, chat_id) {
-        //判断是否支持FileReader
+        // 检查浏览器是否支持FileReader API
         if (window.FileReader) {
-            var reader = new FileReader();
+            var reader = new FileReader(); // 实例化FileReader，但后续代码中未使用reader
         } else {
             alert("您的设备不支持文件预览功能，如需该功能请升级您的设备！");
+            return; // 如果不支持，则直接退出函数
         }
-        //获取文件
+
+        // 从文件选择输入框中获取选中的文件
         var file = fileDom.files[0];
-        //文件大小
+
+        // 计算文件大小（单位：MB）
         var size = (file.size / 1024) / 1024;
-        console.log("size" + size);
+        console.log("文件大小: " + size + "MB");
+
+        // 检查文件大小是否超出限制（20MB）
         if (size > 20) {
-            alert("文件大小不能大于20m！");
-            file.value = "";
-            return;
-        } else if (size <= 0) {
-            alert("文件大小不能为0M！");
-            file.value = "";
-            return;
+            alert("文件大小不能大于20MB！");
+            fileDom.value = ""; // 清空文件选择输入框
+            return; // 退出函数
         }
+        // 检查文件大小是否为零（虽然通常不会为零，但这里作为额外检查）
+        else if (size <= 0) {
+            alert("文件大小不能为0MB！");
+            fileDom.value = ""; // 清空文件选择输入框
+            return; // 退出函数
+        }
+
+        // 询问用户是否确定要发送文件
         if (confirm("是否确定要立即发送文件：" + file.name)) {
-            //upload-file
+            // 创建一个FormData对象，用于构建一组用`XMLHttpRequest`发送的键值对
             var formData = new FormData();
+
+            // 注意：这里的URL拼接可能存在问题，因为${host}可能是服务器端模板语言的变量，在纯前端代码中应使用其他方式获取主机名
             var url = "http://${host}/wechat/upload?method=uploadfile.do";
-            formData.append('file', $(document.getElementById(file_id))[0].files[0]);
+
+            // 将选中的文件添加到FormData对象中
+            // 注意：这里的$(document.getElementById(file_id))[0]是不必要的，直接使用fileDom即可
+            formData.append('file', fileDom.files[0]);
+
+            // 使用jQuery的$.ajax方法发送异步请求
             $.ajax({
-                url: url,
-                type: 'POST',
-                cache: false,
-                data: formData,
-                dataType: 'json',
-                processData: false,
-                contentType: false,
-                success: function (result) {
+                url: url, // 请求的URL
+                type: 'POST', // 请求类型
+                cache: false, // 不缓存
+                data: formData, // 发送的数据
+                dataType: 'json', // 预期服务器返回的数据类型
+                processData: false, // 不处理发送的数据（因为data已经是FormData对象）
+                contentType: false, // 不设置内容类型头（因为由FormData自动设置）
+                success: function (result) { // 请求成功时的回调函数
                     if (result.message != null && result.message !== '') {
                         alert("系统提示：" + result.message);
                     }
+                    // 如果服务器返回的状态为"SUCCESS"
                     if ("SUCCESS" === result.status) {
+                        // 构造文件下载链接和预览HTML
+                        // 注意：这里的${host}同样可能是服务器端模板语言的变量，在纯前端代码中应使用其他方式获取主机名
                         var html = '<a href="http://${host}/upload/file/' + result.data + '" download="' + file.name + '">下载</a>';
+                        // 在指定的预览区域显示文件信息和下载链接
+                        // 注意：这里假设preview是一个文本框的ID，用于显示文本，而不是HTML内容
+                        // 如果preview应该显示HTML，则应该使用innerHTML而不是value
                         document.getElementById(preview).value += '[文件：' + file.name + ']' + html;
+                        // 调用sendMessage函数发送文件消息到聊天室（注意：这里假设sendMessage函数已经定义）
                         sendMessage(chat_id, "file");
                     }
                 },
-                Error: function (xhr, error, exception) {
-                    alert(exception.toString());
+                error: function (xhr, status, error) { // 请求失败时的回调函数（注意：这里的Error应该改为小写error，以匹配jQuery的API）
+                    alert("请求失败：" + error.toString());
                 }
-            })
+            });
         } else {
+            // 如果用户取消发送，则直接返回
             return;
         }
     }
-
     //发送图片
     function send_img(fileDom, file_id, preview, chat_id) {
-        //判断是否支持FileReader
+        // 检查浏览器是否支持FileReader API
         if (window.FileReader) {
             var reader = new FileReader();
         } else {
             alert("您的设备不支持文件预览功能，如需该功能请升级您的设备！");
+            return; // 如果不支持FileReader，则直接返回，不执行后续代码
         }
-        //获取文件
+
+        // 从fileDom（通常是一个input[type="file"]元素）获取用户选择的第一个文件
         var file = fileDom.files[0];
-        //文件大小
+
+        // 计算文件大小（单位：MB）
         var size = (file.size / 1024) / 1024;
-        console.log("size" + size);
+        console.log("size" + size); // 在控制台打印文件大小
+
+        // 定义一个正则表达式，用于匹配图片类型的MIME类型
         var imageType = /^image\//;
-        //是否是图片
+
+        // 检查选择的文件是否为图片
         if (!imageType.test(file.type)) {
             alert("该文件不是图片或者已经损坏，请重新选择！");
-            return;
+            return; // 如果不是图片，则直接返回
         }
+
+        // 检查文件大小是否在允许范围内（0MB < size <= 5MB）
         if (size > 5) {
             alert("图片大小不能大于5m！");
-            file.value = "";
-            return;
+            fileDom.value = ""; // 清空文件选择框
+            return; // 如果文件过大，则直接返回
         } else if (size <= 0) {
             alert("文件大小不能为0M！");
-            file.value = "";
-            return;
+            fileDom.value = ""; // 清空文件选择框
+            return; // 如果文件大小为0或负数，则直接返回
         }
-        //读取完成
+
+        // 设置FileReader的onload事件处理函数，但这里没有实际的处理逻辑
         reader.onload = function () {
         };
+
+        // 使用FileReader读取文件内容，并转换为DataURL（base64编码）
         reader.readAsDataURL(file);
+
+        // 弹出确认框，询问用户是否确定要发送图片
         if (confirm("是否确定要立即发送图片：" + file.name)) {
-            //upload-file
+            // 创建一个FormData对象，用于构建要发送的数据
             var formData = new FormData();
+
+            // 注意：这里的URL模板字符串可能存在问题，${host}需要被正确替换
             var url = "http://${host}/wechat/upload?method=uploadfile.do";
+
+            // 将文件添加到FormData对象中
+            // 注意：这里的$(document.getElementById(file_id))[0]可能存在问题，直接fileDom即可
             formData.append('file', $(document.getElementById(file_id))[0].files[0]);
+            // 更正为：formData.append('file', file);
+
+            // 使用jQuery的ajax方法发送POST请求
             $.ajax({
-                url: url,
-                type: 'POST',
-                cache: false,
-                data: formData,
-                dataType: 'json',
-                processData: false,
-                contentType: false,
+                url: url, // 请求的URL
+                type: 'POST', // 请求类型
+                cache: false, // 不缓存
+                data: formData, // 发送的数据
+                dataType: 'json', // 预期服务器返回的数据类型
+                processData: false, // 不处理发送的数据
+                contentType: false, // 不设置内容类型头
                 success: function (result) {
+                    // 请求成功时的处理逻辑
                     if (result.message != null && result.message !== '') {
                         alert("系统提示：" + result.message);
                     }
                     if ("SUCCESS" === result.status) {
+                        // 拼接HTML字符串，用于显示图片
+                        // 注意：这里的${pageContext.request.contextPath}需要被正确替换
                         var html = '<img src="${pageContext.request.contextPath}/upload/file/' + result.data + '"\n' +
                             '         style="height: 100%;width: 100%;max-height:200px;max-width:200px;">\n';
+                        // 将图片HTML插入到预览区域
+                        // 注意：这里假设preview是一个元素的id，但使用value属性可能不正确，应使用innerHTML或类似属性
                         document.getElementById(preview).value += html;
+                        // 更正为：document.getElementById(preview).innerHTML += html;
+
+                        // 调用sendMessage函数发送消息（这里假设sendMessage是已定义的函数）
                         sendMessage(chat_id, "img");
                     }
                 },
-                Error: function (xhr, error, exception) {
+                error: function (xhr, error, exception) { // 注意：这里的Error应改为小写error
+                    // 请求失败时的处理逻辑
                     alert(exception.toString());
                 }
-            })
+            });
         } else {
-            return;
+            return; // 如果用户取消发送，则直接返回
         }
     }
 
-
-    //移除一个成员
+    // 定义一个函数，用于移除聊天室中的一个成员
     function removeMember(member_id, chat_id) {
+        // 使用confirm函数弹出一个确认框，询问用户是否确定要移除该成员
         if (confirm("是否确定要移除该成员？")) {
-            var url = 'http://${host}/wechat/chat';
+            // 定义请求的URL，但这里有一个错误：URL模板字符串中的变量${host}应该被实际的变量值替换
+            // 正确的做法应该是：`var url = `http://${host}/wechat/chat/remove.do`;` 并且确保host变量已经被定义和赋值
+            var url = 'http://${host}/wechat/chat'; // 错误：${host}没有被正确解析为变量值
+
+            // 准备请求的参数，包括请求方法和要移除的成员的ID
+            // 注意：这里的method字段值"remove.do"看起来像是路径的一部分，而不是HTTP方法（如GET, POST）。
+            // 如果"remove.do"是服务器端处理请求的路径，它应该被包含在URL中，而不是作为请求体的一部分。
             var request = {
-                method: "remove.do",
-                member_id: member_id,
+                method: "remove.do", // 这里的method字段可能是误导，通常HTTP方法（如POST）是在请求头中指定的
+                member_id: member_id, // 成员ID，用于指定要移除的成员
             };
+
+            // 弹出一个警告框，通知用户正在移除成员
             alert("正在移除该成员，请稍后...");
+
+            // 调用postRequest函数发送请求到服务器
+            // 注意：postRequest函数没有在代码片段中定义，我们假设它是一个已经定义好的函数，用于发送POST请求
             postRequest(url, request, function (result) {
+                // 回调函数，用于处理服务器返回的结果
                 if ('SUCCESS' === result.status) {
-                    showChatMember(chat_id);
+                    // 如果服务器返回的状态是"SUCCESS"，则调用showChatMember函数重新加载并显示聊天室成员列表
+                    showChatMember(chat_id); // 假设showChatMember是一个已经定义好的函数，用于显示指定聊天室的成员列表
                 }
+                // 如果服务器返回的状态不是"SUCCESS"，这里没有处理逻辑，可能需要添加错误处理
             });
         } else {
+            // 如果用户点击了取消按钮，则直接返回，不执行移除操作
             return;
         }
     }
-
     //插入一个搜索用户的结果
+    // 定义一个函数，用于将搜索结果中的用户信息以HTML格式添加到页面上
     function addSearchUserResultHtml(user) {
-        <%--var html = '                   <div class="info-detail-block">               \n' +--%>
-        <%--    // '                        <div class="user-box" style="border-top: 1px solid;margin: 20px;">\n' +--%>
-        <%--    '                            <div class="user-photo" style="margin: 20px">\n' +--%>
-        <%--    '                                <img src="${pageContext.request.contextPath}/upload/photo/' + user.photo + '" alt="用户头像" class="my-photo">\n' +--%>
-        <%--    '                            </div>\n' +--%>
-        <%--    '                            <div class="user-info">\n' +--%>
-        <%--    '                                <h3 class="my-name" style="color: #333；width: fit-content;">' + user.name + '</h3>\n' +--%>
-        <%--    '                            <button onclick="addFriend(\'' + user.id + '\')" style="float: right"\n' +--%>
-        <%--    '                                    contenteditable="false">加好友\n' +--%>
-        <%--    '                            </button>\n' +--%>
-        <%--    '                            </div>\n' +--%>
-        <%--    '                                <p class="my-message" style="margin-top:-25px;">' + user.signature + '</p>\n' +--%>
-        <%--    // '                        </div>\n' +--%>
-        <%--    '                    </div>';--%>
-        var html = '                   <div class="info-detail-block" style="  width: 95%;min-width:300px;">               \n' +
-            // '                        <div class="user-box" style="border-top: 1px solid;margin: 20px;">\n' +
+        // 构造包含用户信息的HTML字符串
+        // 注意：这里的字符串拼接方式可能会导致XSS（跨站脚本）攻击，如果user对象中的数据来自不可信的源，应该进行适当的转义或使用模板引擎来避免这种风险
+        var html = '                   <div class="info-detail-block" style="width: 95%; min-width: 300px;">\n' +
+            // 注释掉的代码表示原本可能有一个包含用户信息的外部div，但现在被移除了
+            // '                        <div class="user-box" style="border-top: 1px solid; margin: 20px;">\n' +
             '                            <div class="user-photo" style="margin: 20px">\n' +
+            // 使用用户的照片路径构造img标签的src属性
+            // 注意：这里使用了模板字符串的语法，但${pageContext.request.contextPath}看起来像是服务器端模板的语法，
+            // 在客户端JavaScript中它不会被解析。如果这是从服务器端渲染的HTML中直接复制的代码，
+            // 那么这部分应该被替换为实际的静态路径或通过API获取的路径。
             '                                <img src="${pageContext.request.contextPath}/upload/photo/' + user.photo + '" alt="用户头像" class="my-photo">\n' +
             '                            </div>\n' +
             '                            <div class="user-info">\n' +
-            '                                <h3 class="my-name" style="color: #333;width: fit-content;">' + user.name + '</h3>\n' +
-            '                            <button onclick="addFriend(\'' + user.id + '\')" class="button"\n' +
-            '                                    contenteditable="false">加好友\n' +
+            // 显示用户的名字，使用h3标签并设置样式
+            '                                <h3 class="my-name" style="color: #333; width: fit-content;">' + user.name + '</h3>\n' +
+            // 添加一个按钮，当用户点击时会调用addFriend函数并传入用户的ID
+            // 注意：这里直接将用户ID拼接到onclick属性中，如果ID来自不可信的源，这也可能导致安全问题
+            '                            <button onclick="addFriend(\'' + user.id + '\')" class="button" contenteditable="false">加好友\n' +
             '                            </button>\n' +
             '                            </div>\n' +
-            '                                <p class="my-message" style="margin-top:-25px;width: 70%;">' + user.signature + '</p>\n' +
+            // 显示用户的签名信息，使用p标签并设置样式
+            // 注意：这里的样式margin-top:-25px可能会导致布局问题，需要确保这是期望的样式效果
+            '                                <p class="my-message" style="margin-top:-25px; width: 70%;">' + user.signature + '</p>\n' +
+            // 注释掉的代码表示原本可能关闭的外部div，但现在被移除了
             // '                        </div>\n' +
             '                    </div>';
+
+        // 将构造好的HTML字符串添加到页面上id为"content"的元素内部
+        // 注意：使用innerHTML += 可能会导致性能问题，特别是当需要添加大量元素时。
+        // 考虑使用DocumentFragment或其他方法来优化性能。
         document.getElementById("content").innerHTML += html;
     }
-
-    //插入一个群成员的信息
+    // 定义一个函数，用于将群成员的信息以HTML格式添加到页面上
     function addMemberHtml(member) {
-        var html = '                   <div class="info-detail-block" style="  width: 95%;min-width:300px;">               \n' +
-            // '                        <div class="user-box" style="border-top: 1px solid;margin: 20px;">\n' +
+        // 构造包含群成员信息的HTML字符串
+        // 注意：这里的字符串拼接方式同样存在XSS（跨站脚本）攻击的风险，
+        // 如果member对象中的数据来自不可信的源，应该进行适当的转义或使用模板引擎来避免这种风险。
+        var html = '                   <div class="info-detail-block" style="width: 95%; min-width: 300px;">\n' +
+            // 注释掉的代码表示原本可能有一个包含群成员信息的外部div，但现在被移除了
+            // '                        <div class="user-box" style="border-top: 1px solid; margin: 20px;">\n' +
             '                            <div class="user-photo" style="margin: 20px">\n' +
+            // 使用群成员的照片路径构造img标签的src属性
+            // 注意：这里同样使用了模板字符串的语法，但${pageContext.request.contextPath}是服务器端模板的语法，
+            // 在客户端JavaScript中它不会被解析。如果这是从服务器端渲染的HTML中直接复制的代码，
+            // 那么这部分应该被替换为实际的静态路径或通过API获取的路径。
             '                                <img src="${pageContext.request.contextPath}/upload/photo/' + member.photo + '" alt="用户头像" class="my-photo">\n' +
             '                            </div>\n' +
             '                            <div class="user-info">\n' +
-            '                                <h3 class="my-name" style="color: #333;width: fit-content;">' + member.name + '</h3>\n' +
-            '                            <button onclick="removeMember(\'' + member.id + '\',\'' + member.chat_id + '\')" class="button"\n' +
-            '                                    contenteditable="false">移出该群\n' +
+            // 显示群成员的名字，使用h3标签并设置样式
+            '                                <h3 class="my-name" style="color: #333; width: fit-content;">' + member.name + '</h3>\n' +
+            // 添加一个按钮，当管理员点击时会调用removeMember函数并传入群成员的ID和群聊ID
+            // 注意：这里直接将群成员的ID和群聊ID拼接到onclick属性中，如果这些数据来自不可信的源，这也可能导致安全问题。
+            '                            <button onclick="removeMember(\'' + member.id + '\',\'' + member.chat_id + '\')" class="button" contenteditable="false">移出该群\n' +
             '                            </button>\n' +
-            '                            <button onclick="addFriend(\'' + member.user_id + '\')" class="button"\n' +
-            '                                    contenteditable="false">加好友\n' +
+            // 添加另一个按钮，当点击时会调用addFriend函数并传入群成员的用户ID（假设user_id是群成员在系统中的唯一标识）
+            // 注意：同样存在直接将数据拼接到onclick属性中的安全问题。
+            '                            <button onclick="addFriend(\'' + member.user_id + '\')" class="button" contenteditable="false">加好友\n' +
             '                            </button>\n' +
             '                            </div>\n' +
-            '                                <p class="my-message" style="margin-top:-25px;width: 60%;">' + member.signature + '</p>\n' +
+            // 显示群成员的签名信息，使用p标签并设置样式
+            // 注意：这里的样式margin-top:-25px可能会导致布局问题，需要确保这是期望的样式效果。
+            '                                <p class="my-message" style="margin-top:-25px; width: 60%;">' + member.signature + '</p>\n' +
+            // 注释掉的代码表示原本可能关闭的外部div，但现在被移除了
             // '                        </div>\n' +
             '                    </div>';
+
+        // 将构造好的HTML字符串添加到页面上id为"content"的元素内部
+        // 注意：使用innerHTML += 可能会导致性能问题，特别是当需要添加大量元素时。
+        // 考虑使用DocumentFragment或其他方法来优化性能。
         document.getElementById("content").innerHTML += html;
     }
-
-
     //显示朋友圈详情
+    // 定义一个函数，用于将某个动态的详细信息以HTML格式添加到页面上
     function addMomentDetailHtml(moment_id) {
+        // 注意：这里有一个潜在的错误，moment.id应该是moment_id，因为函数参数是moment_id
+        // 但如果这段代码是从更大的上下文中复制过来的，并且有一个全局的moment对象，
+        // 那么这可能是正确的。然而，在大多数情况下，这看起来是一个错误。
         var html = '           <div id="' + moment.id + '" class="info-detail-block" style="margin-left: 20px">\n' +
+            // 这行代码尝试将已存在的元素（通过moment_id获取）的innerHTML添加到新的HTML字符串中
+            // 但这样做通常没有意义，因为你会丢失对原始DOM元素的引用，并且可能导致不必要的DOM操作
+            // 如果你的目的是更新内容，你应该直接操作DOM元素而不是重新创建它
             document.getElementById(moment_id).innerHTML +
             '                    </div>';
+
+        // 将构造好的HTML字符串设置为页面上id为"news-detail-box-content"的元素的innerHTML
+        // 这将替换该元素内的所有现有内容
         document.getElementById("news-detail-box-content").innerHTML = html;
+
+        // 调用loadRemark函数来加载该动态的评论
+        // 传入动态ID和页码（这里页码固定为1，可能意味着只加载第一页评论）
         loadRemark(moment_id, 1);
+
+        // 调用showWindowOnRight函数来显示某个窗口（可能是评论窗口或详细信息窗口）
+        // 传入窗口的id（这里是'news-detail-box'）
         showWindowOnRight('news-detail-box');
     }
 
-    //加载评论
+    // 定义一个函数，用于加载某个动态的评论
     function loadRemark(moment_id, page) {
-        var url = "http://${host}/wechat/remark";
+        // 构造请求的URL
+        // 注意：这里的"${host}"是服务器端模板的语法，在客户端JavaScript中它不会被解析
+        // 如果这是从服务器端渲染的HTML中直接复制的代码，那么这部分应该被替换为实际的静态URL或通过API获取的基础URL
+        var url = "http://${host}/wechat/remark/list.do";
+
+        // 构造请求的参数对象
         var request = {
-            method: "list.do",
+            method: "list", // 注意：这里的"method"字段值"list.do"看起来是一个错误，应该是"list"或其他有效的API方法名
             moment_id: moment_id,
             page: page
         };
+
+        // 显示一个警告框，告诉用户正在加载评论
+        // 在实际应用中，更好的做法是使用某种形式的用户反馈（如进度条或加载动画），而不是阻塞用户的警告框
         alert("正在加载评论，请稍侯...");
+
+        // 调用postRequest函数发送POST请求到服务器
+        // 注意：postRequest函数没有在代码片段中定义，所以我们假设它是一个全局函数，用于发送POST请求
+        // 并且它接受三个参数：URL、请求参数和一个回调函数
         postRequest(url, request, function (result) {
+            // 从响应结果中获取评论数据
             var remarks = result.data;
+
+            // 遍历评论数据，并为每个评论调用addRemarkBlockHtml函数（该函数没有在代码片段中定义）
+            // 我们假设addRemarkBlockHtml函数负责将评论以HTML格式添加到页面上
             for (var i = 0; i < remarks.length; i++) {
                 addRemarkBlockHtml(remarks[i]);
             }
         });
     }
-
-    //插入一条用户的朋友圈评论
+    // 定义一个函数，用于将一条用户的朋友圈评论以HTML格式添加到页面上
     function addRemarkBlockHtml(remark) {
+        // 将评论的时间戳转换为本地时间字符串
         var time = new Date(remark.time).toLocaleString();
+
+        // 构造评论的HTML字符串
+        // 注意：这里的"${pageContext.request.contextPath}"是服务器端模板的语法，
+        // 在客户端JavaScript中它不会被解析。如果这是从服务器端渲染的HTML中直接复制的代码，
+        // 那么这部分应该被替换为实际的静态URL或通过API获取的基础URL路径。
         var html = '           <div id="' + remark.id + '" class="info-detail-block" style="margin-left: 20px;margin-bottom: -26px">\n' +
             '                        <label for="moment-content">\n' +
-            '                            <div class="info-detail-block" style="margin-bottom: -5px;">               \n' +
+            '                            <div class="info-detail-block" style="margin-bottom: -5px;">               \n' +
             '                                <div class="user-box" style="width: 95%;border-bottom: 1px solid #ccc;    margin-left: 70px;">\n' +
             '                                    <div class="user-photo">\n' +
+            '                                        <!-- 用户头像的图片链接，注意这里的URL拼接问题 -->\n' +
             '                                        <img src="${pageContext.request.contextPath}/upload/photo/' + remark.user_photo + '" alt="用户头像" class="my-photo">\n' +
             '                                    </div>\n' +
             '                                    <div onclick="addMomentDetailHtml(\'' + remark.id + '\')" class="user-info" style="height: fit-content;margin-bottom: 11px;">\n' +
+            '                                        <!-- 用户名称和发布时间 -->\n' +
             '                                        <h3 class="my-name" style="color: #333">' + remark.user_name + ' 发布于 ' + time + '</h3>\n' +
+            '                                        <!-- 评论内容，注意处理可能的HTML特殊字符以避免XSS攻击 -->\n' +
             '                                        <div style="word-break: break-all;white-space: normal;max-width: 600px;">' + remark.content + '</div>\n' +
             '                                    </div>\n' +
+            '                                    <!-- 点赞按钮，注意这里的onclick事件处理函数"dev()"似乎是一个占位符，需要替换为实际的函数名 -->\n' +
             '                                    <button id="' + remark.id + 'love" data-love="' + remark.love + '" onclick="dev()" style="float: left"\n' +
             '                                            contenteditable="false" class="button">点赞\(' + remark.love + '\)\n' +
             '                                    </button>\n' +
+            '                                    <!-- 回复按钮，注意这里的onclick事件处理函数接收两个参数：动态的ID和用户名 -->\n' +
             '                                    <button id="' + remark.id + 'remark" data-reply="' + remark.reply + '" onclick="replyRemark(\'' + remark.moment_id + '\',\'' + remark.user_name + '\')" style="float: left"\n' +
-            '                                            contenteditable="false" class="button">回复' +
+            '                                            contenteditable="false" class="button">回复\n' +
             '                                    </button>\n';
+
+        // 访客区域（非评论者本人看到的部分）
         var visitorArea =
             '                                </div>\n' +
             '                            </div>\n' +
             '                        </label>\n' +
             '                    </div>';
+
+        // 拥有者区域（评论者本人看到的部分，包含删除按钮）
         var ownerArea =
             '                                    <button onclick="deleteRemark(\'' + remark.id + '\',\'' + remark.moment_id + '\')" style="float: right" \n' +
             '                                            contenteditable="false" class="button">删除\n' +
@@ -1752,52 +2492,73 @@
             '                            </div>\n' +
             '                        </label>\n' +
             '                    </div>';
-        if (remark.user_id ===${sessionScope.login.id}) {
+
+        // 根据评论者是否是当前登录用户，决定添加哪个区域的HTML到页面上
+        // 注意：这里的"${sessionScope.login.id}"是服务器端模板的语法，在客户端JavaScript中它不会被解析。
+        // 如果这是从服务器端渲染的HTML中直接复制的代码，并且你希望在客户端根据登录状态动态显示内容，
+        // 你需要通过API或其他方式在客户端获取当前登录用户的ID。
+        if (remark.user_id === ${sessionScope.login.id}) {
+            // 如果是当前登录用户发布的评论，则添加拥有者区域的HTML
             document.getElementById("news-detail-box-content").innerHTML += html + ownerArea;
         } else {
+            // 如果不是当前登录用户发布的评论，则添加访客区域的HTML
             document.getElementById("news-detail-box-content").innerHTML += html + visitorArea;
         }
     }
-
     //插入一条朋友圈动态
     function addNewsBlockHtml(moment) {
+        // 将moment.time转换为本地时间字符串
         var time = new Date(moment.time).toLocaleString();
+
+        // 初始化HTML字符串，用于构建动态内容的HTML结构
         var html = '           <div id="' + moment.id + '" class="info-detail-block" style="margin-left: 20px;margin-bottom:0px;">\n' +
             '                        <label for="moment-content" style="    margin-bottom: -47px;">\n' +
-            '                            <div class="info-detail-block" >               \n' +
+            '                            <div class="info-detail-block" >               \n' +
             '                                <div class="user-box" style="border-bottom: 1px solid #ccc;width:100%;">\n' +
             '                                    <div class="user-photo">\n' +
-            '                                        <img src="${pageContext.request.contextPath}/upload/photo/' + moment.user_photo + '" alt=w"用户头像" class="my-photo">\n' +
+            // 插入用户头像图片，路径由pageContext.request.contextPath和moment.user_photo拼接而成
+            '                                        <img src="${pageContext.request.contextPath}/upload/photo/' + moment.user_photo + '" alt="用户头像" class="my-photo">\n' +
             '                                    </div>\n' +
+            // 用户信息区域，包括用户名、发布时间、动态内容、图片等
             '                                    <div onclick="addMomentDetailHtml(\'' + moment.id + '\')" class="user-info" style="height: fit-content;margin-bottom: 11px;">\n' +
             '                                        <h3 class="my-name" style="color: #333">' + moment.user_name + ' 发布于 ' + time + '</h3>\n' +
+            // 动态内容，使用word-break和white-space样式确保内容正确换行和显示
             '                                        <div style="word-break: break-all;white-space: normal;    max-width: 70%">' + moment.content + '</div>\n' +
+            // 插入动态图片，路径由pageContext.request.contextPath和moment.photo拼接而成
             '                                        <img src="${pageContext.request.contextPath}/upload/photo/' + moment.photo + '" style="position:relative;height: 100%;' +
             '                                       max-width:500px;max-height:300px;width: 100%">\n' +
             '                                    </div>\n' +
+            // 点赞按钮，点击时调用loveMoment函数，传入moment.id和当前点赞数
             '                                    <button id="' + moment.id + 'love" data-love="' + moment.love + '" ' +
             '                                       onclick="loveMoment(\'' + moment.id + '\',' + moment.love + ')" style="float: left;height: 30px;"  class="button" \n' +
-            '                                            contenteditable="false">点赞\(' + moment.love + '\)\n' +
+            '                                            contenteditable="false">点赞(' + moment.love + ')\n' +
             '                                    </button>\n' +
+            // 评论按钮，点击时调用remarkMoment函数，传入moment.id和当前评论数
             '                                    <button id="' + moment.id + 'remark" data-remark="' + moment.remark + '" ' +
             '                                       onclick="remarkMoment(\'' + moment.id + '\',' + moment.remark + ')" style="float: left;height: 30px;"  class="button" \n' +
-            '                                            contenteditable="false">评论\(' + moment.remark + '\)\n' +
+            '                                            contenteditable="false">评论(' + moment.remark + ')\n' +
             '                                    </button>\n' +
+            // 收藏按钮，目前点击事件为空，显示当前收藏数
             '                                    <button onclick="dev()" style="float: left;height: 30px;"  class="button" \n' +
-            '                                            contenteditable="false">收藏\(' + moment.collect + '\)\n' +
+            '                                            contenteditable="false">收藏(' + moment.collect + ')\n' +
             '                                    </button>\n' +
+            // 转发按钮，目前点击事件为空，显示当前转发数
             '                                    <button onclick="dev()" style="float: left;height: 30px;"  class="button" \n' +
-            '                                            contenteditable="false">转发\(' + moment.share + '\)\n' +
+            '                                            contenteditable="false">转发(' + moment.share + ')\n' +
             '                                    </button>\n' +
+            // 浏览量按钮，目前点击事件为空，显示当前浏览量
             '                                    <button onclick="" style="float: left;height: 30px;"  class="button" \n' +
-            '                                            contenteditable="false">浏览量\(' + moment.view + '\)\n' +
+            '                                            contenteditable="false">浏览量(' + moment.view + ')\n' +
             '                                    </button>\n';
 
+        // 访客区域HTML，不包含删除按钮
         var visitorArea =
             '                                </div>\n' +
             '                            </div>\n' +
             '                        </label>\n' +
             '                    </div>';
+
+        // 拥有者区域HTML，包含删除按钮
         var ownerArea =
             '                                    <button onclick="deleteMoment(\'' + moment.id + '\')" style="float: left;margin-left: 210px;height: 30px;"  \n' +
             '                                            class="button" contenteditable="false">删除\n' +
@@ -1806,67 +2567,78 @@
             '                            </div>\n' +
             '                        </label>\n' +
             '                    </div>';
-        if (moment.owner_id ===${sessionScope.login.id}) {
+
+        // 判断当前登录用户的ID是否与moment的owner_id相同，以确定是否显示删除按钮
+        if (moment.owner_id === ${sessionScope.login.id}) { // 注意：这里的${sessionScope.login.id}是伪代码，实际使用需替换为获取当前登录用户ID的方式
             document.getElementById("news-box-content").innerHTML += html + ownerArea;
         } else {
             document.getElementById("news-box-content").innerHTML += html + visitorArea;
         }
     }
-
     //插入一条用户的朋友圈
+    // 定义一个函数 addMomentBlockHtml，接收一个参数 moment
     function addMomentBlockHtml(moment) {
+        // 将 moment.time 转换为本地时间字符串
         var time = new Date(moment.time).toLocaleString();
+
+        // 初始化 HTML 字符串，用于构建动态内容的 HTML 结构
         var html = '           <div id="' + moment.id + '" class="info-detail-block" style="margin-left: 20px;margin-bottom:0px;">\n' +
+            // 创建一个 label 元素，用于包裹动态内容
             '                        <label for="moment-content" style="    margin-bottom: -47px;">\n' +
-            '                            <div class="info-detail-block" >               \n' +
+            // 动态内容的容器
+            '                            <div class="info-detail-block" >               \n' +
+            // 用户信息盒子，包含用户头像和用户名等信息
             '                                <div class="user-box" style="border-bottom: 1px solid #ccc;width:100%;">\n' +
+            // 用户头像
             '                                    <div class="user-photo">\n' +
-            '                                        <img src="${pageContext.request.contextPath}/upload/photo/' + moment.user_photo + '" alt=w"用户头像" class="my-photo">\n' +
+            '                                        <img src="${pageContext.request.contextPath}/upload/photo/' + moment.user_photo + '" alt="用户头像" class="my-photo">\n' +
             '                                    </div>\n' +
+            // 用户信息和动态内容，以及点赞、评论等按钮的容器
             '                                    <div onclick="addMomentDetailHtml(\'' + moment.id + '\')" class="user-info" style="height: fit-content;margin-bottom: 11px;">\n' +
+            // 显示用户名和发布时间
             '                                        <h3 class="my-name" style="color: #333">' + moment.user_name + ' 发布于 ' + time + '</h3>\n' +
+            // 显示动态内容
             '                                        <div style="word-break: break-all;white-space: normal;    max-width: 70%">' + moment.content + '</div>\n' +
-            '                                        <img src="${pageContext.request.contextPath}/upload/photo/' + moment.photo + '" style="position:relative;height: 100%;' +
-            '                                       max-width:500px;max-height:300px;width: 100%">\n' +
+            // 显示动态图片
+            '                                        <img src="${pageContext.request.contextPath}/upload/photo/' + moment.photo + '" style="position:relative;height: 100%;max-width:500px;max-height:300px;width: 100%">\n' +
             '                                    </div>\n' +
-            '                                    <button id="' + moment.id + 'love" data-love="' + moment.love + '" ' +
-            '                                       onclick="loveMoment(\'' + moment.id + '\',' + moment.love + ')" style="float: left;height: 30px;"  class="button"\n' +
-            '                                            contenteditable="false">点赞\(' + moment.love + '\)\n' +
-            '                                    </button>\n' +
-            '                                    <button id="' + moment.id + 'remark" data-remark="' + moment.remark + '" ' +
-            '                                       onclick="remarkMoment(\'' + moment.id + '\',' + moment.remark + ')" style="float: left;height: 30px;"  class="button"\n' +
-            '                                            contenteditable="false">评论\(' + moment.remark + '\)\n' +
-            '                                    </button>\n' +
-            '                                    <button onclick="dev()" style="float: left;height: 30px;"  class="button"\n' +
-            '                                            contenteditable="false">收藏\(' + moment.collect + '\)\n' +
-            '                                    </button>\n' +
-            '                                    <button onclick="dev()" style="float: left;height: 30px;"  class="button"\n' +
-            '                                            contenteditable="false">转发\(' + moment.share + '\)\n' +
-            '                                    </button>\n' +
-            '                                    <button onclick="" style="float: left;height: 30px;"  class="button"\n' +
-            '                                            contenteditable="false">浏览量\(' + moment.view + '\)\n' +
-            '                                    </button>\n';
-
+            // 点赞按钮
+            '                                    <button id="' + moment.id + 'love" data-love="' + moment.love + '" onclick="loveMoment(\'' + moment.id + '\',' + moment.love + ')" style="float: left;height: 30px;"  class="button" contenteditable="false">点赞(' + moment.love + ')</button>\n' +
+            // 评论按钮
+            '                                    <button id="' + moment.id + 'remark" data-remark="' + moment.remark + '" onclick="remarkMoment(\'' + moment.id + '\',' + moment.remark + ')" style="float: left;height: 30px;"  class="button" contenteditable="false">评论(' + moment.remark + ')</button>\n' +
+            // 收藏按钮，这里 onclick 指向了一个不存在的函数 dev()
+            '                                    <button onclick="dev()" style="float: left;height: 30px;"  class="button" contenteditable="false">收藏(' + moment.collect + ')</button>\n' +
+            // 转发按钮，同样 onclick 指向了一个不存在的函数 dev()
+            '                                    <button onclick="dev()" style="float: left;height: 30px;"  class="button" contenteditable="false">转发(' + moment.share + ')</button>\n' +
+            // 浏览量显示按钮，onclick 属性为空
+            '                                    <button onclick="" style="float: left;height: 30px;"  class="button" contenteditable="false">浏览量(' + moment.view + ')</button>\n';
+
+        // 访客区域（这里实际上没有使用，可能是为了区分用户和管理员视图）
         var visitorArea =
             '                                </div>\n' +
             '                            </div>\n' +
             '                        </label>\n' +
             '                    </div>';
+
+        // 拥有者区域（包含删除按钮，通常只对动态发布者可见）
         var ownerArea =
-            '                                    <button onclick="deleteMoment(\'' + moment.id + '\')" style="float: left;margin-left: 210px;height: 30px;"\n' +
-            '                                            class="button" contenteditable="false">删除\n' +
+            '                                    <button onclick="deleteMoment(\'' + moment.id + '\')" style="float: left;margin-left: 210px;height: 30px;" class="button" contenteditable="false">删除\n' +
             '                                    </button>\n' +
             '                                </div>\n' +
             '                            </div>\n' +
             '                        </label>\n' +
             '                    </div>';
+
+        // 将生成的 HTML 代码（包括访客区域和拥有者区域）添加到页面的某个元素（id 为 moment-box-content）中
         document.getElementById("moment-box-content").innerHTML += html + ownerArea;
     }
 
     //插入朋友圈照片
     function addPhotoHtml(photo) {
+        // 构建包含照片的HTML字符串
+        // 注意：这里使用了字符串拼接来创建HTML结构
         var html = '           <div class="info-detail-block" style="margin-left: 20px">\n' +
-            '                            <div class="info-detail-block">               \n' +
+            '                            <div class="info-detail-block">               \n' +
             '                                <div class="user-box" style="">\n' +
             '                                    <div class="user-info" style="    border-bottom: 1px solid #ccc;height: fit-content;margin-bottom: 11px;">\n' +
             '                                        <img src="${pageContext.request.contextPath}/upload/photo/' + photo + '" style="position:relative;height: 100%;' +
@@ -1876,11 +2648,13 @@
             '                            </div>\n' +
             '                    </div>';
 
+        // 将构建的HTML字符串添加到id为"photo-box-content"的元素内部
         document.getElementById("photo-box-content").innerHTML += html;
     }
 
     //将消息显示在消息对应的聊天窗口上,并在聊天列表对应位置显示
     function addMessageToChat(message) {
+        // 根据消息发送者是否在左侧或右侧构建不同的HTML字符串
         var right_bubble_html = '<div class="chat-output-content-right">\n' +
             '    <img src="${pageContext.request.contextPath}/upload/photo/' + message.sender_photo + '" alt="头像" class="chat-output-head-photo-right">\n' +
             '    <div class="chat-output-bubble-right">\n' +
@@ -1892,40 +2666,62 @@
             '    <div class="chat-output-bubble-left">\n' +
             '        <div class="chat-output-bubble-inner">\n' +
             '            <pre class="chat-output-bubble-pre-left">' + message.content + '</pre></div></div></div>';
-        if (message.sender_id ===${sessionScope.login.id}) {
+
+        // 判断消息发送者是否为当前登录用户
+        // 注意：这里${sessionScope.login.id}应该是一个服务器端模板变量，但在纯JavaScript中不会工作
+        if (message.sender_id === ${sessionScope.login.id}) {
+            // 如果是当前用户，消息显示在右侧
             document.getElementById(message.chat_id + "accept-message").innerHTML += '<br/>' + right_bubble_html;
         } else {
+            // 否则，消息显示在左侧
             document.getElementById(message.chat_id + "accept-message").innerHTML += '<br/>' + left_bubble_html;
         }
+
+        // 自动滚动到聊天框的底部
         document.getElementById(message.chat_id + "accept-message").scrollTop = document.getElementById(message.chat_id + "accept-message").scrollHeight;
-        //显示在列表上
+
+        // 更新聊天列表上的新消息提示
         if ("file" === message.type) {
             document.getElementById(message.chat_id + "new-message").innerText = "你收到一个文件";
         } else if ("img" === message.type) {
             document.getElementById(message.chat_id + "new-message").innerText = "你收到一个图片";
         } else {
+            // 对于普通文本消息，直接显示消息内容
             document.getElementById(message.chat_id + "new-message").innerText = message.content;
         }
     }
 
     //显示消息
+    // 定义一个名为 showMessage 的函数，该函数接收一个名为 message 的参数
     function showMessage(message) {
+        // 判断 message 对象的 type 属性是否为 "system"
         if (message.type === "system") {
+            // 如果是系统消息，则使用 alert 弹出框显示 message 对象的 content 属性内容
             alert(message.content);
+            // 执行完弹出操作后，通过 return 语句结束函数执行
             return;
         }
+
+        // 判断 message 对象的 type 属性是否为 "user"、"file" 或 "img"
         if (message.type === "user" || message.type === "file" || message.type === "img") {
+            // 如果是用户消息、文件消息或图片消息，则在控制台输出 "显示用户消息"
             console.log("显示用户消息");
+            // 调用 addMessageToChat 函数，将 message 对象添加到聊天记录中
             addMessageToChat(message);
         }
+
+        // 判断 message 对象的 type 属性是否为 "friend"
         if (message.type === "friend") {
+            // 如果是好友申请消息，则使用 alert 弹出框显示 "收到好友申请"
             alert("收到好友申请");
+            // 在控制台输出 "显示加好友通知"，表示将在界面上显示添加好友的通知
             console.log("显示加好友通知");
+            // 调用 loadAddFriendOnMenu 函数，根据 message 对象加载好友申请到菜单上
             loadAddFriendOnMenu(message);
+            // 调用 addMessageToChat 函数，将 message 对象添加到聊天记录中，以便用户查看
             addMessageToChat(message);
         }
     }
-
     //功能不可用
     function dev() {
         alert("该功能正在开发中，暂时不可用");
@@ -1935,595 +2731,845 @@
 <!--END——程序执行脚本-->
 <!--BEGIN——websocket脚本-->
 <script type="text/javascript">
+    // 声明一个变量 websocket 用于存储 WebSocket 连接实例，初始为 null
     var websocket = null;
+    // 声明一个变量 url 用于存储 WebSocket 服务器的 URL 地址，其中包含了动态插入的 host 和 sessionScope.login.id
     var url = "ws://${host}/server/chat/${sessionScope.login.id}";
 
+    // 定义一个函数 connectWebsocket 用于建立 WebSocket 连接
     function connectWebsocket() {
-
-        //判断当前浏览器是否支持WebSocket
+        // 判断当前浏览器是否支持 WebSocket
         if ('WebSocket' in window) {
+            // 如果支持，则创建一个新的 WebSocket 连接实例，并传入 URL 地址
             websocket = new WebSocket(url);
         } else {
-            alert('当前浏览器不支持 websocket,无法进行实时聊天')
+            // 如果不支持，则弹出提示框告知用户当前浏览器不支持 WebSocket
+            alert('当前浏览器不支持 websocket,无法进行实时聊天');
         }
 
-        //连接发生错误的回调方法
+        // 定义连接发生错误时的回调方法
         websocket.onerror = function () {
+            // 弹出提示框告知用户 WebSocket 连接发生错误，并建议刷新浏览器重新连接
             alert("WebSocket连接发生错误,请刷新浏览器重新连接");
-            websocket = '';
+            // 将 websocket 变量置为空字符串（这里更严谨的做法应该是置为 null，以便后续可以重新连接）
+            websocket = ''; // 建议修改为 websocket = null;
         };
 
-        //连接成功建立的回调方法
+        // 定义连接成功建立时的回调方法（这里没有具体实现，可以根据需要添加逻辑）
         websocket.onopen = function () {
-        }
+            // 连接成功时可以在这里做一些初始化操作，比如发送心跳包等
+        };
 
-        //接收到消息的回调方法
+        // 定义接收到消息时的回调方法
         websocket.onmessage = function (event) {
-            // alert("收到服务器的新消息" + event.data);
-            var message = eval("(" + event.data + ")");
+            // 从 event.data 中获取服务器发送的消息数据
+            // 注意：这里使用 eval 解析 JSON 字符串是不安全的做法，建议使用 JSON.parse
+            var message = eval("(" + event.data + ")"); // 建议修改为 var message = JSON.parse(event.data);
+            // 调用 showMessage 函数处理接收到的消息
             showMessage(message);
-        }
-        //连接关闭的回调方法
+        };
+
+        // 定义连接关闭时的回调方法
         websocket.onclose = function () {
+            // 弹出提示框告知用户 WebSocket 连接已关闭，并建议刷新浏览器重新连接
             alert("WebSocket连接已关闭，请刷新浏览器重新连接");
-            websocket = '';
-        }
+            // 将 websocket 变量置为空字符串（同样建议修改为 null）
+            websocket = ''; // 建议修改为 websocket = null;
+        };
 
-        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+        // 监听窗口关闭事件，当窗口关闭时主动关闭 WebSocket 连接
         window.onbeforeunload = function () {
+            // 调用 closeWebSocket 函数关闭 WebSocket 连接（注意：这里需要确保 closeWebSocket 函数已经被定义）
             closeWebSocket();
-        }
+        };
 
+        // 注意：这里缺少了 closeWebSocket 函数的定义，你需要在适当的位置定义这个函数来关闭 WebSocket 连接
+        // function closeWebSocket() {
+        //     if (websocket) {
+        //         websocket.close();
+        //         websocket = null; // 关闭后将变量置为 null，表示没有活动的 WebSocket 连接
+        //     }
+        // }
     }
+</script>
 
+//关闭WebSocket连接
+function closeWebSocket() {
+websocket.close();
 
-    //关闭WebSocket连接
-    function closeWebSocket() {
-        websocket.close();
-
-    }
+}
 
 
 </script>
 <!--END——websocket脚本-->
 <!--BEGIN——预加载脚本-->
 <script>
-    //请求聊天列表
+    // 请求聊天列表的函数调用
+    // 这个函数可能负责从服务器获取当前用户的聊天列表，并更新页面上的聊天列表显示
     loadChatListAndBox();
+
+    // 请求好友列表的函数调用
+    // 这个函数可能负责从服务器获取当前用户的好友列表，并更新页面上的好友列表显示
     loadFriendList();
+
+    // 建立 WebSocket 连接的函数调用
+    // 这个函数可能负责初始化 WebSocket 连接，以便与服务器进行实时通信，例如接收新消息通知
     connectWebsocket();
 </script>
 <!--END——预加载脚本-->
 </body>
 <style>
+    /* 定义一个名为.info-box的类，用于设置信息框的基本样式 */
     .info-box {
-        position: relative;
-        background-color: #eee;
-        overflow: hidden
+        position: relative; /* 设置元素的定位方式为相对定位 */
+        background-color: #eee; /* 设置背景颜色为浅灰色 */
+        overflow: hidden; /* 隐藏溢出容器的内容 */
     }
 
+    /* 定义一个名为.info-box-head的类，用于设置信息框头部的样式 */
     .info-box-head {
-        text-align: center;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        line-height: 40px
+        text-align: center; /* 设置文本居中对齐 */
+        position: absolute; /* 设置元素的定位方式为绝对定位 */
+        top: 0; /* 将元素的顶部与包含块（即.info-box）的顶部对齐 */
+        left: 0; /* 将元素的左侧与包含块的左侧对齐 */
+        right: 0; /* 将元素的右侧与包含块的右侧对齐 */
+        line-height: 40px; /* 设置行高为40px */
     }
 
+    /* 定义一个名为.info-head-img的类，用于设置信息框头部图片的样式 */
     .info-head-img {
-        width: 220px;
-        height: 220px;
-        margin: 62px;
-        border-radius: 14px;
-        float: left;
+        width: 220px; /* 设置图片的宽度为220px */
+        height: 220px; /* 设置图片的高度为220px */
+        margin: 62px; /* 设置图片的外边距为62px */
+        border-radius: 14px; /* 设置图片边框的圆角半径为14px */
+        float: left; /* 设置图片浮动到左侧 */
     }
 
+    /* 定义一个名为.info-head-info的类，用于设置信息框头部信息的样式 */
     .info-head-info {
-        float: left;
-        margin-top: 89px;
-        max-width: 360px;
-        overflow: hidden
+        float: left; /* 设置元素浮动到左侧 */
+        margin-top: 89px; /* 设置元素的上外边距为89px */
+        max-width: 360px; /* 设置元素的最大宽度为360px */
+        overflow: hidden; /* 隐藏溢出容器的内容 */
     }
 
+    /* 定义一个名为.info-head-nickname的类，用于设置信息框头部昵称的样式 */
     .info-head-nickname {
-        font-size: 53px;
-        max-height: 200px;
-        overflow: hidden;
-        word-wrap: break-word;
-        word-break: break-all;
+        font-size: 53px; /* 设置字体大小为53px */
+        max-height: 200px; /* 设置元素的最大高度为200px */
+        overflow: hidden; /* 隐藏溢出容器的内容 */
+        word-wrap: break-word; /* 允许长单词或URL地址在必要时换行 */
+        word-break: break-all; /* 设置如何在单词内进行断行，主要用于非CJK（中文、日文、韩文）文本 */
     }
 
+    /* 定义一个名为.info-box-title的类，用于设置信息框标题的样式 */
     .info-box-title {
-        position: relative;
-        padding: 10px 0;
-        margin: 0 19px;
-        border-bottom: 1px solid #d6d6d6;
-        background-color: #eee;
-        z-index: 1024
+        position: relative; /* 设置元素的定位方式为相对定位 */
+        padding: 10px 0; /* 设置内边距为上下各10px */
+        margin: 0 19px; /* 设置外边距为左右各19px */
+        border-bottom: 1px solid #d6d6d6; /* 设置底部边框为1px实线，颜色为深灰色 */
+        background-color: #eee; /* 设置背景颜色为浅灰色 */
+        z-index: 1024; /* 设置元素的堆叠顺序为1024，确保它位于其他元素的上方 */
     }
 
+    /* 定义一个名为.info-box-title-box的类，用于设置信息框标题盒子的样式 */
     .info-box-title-box {
-        font-weight: 400;
-        height: 25px;
-        display: inline-block;
-        font-size: 23px;
-        float: left
+        font-weight: 400; /* 设置字体粗细为正常（400） */
+        height: 25px; /* 设置高度为25px */
+        display: inline-block; /* 设置元素为内联块级元素 */
+        font-size: 23px; /* 设置字体大小为23px */
+        float: left; /* 设置元素浮动到左侧 */
     }
 
+    /* 定义一个名为.info-box-title-text的类，用于设置信息框标题文本的样式 */
     .info-box-title-text {
-        display: inline-block;
-        vertical-align: middle;
-        max-width: 300px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        word-wrap: normal;
-        text-decoration: none;
-        color: #000;
-        font-weight: 400;
-    }
-
+        display: inline-block; /* 设置元素为内联块级元素 */
+        vertical-align: middle; /* 设置元素的垂直对齐方式为居中 */
+        max-width: 300px; /* 设置元素的最大宽度为300px */
+        overflow: hidden; /* 隐藏溢出容器的内容 */
+        text-overflow: ellipsis; /* 当文本溢出时，用省略号来表示被截断的文本 */
+        white-space: nowrap; /* 禁止文本换行 */
+        word-wrap: normal; /* 设置单词内断行的默认行为（此属性在此处可能是多余的，因为已经使用了white-space: nowrap） */
+        text-decoration: none; /* 移除文本装饰（如下划线） */
+        color: #000; /* 设置文本颜色为黑色 */
+        font-weight: 400; /* 设置字体粗细为正常（400） */
+    }
+    /* 定义一个名为.info-outline的类，用于设置信息框的外部轮廓样式 */
     .info-outline {
-        float: left;
-        height: fit-content;
-        width: 100%;
+        float: left; /* 使元素浮动到左侧 */
+        height: fit-content; /* 设置元素高度为其内容所需的最小高度 */
+        width: 100%; /* 设置元素宽度为父容器的100% */
     }
 
+    /* 定义一个名为.info-detail的类，用于设置信息详情的样式 */
     .info-detail {
-        float: left;
-        height: fit-content;
-        width: 100%;
+        float: left; /* 使元素浮动到左侧 */
+        height: fit-content; /* 设置元素高度为其内容所需的最小高度 */
+        width: 100%; /* 设置元素宽度为父容器的100% */
     }
 
+    /* 定义一个名为.info-detail-block的类，用于设置信息详情块的样式 */
     .info-detail-block {
-        float: left;
-        height: fit-content;
-        width: 100%;
-        margin-bottom: 20px;
-        min-width: 850px;
+        float: left; /* 使元素浮动到左侧 */
+        height: fit-content; /* 设置元素高度为其内容所需的最小高度 */
+        width: 100%; /* 设置元素宽度为父容器的100% */
+        margin-bottom: 20px; /* 设置元素底部外边距为20px */
+        min-width: 850px; /* 设置元素的最小宽度为850px */
     }
 
+    /* 定义一个名为.info-detail-item的类，用于设置信息详情项的样式 */
     .info-detail-item {
-        height: 50px;
-        font-size: 34px;
-        padding-left: 62px;
-        text-align: left;
-        position: absolute;
-        width: 255px;
+        height: 50px; /* 设置元素高度为50px */
+        font-size: 34px; /* 设置字体大小为34px */
+        padding-left: 62px; /* 设置元素左内边距为62px */
+        text-align: left; /* 设置文本左对齐 */
+        position: absolute; /* 设置元素的定位方式为绝对定位 */
+        width: 255px; /* 设置元素宽度为255px */
     }
 
+    /* 定义一个名为.info-detail-value的类，用于设置信息详情值的样式 */
     .info-detail-value {
-        text-align: left;
-        width: 800px;
-        font-size: 34px;
-        height: 50px;
-        position: relative;
-        margin-left: 300px;
-        border-bottom: solid 2px #ccc;
-        outline: none;
-        white-space: nowrap;
-    }
-
+        text-align: left; /* 设置文本左对齐 */
+        width: 800px; /* 设置元素宽度为800px */
+        font-size: 34px; /* 设置字体大小为34px */
+        height: 50px; /* 设置元素高度为50px */
+        position: relative; /* 设置元素的定位方式为相对定位 */
+        margin-left: 300px; /* 设置元素左外边距为300px */
+        border-bottom: solid 2px #ccc; /* 设置元素底部边框为2px实线，颜色为#ccc */
+        outline: none; /* 移除元素的轮廓线 */
+        white-space: nowrap; /* 禁止文本换行 */
+    }
+
+    /* 定义一个名为.input-text-content的类，用于设置文本输入区域的样式 */
     .input-text-content {
-        border-top: 1px solid #d6d6d6;
-        height: 200px;
-        width: 90%;
-        margin-left: 30px;
-        margin-right: 30px;
-        margin-bottom: 15px;
-        resize: none;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding-left: 20px;
-        outline: solid;
-        border: 0;
-        font-size: 25px;
-        background-color: #eee
-    }
-
+        border-top: 1px solid #d6d6d6; /* 设置元素顶部边框为1px实线，颜色为#d6d6d6 */
+        height: 200px; /* 设置元素高度为200px */
+        width: 90%; /* 设置元素宽度为父容器的90% */
+        margin-left: 30px; /* 设置元素左外边距为30px */
+        margin-right: 30px; /* 设置元素右外边距为30px */
+        margin-bottom: 15px; /* 设置元素底部外边距为15px */
+        resize: none; /* 禁止用户调整元素大小 */
+        overflow-y: auto; /* 设置元素在垂直方向上溢出时显示滚动条 */
+        overflow-x: hidden; /* 设置元素在水平方向上溢出时隐藏内容 */
+        padding-left: 20px; /* 设置元素左内边距为20px */
+        outline: solid; /* 设置元素的轮廓线为实线（但此处未指定颜色和宽度，可能默认为浏览器默认样式） */
+        border: 0; /* 移除元素的边框 */
+        font-size: 25px; /* 设置字体大小为25px */
+        background-color: #eee; /* 设置背景颜色为浅灰色 */
+    }
+
+    /* 定义一个名为.info-submit-box的类，用于设置提交按钮框的样式 */
     .info-submit-box {
-        position: fixed;
-        height: 250px;
-        bottom: 0;
-        min-height: 250px;
-        border-top: 1px solid #d6d6d6;
+        position: fixed; /* 设置元素的定位方式为固定定位 */
+        height: 250px; /* 设置元素高度为250px */
+        bottom: 0; /* 将元素的底部与视口底部对齐 */
+        min-height: 250px; /* 设置元素的最小高度为250px */
+        border-top: 1px solid #d6d6d6; /* 设置元素顶部边框为1px实线，颜色为#d6d6d6 */
     }
 
+    /* 定义一个名为.info-detail-box的类，用于设置信息详情框的样式 */
     .info-detail-box {
-        overflow: scroll;
-        position: relative;
-        margin-bottom: 0px;
-        margin-right: 0px;
-        margin-top: 80px;
-        min-height: 682px;
-        height: -webkit-fill-available;
+        overflow: scroll; /* 设置元素在内容溢出时显示滚动条 */
+        position: relative; /* 设置元素的定位方式为相对定位 */
+        margin-bottom: 0px; /* 设置元素底部外边距为0px */
+        margin-right: 0px; /* 设置元素右外边距为0px */
+        margin-top: 80px; /* 设置元素顶部外边距为80px */
+        min-height: 682px; /* 设置元素的最小高度为682px */
+        height: 100%; /* 设置元素高度为视口或容器可填充的高度（这是WebKit特有的属性值，可能不是所有浏览器都支持） */
     }
 
+    /* 为.page-body类设置样式 */
     .page-body {
+        /* 设置最小宽度为800px */
         min-width: 800px;
+        /* 设置外边距为0，并水平居中 */
         margin: 0 auto;
+        /* 设置边框圆角为3px */
         border-radius: 3px;
+        /* 为Mozilla浏览器设置边框圆角为3px（旧版） */
         -moz-border-radius: 3px;
+        /* 为WebKit浏览器（如Chrome, Safari）设置边框圆角为3px（旧版） */
         -webkit-border-radius: 3px;
+        /* 隐藏溢出内容 */
         overflow: hidden;
     }
 
+    /* 为.menu类设置样式 */
     .menu {
+        /* 设置宽度为父容器宽度的30% */
         width: 30%;
+        /* 设置元素的位置为相对定位 */
         position: relative;
-        /*height: 750px;*/
-        height: -webkit-fill-available;
-        min-height: 750px;
+        /* 设置固定高度为750px，同时确保最小高度也为750px（这里min-height实际上是多余的，因为已经设置了固定高度） */
+        height: 750px;
+        min-height: 750px; /* 注释：由于已经设置了固定高度，此属性实际上不起作用 */
+        /* 设置元素浮动到左侧 */
         float: left;
+        /* 如果内容超出指定高度，则显示滚动条 */
         overflow: scroll;
+        /* 设置背景颜色 */
         background: #2e3238;
+        /* 确保元素以块级元素显示 */
         display: block;
     }
 
+    /* 为.menu-head类设置样式 */
     .menu-head {
+        /* 设置内边距 */
         padding: 18px;
+        /* 设置元素的位置为相对定位 */
         position: relative;
     }
 
+    /* 为.menu-head-photo类设置样式 */
     .menu-head-photo {
+        /* 设置元素以表格单元格的方式显示，并垂直居中内容 */
         display: table-cell;
         vertical-align: middle;
+        /* 允许长单词或URL地址换行 */
         word-wrap: break-word;
+        /* 允许在任意位置换行 */
         word-break: break-all;
+        /* 禁止文本换行 */
         white-space: nowrap;
+        /* 设置右侧内边距 */
         padding-right: 10.625px;
     }
 
+    /* 为.menu-head-img类设置样式 */
     .menu-head-img {
+        /* 设置图片的宽度和高度 */
         width: 60px;
         height: 60px;
+        /* 设置边框圆角为2px */
         border-radius: 2px;
+        /* 为Mozilla浏览器设置边框圆角为2px（旧版） */
         -moz-border-radius: 2px;
+        /* 为WebKit浏览器（如Chrome, Safari）设置边框圆角为2px（旧版） */
         -webkit-border-radius: 2px;
+        /* 设置元素以块级元素显示 */
         display: block;
+        /* 设置鼠标悬停时的样式为手型，表示可点击 */
         cursor: pointer;
     }
 
+    /* 为.menu-head-info类设置样式 */
     .menu-head-info {
+        /* 设置元素以表格单元格的方式显示，并垂直居中内容 */
         display: table-cell;
         vertical-align: middle;
+        /* 允许长单词或URL地址换行 */
         word-wrap: break-word;
+        /* 允许在任意位置换行 */
         word-break: break-all;
-        width: 2000px;
+        /* 设置元素的宽度，这里设置了一个非常大的值，可能是为了确保内容有足够的空间显示 */
+        width: 2000px; /* 注释：这个宽度值可能需要根据实际情况调整 */
     }
 
+    /* 为.menu-head-nickname类设置样式 */
     .menu-head-nickname {
+        /* 设置字体粗细为400（正常） */
         font-weight: 400;
+        /* 设置字体大小为30px */
         font-size: 30px;
+        /* 设置字体颜色为白色 */
         color: #fff;
+        /* 设置行高为20px */
         line-height: 20px;
+        /* 设置上边距为5px */
         margin-top: 5px;
     }
 
+    /* 为.menu-search类设置样式 */
     .menu-search {
+        /* 设置元素的位置为相对定位 */
         position: relative;
-        width: -webkit-fill-available;
+        /* 设置元素的宽度为100% */
+        width: 100%;
+        /* 设置外边距为30px */
         margin: 30px;
     }
 
+    /* 为.menu-search-icon类设置样式 */
     .menu-search-icon {
+        /* 设置元素的位置为绝对定位 */
         position: absolute;
+        /* 设置元素的堆叠顺序，使其位于其他元素之上 */
         z-index: 101;
+        /* 设置元素距离顶部的距离为1px */
         top: 1px;
     }
 
+    /* 为.search-button类设置样式 */
     .search-button {
+        /* 设置内边距为13px */
         padding: 13px;
+        /* 设置元素浮动到右侧 */
         float: right;
+        /* 设置元素的高度为50px */
         height: 50px;
+        /* 设置元素的宽度为55px */
         width: 55px;
+        /* 设置背景颜色为深灰色 */
         background-color: #3A3F45;
+        /* 设置字体颜色为白色 */
         color: white;
     }
 
-
+    /* 为.menu-search-bar类设置样式 */
     .menu-search-bar {
+        /* 设置元素的高度为50px */
         height: 50px;
+        /* 设置行高为32px，有助于文本垂直居中 */
         line-height: 32px;
+        /* 设置边框为0 */
         border: 0;
+        /* 设置边框圆角为2px */
         border-radius: 2px;
+        /* 为Mozilla浏览器设置边框圆角为2px（旧版） */
         -moz-border-radius: 2px;
+        /* 为WebKit浏览器（如Chrome, Safari）设置边框圆角为2px（旧版） */
         -webkit-border-radius: 2px;
+        /* 设置背景颜色为深蓝色 */
         background-color: #26292e;
+        /* 设置字体颜色为白色 */
         color: #fff;
+        /* 设置左侧内边距为10px */
         padding-left: 10px;
+        /* 设置字体大小为20px */
         font-size: 20px;
+        /* 设置元素的宽度为70% */
         width: 70%;
     }
 
+    /* 为.menu-option类设置样式 */
     .menu-option {
+        /* 隐藏溢出内容 */
         overflow: hidden;
+        /* 设置元素的位置为相对定位 */
         position: relative;
+        /* 设置底部内边距为4px */
         padding-bottom: 4px;
     }
 
+    /* 为.menu-option-item类设置样式 */
     .menu-option-item {
+        /* 设置元素浮动到左侧 */
         float: left;
+        /* 设置元素的宽度为25% */
         width: 25%;
+        /* 设置元素的位置为相对定位 */
         position: relative;
     }
 
+    /* 为.menu-option-button类设置样式 */
     .menu-option-button {
+        /* 设置内边距为13px */
         padding: 13px;
+        /* 设置元素水平居中（在父元素内） */
         margin: auto;
+        /* 设置元素的高度为39px */
         height: 39px;
+        /* 设置元素的宽度为90px */
         width: 90px;
+        /* 设置背景颜色为深灰色 */
         background-color: #3A3F45;
+        /* 设置字体颜色为白色 */
         color: white;
     }
 
-
+    /* 为.menu-option-chat类设置样式 */
     .menu-option-chat {
+        /* 设置元素为块级元素 */
         display: block;
+        /* 设置文本水平居中 */
         text-align: center;
     }
 
+    /* 设置用户照片的样式 */
     .user-photo {
+        /* 使元素浮动到左侧 */
         float: left;
+        /* 设置右侧外边距为10px */
         margin-right: 10px;
+        /* 设置元素的位置为相对定位 */
         position: relative
     }
 
+    /* 设置我的照片的样式 */
     .my-photo {
+        /* 使元素显示为块级元素 */
         display: block;
+        /* 设置元素的宽度为60px */
         width: 60px;
+        /* 设置元素的高度为60px */
         height: 60px;
+        /* 设置边框圆角为2px */
         border-radius: 2px;
+        /* 为Mozilla浏览器设置边框圆角为2px（旧版） */
         -moz-border-radius: 2px;
+        /* 为WebKit浏览器（如Chrome, Safari）设置边框圆角为2px（旧版） */
         -webkit-border-radius: 2px
     }
 
+    /* 设置用户列表块链接的样式 */
     .user-list-block-href {
+        /* 设置背景颜色为深灰色 */
         background: #2e3238;
+        /* 设置边框为0px */
         border: 0px;
+        /* 移除元素的外轮廓线 */
         outline: none;
     }
 
+    /* 设置用户列表块的样式 */
     .user-list-block {
+        /* 使元素显示为块级元素 */
         display: block;
     }
 
+    /* 设置用户信息的样式 */
     .user-info {
+        /* 隐藏溢出的内容 */
         overflow: hidden;
+        /* 设置元素的高度为60px */
         height: 60px;
     }
 
+    /* 设置用户盒子的样式 */
     .user-box {
+        /* 隐藏溢出的内容 */
         overflow: hidden;
+        /* 设置内边距 */
         padding: 12px 18px 11px;
+        /* 设置底部边框为1px实线，颜色为深灰色 */
         border-bottom: 1px solid #292c33;
+        /* 设置鼠标悬停时的样式为手指，表示可点击 */
         cursor: pointer;
+        /* 设置元素的位置为相对定位 */
         position: relative;
     }
 
+    /* 设置我的名称的样式 */
     .my-name {
+        /* 设置字体粗细为400（正常） */
         font-weight: 400;
+        /* 设置字体大小为20px */
         font-size: 20px;
+        /* 设置字体颜色为白色 */
         color: #fff;
+        /* 设置行高为20px */
         line-height: 20px;
+        /* 设置上边距为5px */
         margin-top: 5px;
+        /* 使元素浮动到左侧 */
         float: left;
+        /* 设置元素的宽度为100% */
         width: 100%;
+        /* 设置文本对齐方式为左对齐 */
         text-align: left;
-
     }
 
+    /* 设置我的消息的样式 */
     .my-message {
+        /* 设置字体颜色为浅灰色 */
         color: #989898;
+        /* 设置字体大小为17px */
         font-size: 17px;
+        /* 设置元素的宽度为100%，但会被后续的具体宽度覆盖 */
         width: 100%;
+        /* 隐藏溢出的内容 */
         overflow: hidden;
+        /* 当文本溢出时，隐藏超出的文本 */
         text-overflow: ellipsis;
+        /* 禁止文本换行 */
         white-space: nowrap;
-        word-wrap: normal;
+        /* 设置正常的单词换行（尽管white-space: nowrap已经禁止了换行） */
+        word-wrap: normal; /* 注意：这里word-wrap: normal实际上是多余的，因为white-space已经控制了换行行为 */
+        /* 设置元素的高度为1.5em（即字体大小的1.5倍） */
         height: 1.5em;
+        /* 使元素浮动到左侧（尽管在这里可能是多余的，因为.my-name已经占据了100%的宽度） */
         float: left;
+        /* 设置文本对齐方式为左对齐 */
         text-align: left;
+        /* 设置右侧外边距为20px（尽管在这里可能是多余的或需要调整，因为浮动和宽度设置可能影响布局） */
         margin-right: 20px;
+        /* 覆盖之前设置的宽度，将元素宽度设为300px */
         width: 300px;
-
     }
-
+    /* 设置聊天框的样式 */
     .chat-box {
+        /* 设置元素的位置为相对定位 */
         position: relative;
+        /* 设置背景颜色为浅灰色 */
         background-color: #eee;
-        height: -webkit-fill-available;
+        /* 设置元素的高度为父元素高度的100% */
+        height: 100%;
+        /* 隐藏溢出的内容 */
         overflow: hidden
     }
 
+    /* 设置聊天框头部的样式 */
     .chat-box-head {
+        /* 设置文本对齐方式为居中 */
         text-align: center;
+        /* 设置元素的位置为绝对定位，相对于最近的已定位祖先元素 */
         position: absolute;
+        /* 设置元素的上边距为0，使其紧贴父元素的顶部 */
         top: 0;
+        /* 设置元素的左边距和右边距为0，使其宽度充满父元素 */
         left: 0;
         right: 0;
+        /* 设置行高为40px，使文本垂直居中 */
         line-height: 40px;
+        /* 设置背景颜色为浅灰色，与.chat-box一致 */
         background-color: #eee;
-
     }
 
+    /* 设置聊天框标题的样式 */
     .chat-box-title {
+        /* 设置元素的位置为固定定位，相对于浏览器窗口 */
         position: fixed;
-        /* padding: 10px 0; */
+        /* 设置内边距，左右各20px */
         padding-left: 20px;
         padding-right: 20px;
+        /* 以下属性被注释，表示在当前样式中不使用 */
         /* align-items: center; */
         /* margin: 0 19px; */
         /* width: auto; */
-        width: -webkit-fill-available;
+        /* 设置元素的宽度为100%，但会被后续的最大宽度属性覆盖 */
+        width: 100%;
+        /* 设置元素的最大宽度为70%，确保不会超出屏幕宽度的70% */
         max-width: 70%;
+        /* 设置底部边框为1px实线，颜色为深灰色 */
         border-bottom: 1px solid #d6d6d6;
+        /* 设置背景颜色为浅灰色，与.chat-box一致 */
         background-color: #eee;
+        /* 设置元素的堆叠顺序为999，确保在其他元素之上 */
         z-index: 999;
+        /* 设置元素的右边距为0px，确保紧贴屏幕右侧（但这里可能是多余的，因为width和max-width已经控制了宽度） */
         right: 0px;
+        /* 设置元素的高度为60px */
         height: 60px;
     }
 
+    /* 设置聊天框标题盒子的样式（可能是用于包裹标题文本的容器） */
     .chat-box-title-box {
+        /* 设置字体粗细为400（正常） */
         font-weight: 400;
+        /* 设置元素的高度为25px */
         height: 25px;
+        /* 使元素显示为内联块级元素，可以设置宽高 */
         display: inline-block;
+        /* 设置字体大小为23px */
         font-size: 23px;
     }
 
+    /* 设置聊天框标题文本的样式 */
     .chat-box-title-text {
+        /* 设置元素的垂直对齐方式为中间对齐 */
         vertical-align: middle;
+        /* 设置元素的最大宽度为70%，与.chat-box-title一致 */
         max-width: 70%;
+        /* 隐藏溢出的文本，显示省略号 */
         overflow: hidden;
         text-overflow: ellipsis;
+        /* 禁止文本换行 */
         white-space: nowrap;
+        /* 设置正常的单词换行（尽管white-space: nowrap已经禁止了换行，这里可能是多余的） */
         word-wrap: normal;
+        /* 设置文本装饰为无，即去除下划线等 */
         text-decoration: none;
+        /* 设置字体颜色为黑色 */
         color: #000;
+        /* 设置字体粗细为400（正常） */
         font-weight: 400;
+        /* 设置元素的宽度为自适应内容 */
         width: fit-content;
+        /* 设置元素的位置为固定定位，但这里可能是有问题的，因为与.chat-box-title的fixed定位冲突 */
         position: fixed;
+        /* 设置元素的高度为自适应内容 */
         height: fit-content;
+        /* 使元素显示为内联块级元素 */
         display: inline-block;
+        /* 设置字体大小为23px */
         font-size: 23px;
+        /* 设置元素的上边距为10px */
         margin-top: 10px
     }
 
+    /* 设置聊天输入框的样式 */
     .chat-input-box {
+        /* 设置元素的位置为固定定位，使其始终位于屏幕底部 */
         position: fixed;
+        /* 设置元素的高度为200px */
         height: 200px;
+        /* 设置元素的下边距为0，使其紧贴屏幕底部 */
         bottom: 0;
+        /* 设置元素的最小高度为200px */
         min-height: 200px;
+        /* 设置顶部边框为1px实线，颜色为深灰色 */
         border-top: 1px solid #d6d6d6;
     }
 
+    /* 设置文本区域的样式（可能是用于输入消息的文本框） */
     .text-area {
+        /* 设置顶部边框为1px实线，颜色为深灰色 */
         border-top: 1px solid #d6d6d6;
+        /* 设置元素的高度为200px */
         height: 200px;
+        /* 设置元素的宽度为100% */
         width: 100%;
+        /* 设置元素的下边距为15px */
         margin-bottom: 15px;
+        /* 禁止用户调整文本框的大小 */
         resize: none;
+        /* 设置垂直方向上的滚动条为自动，当内容超出时显示 */
         overflow-y: auto;
+        /* 禁止水平方向上的滚动条 */
         overflow-x: hidden;
+        /* 设置内左边距为20px */
         padding-left: 20px;
+        /* 移除元素的外轮廓线 */
         outline: none;
+        /* 设置元素的边框为0 */
         border: 0;
+        /* 设置字体大小为25px */
         font-size: 25px;
+        /* 设置背景颜色为浅灰色 */
         background-color: #eee;
     }
 
+    /* 设置聊天输出框的样式（可能是用于显示聊天记录的区域） */
     .chat-output-box {
+        /* 设置背景颜色为透明 */
         background: transparent;
+        /* 设置元素的位置为相对定位 */
         position: relative;
+        /* 以下属性被注释，表示在当前样式中不使用 */
         /* margin-bottom: 200px; */
+        /* 设置底部内边距为200px，为.chat-input-box留出空间 */
         padding-bottom: 200px;
+        /* 设置顶部内边距为80px，为标题或其他元素留出空间 */
         padding-top: 80px;
+        /* 设置元素的右边距为0px（这里可能是多余的，因为宽度通常由父元素控制） */
         margin-right: 0px;
+        /* 以下属性被注释，表示在当前样式中不使用 */
         /* margin-top: 80px; */
+        /* 设置元素的最小高度为443px */
         min-height: 443px;
+        /* 以下属性被注释，表示在当前样式中不使用 */
         /* max-height: 473px; */
-        height: -webkit-fill-available;
+        /* 设置元素的高度为父元素高度的100% */
+        height: 100%;
+        /* 设置内容溢出时显示滚动条 */
         overflow: scroll;
     }
-
+    /* 右侧聊天头像样式 */
     .chat-output-head-photo-right {
-        float: right;
-        width: 60px;
-        height: 60px;
-        margin-right: 15px;
+        float: right; /* 浮动到右侧 */
+        width: 60px;  /* 设置宽度 */
+        height: 60px; /* 设置高度 */
+        margin-right: 15px; /* 右侧外边距 */
     }
 
+    /* 左侧聊天头像样式 */
     .chat-output-head-photo-left {
-        float: left;
-        width: 60px;
-        height: 60px;
-        margin-left: 15px;
-        margin-top: 15px
+        float: left; /* 浮动到左侧 */
+        width: 60px; /* 设置宽度 */
+        height: 60px; /* 设置高度 */
+        margin-left: 15px; /* 左侧外边距 */
+        margin-top: 15px;  /* 顶部外边距 */
     }
 
+    /* 右侧聊天内容样式 */
     .chat-output-content-right {
-        overflow: hidden;
-        text-align: right;
+        overflow: hidden; /* 隐藏溢出内容 */
+        text-align: right; /* 文本对齐到右侧 */
     }
 
+    /* 左侧聊天内容样式 */
     .chat-output-content-left {
-        overflow: hidden;
-        text-align: left;
+        overflow: hidden; /* 隐藏溢出内容 */
+        text-align: left; /* 文本对齐到左侧 */
     }
 
+    /* 左侧聊天元数据样式（如时间戳、用户名等） */
     .chat-output-meta-left {
-        font-weight: 400;
-        padding-left: 10px;
-        height: 20px;
-        line-height: 18px;
-        color: #4f4f4f;
-        width: 500px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        word-wrap: normal;
-        margin-top: 22px
-    }
-
+        font-weight: 400; /* 字体粗细 */
+        padding-left: 10px; /* 左侧内边距 */
+        height: 20px; /* 设置高度 */
+        line-height: 18px; /* 行高 */
+        color: #4f4f4f; /* 文本颜色 */
+        width: 500px; /* 设置宽度 */
+        overflow: hidden; /* 隐藏溢出内容 */
+        text-overflow: ellipsis; /* 溢出时显示省略号 */
+        white-space: nowrap; /* 禁止换行 */
+        word-wrap: normal; /* 正常的单词换行（与white-space: nowrap一起，这里可能是多余的） */
+        margin-top: 22px; /* 顶部外边距 */
+    }
+
+    /* 右侧聊天气泡框样式 */
     .chat-output-bubble-right {
-        max-width: 500px;
-        /*min-height: 55px;*/
-        display: inline-block;
-        vertical-align: top;
-        position: relative;
-        text-align: left;
-        font-size: 20px;
-        -webkit-border-radius: 3px;
-        margin-right: 10px;
-
-    }
-
+        max-width: 500px; /* 最大宽度 */
+        /*min-height: 55px;*/ /* 最小高度（已被注释掉，不生效） */
+        display: inline-block; /* 内联块级显示 */
+        vertical-align: top; /* 顶部对齐 */
+        position: relative; /* 相对定位 */
+        text-align: left; /* 文本对齐到左侧（尽管在气泡内，可能主要影响直接包含在此元素内的文本） */
+        font-size: 20px; /* 字体大小 */
+        -webkit-border-radius: 3px; /* WebKit引擎的圆角边框（现代浏览器也支持不带前缀的border-radius） */
+        margin-right: 10px; /* 右侧外边距 */
+    }
+
+    /* 左侧聊天气泡框样式，与右侧类似，但背景色不同 */
     .chat-output-bubble-left {
-        background-color: #eeeeee;
-        max-width: 500px;
-        /*min-height: 55px;*/
-        display: inline-block;
-        vertical-align: top;
-        position: relative;
-        text-align: left;
-        font-size: 20px;
-        -webkit-border-radius: 3px;
-        margin-left: 10px;
-
-    }
-
+        background-color: #eeeeee; /* 背景颜色 */
+        max-width: 500px; /* 最大宽度 */
+        /*min-height: 55px;*/ /* 最小高度（已被注释掉，不生效） */
+        display: inline-block; /* 内联块级显示 */
+        vertical-align: top; /* 顶部对齐 */
+        position: relative; /* 相对定位 */
+        text-align: left; /* 文本对齐到左侧 */
+        font-size: 20px; /* 字体大小 */
+        -webkit-border-radius: 3px; /* WebKit引擎的圆角边框 */
+        margin-left: 10px; /* 左侧外边距 */
+    }
+    /* 聊天气泡内部内容的样式 */
     .chat-output-bubble-inner {
-        word-wrap: break-word;
-        word-break: break-all;
-        min-height: 25px;
+        word-wrap: break-word; /* 当单词太长而无法放入一行时，允许在单词内换行 */
+        word-break: break-all; /* 允许在任意字符处换行，包括非空格字符 */
+        min-height: 25px; /* 设置最小高度，确保气泡内容至少有25像素高 */
     }
 
+    /* 右侧带有预格式文本样式的聊天气泡 */
     .chat-output-bubble-pre-right {
-        background-color: #b2e281;
-        margin: 0;
-        font-family: inherit;
-        font-size: inherit;
-        white-space: pre-wrap;
-        word-break: normal;
+        background-color: #b2e281; /* 设置背景颜色为浅绿色 */
+        margin: 0; /* 移除所有外边距 */
+        font-family: inherit; /* 继承父元素的字体家族 */
+        font-size: inherit; /* 继承父元素的字体大小 */
+        white-space: pre-wrap; /* 保留空白符序列，但正常地进行换行 */
+        word-break: normal; /* 使用标准的断词规则 */
     }
 
+    /* 左侧带有预格式文本样式的聊天气泡（与右侧类似，但没有背景色设置） */
     .chat-output-bubble-pre-left {
-        margin: 0;
-        font-family: inherit;
-        font-size: inherit;
-        white-space: pre-wrap;
-        word-break: normal;
+        margin: 0; /* 移除所有外边距 */
+        font-family: inherit; /* 继承父元素的字体家族 */
+        font-size: inherit; /* 继承父元素的字体大小 */
+        white-space: pre-wrap; /* 保留空白符序列，但正常地进行换行 */
+        word-break: normal; /* 使用标准的断词规则 */
     }
 
+    /* 按钮样式 */
     .button {
-        float: right;
-        outline: none;
-        border: none;
-        height: 40px;
-        margin-top: 10px;
-        margin-right: 5px;
-        z-index: 99;
+        float: right; /* 浮动到右侧 */
+        outline: none; /* 移除按钮的默认轮廓线 */
+        border: none; /* 移除按钮的边框 */
+        height: 40px; /* 设置按钮的高度为40像素 */
+        margin-top: 10px; /* 设置按钮顶部的外边距为10像素 */
+        margin-right: 5px; /* 设置按钮右侧的外边距为5像素 */
+        z-index: 99; /* 设置按钮的堆叠顺序为99，确保它位于其他元素之上（在具有相同或较低堆叠上下文的上下文中） */
     }
 </style>
 </html>
diff --git a/wechat-master/web/login.jsp b/wechat-master/web/login.jsp
index 21a6384..9d6e971 100644
--- a/wechat-master/web/login.jsp
+++ b/wechat-master/web/login.jsp
@@ -21,132 +21,220 @@
   Time: 3:51
   To change this template use File | Settings | File Templates.
 --%>
+<%--
+    页面指令，设置页面的内容类型、字符集、脚本语言和页面编码。
+    contentType 指定了返回给客户端的内容类型为 HTML，并使用 UTF-8 编码。
+    language 指定了页面中使用的脚本语言为 Java。
+    pageEncoding 明确指定了页面本身的编码为 UTF-8，虽然通常与 contentType 中的 charset 相同，但在这里为了清晰起见还是单独设置了。
+--%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
+
+<%--
+    引入 JSTL 核心标签库，前缀为 c。
+    这允许我们在 JSP 页面中使用 JSTL 标签，如 <c:set>、<c:if> 等。
+--%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+
+<%--
+    使用 <c:set> 标签设置一个名为 host 的变量，其值为 "localhost:8080/wechat"。
+    这个变量稍后在页面中用于构建 URL。
+--%>
 <c:set var="host" value="localhost:8080/wechat"/>
 <%--设置主机名--%>
+
+<!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8">
-    <title>wechat</title>
-    <link rel="shortcut icon" type=image/x-icon href=https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico>
+    <meta charset="utf-8"> <%-- 设置页面的字符集为 UTF-8 --%>
+    <title>wechat</title> <%-- 页面标题 --%>
+
+    <%-- 引入微信图标 --%>
+    <link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico">
+
+    <%-- 引入 Bootstrap CSS 框架 --%>
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+
+    <%-- 引入 jQuery 库 --%>
     <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
+
+    <%--
+        发送请求脚本的占位符，目前为空。
+        可以在这里添加 JavaScript 代码来处理发送请求的逻辑。
+    --%>
     <!--BEGIN——发送请求脚本-->
     <!--END——发送请求脚本-->
 </head>
 <body>
+
+<%-- 页面背景容器 --%>
 <div class="background">
-    <%-- 页面头部--%>
+
+    <%-- 页面头部 --%>
     <div class="login-head" style="height: 100px">
+
+        <%-- 使用 Bootstrap 的 jumbotron 类来创建一个醒目的容器 --%>
         <div class="jumbotron" style="padding-bottom: 20px;padding-top:20px;margin:0px">
+
+            <%-- 包含微信 logo 和标语的区域 --%>
             <div class="logo">
                 <a href="${pageContext.request.contextPath}/index.jsp"
-                   style="color: #999;font-size: 44px;text-decoration: none"><img
-                        src="${pageContext.request.contextPath}/static/img/logo.png" alt="logo"
-                        style="width: 100px;margin: 10px">微信，是一种生活方式</h2>
-                </a>
+                   style="color: #999;font-size: 44px;text-decoration: none">
+                    <img src="${pageContext.request.contextPath}/static/img/logo.png" alt="logo"
+                         style="width: 100px;margin: 10px">
+                    <%-- 注意：这里的 <h2> 标签被错误地关闭了，应该使用 </a> 来关闭 <a> 标签，而不是 </h2> --%>
+                    微信，是一种生活方式</a> <%-- 这里应该使用正确的 HTML 结构，但原代码有误，已按原样注释 --%>
+                </a> <%-- 这是一个多余的闭合标签，应该删除 --%>
             </div>
         </div>
     </div>
+
+    <%--
+        使用 <c:if> 标签检查 message 变量是否不为 null。
+        如果不为 null，则使用 JavaScript 显示一个警告框。
+    --%>
     <script>
         <c:if test="${message!=null}">
         alert("系统提示：${message}");
         </c:if>
     </script>
+
+    <%-- 输入框容器 --%>
     <div class="input-box">
+
+        <%-- 输入字段的容器，带有自定义样式 --%>
         <div class="color-input-field">
-            <form  action="http://${host}/wechat/user?method=login.do" method="post">
+
+            <%--
+                表单，提交到 http://${host}/wechat/user?method=login.do。
+                使用 POST 方法提交。
+            --%>
+            <form action="http://${host}/wechat/user?method=login.do" method="post">
+
+                <%--
+                    一个隐藏的提交按钮，可能用于触发某些 JavaScript 事件，但在这里被设置为不显示。
+                --%>
                 <input id="index" type="submit" style="display: none">
-            <h2 class="input-box-title">邮箱登陆</h2>
-            <input type="text" required="required" class="form-control" id="email"
-                   value="${param.email}" name="email" placeholder="请输入登陆邮箱" >
-            <br/>
-            <input id="password" type="password" required="required" class="form-control" name="password"
-                   placeholder="请输入密码">
-            <div class="remember-me">
-                <input id="option" name="auto_login" type="checkbox" value="true">记住登陆
-            </div>
-            <input type="submit" class="submit-button" value="登陆">
-            <br>
-            <div class="switch-button">
-                <a href="${pageContext.request.contextPath}/register.jsp">立即注册</a>
-                <a href="http://${host}/wechat/user?method=login.do&email=visitor" onclick="visitor()">| 游客模式</a>
-            </div>
+
+                <%-- 输入框标题 --%>
+                <h2 class="input-box-title">邮箱登陆</h2>
+
+                <%-- 邮箱输入框，带有占位符和必填验证 --%>
+                <input type="text" required="required" class="form-control" id="email"
+                       value="${param.email}" name="email" placeholder="请输入登陆邮箱">
+                <br/>
+
+                <%-- 密码输入框，带有占位符和必填验证 --%>
+                <input id="password" type="password" required="required" class="form-control" name="password"
+                       placeholder="请输入密码">
+
+                <%-- 记住登陆选项 --%>
+                <div class="remember-me">
+                    <input id="option" name="auto_login" type="checkbox" value="true">记住登陆
+                </div>
+
+                <%-- 提交按钮 --%>
+                <input type="submit" class="submit-button" value="登陆">
+                <br>
+
+                <%-- 切换按钮，包含注册链接和游客模式链接 --%>
+                <div class="switch-button">
+                    <a href="${pageContext.request.contextPath}/register.jsp">立即注册</a>
+                    <%--
+                        游客模式链接，带有 onclick 事件处理器（尽管这里没有定义 visitor() 函数，可能需要在 JavaScript 中定义）。
+                        注意：这里的 URL 拼接方式可能会导致安全问题，建议使用更安全的参数传递方式。
+                    --%>
+                    <a href="http://${host}/wechat/user?method=login.do&email=visitor" onclick="visitor()">| 游客模式</a>
+                </div>
+
             </form>
         </div>
     </div>
 </div>
+</body>
+</html>
 
+<!-- 网页的结束body标签，通常表示HTML文档的主体内容结束 -->
 </body>
+
+<!-- 定义CSS样式 -->
 <style type="text/css">
+    /* 设置背景样式 */
     .background {
-        height: -webkit-fill-available;
-        min-height: 750px;
-        text-align: center;
-        font-size: 14px;
-        background-color: #f1f1f1;
-        z-index: -1;
+        height: -webkit-fill-available; /* 高度填充可用空间（针对webkit浏览器） */
+        min-height: 750px; /* 最小高度 */
+        text-align: center; /* 文本居中 */
+        font-size: 14px; /* 字体大小 */
+        background-color: #f1f1f1; /* 背景颜色 */
+        z-index: -1; /* 堆叠顺序，设置为-1表示在其他元素之下 */
     }
 
+    /* 设置logo样式 */
     .logo {
-        position: absolute;
-        top: 56px;
-        margin-left: 50px;
+        position: absolute; /* 绝对定位 */
+        top: 56px; /* 距离顶部56px */
+        margin-left: 50px; /* 距离左侧50px */
     }
 
+    /* 设置表单控件样式 */
     .form-control {
-        padding: 10px;
-        min-height: 55px;
-        max-height: 70px;
-        font-size: 22px;
+        padding: 10px; /* 内边距 */
+        min-height: 55px; /* 最小高度 */
+        max-height: 70px; /* 最大高度 */
+        font-size: 22px; /* 字体大小 */
     }
 
+    /* 设置输入框标题样式 */
     .input-box-title {
-        text-align: center;
-        margin: 0 auto 50px;
-        padding: 10px;
-        font-weight: 400;
-        color: #969696
+        text-align: center; /* 文本居中 */
+        margin: 0 auto 50px; /* 上下外边距自动，底部外边距50px */
+        padding: 10px; /* 内边距 */
+        font-weight: 400; /* 字体粗细 */
+        color: #969696 /* 字体颜色 */
     }
 
+    /* 设置颜色输入框样式 */
     .color-input-field {
-        padding: 50px;
-        font-size: 22px;
-        height: 625px;
-        width: 500px
+        padding: 50px; /* 内边距 */
+        font-size: 22px; /* 字体大小 */
+        height: 625px; /* 高度 */
+        width: 500px /* 宽度 */
     }
 
+    /* 设置输入框容器样式 */
     .input-box {
-        width: fit-content;
-        margin: 104px auto;
-        background-color: #fff;
-        border-radius: 4px;
-        box-shadow: 0 0 8px rgba(0, 0, 0, .1);
-        vertical-align: middle;
+        width: fit-content; /* 宽度适应内容 */
+        margin: 104px auto; /* 上下外边距104px，左右外边距自动 */
+        background-color: #fff; /* 背景颜色 */
+        border-radius: 4px; /* 边框圆角 */
+        box-shadow: 0 0 8px rgba(0, 0, 0, .1); /* 盒子阴影 */
+        vertical-align: middle; /* 垂直对齐方式 */
     }
 
+    /* 设置提交按钮样式 */
     .submit-button {
-        margin-top: 20px;
-        background-color: #1AAD19;
-        color: #FFFFFF;
-        padding: 9px 18px;
-        border-radius: 5px;
-        outline: none;
-        border: none;
-        width: 100%;
+        margin-top: 20px; /* 上外边距 */
+        background-color: #1AAD19; /* 背景颜色 */
+        color: #FFFFFF; /* 字体颜色 */
+        padding: 9px 18px; /* 内边距 */
+        border-radius: 5px; /* 边框圆角 */
+        outline: none; /* 移除默认轮廓 */
+        border: none; /* 无边框 */
+        width: 100%; /* 宽度100% */
     }
 
+    /* 设置记住我选项样式 */
     .remember-me {
-        float: left;
-        font-weight: 400;
-        color: #969696;
-        margin-top: 20px;
+        float: left; /* 左浮动 */
+        font-weight: 400; /* 字体粗细 */
+        color: #969696; /* 字体颜色 */
+        margin-top: 20px; /* 上外边距 */
     }
 
+    /* 设置切换按钮容器样式 */
     .switch-button {
-        text-align: left;
+        text-align: left; /* 文本左对齐 */
     }
-
 </style>
-</html>
+
+<!-- 网页的结束html标签，表示HTML文档结束 -->
+</html>
\ No newline at end of file
diff --git a/wechat-master/web/register.jsp b/wechat-master/web/register.jsp
index 5dde950..17823b2 100644
--- a/wechat-master/web/register.jsp
+++ b/wechat-master/web/register.jsp
@@ -21,55 +21,69 @@
   Time: 21:23
   To change this template use File | Settings | File Templates.
 --%>
+<%-- 设置页面的内容类型为HTML，并指定字符集和页面编码为UTF-8 --%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
+<%-- 引入JSTL核心标签库，并设置前缀为c --%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%-- 设置一个名为host的变量，其值为localhost:8080/wechat --%>
 <c:set var="host" value="localhost:8080/wechat"/>
-<%--设置主机名--%>
+<%-- 注释：设置主机名 --%>
+
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>wechat</title>
-    <link rel="shortcut icon" type=image/x-icon href=https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico>
+    <%-- 设置网页的快捷图标（favicon） --%>
+    <link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico">
+    <%-- 引入Bootstrap的CSS样式 --%>
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <%-- 引入jQuery库 --%>
     <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
     <script>
+        // 定义注册函数
         function register() {
+            // 获取邮箱和密码输入框的值
             var email = document.getElementById("email").value;
             var password = document.getElementById("password").value;
+            // 验证邮箱是否填写
             if(email==null||email==''){
                 alert("请填写邮箱");
                 return;
             }
+            // 验证密码是否填写
             if(password==null||password===''){
                 alert("请填写密码");
                 return;
             }
+            // 验证是否同意用户使用协议
             if(!document.getElementById("agree").checked){
                 alert("请先同意用户使用协议");
                 return;
             }
+            // 触发表单提交
             document.getElementById("submit").click();
         }
-
-
     </script>
 </head>
 <body>
+<%-- 如果message变量不为空，则弹出系统提示 --%>
 <script>
     <c:if test="${message!=null}">
     alert("系统提示：${message}");
     </c:if>
 </script>
 <div class="background">
-    <%-- 页面头部--%>
+    <%-- 页面头部 --%>
     <div class="login-head" style="height: 100px">
         <div class="jumbotron" style="padding-bottom: 20px;padding-top:20px;margin:0px">
             <div class="logo">
+                <%-- 链接到首页，并显示微信logo和标语 --%>
                 <a href="${pageContext.request.contextPath}/index.jsp"
-                   style="color: #999;font-size: 44px;text-decoration: none"><img
-                        src="${pageContext.request.contextPath}/static/img/logo.png" alt="logo"
-                        style="width: 100px;margin: 10px">微信，是一种生活方式</h2>
+                   style="color: #999;font-size: 44px;text-decoration: none">
+                    <img src="${pageContext.request.contextPath}/static/img/logo.png" alt="logo"
+                         style="width: 100px;margin: 10px">
+                    <h2>微信，是一种生活方式</h2>
                 </a>
             </div>
         </div>
@@ -77,101 +91,119 @@
     <div class="input-box">
         <div class="color-input-field">
             <h2 class="input-box-title">注册账号</h2>
-            <form   action="http://${host}/wechat/user?method=register.do" method="post">
+            <%-- 表单提交到注册处理URL，使用POST方法 --%>
+            <form action="http://${host}/wechat/user?method=register.do" method="post">
+                <%-- 隐藏一个提交按钮，用于在JavaScript中触发提交 --%>
                 <input id="index" type="submit" style="display: none">
-            <input id="email" type="text" required="required" class="form-control" name="email"
-                   value="${data.email}" placeholder="请输入邮箱号">
-            <br/>
-            <input id="password" type="password" required="required" class="form-control" name="password"
-                  value="${data.password}" placeholder="请输入密码(6-20位英文字母，数字或下划线)">
-            <div class="remember-me">
-                <input id="agree" type="checkbox" name="agreement"  value="true"
-                       style="margin-bottom: 13px">我已阅读并同意<a href="agreement.html">《微信服务协议》</a>
-            </div>
+                <%-- 邮箱输入框 --%>
+                <input id="email" type="text" required="required" class="form-control" name="email"
+                       value="${data.email}" placeholder="请输入邮箱号">
+                <br/>
+                <%-- 密码输入框 --%>
+                <input id="password" type="password" required="required" class="form-control" name="password"
+                       value="${data.password}" placeholder="请输入密码(6-20位英文字母，数字或下划线)">
+                <div class="remember-me">
+                    <%-- 同意协议复选框 --%>
+                    <input id="agree" type="checkbox" name="agreement" value="true"
+                           style="margin-bottom: 13px">
+                    我已阅读并同意<a href="agreement.html">《微信服务协议》</a>
+                </div>
+                <%-- 隐藏的真实提交按钮 --%>
                 <input type="submit" id="submit" style="display: none">
-            <input onclick="register()" type="button" class="submit-button" value="注册">
-            <br>
-            <div class="switch-button">
-                已有账号？<a href="${pageContext.request.contextPath}/login.jsp">请登陆</a>
-                <a href="http://${host}/wechat/user?method=login.do&email=visitor" >| 游客模式</a>
-            </div>
+                <%-- 注册按钮，点击后调用JavaScript的register函数 --%>
+                <input onclick="register()" type="button" class="submit-button" value="注册">
+                <br>
+                <div class="switch-button">
+                    <%-- 提供登录和游客模式的链接 --%>
+                    已有账号？<a href="${pageContext.request.contextPath}/login.jsp">请登陆</a>
+                    <a href="http://${host}/wechat/user?method=login.do&email=visitor"> | 游客模式</a>
+                </div>
             </form>
         </div>
     </div>
 </div>
-
 </body>
+</html>
+
+<!-- 样式定义开始 -->
 <style type="text/css">
 
+    /* 定义背景样式 */
     .background {
-        height: -webkit-fill-available;
-        min-height: 750px;
-        text-align: center;
-        font-size: 14px;
-        background-color: #f1f1f1;
-        z-index: -1;
+        height: -webkit-fill-available; /* 在webkit浏览器中，高度自动填充可用空间 */
+        min-height: 750px; /* 最小高度为750px */
+        text-align: center; /* 文本居中 */
+        font-size: 14px; /* 字体大小为14px */
+        background-color: #f1f1f1; /* 背景颜色为浅灰色 */
+        z-index: -1; /* 元素的堆叠顺序为-1，通常用于放在其他元素之后 */
     }
 
+    /* 定义logo样式 */
     .logo {
-        position: absolute;
-        top: 56px;
-        margin-left: 50px;
+        position: absolute; /* 绝对定位 */
+        top: 56px; /* 距离顶部56px */
+        margin-left: 50px; /* 距离左侧50px */
     }
 
+    /* 定义表单控件样式 */
     .form-control {
-        padding: 10px;
-        min-height: 55px;
-        max-height: 70px;
-        font-size: 22px;
+        padding: 10px; /* 内边距为10px */
+        min-height: 55px; /* 最小高度为55px */
+        max-height: 70px; /* 最大高度为70px */
+        font-size: 22px; /* 字体大小为22px */
     }
 
+    /* 定义输入框标题样式 */
     .input-box-title {
-        text-align: center;
-        margin: 0 auto 50px;
-        padding: 10px;
-        font-weight: 400;
-        color: #969696
+        text-align: center; /* 文本居中 */
+        margin: 0 auto 50px; /* 上边距为0，左右自动居中，下边距为50px */
+        padding: 10px; /* 内边距为10px */
+        font-weight: 400; /* 字体粗细为400 */
+        color: #969696; /* 字体颜色为深灰色 */
     }
 
+    /* 定义颜色输入框样式 */
     .color-input-field {
-        padding: 50px;
-        font-size: 22px;
-        height: 625px;
-        width: 500px
+        padding: 50px; /* 内边距为50px */
+        font-size: 22px; /* 字体大小为22px */
+        height: 625px; /* 高度为625px */
+        width: 500px; /* 宽度为500px */
     }
 
+    /* 定义输入框容器样式 */
     .input-box {
-        width: fit-content;
-        margin: 104px auto;
-        background-color: #fff;
-        border-radius: 4px;
-        box-shadow: 0 0 8px rgba(0, 0, 0, .1);
-        vertical-align: middle;
+        width: fit-content; /* 宽度适应内容 */
+        margin: 104px auto; /* 上下边距为104px，左右自动居中 */
+        background-color: #fff; /* 背景颜色为白色 */
+        border-radius: 4px; /* 边框圆角为4px */
+        box-shadow: 0 0 8px rgba(0, 0, 0, .1); /* 盒子阴影效果 */
+        vertical-align: middle; /* 垂直对齐方式为中间 */
     }
 
+    /* 定义提交按钮样式 */
     .submit-button {
-        margin-top: 20px;
-        background-color: #1AAD19;
-        color: #FFFFFF;
-        padding: 9px 18px;
-        border-radius: 5px;
-        outline: none;
-        border: none;
-        width: 100%;
+        margin-top: 20px; /* 上边距为20px */
+        background-color: #1AAD19; /* 背景颜色为绿色 */
+        color: #FFFFFF; /* 字体颜色为白色 */
+        padding: 9px 18px; /* 内边距为9px（上下）和18px（左右） */
+        border-radius: 5px; /* 边框圆角为5px */
+        outline: none; /* 去除默认轮廓线 */
+        border: none; /* 无边框 */
+        width: 100%; /* 宽度为父容器的100% */
     }
 
+    /* 定义记住我选项样式 */
     .remember-me {
-        float: left;
-        font-weight: 400;
-        color: #969696;
-        margin-top: 20px;
+        float: left; /* 左浮动 */
+        font-weight: 400; /* 字体粗细为400 */
+        color: #969696; /* 字体颜色为深灰色 */
+        margin-top: 20px; /* 上边距为20px */
     }
 
+    /* 定义切换按钮样式 */
     .switch-button {
-        text-align: left;
+        text-align: left; /* 文本左对齐 */
     }
 
 </style>
-</html>
-
-
+<!-- 样式定义结束 -->
