pwfnlmjh2
/
frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改个人空间接口

Browse Source
main
helloworld180 4 months ago
parent 7137f882d8
commit 4a40e95567
2 changed files with 124 additions and 49 deletions
Show Stats Download Patch File Download Diff File

2
src/utils/axiosConfig.js
Unescape View File

@ -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, // 请求超时时间
});

171
src/views/space/space.vue
Unescape View File

@ -69,34 +69,35 @@
<div class="post-header">
<img src="../../assets/pictures/space/post1.png" alt="" />
<div class="post-info">
<h2>{{ post.name || "哈哈哈"}}</h2>
<h3>{{ post.date || "2024-01-01" }}</h3>
<p>{{ post.text || "测试测试"}}</p>
<h2>{{ post.name }}</h2>
<h3>{{ post.date }}</h3>
<p>{{ post.text }}</p>
</div>
</div>
<div class="post-img">
<img :src="post.postImageUrl || defaultImage " alt="" />
<div class="post-img" v-if="post.postImageUrl">
<img :src="post.postImageUrl" alt="" />
</div>
<div class="post-footer">
<div class="reactions">
<div class="Like">
<span @click="increaseCount('like')" :class="{'liked': isLiked}">
<span v-if="isLiked">❤️</span>
<span @click="handleLike(post)" :class="{'liked': post.isLiked}">
<span v-if="post.isLiked">❤️</span>
<span v-else>🤍</span>
</span>
{{ likeCount }}
{{ post.likeCount }}
</div>
<div class="comment">
<span @click="increaseCount('comment')">
💬
</span>
{{ commentCount }}
<span>💬</span>
{{ post.commentCount }}
</div>
</div>
<div class="comments">
<!-- 评论内容可以在这里渲染 -->
</div>
</div>
</div>
</div>
</div>
@ -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();
},
};
</script>
@ -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); 悬停时稍微放大 */
}
/* 增加点赞和评论数值的可读性 */

Write Preview
Loading…
Cancel
Save