From 4ab9a50eed27b9209f9ca6fda0071f04d261cef1 Mon Sep 17 00:00:00 2001 From: 2991692032 Date: Wed, 28 May 2025 11:00:00 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=BA=E5=9D=9B=E5=8A=9F=E8=83=BD=E5=89=8D?= =?UTF-8?q?=E5=90=8E=E7=AB=AF=E9=9B=86=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- unilife-frontend/src/api/auth.ts | 18 ++ unilife-frontend/src/api/forum.ts | 61 ++++ unilife-frontend/src/utils/api-test.ts | 1 + .../src/views/forum/ForumView.vue | 296 ++++++++++++++---- .../src/views/forum/PostDetailView.vue | 246 ++++++++++----- .../java/com/unilife/config/WebMvcConfig.java | 6 +- .../unilife/controller/PostController.java | 4 +- .../java/com/unilife/model/vo/PostListVO.java | 5 + .../java/com/unilife/service/PostService.java | 3 +- .../unilife/service/impl/PostServiceImpl.java | 26 +- 10 files changed, 500 insertions(+), 166 deletions(-) create mode 100644 unilife-frontend/src/utils/api-test.ts diff --git a/unilife-frontend/src/api/auth.ts b/unilife-frontend/src/api/auth.ts index b83d684..f42f49c 100644 --- a/unilife-frontend/src/api/auth.ts +++ b/unilife-frontend/src/api/auth.ts @@ -50,4 +50,22 @@ export const uploadAvatar = (file: File) => { // 更新邮箱 export const updateEmail = (email: string, code: string) => { return api.put('/users/email', { email, code }) +} + +// 获取用户统计数据 +export const getUserStats = () => { + return api.get>('/users/stats') +} + +// 获取用户最近帖子 +export const getUserRecentPosts = (limit?: number) => { + const params = limit ? { limit } : {} + return api.get>('/users/recent-posts', { params }) } \ No newline at end of file diff --git a/unilife-frontend/src/api/forum.ts b/unilife-frontend/src/api/forum.ts index 282123d..3d6bc78 100644 --- a/unilife-frontend/src/api/forum.ts +++ b/unilife-frontend/src/api/forum.ts @@ -49,6 +49,67 @@ export const likePost = (id: number) => { return api.post>(`/posts/${id}/like`) } +// 获取用户的帖子列表 +export const getUserPosts = (userId: number, params?: { + page?: number + size?: number + sort?: string +}) => { + return api.get>(`/posts/user/${userId}`, { params }) +} + +// ==================== 评论管理 ==================== + +// 获取评论列表 +export const getComments = (postId: number) => { + return api.get + }> + }>>(`/comments/post/${postId}`) +} + +// 发表评论 +export const createComment = (data: { + postId: number + content: string + parentId?: number | null +}) => { + return api.post>('/comments', data) +} + +// 删除评论 +export const deleteComment = (id: number) => { + return api.delete>(`/comments/${id}`) +} + +// 点赞/取消点赞评论 +export const likeComment = (id: number) => { + return api.post>(`/comments/${id}/like`) +} + // 获取分类列表 export const getCategories = (params?: { status?: number }) => { return api.get
- + @@ -129,17 +129,17 @@
- -
+ +
- + {{ post.nickname?.charAt(0) }}
@@ -177,22 +177,39 @@
- + - 点赞 + {{ post.isLiked ? '已点赞' : '点赞' }}
-
+
发布第一个帖子
+ + +
+ +
@@ -207,21 +224,41 @@ > - + - - - + + - +
@@ -230,7 +267,7 @@ @@ -635,6 +781,18 @@ onMounted(() => { gap: 16px; } +/* 分页样式 */ +.pagination-section { + margin-top: 32px; + display: flex; + justify-content: center; + padding: 24px; + background: rgba(255, 255, 255, 0.8); + border-radius: 16px; + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.2); +} + .stat-item { display: flex; align-items: center; diff --git a/unilife-frontend/src/views/forum/PostDetailView.vue b/unilife-frontend/src/views/forum/PostDetailView.vue index 9a3b14a..3312647 100644 --- a/unilife-frontend/src/views/forum/PostDetailView.vue +++ b/unilife-frontend/src/views/forum/PostDetailView.vue @@ -41,7 +41,7 @@
-
+
{{ post.categoryName }} @@ -87,7 +87,9 @@ 关注
-
+
+ 
{{ post.content }}
+
@@ -110,7 +112,7 @@
-

评论 ({{ comments.length }})

+

评论 ({{ post.commentCount || 0 }})

@@ -127,14 +129,23 @@ class="comment-input" />
- - 发表评论 + + {{ commenting ? '发表中...' : '发表评论' }}
+ +
+ + + +
+
作为一名大一新生，刚刚进入大学生活，发现与高中相比有很大的不同。高中时间安排比较固定，而大学有更多的自由时间，但也更容易迷茫。

- -

想请教一下学长学姐们关于时间管理的经验，比如：

- -
    -
  • 如何平衡学习和社团活动？
    • -
  • 怎么制定合理的学习计划？
    • -
  • 如何避免拖延症？
    • -
  • 课余时间应该如何充实自己？
    • -
- -

希望大家能分享一些实用的方法和经验，谢谢！

- `, - nickname: '小明', +const loading = ref(false) +const commenting = ref(false) + +// 真实数据 +const post = ref({ + id: 0, + title: '', + content: '', + summary: '', + userId: 0, + nickname: '', avatar: '', - categoryName: '学习交流', - viewCount: 156, - commentCount: 23, - likeCount: 45, + categoryId: 0, + categoryName: '', + viewCount: 0, + likeCount: 0, + commentCount: 0, isLiked: false, - createdAt: '2024-01-15 10:30', - userId: 1 + createdAt: '', + updatedAt: '' }) +const comments = ref([]) // 作者统计信息 const authorStats = ref({ @@ -250,38 +256,6 @@ const authorStats = ref({ likeCount: 234 }) -// 模拟评论数据 -const comments = ref([ - { - id: 1, - content: '时间管理确实很重要，我推荐使用番茄工作法，25分钟专注学习，5分钟休息，效果很好！', - nickname: '学霸小王', - avatar: '', - likeCount: 12, - isLiked: false, - createdAt: '2024-01-15 11:20', - replies: [ - { - id: 2, - content: '番茄工作法我也在用，确实挺有效的！', - nickname: '努力的小李', - avatar: '', - createdAt: '2024-01-15 12:10' - } - ] - }, - { - id: 3, - content: '建议制定每日、每周和每月的目标，这样会更有方向感。另外要学会说不，不是所有活动都要参加。', - nickname: '经验分享者', - avatar: '', - likeCount: 8, - isLiked: false, - createdAt: '2024-01-15 13:45', - replies: [] - } -]) - // 计算属性 const isAuthor = computed(() => { return userStore.user?.id === post.value.userId @@ -292,47 +266,127 @@ const goBack = () => { router.go(-1) } -const toggleLike = () => { - post.value.isLiked = !post.value.isLiked - post.value.likeCount += post.value.isLiked ? 1 : -1 - ElMessage.success(post.value.isLiked ? '点赞成功' : '取消点赞') +const toggleLike = async () => { + if (!post.value) return + + try { + const response = await likePostAPI(post.value.id) as any as ApiResponse + if (response.code === 200) { + post.value.isLiked = !post.value.isLiked + post.value.likeCount += post.value.isLiked ? 1 : -1 + ElMessage.success(post.value.isLiked ? '点赞成功' : '取消点赞') + } + } catch (error: any) { + ElMessage.error(error.message || '操作失败') + } } -const submitComment = () => { +const submitComment = async () => { if (!newComment.value.trim()) { ElMessage.warning('请输入评论内容') return } - const comment = { - id: Date.now(), - content: newComment.value, - nickname: userStore.user?.nickname || '匿名用户', - avatar: userStore.user?.avatar || '', - likeCount: 0, - isLiked: false, - createdAt: new Date().toLocaleString('zh-CN'), - replies: [] + try { + commenting.value = true + const response = await createCommentAPI({ + postId: post.value.id, + content: newComment.value, + parentId: null + }) as any as ApiResponse<{ commentId: number }> + + if (response.code === 200) { + newComment.value = '' + ElMessage.success('评论发表成功') + // 重新加载评论 + loadComments() + } + } catch (error: any) { + ElMessage.error(error.message || '评论发表失败') + } finally { + commenting.value = false } - - comments.value.unshift(comment) - newComment.value = '' - post.value.commentCount++ - ElMessage.success('评论发表成功') } const replyToComment = (comment: any) => { ElMessage.info('回复功能开发中...') } -const likeComment = (comment: any) => { - comment.isLiked = !comment.isLiked - comment.likeCount += comment.isLiked ? 1 : -1 - ElMessage.success(comment.isLiked ? '点赞成功' : '取消点赞') +const likeComment = async (comment: any) => { + try { + const response = await likeCommentAPI(comment.id) as any as ApiResponse + if (response.code === 200) { + comment.isLiked = !comment.isLiked + comment.likeCount += comment.isLiked ? 1 : -1 + ElMessage.success(comment.isLiked ? '点赞成功' : '取消点赞') + } + } catch (error: any) { + ElMessage.error(error.message || '操作失败') + } +} + +// 加载帖子详情 +const loadPost = async () => { + const postId = Number(route.params.id) + if (!postId) { + ElMessage.error('帖子ID无效') + router.push('/forum') + return + } + + try { + loading.value = true + const response = await getPostDetail(postId) as any as ApiResponse + if (response.code === 200) { + post.value = response.data + + // 调试信息：打印帖子详情的点赞状态 + console.log('加载的帖子详情:', { + id: post.value.id, + title: post.value.title, + isLiked: post.value.isLiked, + likeCount: post.value.likeCount + }) + } else { + ElMessage.error(response.message || '加载帖子失败') + router.push('/forum') + } + } catch (error: any) { + console.error('加载帖子失败:', error) + ElMessage.error(error.response?.data?.message || '加载帖子失败') + router.push('/forum') + } finally { + loading.value = false + } +} + +// 加载评论列表 +const loadComments = async () => { + if (!post.value.id) return + + try { + const response = await getComments(post.value.id) as any as ApiResponse<{ + total: number + list: any[] + }> + + if (response.code === 200) { + comments.value = response.data.list || [] + } else { + console.error('加载评论失败:', response.message) + } + } catch (error: any) { + console.error('加载评论失败:', error) + ElMessage.error('加载评论失败') + } } -onMounted(() => { +onMounted(async () => { console.log('帖子详情页面加载完成', route.params.id) + await loadPost() + if (post.value.id) { + await loadComments() + } }) @@ -536,6 +590,18 @@ onMounted(() => { margin-bottom: 8px; } +.post-text { + white-space: pre-wrap; + word-wrap: break-word; + font-family: inherit; + margin: 0; + background: none; + border: none; + font-size: inherit; + color: inherit; + line-height: inherit; +} + .post-footer { padding-top: 24px; border-top: 1px solid var(--gray-200); @@ -591,6 +657,12 @@ onMounted(() => { gap: 24px; } +.empty-comments { + text-align: center; + padding: 48px 24px; + color: var(--gray-500); +} + .comment-item { display: flex; gap: 16px; diff --git a/unilife-server/src/main/java/com/unilife/config/WebMvcConfig.java b/unilife-server/src/main/java/com/unilife/config/WebMvcConfig.java index f6ff92a..06f91ac 100644 --- a/unilife-server/src/main/java/com/unilife/config/WebMvcConfig.java +++ b/unilife-server/src/main/java/com/unilife/config/WebMvcConfig.java @@ -25,11 +25,7 @@ public class WebMvcConfig implements WebMvcConfigurer { "/users/code", "/users/login/code", - // 论坛相关 - 允许未登录用户访问帖子列表和帖子详情 - "/posts", // 帖子列表 - "/posts/*/", // 帖子详情 - "/posts/{id}", // 帖子详情（另一种匹配方式） - "/categories", // 分类列表 + // 静态资源访问 "/api/files/**", diff --git a/unilife-server/src/main/java/com/unilife/controller/PostController.java b/unilife-server/src/main/java/com/unilife/controller/PostController.java index d5d7462..7b80e21 100644 --- a/unilife-server/src/main/java/com/unilife/controller/PostController.java +++ b/unilife-server/src/main/java/com/unilife/controller/PostController.java @@ -47,7 +47,9 @@ public class PostController { @RequestParam(value = "page", defaultValue = "1") Integer page, @RequestParam(value = "size", defaultValue = "10") Integer size, @RequestParam(value = "sort", defaultValue = "latest") String sort) { - return postService.getPostList(categoryId, keyword, page, size, sort); + // 从当前上下文获取用户ID，可能为null（未登录用户） + Long userId = BaseContext.getId(); + return postService.getPostList(categoryId, keyword, page, size, sort, userId); } @Operation(summary = "更新帖子") diff --git a/unilife-server/src/main/java/com/unilife/model/vo/PostListVO.java b/unilife-server/src/main/java/com/unilife/model/vo/PostListVO.java index 054da78..34ea817 100644 --- a/unilife-server/src/main/java/com/unilife/model/vo/PostListVO.java +++ b/unilife-server/src/main/java/com/unilife/model/vo/PostListVO.java @@ -70,6 +70,11 @@ public class PostListVO { */ private Integer commentCount; + /** + * 当前用户是否点赞 + */ + private Boolean isLiked; + /** * 创建时间 */ diff --git a/unilife-server/src/main/java/com/unilife/service/PostService.java b/unilife-server/src/main/java/com/unilife/service/PostService.java index bf307de..720ea1c 100644 --- a/unilife-server/src/main/java/com/unilife/service/PostService.java +++ b/unilife-server/src/main/java/com/unilife/service/PostService.java @@ -31,9 +31,10 @@ public interface PostService { * @param page 页码 * @param size 每页大小 * @param sort 排序方式（latest-最新，hot-热门） + * @param userId 当前用户ID，可为null * @return 结果 */ - Result getPostList(Long categoryId, String keyword, Integer page, Integer size, String sort); + Result getPostList(Long categoryId, String keyword, Integer page, Integer size, String sort, Long userId); /** * 更新帖子 diff --git a/unilife-server/src/main/java/com/unilife/service/impl/PostServiceImpl.java b/unilife-server/src/main/java/com/unilife/service/impl/PostServiceImpl.java index 388816c..bc08cd7 100644 --- a/unilife-server/src/main/java/com/unilife/service/impl/PostServiceImpl.java +++ b/unilife-server/src/main/java/com/unilife/service/impl/PostServiceImpl.java @@ -123,12 +123,16 @@ public class PostServiceImpl implements PostService { } @Override - public Result getPostList(Long categoryId, String keyword, Integer page, Integer size, String sort) { + public Result getPostList(Long categoryId, String keyword, Integer page, Integer size, String sort, Long userId) { // 参数校验 if (page == null || page < 1) page = 1; if (size == null || size < 1 || size > 50) size = 10; if (StrUtil.isBlank(sort)) sort = "latest"; + // 添加调试日志 + log.info("getPostList - 接收到的参数: categoryId={}, keyword={}, page={}, size={}, sort={}, userId={}", + categoryId, keyword, page, size, sort, userId); + // 只使用PageHelper进行分页，不设置排序 PageHelper.startPage(page, size); @@ -144,13 +148,13 @@ public class PostServiceImpl implements PostService { // 获取分页信息 PageInfo pageInfo = new PageInfo<>(posts); - + // 收集所有帖子的分类 ID List categoryIds = posts.stream() .map(Post::getCategoryId) .distinct() .collect(Collectors.toList()); - + // 批量获取分类信息 Map categoryMap = new HashMap<>(); if (!categoryIds.isEmpty()) { @@ -163,6 +167,18 @@ public class PostServiceImpl implements PostService { // 转换为VO List postListVOs = posts.stream().map(post -> { User user = userMapper.getUserById(post.getUserId()); + + // 查询用户是否点赞过该帖子 + boolean isLiked = false; + if (userId != null) { + log.info("查询帖子 {} 的点赞状态，用户ID: {}", post.getId(), userId); + Boolean liked = postLikeMapper.isLiked(post.getId(), userId); + isLiked = liked != null && liked; + log.info("帖子 {} 的点赞状态查询结果: liked={}, isLiked={}", post.getId(), liked, isLiked); + } else { + log.info("用户ID为null，跳过帖子 {} 的点赞状态查询", post.getId()); + } + return PostListVO.builder() .id(post.getId()) .title(post.getTitle()) @@ -175,10 +191,14 @@ public class PostServiceImpl implements PostService { .viewCount(post.getViewCount()) .likeCount(post.getLikeCount()) .commentCount(post.getCommentCount()) + .isLiked(isLiked) .createdAt(post.getCreatedAt()) .build(); }).collect(Collectors.toList()); + log.info("返回的帖子列表中点赞状态: {}", + postListVOs.stream().map(p -> "帖子" + p.getId() + ":isLiked=" + p.getIsLiked()).collect(Collectors.toList())); + // 返回结果 Map data = new HashMap<>(); data.put("total", pageInfo.getTotal());