feat:完成评论功能搭建

Yi.BBS.Vue3/src/apis/commentApi.js

@@ -0,0 +1,15 @@
+import myaxios from '@/utils/request'
+export function getListByDiscussId(discussId,data){
+    return myaxios({
+        url: `/comment/discuss-id/${discussId}`,
+        method: 'get',
+        params:data
+    })
+};
+export function add(data){
+    return myaxios({
+        url: `/comment`,
+        method: 'post',
+        data:data
+    })
+};

Yi.BBS.Vue3/src/components/CommentInfo.vue

@@ -0,0 +1,46 @@
+<template>
+  <div v-for="item in commentList" :key="item.id">
+    第一级：{{ item.content }},id{{ item.id }}  <el-button @click="replay(item.id,item.id)">回复</el-button>
+    <div v-for="children in item.children" :key="children.id">
+      -->> 第二级 {{ children.content }}, 评论者{{ children.createUser.nick }},
+      被回复者{{ children.commentedUser.nick }},id{{ children.id }}
+      <el-button @click="replay(children.id,item.id)">回复</el-button>
+    </div>
+  </div>
+  <el-input v-model="form.content"></el-input>
+  <el-button @click="addComment">发布</el-button>
+</template>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { getListByDiscussId, add } from "@/apis/commentApi.js";
+//数据定义
+const route = useRoute();
+const router = useRouter();
+const commentList = ref([]);
+const query = reactive({});
+
+const form = reactive({
+  content: "",
+  discussId: route.params.discussId,
+  query,
+  parentId: 0,
+  rootId: 0,
+});
+onMounted(async () => {
+  await loadComment();
+});
+const loadComment = async () => {
+  const response = await getListByDiscussId(route.params.discussId, query);
+  commentList.value = response.data.items;
+};
+const addComment = async () => {
+  await add(form);
+  await loadComment();
+};
+const replay= async(parentId,rootId)=>{
+    form.parentId=parentId;
+     form.rootId=rootId;
+     await addComment();
+}
+</script>

Yi.BBS.Vue3/src/views/Article.vue

@@ -53,7 +53,11 @@
             </el-space>
           </el-col>
 
-          <el-col :span="24" class="comment"> 文章评论 </el-col>
+          <el-col :span="24" class="comment"> 
+
+<CommentInfo/>
+
+          </el-col>
         </el-row>
       </el-col>
 
@@ -121,6 +125,7 @@ import { h, ref, onMounted } from "vue";
 import AvatarInfo from "@/components/AvatarInfo.vue";
 import InfoCard from "@/components/InfoCard.vue";
 import ArticleContentInfo from "@/components/ArticleContentInfo.vue";
+import CommentInfo from "@/components/CommentInfo.vue";
 
 import TreeArticleInfo from "@/components/TreeArticleInfo.vue";
 import { useRoute, useRouter } from "vue-router";

Yi.BBS.Vue3/src/views/Index.vue

@@ -40,7 +40,7 @@
           <template #content >
             <div class="introduce">
 
-              没有什么能够阻挡，人类对代码<span style="color: #1890ff;">优雅</span>的最求
+              没有什么能够阻挡，人类对代码<span style="color: #1890ff;">优雅</span>的追求
             </div>
        
           </template>