From b439d7d5e15005e6648c1da5dc4694bce6cd1cb9 Mon Sep 17 00:00:00 2001
From: QMZ <1164250597@qq.com>
Date: Mon, 16 Dec 2024 12:09:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E5=9F=BA=E6=9C=AC=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/community/community.css        |  33 +-
 .../community}/CommentInput.vue               |   0
 .../community}/PostCard.vue                   | 163 +++++-
 src/views/community/Postform.vue              |  46 +-
 src/views/community/trends.vue                | 473 ++++++++++--------
 5 files changed, 463 insertions(+), 252 deletions(-)
 rename src/{components => views/community}/CommentInput.vue (100%)
 rename src/{components => views/community}/PostCard.vue (62%)

diff --git a/src/assets/css/community/community.css b/src/assets/css/community/community.css
index 4249fe2c..9cb0a82d 100644
--- a/src/assets/css/community/community.css
+++ b/src/assets/css/community/community.css
@@ -113,10 +113,10 @@
   overflow-y: auto;  /* 允许垂直滚动 */
 }
 /* 隐藏滚动条 */
-.middle::-webkit-scrollbar {
-  width: 0px;  /* 隐藏水平滚动条 */
-  height: 0px; /* 隐藏垂直滚动条 */
-}
+/* .middle::-webkit-scrollbar {
+  width: 0px;  
+  height: 0px; 
+} */
 .follows {
   cursor: pointer;
   transition: background-color 0.3s ease;  
@@ -134,6 +134,31 @@
   background-color: #d0d0d0;  
   cursor: pointer;
 }
+
+
+.refresh-btn {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  position: relative;
+  transition: transform 0.3s ease-in-out;
+}
+
+.refresh-btn .refresh-icon {
+  fill: #FE4E96; /* 设置箭头颜色 */
+  transition: transform 0.3s ease-in-out;
+}
+
+/* 点击按钮时的动画效果 */
+.refresh-btn.clicked .refresh-icon {
+  transform: rotate(360deg); /* 旋转动画 */
+}
+
+.refresh-btn.clicked {
+  transform: scale(0.9); /* 按钮缩小 */
+}
 .post-list {
    
   }
diff --git a/src/components/CommentInput.vue b/src/views/community/CommentInput.vue
similarity index 100%
rename from src/components/CommentInput.vue
rename to src/views/community/CommentInput.vue
diff --git a/src/components/PostCard.vue b/src/views/community/PostCard.vue
similarity index 62%
rename from src/components/PostCard.vue
rename to src/views/community/PostCard.vue
index 7ec46703..f9fecb2d 100644
--- a/src/components/PostCard.vue
+++ b/src/views/community/PostCard.vue
@@ -16,17 +16,17 @@
         </button>
 
         <span>{{ timestamp }}</span>
-        
-        
-        
+
+
+
       </div>
       <div v-if="isfamilystory" class="ribbon-8">
-          <span>
-              家族故事
-          </span>
-        </div>
+        <span>
+          家族故事
+        </span>
+      </div>
     </div>
-   
+
     <div class="post-content">
       <p>{{ content }}</p>
       <div style="display: flex;justify-content: center;">
@@ -51,7 +51,7 @@
     <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
       <div v-if="isCommentsVisible" class="comments-section">
         <div v-for="(comment, index) in comments" :key="index" class="comment">
-          <p><strong>{{ comment.username }}:</strong> {{ comment.text }}</p>
+          <p><strong>{{ comment.userid}}:</strong> {{ comment.content }}</p>
         </div>
 
         <!-- 发布评论 -->
@@ -63,10 +63,16 @@
 
 <script>
   import CommentInput from './CommentInput.vue';
+  import axios from 'axios';
 
   export default {
+
+
     components: { CommentInput },
     props: {
+      postid: Number,
+      postuserid: Number,
+      userid: Number,
       avatarUrl: String,
       username: String,
       timestamp: String,
@@ -75,8 +81,34 @@
       likeCount: Number,
       commentCount: Number,
       isCommentsVisible: Boolean,
-      isfamilystory:Boolean,
+      isfamilystory: Boolean,
+      userlikelist: {
+        type: Array,
+        default: () => []
+      },
+      myfollows: {
+        type: Array,
+        default: () => []  // 如果没有传递，默认值为空数组
+      },
       comments: Array,  // 接收评论列表
+    },
+    created() {
+
+      if (this.userlikelist.some(follow => follow.postid === this.postid)) {
+
+        this.isLiked = true;
+      }
+      if (this.myfollows.some(follow => follow.myfollowid === this.postuserid)) {
+        this.followsbuttonActive = true;
+      }
+
+    },
+
+
+
+    computed: {
+
+
     },
     data() {
       return {
@@ -84,13 +116,57 @@
         isLiked: false,
         isClicked: false,
         followsbuttonActive: false
+
       };
     },
     methods: {
-      followsbutton() {
+
+      async followsbutton() {//关注按钮
         // 设置为 active，触发动画
-        this.followsbuttonActive = !this.followsbuttonActive;
+        const useride = this.userid;
+
+        if (this.followsbuttonActive == false) {
+          try {
+
+            const response = await axios.post(`http://localhost:8082/loveforest/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
+            if (response.data === "关注成功！") {
+
+              this.$message.success(response.data);
+              this.followsbuttonActive = true;
+            }
+            else {
+              this.$message.error(response.data);
+            }
+
+          } catch (error) {
+
+            this.$message.error("关注失败");
+            console.log(error);
+          }
 
+          this.$emit('followsbutton');
+        }
+        else {
+          try {
+
+            const response = await axios.delete(`http://localhost:8082/loveforest/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
+            if (response.data === "取消关注成功！") {
+              this.$message.success(response.data);
+              this.followsbuttonActive = false;
+
+            }
+            else {
+              this.$message.error(response.data);
+            }
+
+          } catch (error) {
+
+            this.$message.error("取消关注失败");
+            console.log(error);
+          }
+
+          this.$emit('followsbutton');
+        }
       },
 
       triggerAnimation() {
@@ -101,13 +177,45 @@
         }, 300); // 300ms 后移除，确保与动画时长一致
       },
 
-      handleClick() {
-        this.$message("aaa");
-        this.isClicked = true;
-      },
-      increaseLikeCount() {
-        this.$emit('updateLikeCount', this.likeCount + 1);
-        this.isLiked = !this.isLiked;
+      async increaseLikeCount() {//点赞按钮
+        if (!this.isLiked) {//假如没点赞
+          try {
+            const response = await axios.post(`http://localhost:8082/loveforest/likes/userid=${this.userid}/postid=${this.postid}`);
+            if (response.data === "点赞成功！") {
+              this.$message.success(response.data);
+              this.$emit('updateLikeCount', this.likeCount + 1);
+              this.isLiked = !this.isLiked;
+
+            }
+            else {
+              this.$message.error(response.data);
+            }
+          } catch (error) {
+
+            this.$message.error("点赞失败");
+            console.log(error);
+          }
+        }
+        else {//假如已经点赞
+          try {
+            const response = await axios.delete(`http://localhost:8082/loveforest/likes/userid=${this.userid}/postid=${this.postid}`);
+            if (response.data === "取消点赞成功！") {
+
+              this.$message.error("取消点赞成功");
+              this.$emit('updateLikeCount', this.likeCount - 1);
+              this.isLiked = !this.isLiked;
+
+            }
+            else {
+              this.$message.error(response.data);
+            }
+          } catch (error) {
+
+            this.$message.error("点赞失败");
+            console.log(error);
+          }
+
+        }
       },
       increaseCommentCount() {
         this.$emit('updateCommentCount', this.commentCount + 1);
@@ -137,15 +245,18 @@
 </script>
 
 <style scoped>
-  .postimage{
+  .postimage {
     max-width: 600px;
-  max-height: 600px;
-  width: auto; /* 保持宽高比 */
-  height: auto; /* 保持宽高比 */
-}
+    max-height: 600px;
+    width: auto;
+    /* 保持宽高比 */
+    height: auto;
+    /* 保持宽高比 */
+  }
+
   .ribbon-8 {
-    position:absolute;
-    right:-2%;
+    position: absolute;
+    right: -2%;
     padding: 2px 10px;
     width: 10%;
     background-color: #FE4E96;
diff --git a/src/views/community/Postform.vue b/src/views/community/Postform.vue
index 5ae06d48..22ffdf80 100644
--- a/src/views/community/Postform.vue
+++ b/src/views/community/Postform.vue
@@ -60,7 +60,7 @@
 
 <script>
   import { defineComponent } from 'vue';
-  
+  import axios from 'axios';
   
 
   
@@ -119,32 +119,56 @@
         this.imageUrl = ''; // 删除时清空图片预览
         this.fileList = fileList;
       },
-      submitPost() {
+      async submitPost() {
         this.$refs.postimage.submit();
         if (!this.form.content.trim()) {
           this.$message.error('内容不能为空');
           return;
         }
         const newPost = {
-          postId: Date.now(),
+          
           userid:1,
           username: '用户',
-          avatarUrl: 'https://via.placeholder.com/50',
+          avatarurl: 'https://via.placeholder.com/50',
           timestamp: new Date().toLocaleString(),
           content: this.form.content,
-          imageUrl: this.imageUrl,
-          likeCount: 0,
-          commentCount: 0,
-          comments: [],
-          isCommentsVisible: false,
+          imageurl: this.imageUrl,
+          likecount: 0,
+          commentcount: 0,
           isfamilystory: this.radio === '家族故事' ? true : false,
-          liked: false
+     
         };
        
-        this.$emit('post-submitted', newPost);
+     
+
+        try {
+        const response = await axios.post('http://localhost:8082/loveforest/posts/addpost', newPost, {
+          headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json'
+          }
+        });
+        if(response.data==="增加动态成功！")
+        {
+          this.$message.success("增加动态成功！");
+          this.$emit('post-submitted', newPost);
+          
         this.form.content = '';
         this.imageUrl = '';
         this.fileList = [];
+  
+      }
+      else{
+        this.$message.error(response.data);
+      }
+        
+      } catch (error) {
+        console.error('发布动态失败:', error);
+        this.$message.error('发布动态失败，请刷新后再试');
+      }
+
+
+
       },
     }
   });
diff --git a/src/views/community/trends.vue b/src/views/community/trends.vue
index f7ca018a..4bfc1562 100644
--- a/src/views/community/trends.vue
+++ b/src/views/community/trends.vue
@@ -26,17 +26,17 @@
         <div v-for="(follow, index) in myfollows" :key="index" style="width: 100%;">
           <div class="follows"
             style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;height: 120%;gap:3%;width: 100%;"
-            @mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1" @click="fllowsClick(follow.userid,index)"
+            @mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1" @click="fllowsClick(follow.myfollowid,index)"
             :class="{'selected': selectedIndex === index}">
             <img class="touxiang" src="../../assets/pictures/touxiang.png" style="left:20%;width: 15%; height: auto;" />
-            <div style="margin-left: 40px; font-weight: bold; font-size: 16px;">{{ follow.name }}</div>
-            <el-tag v-if="follow.weidu" effect="plain" round style="position: absolute; right:0%">
-              {{follow.weidu}}条新动态
+            <div style="margin-left: 40px; font-weight: bold; font-size: 16px;">{{ follow.myfollowid }}</div>
+            <el-tag v-if="follow.newpostnum" effect="plain" round style="position: absolute; right:0%">
+              {{follow.newpostnum}}条新动态
             </el-tag>
           </div>
           <hr style="width: 100%; height: 0.001px; background-color: #D8D8D8; margin-top: 1%;">
         </div>
-        
+
 
       </div>
     </div>
@@ -45,16 +45,19 @@
       <PostForm @post-submitted="submitPost" />
       <div class="post-list">
         <!-- 使用 transition-group 来包裹 v-for 渲染的元素 -->
-        <ul v-infinite-scroll="load" class="infinite-list" style="height:100px">
+        <ul v-infinite-scroll="load" class="infinite-list">
           <transition-group name="fade" tag="div">
-            <div v-for="(post, index) in checkPosts" :key="post.id" class="post-card">
-
-              <PostCard :avatarUrl="post.avatarUrl" :username="post.username" :timestamp="post.timestamp"
-                :content="post.content" :imageUrl="post.imageUrl" :likeCount="post.likeCount"
-                :commentCount="post.commentCount" :isCommentsVisible="post.isCommentsVisible" :comments="post.comments"
-                :isfamilystory="post.isfamilystory" @updateLikeCount="updateLikeCount(index, $event)"
-                @updateCommentCount="updateCommentCount(index, $event)"
-                @toggleCommentsVisibility="toggleCommentsVisibility(index)" @addComment="addComment(index, $event)" />
+            <div v-for="(post, index) in checkPosts" :key="post.postid" class="post-card"
+              :infinite-scroll-target="'.middle'">
+
+              <PostCard :avatarUrl="post.avatarurl" :username="post.username" :timestamp="post.timestamp"
+                :content="post.content" :imageUrl="post.imageurl" :likeCount="post.likecount" :postid="post.postid"
+                :commentCount="post.commentcount" :isCommentsVisible="post.isCommentsVisible" :comments="post.comments"
+                :postuserid="post.userid" :userid="userid" :isfamilystory="post.isfamilystory"
+                :userlikelist="this.userlikelist" @updateLikeCount="updateLikeCount(index, $event)"
+                :myfollows="this.myfollows" @updateCommentCount="updateCommentCount(index, $event)"
+                @toggleCommentsVisibility="toggleCommentsVisibility(index,post.postid)"
+                @addComment="addComment(index, $event,post.postid)" />
 
             </div>
           </transition-group>
@@ -86,14 +89,17 @@
           <div
             style="overflow: hidden; list-style-type: none; width: 90%; height: 20%; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative; cursor: pointer;"
             v-for="(Hotsearch, index) in HotsearchList" :key="index" @click="checkbypostid(Hotsearch.postid)">
-            
+
             <div style=" font-weight: bold; margin-left: 10%; margin-top: 1%; ">{{ Hotsearch.username }}:</div>
             <div style="left:10%;width: 70%; font-size: 12px;position: relative;">{{ Hotsearch.content}}</div>
-         
-            <svg width="20" height="20" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" id="fire-station" style="position: absolute;right:7% ;top:20%;fill:red ">
-              <path d="M7.5 14C11.0899 14 14 11 14 7.50003C14 4.5 11.5 2 11.5 2L10.5 5.5L7.5 1L4.5 5.5L3.5 2C3.5 2 1 4.5 1 7.50003C1 11 3.91015 14 7.5 14ZM7.5 12.5C6.11929 12.5 5 11.3807 5 10C5 8.61929 7.5 5.5 7.5 5.5C7.5 5.5 10 8.61929 10 10C10 11.3807 8.88071 12.5 7.5 12.5Z"/>
+
+            <svg width="20" height="20" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" id="fire-station"
+              style="position: absolute;right:7% ;top:20%;fill:red ">
+              <path
+                d="M7.5 14C11.0899 14 14 11 14 7.50003C14 4.5 11.5 2 11.5 2L10.5 5.5L7.5 1L4.5 5.5L3.5 2C3.5 2 1 4.5 1 7.50003C1 11 3.91015 14 7.5 14ZM7.5 12.5C6.11929 12.5 5 11.3807 5 10C5 8.61929 7.5 5.5 7.5 5.5C7.5 5.5 10 8.61929 10 10C10 11.3807 8.88071 12.5 7.5 12.5Z" />
             </svg>
-            <div style="position: absolute;right:7% ;top:60%;font-size: 12px;color: red;">{{Hotsearch.hot}}</div> 
+            <div style="position: absolute;right:7% ;top:60%;font-size: 12px;color: red;"> {{ (Hotsearch.commentcount *
+              2 + Hotsearch.likecount) }}</div>
           </div>
         </div>
 
@@ -106,6 +112,15 @@
           <Notebook />
         </el-icon>
         <div style="font-weight:550; font-size: 18px;">热门家族故事</div>
+
+        <button class="refresh-btn" @click="refresh">
+          <svg class="refresh-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path
+              d="M12 4V1L8 7l4 4V6c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9h2c0 3.87 3.13 7 7 7s7-3.13 7-7-3.13-7-7-7z" />
+          </svg>
+          换一批
+        </button>
+
       </div>
       <div class="familystorelist"
         style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
@@ -125,244 +140,280 @@
 
 </template>
 <script>
-  import PostCard from '../../components/PostCard.vue';
+  import PostCard from './PostCard.vue';
   import PostForm from './Postform.vue';
+  import axios from 'axios';
   export default {
     name: 'CommunityIndex', // 添加组件名称
     components: { PostCard, PostForm },
     // 其他组件选项
     data() {
       return {
-        HotsearchList: [{ username: "陶喆", postid: 6, content: "啊啊哦哦诶诶啊啊",hot:520 },
-        { avatarUrl: 'https://via.placeholder.com/40', username: "马思唯", content: "黑马季节收官战无敌", postid: 7, hot:220 },
-        { username: "马思唯", content: "我在阿姆斯特丹当个画家虽然口袋里钱不多，就在梵高博物馆外等她从我身边路过", postid: 4,  hot:200}, { username: "马思唯", content: "黑马季节", postid: 1,hot:120  },
-        { username: "马思唯", content: "黑马季hdsajkdhkashjd", postid: 3 ,hot:20 }],
-        familystories: [
-          { postid: 11, username: '查理一世', content: '我的父母来自于印度，后面通过自己的打拼，他们在异国他乡开创了属于自己的事业，凭借着坚韧不拔的努力和对未来的坚定信念，逐渐改善了我们的生活条件。他们不仅为我们提供了更好的教育和成长环境，还教会了我如何面对挑战、如何珍惜每一个机会。正是他们的奋斗精神和不懈努力，让我明白了无论身处何地，只有不断追求卓越、脚踏实地，才能创造属于自己的未来。' },
-          { postid: 12, username: '亨利二世', content: '我的祖父曾经参加过二战，有一次在诺曼底登陆作战时，他和战友们一同经历了生死考验。那时，战火硝烟弥漫，炮声震天，敌人猛烈的抵抗让每一个前进的步伐都充满了危险。祖父总是告诉我，虽然那是一个充满恐惧与混乱的时刻，但也让他深刻体会到生命的脆弱与坚韧。有一天，他和一队士兵被派遣执行侦察任务，结果遭遇了敌军的伏击。在激烈的交火中，祖父不幸受伤，幸好有战友将他背离险境。在几个月的疗养期里，他经历了痛苦和孤独，但也在那段时间里，祖父重新审视了自己的人生。他常说，那次经历改变了他的一生，让他学会了珍惜每一天，也更懂得什么是真正的勇气与坚守。尽管战争带来了无尽的创伤与损失，但也让他意识到，战争后的重建和和平更加宝贵。回到家乡后，祖父再也没有谈过战争的痛苦，而是投入到了对家庭和社会的贡献中，用余生去弥补那些无法言喻的伤痕。他曾说，虽然战争让人失去了太多，但它也教会了他如何去爱，如何去珍惜每一段相伴的时光。' },
-          { username: '查理九世', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
-          { username: '伊丽莎白', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
-          { username: '莎士比亚', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
-        ],
-        myfollows: [{ name: '乔一鱼', userid: 1, weidu: 1 }, { name: '邓紫棋', userid: 2, weidu: 2 }, { name: '马思唯', userid: 3, weidu: 0 }, { name: '陶喆', userid: 5, weidu: 0 }],
+        HotsearchList: [],
+        familystories: [],
+        myfollows: [],
+        userlikelist: [],
         hoverIndex: -1,
         selectedIndex: -1,
-        selecteduserid: 0,
-        selectedpostid: 0,
-        selectedbyuserid: false,
-        selectedbypostid: false,
-        checkPostsindex:0,
-        checkPosts:[ ],
+        isloading: false,
+        loaddone: 0,
+        checkPostsindex: 0,
+        checkPosts: [],
+        page: 1,
+        userid: 1,
+        totalPages: 1,
         posts: [
           {
-            userid: 11,
-            postid: 11,
-            avatarUrl: 'https://via.placeholder.com/40',
-            username: '查理一世',
-            timestamp: '1小时前',
-            isfamilystory: true,
-            content: '我的父母来自于印度，后面通过自己的打拼，他们在异国他乡开创了属于自己的事业，凭借着坚韧不拔的努力和对未来的坚定信念，逐渐改善了我们的生活条件。他们不仅为我们提供了更好的教育和成长环境，还教会了我如何面对挑战、如何珍惜每一个机会。正是他们的奋斗精神和不懈努力，让我明白了无论身处何地，只有不断追求卓越、脚踏实地，才能创造属于自己的未来。',
-            imageUrl: 'https://via.placeholder.com/400x200',
-            likeCount: 24,
-            commentCount: 6,
-            isCommentsVisible: false,
-            comments: []  // 存储评论
-          },
-          {
-            userid: 12,
-            postid: 12,
-            avatarUrl: 'https://via.placeholder.com/40',
-            username: '亨利二世',
-            isfamilystory: true,
-            timestamp: '1小时前',
-            content: '我的祖父曾经参加过二战，有一次在诺曼底登陆作战时，他和战友们一同经历了生死考验。那时，战火硝烟弥漫，炮声震天，敌人猛烈的抵抗让每一个前进的步伐都充满了危险。祖父总是告诉我，虽然那是一个充满恐惧与混乱的时刻，但也让他深刻体会到生命的脆弱与坚韧。有一天，他和一队士兵被派遣执行侦察任务，结果遭遇了敌军的伏击。在激烈的交火中，祖父不幸受伤，幸好有战友将他背离险境。在几个月的疗养期里，他经历了痛苦和孤独，但也在那段时间里，祖父重新审视了自己的人生。他常说，那次经历改变了他的一生，让他学会了珍惜每一天，也更懂得什么是真正的勇气与坚守。尽管战争带来了无尽的创伤与损失，但也让他意识到，战争后的重建和和平更加宝贵。回到家乡后，祖父再也没有谈过战争的痛苦，而是投入到了对家庭和社会的贡献中，用余生去弥补那些无法言喻的伤痕。他曾说，虽然战争让人失去了太多，但它也教会了他如何去爱，如何去珍惜每一段相伴的时光。',
-            imageUrl: 'https://via.placeholder.com/400x200',
-            likeCount: 24,
-            commentCount: 6,
-            isCommentsVisible: false,
-            comments: []  // 存储评论
-          },
-          {
-            userid: 1,
-            postid: 1,
-            avatarUrl: 'https://via.placeholder.com/40',
-            username: '乔一鱼',
-            timestamp: '1小时前',
-            content: '今天的天气真好，适合出去玩！',
-            imageUrl: 'https://via.placeholder.com/400x200',
-            likeCount: 24,
-            commentCount: 6,
-            isCommentsVisible: false,
-            isfamilystory: false,
-            comments: []  // 存储评论
-          },
-          {
-            userid: 2,
-            postid: 2,
-            avatarUrl: 'https://via.placeholder.com/40',
-            username: '小红',
-            timestamp: '2小时前',
-            content: '刚看完一场电影，真是太感人了！',
-            imageUrl: '',
-            likeCount: 36,
-            commentCount: 12,
-            isCommentsVisible: false,
-            isfamilystory: false,
-            comments: []  // 存储评论
-          },
 
-          {
-            userid: 3,
-            postid: 3,
-            avatarUrl: 'https://via.placeholder.com/40',
-            username: '马思唯',
-            timestamp: '1小时前',
-            content: '敬请期待我的新专辑《乐透人生》',
-            imageUrl: 'https://via.placeholder.com/400x200',
-            likeCount: 24,
-            commentCount: 6,
-            isCommentsVisible: false,
-            isfamilystory: false,
-            comments: []  // 存储评论
-          },
-          {
-            userid: 3,
-            postid: 4,
-            avatarUrl: 'https://via.placeholder.com/40',
-            username: '马思唯',
-            timestamp: '1小时前',
-            content: '我在阿姆斯特丹当个画家虽然口袋里钱不多，就在梵高博物馆外等她从我身边路过',
-            imageUrl: 'https://via.placeholder.com/400x200',
-            likeCount: 24,
-            commentCount: 6,
-            isCommentsVisible: false,
-            isfamilystory: false,
-            comments: []  // 存储评论
-          },
-          {
-            userid: 4,
-            postid: 5,
-            avatarUrl: 'https://via.placeholder.com/40',
-            username: '邓紫棋',
-            timestamp: '1小时前',
-            content: '诶呀！！！！！！！！',
-            imageUrl: 'https://via.placeholder.com/400x200',
-            likeCount: 24,
-            commentCount: 6,
-            isCommentsVisible: false,
-            isfamilystory: false,
-            comments: []  // 存储评论
-          },
-          {
-            userid: 5,
-            postid: 6,
-            avatarUrl: 'https://via.placeholder.com/40',
-            username: '陶喆',
-            timestamp: '1小时前',
-            content: '啊啊哦哦诶诶啊啊',
-            imageUrl: 'https://via.placeholder.com/400x200',
-            likeCount: 24,
-            commentCount: 6,
-            isCommentsVisible: false,
-            isfamilystory: false,
-            comments: []  // 存储评论
-          },
-
-          {
-            userid: 3,
-            postid: 7,
-            avatarUrl: 'https://via.placeholder.com/40',
-            username: '马思唯',
-            timestamp: '1小时前',
-            content: '黑马季节收官战无敌',
-            imageUrl: 'https://via.placeholder.com/400x200',
-            likeCount: 24,
-            commentCount: 6,
-            isCommentsVisible: false,
-            isfamilystory: false,
-            comments: []  // 存储评论
           },
         ]
       };
     },
     computed: {
       totalWeidu() {
-      // 使用reduce方法来遍历数组并计算总和
-      return this.myfollows.reduce((sum, item) => sum + item.weidu, 0);
+        // 使用reduce方法来遍历数组并计算总和
+        return this.myfollows.reduce((sum, item) => sum + item.newpostnum, 0);
+      }
+
     },
-      // 计算属性：过滤帖子数据，依据 showUser3Posts 的值
-      filteredPosts() {
 
-        if (this.selectedbyuserid) {
+    created() {
+      // 在组件实例创建时调用
+
+      this.loadData();
+    },
 
-          return this.posts.filter(post => post.userid === this.selecteduserid);
-        }
-        if (this.selectedbypostid) {
 
-          return this.posts.filter(post => post.postid === this.selectedpostid);
 
-        }
-        else {
 
-          return this.posts;
-        }
-      }
-    },
     methods: {
-      submitPost(newpost){
+
+
+      async loadData() {
+        try {
+          // 确保异步操作按顺序执行
+          await this.fllowlist();
+          await this.loadhotpost();
+          await this.loadhotfamilystory();
+          await this.loaduserlikes();
+        } catch (error) {
+          console.error("加载数据时发生错误:", error);
+        } finally {
+          // 所有操作完成后再设置 isloading 为 true
+          this.isloading = true;
+          this.load();//等待这四个信息加载完再加载帖子 不然有BUG 会重复加载一页帖子
+        }
+      },
+      async fllowlist() {
+
+        const userid = this.userid;//获取用户id
+        axios.get(`http://localhost:8082/loveforest/Myfollows/userid=${userid}`)
+          .then(response => {
+
+
+            this.myfollows.splice(0, this.myfollows.length);
+            this.myfollows.push(...response.data);
+
+            return response.data;
+          })
+          .catch(error => {
+            console.error('Error:', error);
+          });
+
+      },
+
+      submitPost(newpost) {//发布帖子后，本地显示帖子
         this.checkPosts = [newpost, ...this.checkPosts];
 
       },
-      load(){
+      async load() {//加载帖子函数
+        if (this.isloading) {
+          try {
+            const response = await axios.get(`http://localhost:8082/loveforest/posts`, {
+              params: {
+                page: this.page,
+                size: 5,
+              },
+            });
+
+            const filteredPostsList = response.data.records;
+
+
+            this.$message("动态加载中page" + this.page);
+
+            this.checkPosts.push(...filteredPostsList);
+            this.page = this.page + 1;
+          } catch (error) {
+            console.error("动态加载失败", error);
+          }
+        }
+
+      },
+      async checkbypostid(postid) {//根据postid显示单个帖子 用于热门动态以及热门家族故事
 
-        const filteredPostsList = this.posts;
 
-        this.$message("帖子加载");
-        const postsToAdd = filteredPostsList.slice(this.checkPostsindex, this.checkPostsindex + 1);
-        this.checkPostsindex+=1;
-        // 将这 2 个帖子加入到 checkPosts 数组的末尾
-       this.checkPosts.push(...postsToAdd);
+        try {
+          const response = await axios.get(`http://localhost:8082/loveforest/posts/postid=${postid}`);
+          this.isloading = false;
+          this.checkPosts.splice(0, this.checkPosts.length);
+          this.checkPosts.push(response.data);
+
+
+        } catch (error) {
+          console.error('动态获取失败', error);
+        }
+
 
       },
-      checkbypostid(postid) {
 
-        this.selectedbyuserid = false;
-        this.selectedbypostid = true;
-        this.selectedpostid = postid;
+      async loaduserlikes() {//加载user点赞列表 并会传入每个帖子做是否已经点赞的判断
+        const userid = this.userid;//获取用户id
+        axios.get(`http://localhost:8082/loveforest/likes/userid=${userid}`)
+          .then(response => {
+
+            this.userlikelist.splice(0, this.myfollows.length);
+            this.userlikelist.push(...response.data);
+
+            return response.data;
+          })
+          .catch(error => {
+            console.error('Error:', error);
+          });
+
 
       },
-      alldongtai() {
-        this.selectedbyuserid = false;
-        this.selectedbypostid = false;
+
+      alldongtai() {//显示所有动态
+        this.isloading = true;
+        this.checkPosts.splice(0, this.checkPosts.length);
+        this.page = 1;
+        this.load();
         this.selectedIndex = -1;
 
+      },
+      async loadhotpost() {//加载热门动态
+        try {
+          const response = await axios.get(`http://localhost:8082/loveforest/posts/topposts`);
+          this.HotsearchList.push(...response.data);
+          console.log(response.data);
+
+        } catch (error) {
+          this.$message.error("热门动态获取失败");
+          console.error('热门动态获取失败', error);
+        }
+
       },
 
-      fllowsClick(userid, index) {
-        this.myfollows[index].weidu = 0;
-        this.selectedbyuserid = true;
-        this.selectedbypostid = false;
+      async loadhotfamilystory() {//加载热门家族故事
+        try {
+          const response = await axios.get(`http://localhost:8082/loveforest/posts/topfamilystory`);
+          this.familystories.push(...response.data);
+
+
+        } catch (error) {
+          this.$message.error("热门家族故事获取失败");
+          console.error('热门家族故事获取失败', error);
+        }
+
+      },
+
+      async fllowsClick(userid, index) {//左侧关注列表点击后单独显示关注用户的动态
+
+        this.myfollows[index].newpostnum = 0;
         this.selectedIndex = index;  // 点击后设置选中的项
-        this.selecteduserid = userid;
+
+        try {
+          const response = await axios.get(`http://localhost:8082/loveforest/posts/userid=${userid}`);
+          this.isloading = false;
+          this.checkPosts.splice(0, this.checkPosts.length);
+
+          this.checkPosts.push(...response.data);
+          if (response.data.length === 0) {
+            this.$message("对方还没有发过动态哦");
+          }
+
+
+        } catch (error) {
+          console.error('动态获取失败', error);
+          this.$message.error("动态获取失败");
+        }
 
       },
-      updateLikeCount(index, newLikeCount) {
-        this.checkPosts[index].likeCount = newLikeCount;
+
+
+      updateLikeCount(index, newLikeCount) {//用于本地显示的点赞数量变化
+        this.checkPosts[index].likecount = newLikeCount;
       },
-      updateCommentCount(index, newCommentCount) {
-        this.checkPosts[index].commentCount = newCommentCount;
+      updateCommentCount(index, newCommentCount) {//用于本地显示的点赞数量变化
+        this.checkPosts[index].commentcount = newCommentCount;
       },
-      toggleCommentsVisibility(index) {
+      async toggleCommentsVisibility(index, postid) {//展开评论以及获取评论列表
         this.$message("评论区展开" + index);
-        this.checkPosts[index].isCommentsVisible = !this.checkPosts[index].isCommentsVisible;
+        try {
+          const response = await axios.get(`http://localhost:8082/loveforest/comments/postid=${postid}`);
+          this.checkPosts[index].comments = response.data;
+          //等待获取user名字接口
+          this.checkPosts[index].isCommentsVisible = !this.checkPosts[index].isCommentsVisible;
+
+        } catch (error) {
+          console.error('评论获取失败', error);
+          this.$message.error("评论获取失败");
+        }
+
+
+      },
+      async addComment(index, commentText, postid) {//发送评论
+
+        try {
+          const response = await axios.post('http://localhost:8082/loveforest/comments/addcomments', {
+            userid: this.userid,
+            postid: postid,
+            content: commentText
+          }, {
+            headers: {
+              'Content-Type': 'application/json',
+              'Accept': 'application/json'
+            }
+          });
+          if (response.data === "评论成功！") {
+            this.$message.success("评论成功！");
+            this.checkPosts[index].comments.push({
+              username: '用户名',//等待user接口
+              postid: postid,
+              content: commentText
+
+            });
+            this.checkPosts[index].commentCount += 1;
+          }
+          else {
+            this.$message.error(response.data);
+          }
+
+        } catch (error) {
+          console.error('评论失败:', error);
+          this.$message.error('评论失败');
+        }
+
+
+
+      },
+      refresh() {//热门家族故事刷新换一批按钮
+        // 点击后触发的刷新动作
+        console.log('Refreshing...');
+        this.triggerAnimation();
+      },
+
+
+
+      triggerAnimation() {
+        const button = document.querySelector('.refresh-btn');
+        button.classList.add('clicked');
+
+        // 动画结束后移除动画类
+        setTimeout(() => {
+          button.classList.remove('clicked');
+        }, 600); // 动画持续时间，确保动画完成后移除类
       },
-      addComment(index, commentText) {
-        this.checkPosts[index].comments.push({
-          username: '匿名用户',
-          text: commentText
-        });
-        this.checkPosts[index].commentCount += 1;
-      }
     }
   }
 </script>