实现首页帖子展示,能加载评论

main
Hacker-00001 4 weeks ago
parent 4aaaa1fc6a
commit d97a5a0b31

@ -16,49 +16,53 @@ export const usePostDetailStore = defineStore("postDetail", {
commentsFinished: false, // 是否加载完全部评论
}),
actions: {
async fetchComments() {
if (this.commentsLoading || this.commentsFinished) return;
this.commentsLoading = true;
const RequestCommentData = {
lastVal: this.lastVal,
offset: this.offset,
size: this.size,
postId: this.post.postId
};
try {
const response = await request.post('/comment/list', RequestCommentData);
if (response.code === 200) {
// 初始化每条评论的子评论分页状态
const comments = (response.data.records || []).map(item => ({
...item,
replies: [],
repliesLastVal: Date.now(),
repliesOffset: 0,
repliesSize: 5,
repliesLoading: false,
repliesFinished: false,
}));
this.comments.push(...comments);
this.lastVal = response.data.lastVal;
this.offset = response.data.offset;
if (comments.length < this.size) {
this.commentsFinished = true; // 如果评论数少于每页大小,标记为已加载完
}
}
else {
ElMessage({
message: '获取评论失败,请稍后重试',
type: 'error',
duration: 500
});
}
} catch (error) {
console.error("获取评论失败:", error);
alert(error.response?.message || '获取评论失败,请稍后重试');
}finally {
this.commentsLoading = false;
// ...existing code...
async fetchComments() {
if (this.commentsLoading || this.commentsFinished) return;
this.commentsLoading = true;
// 拼接参数到URL
const params = [
`lastVal=${this.lastVal}`,
`offset=${this.offset}`,
`size=${this.size}`,
`postId=${this.post.postId}`
].join('&');
const url = `/comment/list?${params}`;
try {
const response = await request.get(url);
if (response.code === 200) {
// 初始化每条评论的子评论分页状态
const comments = (response.data.records || []).map(item => ({
...item,
replies: [],
repliesLastVal: Date.now(),
repliesOffset: 0,
repliesSize: 5,
repliesLoading: false,
repliesFinished: false,
}));
this.comments.push(...comments);
this.lastVal = response.data.lastVal;
this.offset = response.data.offset;
if (comments.length < this.size) {
this.commentsFinished = true; // 如果评论数少于每页大小,标记为已加载完
}
},
}
else {
ElMessage({
message: '获取评论失败,请稍后重试',
type: 'error',
duration: 500
});
}
} catch (error) {
console.error("获取评论失败:", error);
alert(error.response?.message || '获取评论失败,请稍后重试');
}finally {
this.commentsLoading = false;
}
},
// ...existing code...
// 获取某条评论的子评论
async fetchReplies(parentCommentId, commentObj) {
if (commentObj.repliesLoading || commentObj.repliesFinished) return;
@ -165,7 +169,6 @@ export const usePostDetailStore = defineStore("postDetail", {
async sendComment(newCommentData) {
if (!newCommentData.content || !this.post?.postId) return;
const RequestData = {
id: null,
postId: newCommentData.postId, // 帖子ID
content: newCommentData.content, // 评论内容
parentCommentId: newCommentData.parentCommentId,

@ -1,6 +1,5 @@
import {defineStore} from 'pinia';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';
export const usePostListStore = defineStore('postList', {
state: () => ({
@ -37,13 +36,12 @@ export const usePostListStore = defineStore('postList', {
async getList() {
if (this.loading || this.finished) return;
this.loading = true;
const requestData = {
lastVal:this.lastVal,
offset: this.offset,
size: this.pageSize,
};
try {
const res = await request.post('/post/list', requestData);
// 保证 lastVal 不为 null
const lastVal = (typeof this.lastVal === 'number' && this.lastVal > 0) ? this.lastVal : Date.now();
// 拼接参数到URL
const url = `/post/list?lastVal=${lastVal}&offset=${this.offset}&size=${this.pageSize}`;
const res = await request.get(url);
if (res.code === 200) {
const { records, lastVal: newLastVal, offset: newOffset, size: newSize } = res.data;
if (records && records.length > 0) {
@ -62,7 +60,8 @@ export const usePostListStore = defineStore('postList', {
userName: post.userName,
}));
this.posts = [...this.posts, ...mappedRecords];
this.lastVal = newLastVal;
// 只在 newLastVal 有效时才赋值
this.lastVal = (typeof newLastVal === 'number' && newLastVal > 0) ? newLastVal : lastVal;
this.offset = newOffset;
this.pageSize = newSize;
}
@ -70,20 +69,10 @@ export const usePostListStore = defineStore('postList', {
this.finished = true; // 没有更多数据
}
} else {
console.error('获取帖子列表返回错误:', res.msg);
ElMessage({
message: res.msg || '获取帖子列表失败,请稍后重试',
type: 'error',
duration: 1500
});
// 处理错误情况
}
} catch (error) {
console.error("获取帖子列表失败:", error);
ElMessage({
message: error.response?.data?.msg || '获取帖子列表失败,请稍后重试',
type: 'error',
duration: 1500
});
// 处理异常情况
} finally {
this.loading = false;
}

Loading…
Cancel
Save