From 936105706642f2398e8d031826e6f49c1dd37b1c Mon Sep 17 00:00:00 2001
From: 7wc98#14 <2923616405@qq.com>
Date: Sun, 3 Jan 2021 13:50:47 +0800
Subject: [PATCH] commit

---
 .../resources/templates/PublicChatRoom.html   | 134 ++++++++++--------
 .../resources/templates/page/AddFriend.html   |  18 +--
 .../resources/templates/page/MyFriend.html    |  18 +--
 .../resources/templates/page/PrivateChat.html |  26 ----
 .../resources/templates/page/UserCenter.html  |  14 +-
 .../templates/page/VerifyFriend.html          |  19 ++-
 6 files changed, 110 insertions(+), 119 deletions(-)
diff --git a/src/main/resources/templates/PublicChatRoom.html b/src/main/resources/templates/PublicChatRoom.html
index ec31ac6..0ba247f 100644
--- a/src/main/resources/templates/PublicChatRoom.html
+++ b/src/main/resources/templates/PublicChatRoom.html
@@ -3,6 +3,20 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <title>公共聊天室</title>
+    <link rel="stylesheet" href="../../static/css/chat.css">
+    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
+          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
+          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
+    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
+            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+            crossorigin="anonymous"></script>
+    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
     <style>
         body {
             font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
@@ -10,29 +24,42 @@
             color: #000;
             margin: 0;
             padding: 0;
-            background: #eee url("../static/images/campus/logo.jpg") center no-repeat fixed;
-        }
-        .main{
-            margin: 10px auto;
-            width: 800px;
-            height: 700px;
         }
     </style>
 </head>
-<body onload="disconnect()">
+<body>
 <noscript><h2 style="color: red">貌似您的浏览器不支持WebSocket</h2> </noscript>
-<div class="main">
-    <div>
-        <div>
-            <button id="connect" onclick="connect();">连接</button>
-            <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
-        </div>
-        <div id="conversationDiv">
-            <label for="name">输入名字：</label><input type="text" id="name" />
-            <label for="content">输入消息：</label><input type="text" id="content">
-            <button id="sendName" onclick="sendName();">发送</button>
-            <br><h1>聊天记录框</h1>
-            <div id="response" style="width: 500px;min-height:600px;height: auto;font-size: 26px;border: 1px solid black;"></div>
+<div class="container">
+    <div class="row">
+        <div style="text-align: center;">
+            <br>
+            <br>
+            <div class="col-md-8">
+            </div>
+            <div class="col-md-8" id="conversationDiv">
+                <div class="panel panel-primary">
+                    <div class="panel-heading">
+                        <div class="panel-title">
+                            群聊聊天室
+                        </div>
+                    </div>
+                </div>
+                <div class="panel-body" style="background: #e4b9c0">
+                    <div id="response" style="height: 400px;width: 720px;overflow: auto;background:gray;" >
+
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-8">
+                <form class="form-inline" id="chatForm">
+                    <div class="form-group">
+                        <label for="name">输入名字：</label><input type="text" name="name" id="name" />
+                        <label for="text">输入框：</label>
+                        <input type="text" name="text" class="form-control" id="text" placeholder="输入要发送的信息">
+                    </div>
+                    <button type="submit" class="btn btn-primary">发送</button>
+                </form>
+            </div>
         </div>
     </div>
 </div>
@@ -40,50 +67,41 @@
 <script src="js/stomp.min.js"></script>
 <script src="js/jquery.js"></script>
 <script type="text/javascript">
-    var stompClient = null;
-
-    function setConnected(connected) {
-        document.getElementById('connect').disabled = connected;
-        document.getElementById('disconnect').disabled = !connected;
-        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
-        $('#response').html();
+    $('#chatForm').submit(function (e) {
+        e.preventDefault();
+        let text = $('#chatForm').find('input[name="text"]').val();
+        let name = $('#chatForm').find('input[name="name"]').val();
+        let str="<div class='left_d'><div class='speech left' ng-class='speech left'>"+name+":"+text+"</div></div>";
+        $('#response').append(str);
+        sendSpittle(name,text);
+    });
+    var sock = new SockJS("/endpointPublicChat");
+    var stomp = Stomp.over(sock);
+    stomp.connect({},function (frame) {
+        stomp.subscribe("/publicChat/getResponse",handleNotification);
+    });
+    function handleNotification(message) {
+        let content = JSON.parse(message.body).responseMessageContent;
+        let text = $('#chatForm').find('input[name="text"]').val();
+        let name = $('#chatForm').find('input[name="name"]').val();
+        if(content!==name+":"+text)
+        {
+            let str="<div class=\"right_d\"><div class=\"speech right\" ng-class=\"speech right\">"
+                +content
+                +"</div></div>";
+            $('#response').append(str);
+            console.log(str);
+        }
     }
-
-    function connect() {
-        var socket = new SockJS('/endpointPublicChat'); //1
-        stompClient = Stomp.over(socket);
-        stompClient.connect({}, function(frame) {
-            setConnected(true);
-            console.log('Connected: ' + frame);
-            stompClient.subscribe('/publicChat/getResponse', function(response){ //2
-                showResponse(JSON.parse(response.body).responseMessageContent);
-            });
-        });
+    function sendSpittle(name,text) {
+        stomp.send("/publicChatRoom", {}, JSON.stringify({ 'name': name,'content':text }));
     }
-
-
     function disconnect() {
-        if (stompClient != null) {
-            stompClient.disconnect();
+        if (stomp != null) {
+            stomp.disconnect();
         }
-        setConnected(false);
+        /*setConnected(false);*/
         console.log("Disconnected");
     }
-
-    function sendName() {
-        var name = $('#name').val();
-        var content = $('#content').val();
-        //3
-        stompClient.send("/publicChatRoom", {}, JSON.stringify({ 'name': name,'content':content }));
-    }
-
-    function showResponse(message) {
-        // var response = $("#response");
-        // response.html(message+"<br>");
-        var div = document.getElementById("response");
-        var  p = document.createElement("p");
-        p.innerHTML=message;
-        div.append(p);
-    }
 </script>
 </body>
\ No newline at end of file
diff --git a/src/main/resources/templates/page/AddFriend.html b/src/main/resources/templates/page/AddFriend.html
index b04cfa2..49ee746 100644
--- a/src/main/resources/templates/page/AddFriend.html
+++ b/src/main/resources/templates/page/AddFriend.html
@@ -122,15 +122,15 @@
     <div class="row">
         <div class="col-sm-4">
             <ul class="nav nav-pills nav-stacked">
-                <li><a href="/userCenter">信息查看</a></li>
-                <li><a href="/updateUserInfo">更新信息</a></li>
-                <li><a href="/sign">注册</a></li>
-                <li><a href="/toChangePWD">修改密码</a></li>
-                <li><a href="/toQueryGrade">查看课程成绩</a></li>
-                <li><a href="/toUpQuestion">申请问题悬赏</a></li>
-                <li><a href="/toBrowserQuestion">浏览悬赏问题</a></li>
-                <li><a href="/publicChatRoom">公共聊天室</a></li>
-                <li class="active"><a href="/toAddFriend">添加好友</a></li>
+                <li class="active"><a href="#">信息查看</a> </li>
+                <li><a href="/updateUserInfo" target="_blank">更新信息</a></li>
+                <li><a href="/sign" target="_blank">注册</a></li>
+                <li><a href="/toChangePWD" target="_blank">修改密码</a></li>
+                <li><a href="/toQueryGrade" target="">查看课程成绩</a> </li>
+                <li><a href="/toUpQuestion" target="">申请问题悬赏</a> </li>
+                <li><a href="/toBrowserQuestion" target="_blank">浏览悬赏问题</a> </li>
+                <li><a href="/publicChatRoom" target="_blank">公共聊天室</a> </li>
+                <li><a href="/toAddFriend">添加好友</a> </li>
                 <li><a href="/toMyFriend">我的好友</a> </li>
                 <li><a href="/toVerifyFriend">好友申请验证</a> </li>
             </ul>
diff --git a/src/main/resources/templates/page/MyFriend.html b/src/main/resources/templates/page/MyFriend.html
index 71bed3f..dc23080 100644
--- a/src/main/resources/templates/page/MyFriend.html
+++ b/src/main/resources/templates/page/MyFriend.html
@@ -125,16 +125,16 @@
     <div class="row">
         <div class="col-sm-4">
             <ul class="nav nav-pills nav-stacked">
-                <li><a href="/userCenter">信息查看</a> </li>
-                <li><a href="/updateUserInfo">更新信息</a></li>
-                <li><a href="/sign">注册</a></li>
-                <li><a href="/toChangePWD">修改密码</a></li>
-                <li><a href="/toQueryGrade">查看课程成绩</a> </li>
-                <li><a href="/toUpQuestion">申请问题悬赏</a> </li>
-                <li><a href="/toBrowserQuestion">浏览悬赏问题</a> </li>
-                <li><a href="/publicChatRoom">公共聊天室</a> </li>
+                <li class="active"><a href="#">信息查看</a> </li>
+                <li><a href="/updateUserInfo" target="_blank">更新信息</a></li>
+                <li><a href="/sign" target="_blank">注册</a></li>
+                <li><a href="/toChangePWD" target="_blank">修改密码</a></li>
+                <li><a href="/toQueryGrade" target="">查看课程成绩</a> </li>
+                <li><a href="/toUpQuestion" target="">申请问题悬赏</a> </li>
+                <li><a href="/toBrowserQuestion" target="_blank">浏览悬赏问题</a> </li>
+                <li><a href="/publicChatRoom" target="_blank">公共聊天室</a> </li>
                 <li><a href="/toAddFriend">添加好友</a> </li>
-                <li class="active"><a href="/toMyFriend">我的好友</a> </li>
+                <li><a href="/toMyFriend">我的好友</a> </li>
                 <li><a href="/toVerifyFriend">好友申请验证</a> </li>
             </ul>
             <hr class="hidden-sm hidden-md hidden-lg">
diff --git a/src/main/resources/templates/page/PrivateChat.html b/src/main/resources/templates/page/PrivateChat.html
index 8a50a90..418f4d1 100644
--- a/src/main/resources/templates/page/PrivateChat.html
+++ b/src/main/resources/templates/page/PrivateChat.html
@@ -22,32 +22,6 @@
     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
 </head>
 <body>
-
-<!--<div class="panel panel-primary">
-    <div class="page-header">
-        <h3 class="panel-title">注意</h3>
-    </div>
-    <div class="panel-body">
-        <div class="panel-heading" th:text="${msg.title}"></div>
-        <div class="panel-info" th:text="${msg.content}"></div>
-    </div>
-</div>
-<div  th:if="${friendStatus}">
-    <p>聊天室</p>
-    <form id="chatForm">
-        <label for="fromName">我：</label>
-        <input type="text" id="fromName" name="fromName" th:value="${fromName}" readonly="readonly">
-        <label for="toName">对方：</label>
-        <input type="text" id="toName" name="toName" th:value="${toName}" readonly="readonly">
-        <br>
-        <label>
-            <textarea rows="4" cols="60" name="text"></textarea>
-        </label>
-        <br>
-        <input type="submit" value="发送">
-    </form>
-    <div class="col-md-8" id="output"></div>
-</div>-->
 <div class="container">
     <div class="row">
         <div style="text-align: center;">
diff --git a/src/main/resources/templates/page/UserCenter.html b/src/main/resources/templates/page/UserCenter.html
index d83c1fb..fa29c8f 100644
--- a/src/main/resources/templates/page/UserCenter.html
+++ b/src/main/resources/templates/page/UserCenter.html
@@ -122,13 +122,13 @@
         <div class="col-sm-4">
             <ul class="nav nav-pills nav-stacked">
                 <li class="active"><a href="#">信息查看</a> </li>
-                <li><a href="/updateUserInfo">更新信息</a></li>
-                <li><a href="/sign">注册</a></li>
-                <li><a href="/toChangePWD">修改密码</a></li>
-                <li><a href="/toQueryGrade">查看课程成绩</a> </li>
-                <li><a href="/toUpQuestion">申请问题悬赏</a> </li>
-                <li><a href="/toBrowserQuestion">浏览悬赏问题</a> </li>
-                <li><a href="/publicChatRoom">公共聊天室</a> </li>
+                <li><a href="/updateUserInfo" target="_blank">更新信息</a></li>
+                <li><a href="/sign" target="_blank">注册</a></li>
+                <li><a href="/toChangePWD" target="_blank">修改密码</a></li>
+                <li><a href="/toQueryGrade" target="">查看课程成绩</a> </li>
+                <li><a href="/toUpQuestion" target="">申请问题悬赏</a> </li>
+                <li><a href="/toBrowserQuestion" target="_blank">浏览悬赏问题</a> </li>
+                <li><a href="/publicChatRoom" target="_blank">公共聊天室</a> </li>
                 <li><a href="/toAddFriend">添加好友</a> </li>
                 <li><a href="/toMyFriend">我的好友</a> </li>
                 <li><a href="/toVerifyFriend">好友申请验证</a> </li>
diff --git a/src/main/resources/templates/page/VerifyFriend.html b/src/main/resources/templates/page/VerifyFriend.html
index a0008ba..11f8934 100644
--- a/src/main/resources/templates/page/VerifyFriend.html
+++ b/src/main/resources/templates/page/VerifyFriend.html
@@ -123,17 +123,17 @@
     <div class="row">
         <div class="col-sm-4">
             <ul class="nav nav-pills nav-stacked">
-                <li><a href="/userCenter">信息查看</a> </li>
-                <li><a href="/updateUserInfo">更新信息</a></li>
-                <li><a href="/sign">注册</a></li>
-                <li><a href="/toChangePWD">修改密码</a></li>
-                <li><a href="/toQueryGrade">查看课程成绩</a> </li>
-                <li><a href="/toUpQuestion">申请问题悬赏</a> </li>
-                <li><a href="/toBrowserQuestion">浏览悬赏问题</a> </li>
-                <li><a href="/publicChatRoom">公共聊天室</a> </li>
+                <li class="active"><a href="#">信息查看</a> </li>
+                <li><a href="/updateUserInfo" target="_blank">更新信息</a></li>
+                <li><a href="/sign" target="_blank">注册</a></li>
+                <li><a href="/toChangePWD" target="_blank">修改密码</a></li>
+                <li><a href="/toQueryGrade" target="">查看课程成绩</a> </li>
+                <li><a href="/toUpQuestion" target="">申请问题悬赏</a> </li>
+                <li><a href="/toBrowserQuestion" target="_blank">浏览悬赏问题</a> </li>
+                <li><a href="/publicChatRoom" target="_blank">公共聊天室</a> </li>
                 <li><a href="/toAddFriend">添加好友</a> </li>
                 <li><a href="/toMyFriend">我的好友</a> </li>
-                <li class="active"><a href="/toVerifyFriend">好友申请验证</a> </li>
+                <li><a href="/toVerifyFriend">好友申请验证</a> </li>
             </ul>
             <hr class="hidden-sm hidden-md hidden-lg">
         </div>
@@ -181,7 +181,6 @@
             </div>
         </div>
     </div>
-</div>
 <script type="text/javascript">
     function check(value) {
         if(value!=="")
-- 
GitLab

