2023-11-26版本

src/views/LoginView.vue

@@ -215,6 +215,7 @@ export default {
               .then(function (response) {
                 if (response.data.responseStr !== "No") {
                   that.$store.commit("setToken", response.data.responseStr);
+                  localStorage.setItem("nickname", that.loginForm.account);
                   that.$router.push({ path: "/home" });
                 } else {
                   that.$message.error('账号或密码错误');

src/views/main/Chat.vue

@@ -8,7 +8,7 @@
             <div v-for="(message, index) in messageList" :key="index">
 
 
-        <div class="word" v-if="!(message.nickname == 'COOL')">
+                <div class="word" v-if="!(message.nickname == myName)">
                     <div class="information">
                         <p>{{ message.nickname }} {{ message.sendTime }}</p>
                     </div>
@@ -68,26 +68,45 @@ export default {
             textarea: "",
             myName: '',
             myPic: '',
-
+            dateNow: '',
         };
     },
     mounted() {
         var container = document.getElementById('chat');
         container.scrollTop = container.scrollHeight;
-    this.init()
+        this.init();
+        this.myName = localStorage.getItem("nickname");
     },
     methods: {
+        getDate(){
+            var date = new Date();
+            var year = date.getFullYear();
+            var month = (date.getMonth() + 1).toString().padStart(2, '0');
+            var day = date.getDate().toString().padStart(2, '0');
+            var hour =date.getHours().toString().padStart(2, '0');
+            var minute = date.getMinutes().toString().padStart(2, '0');
+            var second = date.getSeconds().toString().padStart(2, '0');
+            this.dateNow = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
+        },
+
         send() {
             if (!this.textarea) {
                 this.$message({ type: 'warning', message: "请输入内容" })
             } else {
+                this.getDate()
                 let SendMessage = {
-          nickname: 'COOL',
+                    nickname: this.myName,
                     pic: "1",
-          sendTime: '2023/11/20 18:23:18',
+                    sendTime: this.dateNow,
                     message: this.textarea,
                 }
+                this.messageList.push(SendMessage)
+                this.$nextTick(function () {
+                    var container = document.getElementById('chat');
+                    container.scrollTop = container.scrollHeight;
+                });
                 socket.send(JSON.stringify(SendMessage));
+
                 this.textarea = "";
                 console.log(this.messageList, "这是send")
             }
@@ -114,7 +133,10 @@ export default {
                     that.messageList = data
                     console.log(that.messageList[1].message, "nickname")
                     console.log(that.messageList, 2)
-
+                    that.$nextTick(function () {
+                        var container = document.getElementById('chat');
+                        container.scrollTop = container.scrollHeight;
+                    });
                 }
 
                 socket.onerror = function () {
@@ -126,11 +148,6 @@ export default {
             }
         },
 
-    SendMessage(textarea) {
-      //发送消息
-      console.log(textarea);
-    },
-
     },
 
 };
@@ -223,7 +240,6 @@ export default {
             direction: rtl;
 
 
-
             .outer {
 
                 .information {
@@ -297,7 +313,6 @@ export default {
             padding: 10px;
 
 
-
             .textarea {
                 color: rgb(32, 179, 86);
 

src/views/main/Index.vue

@@ -14,7 +14,7 @@
                 <i class="el-icon-caret-bottom" style="font-size: 20px;color:aliceblue;"></i>
               </div>
               <el-dropdown-menu slot="dropdown" class="dropdownMenu">
-                <p style="color: aliceblue; font-size: 14px;text-align: center;">已登录用户Cool</p>
+                <p style="color: aliceblue; font-size: 14px;text-align: center;">已登录用户{{ myName }}</p>
                 <hr style="border:none;height:1px;background-color: rgb(82, 87, 103);">
                 <el-dropdown-item icon="el-icon-user-solid" command="a" class="item">个人信息</el-dropdown-item>
                 <el-dropdown-item icon="el-icon-chat-dot-round" command="b" class="item">消息通知</el-dropdown-item>
@@ -50,9 +50,13 @@
 export default {
   data() {
     return {
+      myName: "",
       headPic: require("@/assets/img/cool.jpg"),
     };
   },
+  mounted() {
+    this.myName = localStorage.getItem("nickname");
+  },
   methods: {
     download() {
       //下载文件