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

社区基本功能接口对接完成

Browse Source
main
QMZ 2 months ago
parent c7744fddff
commit b439d7d5e1
5 changed files with 463 additions and 252 deletions
Show Stats Download Patch File Download Diff File

33
src/assets/css/community/community.css
Unescape View File

@ -113,10 +113,10 @@
overflow-y: auto; /* 允许垂直滚动 */ overflow-y: auto; /* 允许垂直滚动 */
} }
/* 隐藏滚动条 */ /* 隐藏滚动条 */
.middle::-webkit-scrollbar { /* .middle::-webkit-scrollbar {
width: 0px; /* 隐藏水平滚动条 */ width: 0px;
height: 0px; /* 隐藏垂直滚动条 */ height: 0px;
} } */
.follows { .follows {
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
@ -134,6 +134,31 @@
background-color: #d0d0d0; background-color: #d0d0d0;
cursor: pointer; 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 { .post-list {
} }

0
src/components/CommentInput.vue → src/views/community/CommentInput.vue
Unescape View File

141
src/components/PostCard.vue → src/views/community/PostCard.vue
Unescape View File

@ -51,7 +51,7 @@
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave"> <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="isCommentsVisible" class="comments-section"> <div v-if="isCommentsVisible" class="comments-section">
<div v-for="(comment, index) in comments" :key="index" class="comment"> <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> </div>
<!-- 发布评论 --> <!-- 发布评论 -->
@ -63,10 +63,16 @@
<script> <script>
import CommentInput from './CommentInput.vue'; import CommentInput from './CommentInput.vue';
import axios from 'axios';
export default { export default {
components: { CommentInput }, components: { CommentInput },
props: { props: {
postid: Number,
postuserid: Number,
userid: Number,
avatarUrl: String, avatarUrl: String,
username: String, username: String,
timestamp: String, timestamp: String,
@ -75,8 +81,34 @@
likeCount: Number, likeCount: Number,
commentCount: Number, commentCount: Number,
isCommentsVisible: Boolean, isCommentsVisible: Boolean,
isfamilystory:Boolean, isfamilystory: Boolean,
userlikelist: {
type: Array,
default: () => []
},
myfollows: {
type: Array,
default: () => [] // 如果没有传递，默认值为空数组
},
comments: Array, // 接收评论列表 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() { data() {
return { return {
@ -84,13 +116,57 @@
isLiked: false, isLiked: false,
isClicked: false, isClicked: false,
followsbuttonActive: false followsbuttonActive: false
}; };
}, },
methods: { methods: {
followsbutton() {
async followsbutton() {//关注按钮
// 设置为 active，触发动画 // 设置为 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() { triggerAnimation() {
@ -101,13 +177,45 @@
}, 300); // 300ms 后移除，确保与动画时长一致 }, 300); // 300ms 后移除，确保与动画时长一致
}, },
handleClick() { async increaseLikeCount() {//点赞按钮
this.$message("aaa"); if (!this.isLiked) {//假如没点赞
this.isClicked = true; try {
}, const response = await axios.post(`http://localhost:8082/loveforest/likes/userid=${this.userid}/postid=${this.postid}`);
increaseLikeCount() { if (response.data === "点赞成功！") {
this.$message.success(response.data);
this.$emit('updateLikeCount', this.likeCount + 1); this.$emit('updateLikeCount', this.likeCount + 1);
this.isLiked = !this.isLiked; 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() { increaseCommentCount() {
this.$emit('updateCommentCount', this.commentCount + 1); this.$emit('updateCommentCount', this.commentCount + 1);
@ -137,15 +245,18 @@
</script> </script>
<style scoped> <style scoped>
.postimage{ .postimage {
max-width: 600px; max-width: 600px;
max-height: 600px; max-height: 600px;
width: auto; /* 保持宽高比 */ width: auto;
height: auto; /* 保持宽高比 */ /* 保持宽高比 */
} height: auto;
/* 保持宽高比 */
}
.ribbon-8 { .ribbon-8 {
position:absolute; position: absolute;
right:-2%; right: -2%;
padding: 2px 10px; padding: 2px 10px;
width: 10%; width: 10%;
background-color: #FE4E96; background-color: #FE4E96;

44
src/views/community/Postform.vue
Unescape View File

@ -60,7 +60,7 @@
<script> <script>
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import axios from 'axios';
@ -119,32 +119,56 @@
this.imageUrl = ''; // 删除时清空图片预览 this.imageUrl = ''; // 删除时清空图片预览
this.fileList = fileList; this.fileList = fileList;
}, },
submitPost() { async submitPost() {
this.$refs.postimage.submit(); this.$refs.postimage.submit();
if (!this.form.content.trim()) { if (!this.form.content.trim()) {
this.$message.error('内容不能为空'); this.$message.error('内容不能为空');
return; return;
} }
const newPost = { const newPost = {
postId: Date.now(),
userid:1, userid:1,
username: '用户', username: '用户',
avatarUrl: 'https://via.placeholder.com/50', avatarurl: 'https://via.placeholder.com/50',
timestamp: new Date().toLocaleString(), timestamp: new Date().toLocaleString(),
content: this.form.content, content: this.form.content,
imageUrl: this.imageUrl, imageurl: this.imageUrl,
likeCount: 0, likecount: 0,
commentCount: 0, commentcount: 0,
comments: [],
isCommentsVisible: false,
isfamilystory: this.radio === '家族故事' ? true : false, isfamilystory: this.radio === '家族故事' ? true : false,
liked: false
}; };
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.$emit('post-submitted', newPost);
this.form.content = ''; this.form.content = '';
this.imageUrl = ''; this.imageUrl = '';
this.fileList = []; this.fileList = [];
}
else{
this.$message.error(response.data);
}
} catch (error) {
console.error('发布动态失败:', error);
this.$message.error('发布动态失败，请刷新后再试');
}
}, },
} }
}); });

453
src/views/community/trends.vue
Unescape View File

@ -26,12 +26,12 @@
<div v-for="(follow, index) in myfollows" :key="index" style="width: 100%;"> <div v-for="(follow, index) in myfollows" :key="index" style="width: 100%;">
<div class="follows" <div class="follows"
style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;height: 120%;gap:3%;width: 100%;" 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}"> :class="{'selected': selectedIndex === index}">
<img class="touxiang" src="../../assets/pictures/touxiang.png" style="left:20%;width: 15%; height: auto;" /> <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> <div style="margin-left: 40px; font-weight: bold; font-size: 16px;">{{ follow.myfollowid }}</div>
<el-tag v-if="follow.weidu" effect="plain" round style="position: absolute; right:0%"> <el-tag v-if="follow.newpostnum" effect="plain" round style="position: absolute; right:0%">
{{follow.weidu}}条新动态 {{follow.newpostnum}}条新动态
</el-tag> </el-tag>
</div> </div>
<hr style="width: 100%; height: 0.001px; background-color: #D8D8D8; margin-top: 1%;"> <hr style="width: 100%; height: 0.001px; background-color: #D8D8D8; margin-top: 1%;">
@ -45,16 +45,19 @@
<PostForm @post-submitted="submitPost" /> <PostForm @post-submitted="submitPost" />
<div class="post-list"> <div class="post-list">
<!-- 使用 transition-group 来包裹 v-for 渲染的元素 --> <!-- 使用 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"> <transition-group name="fade" tag="div">
<div v-for="(post, index) in checkPosts" :key="post.id" class="post-card"> <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" <PostCard :avatarUrl="post.avatarurl" :username="post.username" :timestamp="post.timestamp"
:commentCount="post.commentCount" :isCommentsVisible="post.isCommentsVisible" :comments="post.comments" :content="post.content" :imageUrl="post.imageurl" :likeCount="post.likecount" :postid="post.postid"
:isfamilystory="post.isfamilystory" @updateLikeCount="updateLikeCount(index, $event)" :commentCount="post.commentcount" :isCommentsVisible="post.isCommentsVisible" :comments="post.comments"
@updateCommentCount="updateCommentCount(index, $event)" :postuserid="post.userid" :userid="userid" :isfamilystory="post.isfamilystory"
@toggleCommentsVisibility="toggleCommentsVisibility(index)" @addComment="addComment(index, $event)" /> :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> </div>
</transition-group> </transition-group>
@ -90,10 +93,13 @@
<div style=" font-weight: bold; margin-left: 10%; margin-top: 1%; ">{{ Hotsearch.username }}:</div> <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> <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 "> <svg width="20" height="20" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" id="fire-station"
<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"/> 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> </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>
</div> </div>
@ -106,6 +112,15 @@
<Notebook /> <Notebook />
</el-icon> </el-icon>
<div style="font-weight:550; font-size: 18px;">热门家族故事</div> <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>
<div class="familystorelist" <div class="familystorelist"
style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;"> style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
@ -125,162 +140,31 @@
</template> </template>
<script> <script>
import PostCard from '../../components/PostCard.vue'; import PostCard from './PostCard.vue';
import PostForm from './Postform.vue'; import PostForm from './Postform.vue';
import axios from 'axios';
export default { export default {
name: 'CommunityIndex', // 添加组件名称 name: 'CommunityIndex', // 添加组件名称
components: { PostCard, PostForm }, components: { PostCard, PostForm },
// 其他组件选项 // 其他组件选项
data() { data() {
return { return {
HotsearchList: [{ username: "陶喆", postid: 6, content: "啊啊哦哦诶诶啊啊",hot:520 }, HotsearchList: [],
{ avatarUrl: 'https://via.placeholder.com/40', username: "马思唯", content: "黑马季节收官战无敌", postid: 7, hot:220 }, familystories: [],
{ username: "马思唯", content: "我在阿姆斯特丹当个画家虽然口袋里钱不多，就在梵高博物馆外等她从我身边路过", postid: 4, hot:200}, { username: "马思唯", content: "黑马季节", postid: 1,hot:120 }, myfollows: [],
{ username: "马思唯", content: "黑马季hdsajkdhkashjd", postid: 3 ,hot:20 }], userlikelist: [],
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 }],
hoverIndex: -1, hoverIndex: -1,
selectedIndex: -1, selectedIndex: -1,
selecteduserid: 0, isloading: false,
selectedpostid: 0, loaddone: 0,
selectedbyuserid: false, checkPostsindex: 0,
selectedbypostid: false, checkPosts: [],
checkPostsindex:0, page: 1,
checkPosts:[ ],
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, userid: 1,
postid: 1, totalPages: 1,
avatarUrl: 'https://via.placeholder.com/40', posts: [
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: [] // 存储评论
}, },
] ]
}; };
@ -288,81 +172,248 @@
computed: { computed: {
totalWeidu() { totalWeidu() {
// 使用reduce方法来遍历数组并计算总和 // 使用reduce方法来遍历数组并计算总和
return this.myfollows.reduce((sum, item) => sum + item.weidu, 0); return this.myfollows.reduce((sum, item) => sum + item.newpostnum, 0);
}
}, },
// 计算属性：过滤帖子数据，依据 showUser3Posts 的值
filteredPosts() {
if (this.selectedbyuserid) { created() {
// 在组件实例创建时调用
return this.posts.filter(post => post.userid === this.selecteduserid); this.loadData();
} },
if (this.selectedbypostid) {
return this.posts.filter(post => post.postid === this.selectedpostid);
}
else {
return this.posts;
} methods: {
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 会重复加载一页帖子
} }
}, },
methods: { async fllowlist() {
submitPost(newpost){
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]; 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 = this.posts; const filteredPostsList = response.data.records;
this.$message("帖子加载");
const postsToAdd = filteredPostsList.slice(this.checkPostsindex, this.checkPostsindex + 1); this.$message("动态加载中page" + this.page);
this.checkPostsindex+=1;
// 将这 2 个帖子加入到 checkPosts 数组的末尾 this.checkPosts.push(...filteredPostsList);
this.checkPosts.push(...postsToAdd); this.page = this.page + 1;
} catch (error) {
console.error("动态加载失败", error);
}
}
}, },
checkbypostid(postid) { async checkbypostid(postid) {//根据postid显示单个帖子 用于热门动态以及热门家族故事
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);
}
this.selectedbyuserid = false;
this.selectedbypostid = true;
this.selectedpostid = postid;
}, },
alldongtai() {
this.selectedbyuserid = false; async loaduserlikes() {//加载user点赞列表 并会传入每个帖子做是否已经点赞的判断
this.selectedbypostid = false; 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.isloading = true;
this.checkPosts.splice(0, this.checkPosts.length);
this.page = 1;
this.load();
this.selectedIndex = -1; 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; async loadhotfamilystory() {//加载热门家族故事
this.selectedbypostid = false; 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.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) { updateCommentCount(index, newCommentCount) {//用于本地显示的点赞数量变化
this.checkPosts[index].commentCount = newCommentCount; this.checkPosts[index].commentcount = newCommentCount;
}, },
toggleCommentsVisibility(index) { async toggleCommentsVisibility(index, postid) {//展开评论以及获取评论列表
this.$message("评论区展开" + index); this.$message("评论区展开" + index);
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; this.checkPosts[index].isCommentsVisible = !this.checkPosts[index].isCommentsVisible;
} catch (error) {
console.error('评论获取失败', error);
this.$message.error("评论获取失败");
}
}, },
addComment(index, commentText) { 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({ this.checkPosts[index].comments.push({
username: '匿名用户', username: '用户名',//等待user接口
text: commentText postid: postid,
content: commentText
}); });
this.checkPosts[index].commentCount += 1; 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); // 动画持续时间，确保动画完成后移除类
},
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save