From d90126b45c11e5f7d21296ec1a15e2e86009fa5f Mon Sep 17 00:00:00 2001
From: 2991692032 <cizq297@gmail.com>
Date: Thu, 15 May 2025 17:03:38 +0800
Subject: [PATCH] v1

---
 Front/vue-unilife/src/api/forum.ts            |  95 +++++++
 Front/vue-unilife/src/api/post.ts             |  14 +-
 Front/vue-unilife/src/api/request.ts          |  22 +-
 Front/vue-unilife/src/router/index.ts         |   2 +-
 Front/vue-unilife/src/stores/postStore.ts     |  16 +-
 .../src/views/forum/MyPostsView.vue           | 248 ++++++++++++++++++
 .../src/views/forum/PostListView.vue          |   8 +-
 7 files changed, 397 insertions(+), 8 deletions(-)
 create mode 100644 Front/vue-unilife/src/api/forum.ts
 create mode 100644 Front/vue-unilife/src/views/forum/MyPostsView.vue

diff --git a/Front/vue-unilife/src/api/forum.ts b/Front/vue-unilife/src/api/forum.ts
new file mode 100644
index 0000000..27ba637
--- /dev/null
+++ b/Front/vue-unilife/src/api/forum.ts
@@ -0,0 +1,95 @@
+import request from './request';
+
+/**
+ * 获取帖子列表
+ * @param page 页码
+ * @param size 每页数量
+ * @param categoryId 分类ID，可选
+ * @param sort 排序方式（latest, hot, likes, comments），默认latest
+ * @param userId 用户ID，可选，获取指定用户的帖子
+ */
+export function getPosts(page = 1, size = 10, categoryId?: number | null, sort = 'latest', userId?: number | null) {
+  if (userId) {
+    // 获取指定用户的帖子
+    return request({
+      url: `/posts/user/${userId}`,
+      method: 'get',
+      params: { page, size, sort }
+    });
+  } else {
+    // 获取所有帖子或者按分类筛选
+    return request({
+      url: '/posts',
+      method: 'get',
+      params: { page, size, categoryId, sort }
+    });
+  }
+}
+
+/**
+ * 获取帖子详情
+ * @param id 帖子ID
+ */
+export function getPostDetail(id: number) {
+  return request({
+    url: `/posts/${id}`,
+    method: 'get'
+  });
+}
+
+/**
+ * 创建帖子
+ * @param data 帖子数据
+ */
+export function createPost(data: any) {
+  return request({
+    url: '/posts',
+    method: 'post',
+    data
+  });
+}
+
+/**
+ * 更新帖子
+ * @param id 帖子ID
+ * @param data 更新数据
+ */
+export function updatePost(id: number, data: any) {
+  return request({
+    url: `/posts/${id}`,
+    method: 'put',
+    data
+  });
+}
+
+/**
+ * 删除帖子
+ * @param id 帖子ID
+ */
+export function deletePost(id: number) {
+  return request({
+    url: `/posts/${id}`,
+    method: 'delete'
+  });
+}
+
+/**
+ * 点赞或取消点赞帖子
+ * @param id 帖子ID
+ */
+export function likePost(id: number) {
+  return request({
+    url: `/posts/${id}/like`,
+    method: 'post'
+  });
+}
+
+/**
+ * 获取所有分类
+ */
+export function getCategories() {
+  return request({
+    url: '/categories',
+    method: 'get'
+  });
+}
diff --git a/Front/vue-unilife/src/api/post.ts b/Front/vue-unilife/src/api/post.ts
index c39c0aa..3853718 100644
--- a/Front/vue-unilife/src/api/post.ts
+++ b/Front/vue-unilife/src/api/post.ts
@@ -35,7 +35,19 @@ export interface CreatePostParams {
 export default {
   // 获取帖子列表
   getPosts(params: { pageNum?: number; pageSize?: number; categoryId?: number; sort?: string }) {
-    return get<{ code: number; data: { total: number; list: PostItem[]; pages: number; pageNum: number; pageSize: number } }>('/posts', params);
+    // 将前端参数名转换为后端参数名
+    const serverParams: any = {
+      page: params.pageNum,
+      size: params.pageSize,
+      sort: params.sort
+    };
+    
+    // 保留categoryId参数
+    if (params.categoryId !== undefined) {
+      serverParams.categoryId = params.categoryId;
+    }
+    
+    return get<{ code: number; data: { total: number; list: PostItem[]; pages: number; pageNum: number; pageSize: number } }>('/posts', serverParams);
   },
   
   // 获取帖子详情
diff --git a/Front/vue-unilife/src/api/request.ts b/Front/vue-unilife/src/api/request.ts
index 5be10b1..774a7f7 100644
--- a/Front/vue-unilife/src/api/request.ts
+++ b/Front/vue-unilife/src/api/request.ts
@@ -45,7 +45,9 @@ service.interceptors.response.use(
       if (res.code === 401) {
         // 未授权，清除token并重定向到登录页
         localStorage.removeItem('token');
-        window.location.href = '/login';
+        const currentPath = window.location.pathname;
+        window.location.href = `/login?redirect=${encodeURIComponent(currentPath)}`;
+        return Promise.reject(new Error('未登录或登录已过期'));
       }
 
       return Promise.reject(new Error(res.message || '请求失败'));
@@ -56,7 +58,23 @@ service.interceptors.response.use(
   (error) => {
     console.error('响应错误:', error);
 
-    // 显示错误信息
+    // 处理HTTP 401错误
+    if (error.response && error.response.status === 401) {
+      ElMessage({
+        message: '未登录或登录已过期，请重新登录',
+        type: 'warning',
+        duration: 3000
+      });
+
+      // 清除token
+      localStorage.removeItem('token');
+
+      // 获取当前页面路径，并重定向到登录页面
+      const currentPath = window.location.pathname;
+      window.location.href = `/login?redirect=${encodeURIComponent(currentPath)}`;
+      return Promise.reject(error);
+    }
+
     ElMessage({
       message: error.message || '请求失败',
       type: 'error',
diff --git a/Front/vue-unilife/src/router/index.ts b/Front/vue-unilife/src/router/index.ts
index 4e1dccf..1169e27 100644
--- a/Front/vue-unilife/src/router/index.ts
+++ b/Front/vue-unilife/src/router/index.ts
@@ -102,7 +102,7 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: 'posts',       // URL: /personal/posts
         name: 'MyPosts',
-        component: () => import('../views/NotFound.vue'), // 占位符
+        component: () => import('../views/forum/MyPostsView.vue'),
         meta: { title: '我的帖子 - UniLife' }
       },
       {
diff --git a/Front/vue-unilife/src/stores/postStore.ts b/Front/vue-unilife/src/stores/postStore.ts
index da0a0cb..9277bb6 100644
--- a/Front/vue-unilife/src/stores/postStore.ts
+++ b/Front/vue-unilife/src/stores/postStore.ts
@@ -93,9 +93,19 @@ export const usePostStore = defineStore('post', {
           throw new Error(errorMessage);
         }
       } catch (error: any) {
-        // Ensure this.error is set from error.message, and ElMessage shows this.error or a default.
-        this.error = error.message || '加载帖子详情时发生未知错误'; 
-        ElMessage.error(this.error);
+        // 检查是否是未登录错误
+        if (error.response && error.response.status === 401) {
+          this.error = '您需要登录后才能查看帖子详情';
+          ElMessage.warning(this.error);
+          // 将用户重定向到登录页面，并记录需要返回的帖子详情页面
+          const currentPath = `/post/${id}`;
+          window.location.href = `/login?redirect=${encodeURIComponent(currentPath)}`;
+          return;
+        } else {
+          // 处理其他错误
+          this.error = error.message || '加载帖子详情时发生未知错误';
+          ElMessage.error(this.error);
+        }
       } finally {
         this.loading = false;
       }
diff --git a/Front/vue-unilife/src/views/forum/MyPostsView.vue b/Front/vue-unilife/src/views/forum/MyPostsView.vue
new file mode 100644
index 0000000..bfb82c7
--- /dev/null
+++ b/Front/vue-unilife/src/views/forum/MyPostsView.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="my-posts-container">
+    <el-card class="my-posts-card" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <h3>我的帖子</h3>
+          <el-button type="primary" @click="createNewPost">发布新帖子</el-button>
+        </div>
+      </template>
+      
+      <div v-if="loading" class="loading-container">
+        <el-skeleton :rows="5" animated />
+      </div>
+      
+      <div v-else-if="posts.length === 0" class="empty-container">
+        <el-empty description="您还没有发布过帖子" />
+        <el-button type="primary" @click="createNewPost">立即发布</el-button>
+      </div>
+      
+      <div v-else class="posts-list">
+        <el-table :data="posts" style="width: 100%">
+          <el-table-column prop="title" label="标题" min-width="180">
+            <template #default="{ row }">
+              <router-link :to="`/forum/post/${row.id}`" class="post-title">
+                {{ row.title }}
+              </router-link>
+            </template>
+          </el-table-column>
+          <el-table-column prop="categoryName" label="分类" width="120" />
+          <el-table-column prop="viewCount" label="浏览" width="80" align="center" />
+          <el-table-column prop="likeCount" label="点赞" width="80" align="center" />
+          <el-table-column prop="commentCount" label="评论" width="80" align="center" />
+          <el-table-column prop="createdAt" label="发布时间" width="150">
+            <template #default="{ row }">
+              {{ formatDateTime(row.createdAt) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="150" fixed="right">
+            <template #default="{ row }">
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                @click="editPost(row.id)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                plain
+                @click="deletePost(row.id)"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <div class="pagination-container">
+          <el-pagination
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :page-sizes="[10, 20, 30, 50]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useUserStore } from '@/stores/user';
+import { deletePost as apiDeletePost } from '@/api/forum';
+import request from '@/api/request';
+
+// 路由
+const router = useRouter();
+const userStore = useUserStore();
+
+// 数据
+const loading = ref(true);
+const posts = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+const currentSort = ref('latest');
+
+// 获取帖子数据
+const fetchUserPosts = async () => {
+  if (!userStore.isLoggedIn) {
+    ElMessage.warning('请先登录');
+    router.push('/login');
+    return;
+  }
+  
+  loading.value = true;
+  try {
+    // 确保用户信息已加载
+    if (!userStore.userInfo) {
+      await userStore.fetchUserInfo();
+    }
+    
+    const userId = userStore.userInfo?.id;
+    if (!userId) {
+      throw new Error('无法获取用户ID');
+    }
+    
+    // 直接使用后端API路径
+    const response = await request({
+      url: `/posts/user/${userId}`,
+      method: 'get',
+      params: {
+        page: currentPage.value,
+        size: pageSize.value,
+        sort: currentSort.value
+      }
+    });
+    
+    posts.value = response.data.list || [];
+    total.value = response.data.total || 0;
+  } catch (error) {
+    console.error('获取用户帖子失败:', error);
+    ElMessage.error('获取用户帖子列表失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 编辑帖子
+const editPost = (postId) => {
+  router.push(`/edit-post/${postId}`);
+};
+
+// 删除帖子
+const deletePost = async (postId) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这篇帖子吗？此操作不可逆。', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+
+    await apiDeletePost(postId);
+    ElMessage.success('删除成功');
+    fetchUserPosts(); // 重新获取帖子列表
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除帖子失败:', error);
+      ElMessage.error('删除帖子失败');
+    }
+  }
+};
+
+// 创建新帖子
+const createNewPost = () => {
+  router.push('/create-post');
+};
+
+// 分页相关
+const handleSizeChange = (size) => {
+  pageSize.value = size;
+  fetchUserPosts();
+};
+
+const handleCurrentChange = (page) => {
+  currentPage.value = page;
+  fetchUserPosts();
+};
+
+// 格式化日期时间
+const formatDateTime = (dateTimeStr) => {
+  if (!dateTimeStr) return '';
+  
+  const date = new Date(dateTimeStr);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+};
+
+// 页面加载时获取数据
+onMounted(() => {
+  fetchUserPosts();
+});
+</script>
+
+<style scoped>
+.my-posts-container {
+  max-width: 1200px;
+  margin: 20px auto;
+  padding: 0 20px;
+}
+
+.my-posts-card {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-weight: 500;
+}
+
+.loading-container, .empty-container {
+  padding: 40px 0;
+  text-align: center;
+}
+
+.empty-container .el-button {
+  margin-top: 16px;
+}
+
+.posts-list {
+  margin-top: 16px;
+}
+
+.post-title {
+  color: var(--el-color-primary);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.post-title:hover {
+  text-decoration: underline;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/Front/vue-unilife/src/views/forum/PostListView.vue b/Front/vue-unilife/src/views/forum/PostListView.vue
index e330400..92e2e90 100644
--- a/Front/vue-unilife/src/views/forum/PostListView.vue
+++ b/Front/vue-unilife/src/views/forum/PostListView.vue
@@ -71,11 +71,13 @@
     <div class="pagination-container" v-if="postStore.totalPages > 1">
       <el-pagination
         background
-        layout="prev, pager, next, jumper, ->, total"
+        layout="sizes, prev, pager, next, jumper, ->, total"
         :total="postStore.totalPosts"
         :page-size="postStore.pageSize"
+        :page-sizes="[5, 10, 20, 50]"
         :current-page="postStore.currentPage"
         @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
       />
     </div>
   </div>
@@ -138,6 +140,10 @@ const handleCurrentChange = (page: number) => {
   postStore.fetchPosts({ pageNum: page });
 };
 
+const handleSizeChange = (size: number) => {
+  postStore.fetchPosts({ pageNum: 1, pageSize: size });
+};
+
 onMounted(async () => {
   await postStore.fetchCategories(); // Fetch categories first
   // Fetch posts, it will use the default selectedCategoryId (null) from store initially