修改个人空间接口

src/utils/axiosConfig.js

@@ -5,7 +5,7 @@ import {getToken} from '@/token/auth' // 注意这里使用了解构赋值来导
 // 创建axios实例
 const service = axios.create({
   // baseURL: 'http://47.122.59.26:8080/api', // 配置基础URL   如果服务器域名发生变化统一可以去.env文件修改
-  // baseURL: 'http://10.205.10.22:8081/loveforest/api/',
+  baseURL: 'http://10.133.6.46:8082/loveforest',
   timeout: 5000, // 请求超时时间
 });
 

src/views/space/space.vue

@@ -69,34 +69,35 @@
             <div class="post-header">
               <img src="../../assets/pictures/space/post1.png" alt="" />
               <div class="post-info">
-                <h2>{{ post.name || "哈哈哈"}}</h2>
+                <h2>{{ post.name }}</h2>
-                <h3>{{ post.date || "2024-01-01" }}</h3>
+                <h3>{{ post.date }}</h3>
-                <p>{{ post.text  || "测试测试"}}</p>
+                <p>{{ post.text }}</p>
               </div>
             </div>
-            <div class="post-img">
+
-              <img :src="post.postImageUrl || defaultImage " alt="" />
+            <div class="post-img" v-if="post.postImageUrl">
+              <img :src="post.postImageUrl" alt="" />
             </div>
+
             <div class="post-footer">
               <div class="reactions">
                 <div class="Like">
-                  <span @click="increaseCount('like')" :class="{'liked': isLiked}">
+                  <span @click="handleLike(post)" :class="{'liked': post.isLiked}">
-                    <span v-if="isLiked">❤️</span>
+                    <span v-if="post.isLiked">❤️</span>
                     <span v-else>🤍</span>
                   </span>
-                  {{ likeCount }}
+                  {{ post.likeCount }}
                 </div>
                 <div class="comment">
-                  <span @click="increaseCount('comment')">
+                  <span>💬</span>
-                    💬
+                  {{ post.commentCount }}
-                  </span>
-                  {{ commentCount }}
                 </div>
               </div>
               <div class="comments">
                 <!-- 评论内容可以在这里渲染 -->
               </div>
             </div>
+
           </div>
         </div>
   </div>
@@ -109,10 +110,7 @@
     name:'spaceIndex',
     data() {
       return {
-        likeCount: 0,
+        userId: 0,
-        isLiked:false,
-        commentCount:0,
-        defaultImage:require("../../assets/pictures/space/post2.png"),
         userInfo: {
           name: "", // 用户姓名
           avatar:"",
@@ -122,34 +120,98 @@
           expectation: "", // 择偶期望
           career: "", // 职业
         },
-        posts:{
+        posts:[
-          name:"掌声",
+          {
-          date:"2024-01-01",
+            id: 0,
-          text:"测试文本",
+            name:"掌声",
-          postImageUrl:"",
+            date:"2024-01-01",
-        },
+            text:"测试文本",
+            postImageUrl:"../../assets/pictures/space/post1.png",
+            likeCount: 0,
+            commentCount: 0,
+            isLiked:false,
+          },
+          {
+            id: 1,
+            name:"掌声",
+            date:"2024-12-01",
+            text:"我好开心",
+            postImageUrl:"",
+            likeCount: 0,
+            commentCount: 5,
+            isLiked:false,
+          },
+          {
+            id: 2,
+            name:"掌声",
+            date:"2024-01-01",
+            text:"测试文本",
+            postImageUrl:"../../assets/pictures/space/post1.png",
+            likeCount: 8,
+            commentCount: 0,
+            isLiked:false,
+          },
+        ],
         defaultAvatar: "https://via.placeholder.com/150", // 默认头像占位符
       };
   },
     methods: {
-      increaseCount(type){
+      async loaduserlikes() {//加载user点赞列表 并会传入每个帖子做是否已经点赞的判断
-        if(type === 'like'){
+        const userid = this.userId;//获取用户id
-          if(this.isLiked){
+        axios.get(`/likes/userid=${userid}`)
-            this.likeCount--;
+          .then(response => {
-          }else{
+            this.userlikelist.splice(0, this.myfollows.length);
-            this.likeCount++;
+            this.userlikelist.push(...response.data);
+            return response.data;
+          })
+          .catch(error => {
+            console.error('Error:', error);
+          });
+      },
+      async handleLike(post) {//点赞按钮
+        if (!post.isLiked) {//假如没点赞
+          try {
+            const response = await axios.post(`/likes/userid=${this.userId}/postid=${post.id}`);
+            if (response.data === "点赞成功！") {
+              // this.$message.success(response.data);
+              // this.$emit('updateLikeCount', this.likeCount + 1);
+              post.isLiked = !post.isLiked;
+              post.likeCount = post.likeCount + 1 ;
+            }
+            else {
+              this.$message.error(response.data);
+            }
+          } catch (error) {
+            this.$message.error("点赞失败");
+            console.log(error);
+          }
+        }
+        else {//假如已经点赞
+          try {
+            const response = await axios.delete(`/likes/userid=${this.userId}/postid=${post.id}`);
+            if (response.data === "取消点赞成功！") {
+              this.$message.error("取消点赞成功");
+              // this.$emit('updateLikeCount', this.likeCount - 1);
+              this.isLiked = !this.isLiked;
+              post.likeCount = post.likeCount - 1;
+            }
+            else {
+              this.$message.error(response.data);
+            }
+          } catch (error) {
+            this.$message.error("点赞失败");
+            console.log(error);
           }
-          this.isLiked=!this.isLiked;
-        }else if(type === 'comment'){
-          this.commentCount++;
         }
       },
+
       async fetchUserInfo() {
+        await this.loaduserlikes();
         try {
           // 调用后端接口获取用户信息
           const response = await axios.get("/api/getUserInfo", {
             params: {
-              userId: "12345", // 假设传递用户 ID，需根据实际情况调整
+              userId: this.userId, // 假设传递用户 ID，需根据实际情况调整
             },
           });
 
@@ -178,20 +240,26 @@
         }
       },
       async fetchPostInfo() {
-      try {
+        try {
-        // 调用后端接口获取帖子日期信息
+          const userId = this.userId; // 需要从用户状态或其他地方获取
-        const postResponse = await axios.get("/api/getPostDate", {
+          const postResponse = await axios.get("/posts/userid=1", {
-          params: {
+            params: {
-            postId: "POST_ID_HERE", // 传递帖子 ID
+              userId: userId
-          },
+            }
-        });
+          });
-        this.postDate = postResponse.data.date;
+          // 假设后端返回的数据中包含了用户是否对每个帖子点赞的信息
-        this.postText = postResponse.data.text;
+          this.posts = postResponse.data.map(post => ({
-        this.postImgUrl = postResponse.data.imageUrl;
+            id: post.postid, 
-      } catch (error) {
+            name: post.username, 
-        console.error("获取帖子信息失败:", error);
+            date: post.timestamp,
-        // 可以在这里添加一些提示用户的逻辑，比如弹出提示框告知获取信息失败等
+            text: post.content,
-      }
+            postImageUrl: post.imageurl,
+            likeCount: post.likecount,
+            commentCount: post.commentcount,
+          }));
+        } catch (error) {
+          console.error("获取帖子信息失败:", error);
+        }
     },
     selectTab(tab) {
         this.selectedTab = tab;
@@ -213,6 +281,7 @@
     mounted() {
       // 加载用户信息
       this.fetchUserInfo();
+      this.fetchPostInfo();
     },
   };
   </script>
@@ -382,6 +451,8 @@
   width: 680px;
   position: relative; /* 使得子元素可以相对移动 */
   margin-bottom: 70px;
+  padding: 0 20px;
+  /* border-bottom: 2px solid #d1cccc; */
 }
 
 .post-header {
@@ -399,7 +470,7 @@
   top: -10px; /* 调整横线的位置 */
   width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
   height: 1px; /* 横线的高度 */
-  background-color: #d1cccc; /* 横线颜色 */
+  /* background-color: #d1cccc; 横线颜色 */
 }
 
 .post-header img {
@@ -442,6 +513,10 @@
 
 .post-footer {
   padding: 10px;
+  left: 30px; /* 根据需要调整左侧位置 */
+  top: -10px; /* 调整横线的位置 */
+  width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
+  border-bottom: 1.5px solid #d1cccc;
 }
 
 /* 图标的样式 */
@@ -461,7 +536,7 @@
 
 /* 图标悬停时的效果 */
 .reactions span:hover {
-  transform: scale(1.1); /* 悬停时稍微放大 */
+  /* transform: scale(1.1); 悬停时稍微放大 */
 }
 
 /* 增加点赞和评论数值的可读性 */