2023-12-01版本

src/router/index.js

@@ -41,11 +41,11 @@ const routes = [
             }
           },
           {
-            path:"/chat",
+            path: "/chat",
-            name:"Chat",
+            name: "Chat",
-            component:()=>import("../views/main/Chat.vue"),
+            component: () => import("../views/main/Chat.vue"),
-            meta:{
+            meta: {
-              isLogin:true
+              isLogin: true
             }
           }
         ]

src/store/index.js

@@ -17,7 +17,6 @@ export default new Vuex.Store({
     delToken(state) {
       state.token = ''
       localStorage.removeItem("token")//删除token
-
     }
   },
   actions: {

src/store/request.js

@@ -4,7 +4,7 @@ import { Message } from "element-ui";
 
 //创建axios实例
 const axiosInstance = axios.create({
-    baseURL: 'http://localhost:8080', // 设置默认发送地址为后端端口
+    baseURL: 'http://localhost:8887', // 设置默认发送地址为后端端口
 });
 
 //添加拦截器，在每次ajax之前都会执行这个操作

src/views/LoginView.vue

@@ -215,7 +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);
+                  localStorage.setItem("account", that.loginForm.account);
                   that.$router.push({ path: "/home" });
                 } else {
                   that.$message.error('账号或密码错误');

src/views/main/Chat.vue

@@ -13,7 +13,7 @@
                         <p>{{ message.nickname }} {{ message.sendTime }}</p>
                     </div>
                     <div class="info">
-                        <el-avatar :src="message.pic" class="head"></el-avatar>
+                        <el-avatar :src=message.pic class="head"></el-avatar>
                         <div class="message">
                             <div class="detail">
                                 {{ message.message }}
@@ -31,7 +31,7 @@
                         </div>
 
                         <div class="info">
-                            <el-avatar :src="message.pic" class="head"></el-avatar>
+                            <el-avatar :src=message.pic class="head"></el-avatar>
 
                             <div class="message">
                                 <div class="detail">
@@ -59,6 +59,8 @@
 </template>
 
 <script>
+import axiosInstance from '@/store/request';
+
 let socket;
 export default {
 
@@ -78,12 +80,12 @@ export default {
         this.myName = localStorage.getItem("nickname");
     },
     methods: {
-        getDate(){
+        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 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;
@@ -93,6 +95,7 @@ export default {
             if (!this.textarea) {
                 this.$message({ type: 'warning', message: "请输入内容" })
             } else {
+                axiosInstance.get("/interceptor")
                 this.getDate()
                 let SendMessage = {
                     nickname: this.myName,
@@ -114,11 +117,12 @@ export default {
 
         init() {
             const that = this
+            axiosInstance.get("/interceptor")
             if (typeof (WebSocket) === undefined) {
                 console.log("您的浏览器不支持WebSocket");
             } else {
                 console.log("您的浏览器支持WebSocket");
-                let socketUrl = "ws://localhost:8080/chat/get";
+                let socketUrl = "ws://localhost:8887/chat/get";
                 if (socket != null) {
                     socket.close();
                     socket = null;

src/views/main/Index.vue

@@ -32,14 +32,14 @@
       <div class="left">
         <h2 class="versionText">ChatABC Windows版 1.1.1</h2>
         <p class="time">发布时间: 2023年11月17号</p>
-        <img src="../../assets/img/cool.jpg" class="img">
+        <img :src=headPic class="img">
         <br>
         <el-button type="primary" round class="button" @click="download">立即下载</el-button>
       </div>
       <div class="right">
         <h2 class="versionText">ChatABC Linux版 1.1.1</h2>
         <p class="time">发布时间: 2023年11月17号</p>
-        <img src="../../assets/img/cool.jpg" class="img">
+        <img :src=headPic class="img">
         <el-button type="primary" class="button" @click="download" round>立即下载</el-button>
       </div>
     </div>
@@ -47,18 +47,41 @@
 </template>
 
 <script>
+import axiosInstance from "@/store/request";
+
 export default {
   data() {
     return {
       myName: "",
-      headPic: require("@/assets/img/cool.jpg"),
+      headPic: "",
     };
   },
+
+
+
   mounted() {
     this.myName = localStorage.getItem("nickname");
+    this.headPic = localStorage.getItem("headPic");
+    console.log(this.headPic);
+    this.init()
   },
   methods: {
+
+
+    init() {
+      const that=this
+      axiosInstance.post("/getHead", {
+        account: localStorage.getItem("account"),
+      }).then(function (response) {
+        that.headPic = response.data.pic;
+        that.myName = response.data.username;
+        localStorage.setItem("nickname", response.data.username);
+      });
+
+    },
+
     download() {
+
       //下载文件
       var blob = new Blob(['Hello, this is the content of the file!'], { type: 'text/plain' });
       var link = document.createElement('a');
@@ -103,6 +126,7 @@ export default {
   align-items: center;
   justify-content: center;
   height: 100%;
+
 }
 
 .dropdownMenu {
@@ -121,18 +145,8 @@ export default {
 }
 
 
-
-.el-popper[x-placement^=bottom] .popper__arrow {
-  display: none;
-}
-
-
-.el-icon-arrow-down {
-  font-size: 12px;
-}
-
 .headerNav {
-  background-color: rgb(35, 40, 52) ;
+  background-color: rgb(35, 40, 52);
   // position: relative;
   // right: 0;
   // top: 0;
@@ -250,6 +264,7 @@ export default {
         height: 300px;
 
       }
+
       .button {
         margin-top: 50px;
         margin-left: 190px;
@@ -260,4 +275,15 @@ export default {
       }
     }
   }
-}</style>
+}
+</style>
+<style lang="scss">
+//style设置为scope时不生效
+.el-popper[x-placement^=bottom] .popper__arrow {
+  display: none;
+}
+
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+</style>