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; /* 允许垂直滚动 */
}
/* 隐藏滚动条 */
.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 {
}

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

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

@ -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;

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

@ -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('发布动态失败，请刷新后再试');
}
},
}
});

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

@ -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>

Write Preview
Loading…
Cancel
Save