🚀 优化评论区

aurora-springboot/src/main/java/com/aurora/controller/CommentController.java

@@ -3,6 +3,7 @@ package com.aurora.controller;
 import com.aurora.annotation.OptLog;
 import com.aurora.dto.CommentAdminDTO;
 import com.aurora.dto.CommentDTO;
+import com.aurora.dto.ReplyDTO;
 import com.aurora.service.CommentService;
 import com.aurora.vo.*;
 import io.swagger.annotations.Api;
@@ -36,6 +37,12 @@ public class CommentController {
         return Result.ok(commentService.listComments(commentVO));
     }
 
+    @ApiOperation(value = "根据commentId获取回复")
+    @GetMapping("/comments/{commentId}/replies")
+    public Result<List<ReplyDTO>> listRepliesByCommentId(@PathVariable("commentId") Integer commentId) {
+        return Result.ok(commentService.listRepliesByCommentId(commentId));
+    }
+
     @ApiOperation("获取前七个评论")
     @GetMapping("/comments/topSeven")
     public Result<List<CommentDTO>> getTopSevenComments() {
@@ -64,5 +71,4 @@ public class CommentController {
         return Result.ok();
     }
 
-
 }

aurora-springboot/src/main/java/com/aurora/service/CommentService.java

@@ -2,6 +2,7 @@ package com.aurora.service;
 
 import com.aurora.dto.CommentAdminDTO;
 import com.aurora.dto.CommentDTO;
+import com.aurora.dto.ReplyDTO;
 import com.aurora.entity.Comment;
 import com.aurora.vo.CommentVO;
 import com.aurora.vo.ConditionVO;
@@ -17,6 +18,8 @@ public interface CommentService extends IService<Comment> {
 
     PageResult<CommentDTO> listComments(CommentVO commentVO);
 
+    List<ReplyDTO> listRepliesByCommentId(Integer commentId);
+
     List<CommentDTO> listTopSevenComments();
 
     PageResult<CommentAdminDTO> listCommentsAdmin(ConditionVO conditionVO);

aurora-springboot/src/main/java/com/aurora/service/impl/CommentServiceImpl.java

@@ -27,9 +27,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
 
-import java.util.List;
-import java.util.Map;
-import java.util.Objects;
+import java.util.*;
 import java.util.concurrent.CompletableFuture;
 import java.util.stream.Collectors;
 
@@ -105,6 +103,11 @@ public class CommentServiceImpl extends ServiceImpl<CommentMapper, Comment> impl
         return new PageResult<>(commentDTOs, commentCount);
     }
 
+    @Override
+    public List<ReplyDTO> listRepliesByCommentId(Integer commentId) {
+        return commentMapper.listReplies(Collections.singletonList(commentId));
+    }
+
     @Override
     public List<CommentDTO> listTopSevenComments() {
         return commentMapper.listTopSevenComments();

aurora-vue/aurora-blog/src/api/api.ts

@@ -128,5 +128,8 @@ export default {
   },
   logout: () => {
     return axios.post('/api/users/logout')
+  },
+  getRepliesByCommentId: (commentId: any) => {
+    return axios.get(`/api/comments/${commentId}/replies`)
   }
 }

aurora-vue/aurora-blog/src/components/Comment/src/CommentItem.vue

@@ -41,10 +41,11 @@ export default defineComponent({
     CommentReplyItem,
     CommentReplyForm
   },
-  props: ['comment'],
+  props: ['comment', 'index'],
   setup(props) {
     const comment: any = props.comment
     provide('parentId', comment.id)
+    provide('index', props.index)
     const formatTime = (time: any): any => {
       let date = new Date(time)
       let year = date.getFullYear()

aurora-vue/aurora-blog/src/components/Comment/src/CommentList.vue

@@ -1,6 +1,7 @@
 <template>
   <transition-group name="fade">
-    <CommentItem v-for="comment in comments" :key="comment.id" :comment="comment"> </CommentItem>
+    <CommentItem v-for="(comment, index) in comments" :key="comment.id" :comment="comment" :index="index">
+    </CommentItem>
   </transition-group>
   <button
     class="load-more-button mt-7 w-32 text-white p-2 rounded-lg shadow-lg transition transform hover:scale-105 flex mx-auto"

aurora-vue/aurora-blog/src/components/Comment/src/CommentReplyForm.vue

@@ -52,6 +52,7 @@ export default defineComponent({
       commentContent: '' as any
     })
     const parentId = inject('parentId')
+    const index = inject('index')
     const saveReply = () => {
       if (userStore.userInfo === '') {
         proxy.$notify({
@@ -81,7 +82,7 @@ export default defineComponent({
       api.saveComment(params).then(({ data }) => {
         if (data.flag) {
           emit('changeShow')
-          fetchComments()
+          fetchReplies()
           let isCommentReview = appStore.websiteConfig.isCommentReview
           if (isCommentReview) {
             proxy.$notify({
@@ -108,22 +109,22 @@ export default defineComponent({
       reactiveData.commentContent = ''
     }
 
-    const fetchComments = async () => {
+    const fetchReplies = async () => {
       switch (commentStore.type) {
         case 1:
-          emitter.emit('articleFetchComment')
+          emitter.emit('articleFetchReplies',index)
           break
         case 2:
-          emitter.emit('messageFetchComment')
+          emitter.emit('messageFetchReplies',index)
           break
         case 3:
-          emitter.emit('aboutFetchComment')
+          emitter.emit('aboutFetchReplies',index)
           break
         case 4:
-          emitter.emit('friendLinkFetchComment')
+          emitter.emit('friendLinkFetchReplies',index)
           break
         case 5:
-          emitter.emit('talkFetchComment')
+          emitter.emit('talkFetchReplies',index)
       }
     }
 

aurora-vue/aurora-blog/src/views/About.vue

@@ -152,6 +152,12 @@ export default defineComponent({
       })
     }
 
+    const fetchReplies = (index: any) => {
+      api.getRepliesByCommentId(reactiveData.comments[index].id).then(({ data }) => {
+        reactiveData.comments[index].replyDTOs = data.data
+      })
+    }
+
     onMounted(fetchData)
     provide(
       'comments',
@@ -166,6 +172,9 @@ export default defineComponent({
       reactiveData.isReload = true
       fetchComments()
     })
+    emitter.on('aboutFetchReplies', (index) => {
+      fetchReplies(index)
+    })
     emitter.on('aboutLoadMore', () => {
       fetchComments()
     })

aurora-vue/aurora-blog/src/views/Article.vue

@@ -273,6 +273,12 @@ export default defineComponent({
       })
     }
 
+    const fetchReplies = (index: any) => {
+      api.getRepliesByCommentId(reactiveData.comments[index].id).then(({data})=>{
+        reactiveData.comments[index].replyDTOs = data.data
+      })
+    }
+
     provide(
       'comments',
       computed(() => reactiveData.comments)
@@ -286,6 +292,9 @@ export default defineComponent({
       reactiveData.isReload = true
       fetchComments()
     })
+    emitter.on('articleFetchReplies', (index) => {
+      fetchReplies(index)
+    })
     emitter.on('articleLoadMore', () => {
       fetchComments()
     })

aurora-vue/aurora-blog/src/views/FriendLink.vue

@@ -102,6 +102,11 @@ export default defineComponent({
         pageInfo.current++
       })
     }
+    const fetchReplies = (index: any) => {
+      api.getRepliesByCommentId(reactiveData.comments[index].id).then(({data})=>{
+        reactiveData.comments[index].replyDTOs = data.data
+      })
+    }
     onMounted(fetchData)
     provide(
       'comments',
@@ -116,6 +121,9 @@ export default defineComponent({
       reactiveData.isReload = true
       fetchComments()
     })
+    emitter.on('friendLinkFetchReplies', (index) => {
+      fetchReplies(index)
+    })
     emitter.on('friendLinkLoadMore', () => {
       fetchComments()
     })

aurora-vue/aurora-blog/src/views/Message.vue

@@ -70,6 +70,11 @@ export default defineComponent({
         pageInfo.current++
       })
     }
+    const fetchReplies = (index: any) => {
+      api.getRepliesByCommentId(reactiveData.comments[index].id).then(({data})=>{
+        reactiveData.comments[index].replyDTOs = data.data
+      })
+    }
     provide(
       'comments',
       computed(() => reactiveData.comments)
@@ -83,6 +88,9 @@ export default defineComponent({
       reactiveData.isReload = true
       fetchComments()
     })
+    emitter.on('messageFetchReplies', (index) => {
+      fetchReplies(index)
+    })
     emitter.on('messageLoadMore', () => {
       fetchComments()
     })

aurora-vue/aurora-blog/src/views/Talk.vue

@@ -120,6 +120,11 @@ export default defineComponent({
         pageInfo.current++
       })
     }
+    const fetchReplies = (index: any) => {
+      api.getRepliesByCommentId(reactiveData.comments[index].id).then(({data})=>{
+        reactiveData.comments[index].replyDTOs = data.data
+      })
+    }
     provide(
       'comments',
       computed(() => reactiveData.comments)
@@ -133,6 +138,9 @@ export default defineComponent({
       reactiveData.isReload = true
       fetchComments()
     })
+    emitter.on('talkFetchReplies', (index) => {
+      fetchReplies(index)
+    })
     emitter.on('talkLoadMore', () => {
       fetchComments()
     })