点赞帖子和评论

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue

@@ -27,9 +27,9 @@
                 </div>
                 <p class="post-summary">{{ post.summary }}</p>
                 <div class="post-stats">
-                    <span>浏览量 {{ post.viewCount }}</span>
-                    <span>评论 {{ post.comments }}</span>
-                    <span>赞 {{ post.likes }}</span>
+                    <span>👁 {{ post.viewCount }}</span>
+                    <span>🗨 {{ post.comments }}</span>
+                    <span>♥ {{ post.likes }}</span>
                 </div>
             </div>
         </div>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postdetail.js

@@ -271,5 +271,65 @@ export const usePostDetailStore = defineStore("postDetail", {
         ElMessage.error(e.response?.message || '删除失败，请稍后重试');
       }
     },
+    //帖子点赞和取消
+    async PostLike() {
+      if (!this.post || !this.post.postId) return;
+      try {
+        const url = `/post/like/${this.post.postId}`;
+        if (!this.isLike) {
+          // 点赞
+          const res = await request.put(url);
+          if (res.code === 200) {
+            this.isLike = true;
+            this.post.likeCount = (this.post.likeCount || 0) + 1;
+            ElMessage.success('点赞成功');
+          } else {
+            ElMessage.error(res.message || '点赞失败');
+          }
+        } else {
+          // 取消点赞
+          const res = await request.put(url);
+          if (res.code === 200) {
+            this.isLike = false;
+            this.post.likeCount = Math.max((this.post.likeCount || 1) - 1, 0);
+            ElMessage.success('已取消点赞');
+          } else {
+            ElMessage.error(res.message || '取消点赞失败');
+          }
+        }
+      } catch (e) {
+        ElMessage.error(e.response?.message || '操作失败，请稍后重试');
+      }
+    },
+    // 评论点赞和取消
+    async CommentLike(commentObj) {
+      if (!commentObj || !commentObj.id) return;
+      try {
+        const url = `/comment/like/${commentObj.id}`;
+        if (!commentObj.isLike) {
+          // 点赞
+          const res = await request.put(url);
+          if (res.code === 200) {
+            commentObj.isLike = true;
+            commentObj.likeCount = (commentObj.likeCount || 0) + 1;
+            ElMessage.success('点赞成功');
+          } else {
+            ElMessage.error(res.message || '点赞失败');
+          }
+        } else {
+          // 取消点赞
+          const res = await request.put(url);
+          if (res.code === 200) {
+            commentObj.isLike = false;
+            commentObj.likeCount = Math.max((commentObj.likeCount || 1) - 1, 0);
+            ElMessage.success('已取消点赞');
+          } else {
+            ElMessage.error(res.message || '取消点赞失败');
+          }
+        }
+      } catch (e) {
+        ElMessage.error(e.response?.message || '操作失败，请稍后重试');
+      }
+    }
   },
 });

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue

@@ -24,9 +24,19 @@
             <h1 class="post-title">{{ postDetailStore.post?.title || '' }}</h1>
             <p class="post-body">{{ postDetailStore.post?.content || '' }}</p>
             <div class="post-stats">
-                <span> 浏览量 {{ postDetailStore.post?.viewCount ?? 0 }}</span>
-                <span> 点赞 {{ postDetailStore.post?.likeCount ?? 0 }}</span>
-                <span> 评论 {{ postDetailStore.post?.commentCount ?? 0 }}</span>
+                <span> 👁 {{ postDetailStore.post?.viewCount ?? 0 }}</span>
+                <span> 🗨 {{ postDetailStore.post?.commentCount ?? 0 }}</span>
+                <span>
+                    <button
+                        @click="postDetailStore.PostLike"
+                        class="like-btn"
+                        :class="{ liked: postDetailStore.isLike }"
+                    >
+                        <span v-if="!postDetailStore.isLike">♡</span>
+                        <span v-else>♥</span>
+                        {{ postDetailStore.post?.likeCount ?? 0 }}
+                    </button>
+                </span>
             </div>
             <div class="post-time">
                 发布时间：{{ postDetailStore.post?.createTime ? formatTime(postDetailStore.post.createTime) : '' }}
@@ -50,7 +60,14 @@
                         <p class="comment-text">{{ comment.content || '' }}</p>
                         <div class="comment-meta">
                             <span class="comment-time">{{ comment.createTime ? formatTime(comment.createTime) : '' }}</span>
-                            <span class="comment-likes">赞 {{ comment.likeCount ?? 0 }}</span>
+                            <button
+                                @click="postDetailStore.CommentLike(comment)"
+                                :class="['like-btn', { liked: comment.isLike }]"
+                            >
+                                <span v-if="!comment.isLike">♡</span>
+                                <span v-else>♥</span>
+                                {{ comment.likeCount ?? 0 }}
+                            </button>
                             <span v-if="comment.replyCount > 0">
                             <button @click="loadReplies(comment)">
                                 {{ comment.showReplies> 0 ? '收起回复' : '展开回复' }} ({{ comment.replyCount }})
@@ -81,7 +98,14 @@
                                     <p class="comment-text">{{ reply.content || '' }}</p>
                                     <div class="comment-meta">
                                         <span class="comment-time">{{ reply.createTime ? formatTime(reply.createTime) : '' }}</span>
-                                        <span class="comment-likes">赞 {{ reply.likeCount ?? 0 }}</span>
+                                        <button
+                                            @click="postDetailStore.CommentLike(reply)"
+                                            :class="['like-btn', { liked: reply.isLike }]"
+                                        >
+                                            <span v-if="!reply.isLike">♡</span>
+                                            <span v-else>♥</span>
+                                            {{ reply.likeCount ?? 0 }}
+                                        </button>
                                         <button class="reply-btn" @click="startReply(reply)">回复</button>
                                         <button 
                                             class="delete-btn" 
@@ -540,4 +564,15 @@ onUnmounted(() => {
 .delete-btn:hover {
   text-decoration: underline;
 }
+.like-btn {
+  margin-left: 8px;
+  background: none;
+  border: none;
+  color: #409eff;
+  cursor: pointer;
+  font-size: 14px;
+}
+.like-btn.liked {
+  color: #f56c6c;
+}
 </style>