社区完善帖子以及评论删除功能

src/assets/css/community/community.css

@@ -1,35 +1,17 @@
 
-/* 设置进入和离开的过渡效果 */
 
+/* 离开动画 */
 .post-list .fade-leave-active {
   transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
 }
 
-.post-list .fade-enter-active {
-  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
-}
-
-/* 元素进入时，缩放并渐变 */
-.post-list .fade-leave-to /* .fade-leave-active in Vue 2.x */ {
-  opacity: 0;
-  transform: scale(0.5); /* 初始状态为缩小 */
-}
-.post-list .fade-enter{
+.post-list .fade-leave-to /* 离开完成后状态 */
+{
   opacity: 0;
-  transform: scale(0.5); /* 初始状态为缩小 */
+  transform: translateX(100%) scale(0.5); /* 离开时从右边滑出并缩小 */
 }
 
-/* 元素进入时恢复到原尺寸 */
-.post-list .fade-enter-to {
-  opacity: 1;
-  transform: scale(1); /* 变大恢复正常尺寸 */
-}
 
-/* 元素离开时，继续保持缩小状态 */
-.post-list .fade-leave-to {
-  opacity: 0;
-  transform: scale(0.5); /* 离开时缩小 */
-}
 
 
 

src/utils/axiosConfig.js

@@ -6,6 +6,7 @@ import {getToken} from '@/token/auth' // 注意这里使用了解构赋值来导
 const service = axios.create({
   // baseURL: 'http://47.122.59.26:8080/api', // 配置基础URL   如果服务器域名发生变化统一可以去.env文件修改
   // baseURL: 'http://10.205.10.22:8081/loveforest/api/',
+  // baseURL: 'http://10.133.13.52:8082/loveforest',
   timeout: 5000, // 请求超时时间
 });
 

src/views/community/PostCard.vue

@@ -1,4 +1,5 @@
 <template>
+
   <div class="post-card">
     <div class="post-header">
       <img :src="avatarUrl" alt="avatar" class="avatar" />
@@ -15,11 +16,31 @@
           </div>
         </button>
 
+
+
+
         <span>{{ timestamp }}</span>
 
 
 
       </div>
+      <div style="right: -50%;position: relative;">
+        <button class="deletebutto" @click="openModal" v-if="this.userid===this.postuserid&&!showModal">
+          ×
+          删除
+
+        </button>
+        <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
+          <div v-if="showModal">
+            <button @click="deletebutton" class="deletebutto">确定</button>
+            <button @click="cancelDelete" class="deletebutto">取消</button>
+          </div>
+        </transition>
+      </div>
+
+
+
+
       <div v-if="isfamilystory" class="ribbon-8">
         <span>
           家族故事
@@ -51,7 +72,8 @@
     <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.userid}}:</strong> {{ comment.content }}</p>
+          <p><strong>{{ comment.userid}}:</strong> {{ comment.content }} <button v-if="comment.userid==this.userid" style="color:#FE4E96;"
+              @click="deletecomment(comment.commentid)">删除</button> </p>
         </div>
 
         <!-- 发布评论 -->
@@ -63,7 +85,7 @@
 
 <script>
   import CommentInput from './CommentInput.vue';
-  import axios from 'axios';
+  import axios from '@/utils/axiosConfig';
 
   export default {
 
@@ -94,11 +116,11 @@
     },
     created() {
 
-      if (this.userlikelist.some(follow => follow.postid === this.postid)) {
+      if (this.userlikelist.some(follow => follow.postid === this.postid)) {//是否已经点赞判断 查找列表中是否有当前postid
 
         this.isLiked = true;
       }
-      if (this.myfollows.some(follow => follow.myfollowid === this.postuserid)) {
+      if (this.myfollows.some(follow => follow.myfollowid === this.postuserid)) {//是否已经关注判断 查找列表中是否有当前postuserid
         this.followsbuttonActive = true;
       }
 
@@ -112,6 +134,7 @@
     },
     data() {
       return {
+        showModal: false,
         isActive: false,
         isLiked: false,
         isClicked: false,
@@ -120,7 +143,56 @@
       };
     },
     methods: {
+      async deletecomment(commentid) {
+        try {
+
+          const response = await axios.delete(`/comments/commentid=${commentid}`);
+          if (response === "删除评论成功!!") {
+
+            this.$message.success("删除评论成功!!可刷新后查看");
+
+
+          }
+          else {
+            this.$message.error(response);
+          }
+
+        } catch (error) {
+
+          this.$message.error("删除评论失败");
+          console.log(error);
+        }
+      },
 
+      cancelDelete() {
+        // 取消删除，隐藏弹窗
+        this.showModal = false;
+      },
+      openModal() {
+        this.showModal = true;
+      },
+      async deletebutton() {
+        try {
+
+          const response = await axios.delete(`/posts/postid=${this.postid}`);
+          if (response === "删除动态成功 ！！") {
+
+            this.$message.success("删除动态成功 ！！可刷新后查看");
+
+
+          }
+          else {
+            this.$message.error(response);
+          }
+
+        } catch (error) {
+
+          this.$message.error("删除动态失败");
+          console.log(error);
+        }
+        this.showModal = false;
+
+      },
       async followsbutton() {//关注按钮
         // 设置为 active，触发动画
         const useride = this.userid;
@@ -128,14 +200,14 @@
         if (this.followsbuttonActive == false) {
           try {
 
-            const response = await axios.post(`http://localhost:8082/loveforest/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
-            if (response.data === "关注成功！") {
+            const response = await axios.post(`/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
+            if (response === "关注成功！") {
 
-              this.$message.success(response.data);
+              this.$message.success(response);
               this.followsbuttonActive = true;
             }
             else {
-              this.$message.error(response.data);
+              this.$message.error(response);
             }
 
           } catch (error) {
@@ -149,14 +221,14 @@
         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);
+            const response = await axios.delete(`/Myfollows/userid=${useride}/myfollowid=${this.postuserid}`);
+            if (response === "取消关注成功！") {
+              this.$message.success(response);
               this.followsbuttonActive = false;
 
             }
             else {
-              this.$message.error(response.data);
+              this.$message.error(response);
             }
 
           } catch (error) {
@@ -180,15 +252,15 @@
       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);
+            const response = await axios.post(`/likes/userid=${this.userid}/postid=${this.postid}`);
+            if (response === "点赞成功！") {
+              this.$message.success(response);
               this.$emit('updateLikeCount', this.likeCount + 1);
               this.isLiked = !this.isLiked;
 
             }
             else {
-              this.$message.error(response.data);
+              this.$message.error(response);
             }
           } catch (error) {
 
@@ -198,16 +270,16 @@
         }
         else {//假如已经点赞
           try {
-            const response = await axios.delete(`http://localhost:8082/loveforest/likes/userid=${this.userid}/postid=${this.postid}`);
-            if (response.data === "取消点赞成功！") {
+            const response = await axios.delete(`/likes/userid=${this.userid}/postid=${this.postid}`);
+            if (response === "取消点赞成功！") {
 
-              this.$message.error("取消点赞成功");
+              this.$message.success("取消点赞成功");
               this.$emit('updateLikeCount', this.likeCount - 1);
               this.isLiked = !this.isLiked;
 
             }
             else {
-              this.$message.error(response.data);
+              this.$message.error(response);
             }
           } catch (error) {
 
@@ -245,6 +317,80 @@
 </script>
 
 <style scoped>
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.5s ease-in-out;
+    /* 渐变动画 */
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+    /* 初始透明度 */
+  }
+
+  /* 可选：按钮在进入时的缩放效果 */
+  .fade-enter {
+    transform: scale(0.8);
+  }
+
+  .fade-enter-active {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+
+  .fade-leave-active {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+
+  .fade-leave-to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  /* 控制显示时的定位变化 */
+  .fade-enter-to {
+    transform: translateY(0);
+  }
+
+  .fade-leave-to {
+    transform: translateY(-10px);
+  }
+
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+  }
+
+
+
+
+  .deletebutto {
+    margin-left: 10px;
+    margin-right: 10px;
+    position: relative;
+    width: 70px;
+    height: 30px;
+    line-height: 30px;
+    /* 修改 line-height 为与高度一致 */
+    border: none;
+    border-radius: 30px;
+    background: #FE4E96;
+    color: #fff;
+    text-align: center;
+    cursor: pointer;
+    font-size: 14px;
+
+
+  }
+
   .postimage {
     max-width: 600px;
     max-height: 600px;
@@ -348,12 +494,12 @@
   }
 
   .post-card {
-    opacity: 0.95;
+    opacity: 0.9;
     margin: 20px;
     border: 1px solid #ddd;
     padding: 15px;
-    border-radius: 8px;
-    background-color: #fff;
+    border-radius: 15px;
+    background-color: #FFFBFB;
   }
 
   .post-header {

src/views/community/Postform.vue

@@ -126,7 +126,6 @@
           return;
         }
         const newPost = {
-          
           userid:1,
           username: '用户',
           avatarurl: 'https://via.placeholder.com/50',
@@ -234,8 +233,9 @@
   }
 
   .animate-card__layer {
-    height: 5%;
-    width: 5%;
+    height: 16px;
+    width: 7%;
+    font-size: 14px;
     background-color: #FE4E96;
     border: none;
   }

src/views/community/trends.vue

@@ -76,7 +76,7 @@
       </div>
       <div class=heatlist style="margin-top:20px;display: flex;flex-direction:row;">
         <div
-          style="position:relative; display: flex;flex-direction:column;  color: white; font-weight: bold;margin-left: 20px ;gap:51px">
+          style="position:relative; display: flex;flex-direction:column;  color: white; font-weight: bold;margin-left: 20px ;gap:51px;margin-top:10px">
           <div class=Hotsearchnum style="background-color:red;">1</div>
           <div class=Hotsearchnum style="background-color:#ff8e51;">2</div>
           <div class=Hotsearchnum style="background-color:#ffc74fd2;">3</div>
@@ -85,16 +85,16 @@
 
         </div>
         <div
-          style="font-size: 14px; font-weight: 500; margin-left: 30px; display: flex; flex-direction: column; gap: 17px;width: 100%;">
+          style="font-size: 14px; font-weight: 500; margin-left: 20px; display: flex; flex-direction: column; gap: 17px;width: 100%; ">
           <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;"
+            style="overflow: hidden; list-style-type: none; width: 90%; height: 20%;max-height: 60px; 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 ">
+              style="position: absolute;right:5.8% ;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>
@@ -123,8 +123,8 @@
 
       </div>
       <div class="familystorelist"
-        style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
-        <div v-for="(story, index) in familystories" :key="index" class="familystore"
+        style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;margin-left: 20px;">
+        <div v-for="(story, index) in checkfamilystories" :key="index" class="familystore"
           style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;cursor: pointer;"
           @click="checkbypostid(story.postid)">
           <img class="touxiang" src="../../assets/pictures/touxiang.png" />
@@ -142,7 +142,8 @@
 <script>
   import PostCard from './PostCard.vue';
   import PostForm from './Postform.vue';
-  import axios from 'axios';
+  import axios from '@/utils/axiosConfig';
+  // import {getToken} from '@/token/auth'
   export default {
     name: 'CommunityIndex', // 添加组件名称
     components: { PostCard, PostForm },
@@ -156,12 +157,13 @@
         hoverIndex: -1,
         selectedIndex: -1,
         isloading: false,
-        loaddone: 0,
         checkPostsindex: 0,
         checkPosts: [],
         page: 1,
         userid: 1,
         totalPages: 1,
+        familystoriespage:0,
+        checkfamilystories:[],
         posts: [
           {
 
@@ -207,14 +209,14 @@
       async fllowlist() {
 
         const userid = this.userid;//获取用户id
-        axios.get(`http://localhost:8082/loveforest/Myfollows/userid=${userid}`)
+        axios.get(`/Myfollows/userid=${userid}`)
           .then(response => {
 
 
             this.myfollows.splice(0, this.myfollows.length);
-            this.myfollows.push(...response.data);
+            this.myfollows.push(...response);
 
-            return response.data;
+            return response;
           })
           .catch(error => {
             console.error('Error:', error);
@@ -223,20 +225,20 @@
       },
 
       submitPost(newpost) {//发布帖子后，本地显示帖子
-        this.checkPosts = [newpost, ...this.checkPosts];
+        this.checkPosts.unshift(newpost); 
 
       },
       async load() {//加载帖子函数
         if (this.isloading) {
           try {
-            const response = await axios.get(`http://localhost:8082/loveforest/posts`, {
+            const response = await axios.get(`/posts`, {
               params: {
                 page: this.page,
                 size: 5,
               },
             });
 
-            const filteredPostsList = response.data.records;
+            const filteredPostsList = response.records;
 
 
             this.$message("动态加载中page" + this.page);
@@ -253,14 +255,16 @@
 
 
         try {
-          const response = await axios.get(`http://localhost:8082/loveforest/posts/postid=${postid}`);
+          const response = await axios.get(`/posts/postid=${postid}`);
           this.isloading = false;
+          console.error('动态动态！！！！：',response);
           this.checkPosts.splice(0, this.checkPosts.length);
-          this.checkPosts.push(response.data);
+          this.checkPosts.push(response);
 
 
         } catch (error) {
           console.error('动态获取失败', error);
+          
         }
 
 
@@ -268,13 +272,13 @@
 
       async loaduserlikes() {//加载user点赞列表 并会传入每个帖子做是否已经点赞的判断
         const userid = this.userid;//获取用户id
-        axios.get(`http://localhost:8082/loveforest/likes/userid=${userid}`)
+        axios.get(`/likes/userid=${userid}`)
           .then(response => {
 
-            this.userlikelist.splice(0, this.myfollows.length);
-            this.userlikelist.push(...response.data);
+            this.userlikelist.splice(0, this.userlikelist.length);
+            this.userlikelist.push(...response);
 
-            return response.data;
+            return response;
           })
           .catch(error => {
             console.error('Error:', error);
@@ -293,9 +297,9 @@
       },
       async loadhotpost() {//加载热门动态
         try {
-          const response = await axios.get(`http://localhost:8082/loveforest/posts/topposts`);
-          this.HotsearchList.push(...response.data);
-          console.log(response.data);
+          const response = await axios.get(`/posts/topposts`);
+          this.HotsearchList.push(...response);
+          
 
         } catch (error) {
           this.$message.error("热门动态获取失败");
@@ -306,8 +310,9 @@
 
       async loadhotfamilystory() {//加载热门家族故事
         try {
-          const response = await axios.get(`http://localhost:8082/loveforest/posts/topfamilystory`);
-          this.familystories.push(...response.data);
+          const response = await axios.get(`/posts/topfamilystory`);
+          this.familystories.push(...response);
+          this.checkfamilystories.push(...response.slice(0, 4));
 
 
         } catch (error) {
@@ -323,12 +328,12 @@
         this.selectedIndex = index;  // 点击后设置选中的项
 
         try {
-          const response = await axios.get(`http://localhost:8082/loveforest/posts/userid=${userid}`);
+          const response = await axios.get(`/posts/userid=${userid}`);
           this.isloading = false;
           this.checkPosts.splice(0, this.checkPosts.length);
 
-          this.checkPosts.push(...response.data);
-          if (response.data.length === 0) {
+          this.checkPosts.push(...response);
+          if (response.length === 0) {
             this.$message("对方还没有发过动态哦");
           }
 
@@ -350,8 +355,8 @@
       async toggleCommentsVisibility(index, postid) {//展开评论以及获取评论列表
         this.$message("评论区展开" + index);
         try {
-          const response = await axios.get(`http://localhost:8082/loveforest/comments/postid=${postid}`);
-          this.checkPosts[index].comments = response.data;
+          const response = await axios.get(`/comments/postid=${postid}`);
+          this.checkPosts[index].comments = response;
           //等待获取user名字接口
           this.checkPosts[index].isCommentsVisible = !this.checkPosts[index].isCommentsVisible;
 
@@ -365,7 +370,7 @@
       async addComment(index, commentText, postid) {//发送评论
 
         try {
-          const response = await axios.post('http://localhost:8082/loveforest/comments/addcomments', {
+          const response = await axios.post('/comments/addcomments', {
             userid: this.userid,
             postid: postid,
             content: commentText
@@ -375,7 +380,7 @@
               'Accept': 'application/json'
             }
           });
-          if (response.data === "评论成功！") {
+          if (response=== "评论成功！") {
             this.$message.success("评论成功！");
             this.checkPosts[index].comments.push({
               username: '用户名',//等待user接口
@@ -386,7 +391,7 @@
             this.checkPosts[index].commentCount += 1;
           }
           else {
-            this.$message.error(response.data);
+            this.$message.error(response);
           }
 
         } catch (error) {
@@ -400,6 +405,14 @@
       refresh() {//热门家族故事刷新换一批按钮
         // 点击后触发的刷新动作
         console.log('Refreshing...');
+
+        this.familystoriespage+=4;
+        if(this.familystoriespage>12){
+          this.familystoriespage=0;
+        }
+        this.checkfamilystories.splice(0, this.checkfamilystories.length);
+        this.checkfamilystories.push(...this.familystories.slice(this.familystoriespage, this.familystoriespage+4));
+
         this.triggerAnimation();
       },