/

src/views/space/space.vue

@@ -67,36 +67,37 @@
         <div class="post-container">
           <div class="post" v-for="post in posts" :key="post.id">
             <div class="post-header">
-              <img src="../../assets/pictures/space/post1.png" alt="" />
+              <img :src="post.avatarurl" 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,9 @@
     name:'spaceIndex',
     data() {
       return {
-        likeCount: 0,
+        userId: 1,
-        isLiked:false,
+        userlikelist:[],
-        commentCount:0,
+        // myfollows: [],
-        defaultImage:require("../../assets/pictures/space/post2.png"),
         userInfo: {
           name: "", // 用户姓名
           avatar:"",
@@ -122,34 +122,118 @@
           expectation: "", // 择偶期望
           career: "", // 职业
         },
-        posts:{
+        posts:[
+          {
+            id: 0,
+            avatarurl:require("../../assets/pictures/space/post1.png"),
             name:"掌声",
             date:"2024-01-01",
             text:"测试文本",
+            postImageUrl:"../../assets/pictures/space/post1.png",
+            likeCount: 0,
+            commentCount: 0,
+            isLiked:false,
+          },
+          {
+            id: 1,
+            avatarurl:require("../../assets/pictures/space/post1.png"),
+            name:"掌声",
+            date:"2024-12-01",
+            text:"我好开心",
             postImageUrl:"",
+            likeCount: 0,
+            commentCount: 5,
+            isLiked:false,
+          },
+          {
+            id: 2,
+            avatarurl:require("../../assets/pictures/space/post1.png"),
+            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){
+        try {
-            this.likeCount--;
+          const response = await axios.get(`/likes/userid=${userid}`);
-          }else{
+          this.userlikelist = response; // Store the liked post IDs
-            this.likeCount++;
+          
+          // Update isLiked status for all posts
+          this.posts = this.posts.map(post => ({
+            ...post,
+            isLiked: this.userlikelist.some(like => like.postid === post.id)
+          }));
+          
+        } catch (error) {
+          console.error('Error:', error);
+        }
+
+        axios.get(`/likes/userid=${userid}`)
+          .then(response => {
+            // this.userlikelist.splice(0, this.myfollows.length);
+            this.userlikelist.push(...response);
+            return response;
+          })
+          .catch(error => {
+            console.error('Error:', error);
+          });
+          if (this.userlikelist.some(follow => follow.postid === this.postid)) {
+            this.isLiked = true;
+          }
+      },
+      async handleLike(post) {//点赞按钮
+        if (!post.isLiked) {//假如没点赞
+          try {
+            const response = await axios.post(`/likes/userid=${this.userId}/postid=${post.id}`);
+            if (response === "点赞成功！") {
+              // this.$message.success(response);
+              // this.$emit('updateLikeCount', this.likeCount + 1);
+              post.isLiked = !post.isLiked;
+              post.likeCount = post.likeCount + 1 ;
+            }
+            else {
+              this.$message.error(response);
+            }
+          } catch (error) {
+            this.$message.error("点赞失败");
+            console.log(error);
+          }
+        }
+        else {//假如已经点赞
+          try {
+            const response = await axios.delete(`/likes/userid=${this.userId}/postid=${post.id}`);
+            if (response === "取消点赞成功！") {
+              // this.$message.success("取消点赞成功");
+              // this.$emit('updateLikeCount', this.likeCount - 1);
+              post.isLiked = !post.isLiked;
+              post.likeCount = post.likeCount - 1;
+            }
+            else {
+              this.$message.error(response);
+            }
+          } 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，需根据实际情况调整
             },
           });
 
@@ -179,25 +263,27 @@
       },
       async fetchPostInfo() {
         try {
-        // 调用后端接口获取帖子日期信息
+          // const userId = this.userId; // 需要从用户状态或其他地方获取
-        const postResponse = await axios.get("/api/getPostDate", {
+          const postResponse = await axios.get(`/posts/userid=${this.userId}`, {
-          params: {
+            // params: {
-            postId: "POST_ID_HERE", // 传递帖子 ID
+            //   userId: userId
-          },
+            // }
           });
-        this.postDate = postResponse.data.date;
+          // 假设后端返回的数据中包含了用户是否对每个帖子点赞的信息
-        this.postText = postResponse.data.text;
+          this.posts = postResponse.map(post => ({
-        this.postImgUrl = postResponse.data.imageUrl;
+            id: post.postid, 
+            avatarurl:post.avatarurl,
+            name: post.username, 
+            date: post.timestamp,
+            text: post.content,
+            postImageUrl: post.imageurl,
+            likeCount: post.likecount,
+            commentCount: post.commentcount,
+            isLiked: this.userlikelist.some(like => like.postid === post.postid)
+          }));
         } catch (error) {
           console.error("获取帖子信息失败:", error);
-        // 可以在这里添加一些提示用户的逻辑，比如弹出提示框告知获取信息失败等
         }
-    },
-    selectTab(tab) {
-        this.selectedTab = tab;
-      },
-      showMoreInfo() {
-
     },
       showFamilyTree() {
         this.$router.push('/main/familyTree');
@@ -213,6 +299,7 @@
     mounted() {
       // 加载用户信息
       this.fetchUserInfo();
+      this.fetchPostInfo();
     },
   };
   </script>
@@ -382,6 +469,8 @@
   width: 680px;
   position: relative; /* 使得子元素可以相对移动 */
   margin-bottom: 70px;
+  padding: 0 20px;
+  /* border-bottom: 2px solid #d1cccc; */
 }
 
 .post-header {
@@ -399,7 +488,7 @@
   top: -10px; /* 调整横线的位置 */
   width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
   height: 1px; /* 横线的高度 */
-  background-color: #d1cccc; /* 横线颜色 */
+  /* background-color: #d1cccc; 横线颜色 */
 }
 
 .post-header img {
@@ -442,6 +531,10 @@
 
 .post-footer {
   padding: 10px;
+  left: 30px; /* 根据需要调整左侧位置 */
+  top: -10px; /* 调整横线的位置 */
+  width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
+  border-bottom: 1.5px solid #d1cccc;
 }
 
 /* 图标的样式 */
@@ -461,7 +554,7 @@
 
 /* 图标悬停时的效果 */
 .reactions span:hover {
-  transform: scale(1.1); /* 悬停时稍微放大 */
+  /* transform: scale(1.1); 悬停时稍微放大 */
 }
 
 /* 增加点赞和评论数值的可读性 */