From 4a40e955677cf3dbdb301b9556af06af8a13ceb9 Mon Sep 17 00:00:00 2001 From: helloworld180 <1678854362@qq.com> Date: Mon, 16 Dec 2024 20:00:56 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=AA=E4=BA=BA=E7=A9=BA?= =?UTF-8?q?=E9=97=B4=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/axiosConfig.js | 2 +- src/views/space/space.vue | 171 +++++++++++++++++++++++++++----------- 2 files changed, 124 insertions(+), 49 deletions(-) diff --git a/src/utils/axiosConfig.js b/src/utils/axiosConfig.js index c0dfc6da..914655c3 100644 --- a/src/utils/axiosConfig.js +++ b/src/utils/axiosConfig.js @@ -5,7 +5,7 @@ import {getToken} from '@/token/auth' // 注意这里使用了解构赋值来导 // 创建axios实例 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.6.46:8082/loveforest', timeout: 5000, // 请求超时时间 }); diff --git a/src/views/space/space.vue b/src/views/space/space.vue index 8cde03bc..d5c53b31 100644 --- a/src/views/space/space.vue +++ b/src/views/space/space.vue @@ -69,34 +69,35 @@
-

{{ post.name || "哈哈哈"}}

-

{{ post.date || "2024-01-01" }}

-

{{ post.text || "测试测试"}}

+

{{ post.name }}

+

{{ post.date }}

+

{{ post.text }}

-
- + +
+
+
- - 💬 - - {{ commentCount }} + 💬 + {{ post.commentCount }}
+
@@ -109,10 +110,7 @@ name:'spaceIndex', data() { return { - likeCount: 0, - isLiked:false, - commentCount:0, - defaultImage:require("../../assets/pictures/space/post2.png"), + userId: 0, userInfo: { name: "", // 用户姓名 avatar:"", @@ -122,34 +120,98 @@ expectation: "", // 择偶期望 career: "", // 职业 }, - posts:{ - name:"掌声", - date:"2024-01-01", - text:"测试文本", - postImageUrl:"", - }, + posts:[ + { + id: 0, + name:"掌声", + date:"2024-01-01", + text:"测试文本", + postImageUrl:"../../assets/pictures/space/post1.png", + likeCount: 0, + commentCount: 0, + isLiked:false, + }, + { + id: 1, + name:"掌声", + date:"2024-12-01", + text:"我好开心", + postImageUrl:"", + likeCount: 0, + commentCount: 5, + isLiked:false, + }, + { + id: 2, + name:"掌声", + date:"2024-01-01", + text:"测试文本", + postImageUrl:"../../assets/pictures/space/post1.png", + likeCount: 8, + commentCount: 0, + isLiked:false, + }, + ], defaultAvatar: "https://via.placeholder.com/150", // 默认头像占位符 }; }, methods: { - increaseCount(type){ - if(type === 'like'){ - if(this.isLiked){ - this.likeCount--; - }else{ - this.likeCount++; + async loaduserlikes() {//加载user点赞列表 并会传入每个帖子做是否已经点赞的判断 + const userid = this.userId;//获取用户id + axios.get(`/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); + }); + }, + async handleLike(post) {//点赞按钮 + if (!post.isLiked) {//假如没点赞 + try { + const response = await axios.post(`/likes/userid=${this.userId}/postid=${post.id}`); + if (response.data === "点赞成功！") { + // this.$message.success(response.data); + // this.$emit('updateLikeCount', this.likeCount + 1); + post.isLiked = !post.isLiked; + post.likeCount = post.likeCount + 1 ; + } + else { + this.$message.error(response.data); + } + } catch (error) { + this.$message.error("点赞失败"); + console.log(error); + } + } + else {//假如已经点赞 + try { + const response = await axios.delete(`/likes/userid=${this.userId}/postid=${post.id}`); + if (response.data === "取消点赞成功！") { + this.$message.error("取消点赞成功"); + // this.$emit('updateLikeCount', this.likeCount - 1); + this.isLiked = !this.isLiked; + post.likeCount = post.likeCount - 1; + } + else { + this.$message.error(response.data); + } + } catch (error) { + this.$message.error("点赞失败"); + console.log(error); } - this.isLiked=!this.isLiked; - }else if(type === 'comment'){ - this.commentCount++; } }, + async fetchUserInfo() { + await this.loaduserlikes(); try { // 调用后端接口获取用户信息 const response = await axios.get("/api/getUserInfo", { params: { - userId: "12345", // 假设传递用户 ID，需根据实际情况调整 + userId: this.userId, // 假设传递用户 ID，需根据实际情况调整 }, }); @@ -178,20 +240,26 @@ } }, async fetchPostInfo() { - try { - // 调用后端接口获取帖子日期信息 - const postResponse = await axios.get("/api/getPostDate", { - params: { - postId: "POST_ID_HERE", // 传递帖子 ID - }, - }); - this.postDate = postResponse.data.date; - this.postText = postResponse.data.text; - this.postImgUrl = postResponse.data.imageUrl; - } catch (error) { - console.error("获取帖子信息失败:", error); - // 可以在这里添加一些提示用户的逻辑，比如弹出提示框告知获取信息失败等 - } + try { + const userId = this.userId; // 需要从用户状态或其他地方获取 + const postResponse = await axios.get("/posts/userid=1", { + params: { + userId: userId + } + }); + // 假设后端返回的数据中包含了用户是否对每个帖子点赞的信息 + this.posts = postResponse.data.map(post => ({ + id: post.postid, + name: post.username, + date: post.timestamp, + text: post.content, + postImageUrl: post.imageurl, + likeCount: post.likecount, + commentCount: post.commentcount, + })); + } catch (error) { + console.error("获取帖子信息失败:", error); + } }, selectTab(tab) { this.selectedTab = tab; @@ -213,6 +281,7 @@ mounted() { // 加载用户信息 this.fetchUserInfo(); + this.fetchPostInfo(); }, }; @@ -382,6 +451,8 @@ width: 680px; position: relative; /* 使得子元素可以相对移动 */ margin-bottom: 70px; + padding: 0 20px; + /* border-bottom: 2px solid #d1cccc; */ } .post-header { @@ -399,7 +470,7 @@ top: -10px; /* 调整横线的位置 */ width: calc(100% - 60px); /* 横线宽度，减去左右边距 */ height: 1px; /* 横线的高度 */ - background-color: #d1cccc; /* 横线颜色 */ + /* background-color: #d1cccc; 横线颜色 */ } .post-header img { @@ -442,6 +513,10 @@ .post-footer { padding: 10px; + left: 30px; /* 根据需要调整左侧位置 */ + top: -10px; /* 调整横线的位置 */ + width: calc(100% - 60px); /* 横线宽度，减去左右边距 */ + border-bottom: 1.5px solid #d1cccc; } /* 图标的样式 */ @@ -461,7 +536,7 @@ /* 图标悬停时的效果 */ .reactions span:hover { - transform: scale(1.1); /* 悬停时稍微放大 */ + /* transform: scale(1.1); 悬停时稍微放大 */ } /* 增加点赞和评论数值的可读性 */