From 6bafbbeba6e61a43ec6b5af71f7bfb0066c4f9d7 Mon Sep 17 00:00:00 2001
From: "335942189@qq.com" <335942189@qq.com>
Date: Thu, 22 May 2025 18:56:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=AA=E4=BA=BA=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E7=95=8C=E9=9D=A2=E5=92=8C=E7=94=A8=E6=88=B7=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue-frontend/package-lock.json            |   2 -
 .../vue-frontend/src/components/Header.vue    |   1 +
 .../vue-frontend/src/router/index.js          |  15 +-
 .../src/views/ChangeInformation.vue           | 326 ++++++++++++++++++
 .../vue-frontend/src/views/UserPage.vue       | 104 +++---
 5 files changed, 389 insertions(+), 59 deletions(-)
 create mode 100644 珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/ChangeInformation.vue

diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/package-lock.json b/珞珈岛-项目相关文件/luojia-island/vue-frontend/package-lock.json
index 27b6665..6924524 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/package-lock.json
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/package-lock.json
@@ -8,11 +8,9 @@
       "name": "vue-frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@vue/devtools-api": "^7.7.6",
         "axios": "^1.8.4",
         "core-js": "^3.8.3",
         "element-plus": "^2.9.8",
-        "perfect-debounce": "^1.0.0",
         "pinia": "^3.0.2",
         "vue": "^3.2.13",
         "vue-router": "^4.5.0"
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
index 4e2c52f..6b9971f 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
@@ -47,6 +47,7 @@
             <p class="user-name">{{ userInfo.userName }}</p>
             <div class="button-container">
               <button @click="goToProfile" class="dropdown-btn">个人中心</button>
+              <router-link to="/ChangeInformation" class="nav-btn">修改个人信息</router-link>
               <button @click="logout" class="dropdown-btn">退出登录</button>
             </div>
           </div>
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
index b47b68d..8da7025 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
@@ -5,7 +5,7 @@ import PostDetail from '@/views/PostDetail.vue';
 import MainPage from '@/views/MainPage.vue';
 import UserPage from '@/views/UserPage.vue';
 import NotificationList from '@/views/NotificationList.vue';
-import FeedBack from '@/views/FeedBack.vue';
+import ChangeInformation from '@/views/ChangeInformation.vue';
 
 const routes = [
   {
@@ -29,7 +29,7 @@ const routes = [
     component: PostDetail 
   },
   {
-    path: '/user/:userId',
+    path: '/user',
     name: 'UserPage',
     component: UserPage
   },
@@ -37,17 +37,18 @@ const routes = [
     path: '/notificationlist',
     name: 'NotificationList',
     component: NotificationList
-  },
-    {//反馈站页面
-    path: '/feedback',
-    name: 'FeedBack',
-    component: FeedBack
   },
   {//详细通知页面
     path: '/notification/:id', 
     name: 'NotificationDetail',
     component: () => import('@/views/NotificationDetail.vue'),
     props: true
+  },
+  {
+    //修改个人信息界面
+    path:'/changeinformation',
+    name:'ChangeInformation',
+    component:ChangeInformation
   }
 ];
 
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/ChangeInformation.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/ChangeInformation.vue
new file mode 100644
index 0000000..bb2a919
--- /dev/null
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/ChangeInformation.vue
@@ -0,0 +1,326 @@
+<template>
+  <div class="change-info-container">
+    <h2 class="title">修改个人信息</h2>
+
+    <!-- 头像区域 -->
+    <div class="avatar-section">
+      <p class="section-title">头像</p>
+      <div class="avatar-preview">
+        <!-- 当前头像（从接口获取初始值） -->
+        <img 
+          :src="currentAvatar" 
+          alt="当前头像" 
+          class="current-avatar"
+        >
+        <!-- 新头像预览（选择文件后显示） -->
+        <img 
+          v-if="previewAvatar" 
+          :src="previewAvatar" 
+          alt="新头像预览" 
+          class="new-avatar"
+        >
+      </div>
+      <!-- 文件选择按钮 -->
+      <label class="upload-btn">
+        选择新头像
+        <input 
+          type="file" 
+          accept="image/*" 
+          @change="handleAvatarChange" 
+          class="file-input"
+        >
+      </label>
+      <!-- 头像错误提示 -->
+      <p v-if="errors.avatar" class="error-tip">{{ errors.avatar }}</p>
+    </div>
+
+    <!-- 表单 -->
+    <form @submit.prevent="handleSubmit" class="form">
+      <!-- 昵称 -->
+      <div class="form-item">
+        <label class="label">昵称</label>
+        <input
+          type="text"
+          v-model.trim="formData.nickname"
+          class="input"
+          :class="{ 'input-error': errors.nickname }"
+        >
+        <p v-if="errors.nickname" class="error-tip">{{ errors.nickname }}</p>
+      </div>
+
+      <!-- 个人简介 -->
+      <div class="form-item">
+        <label class="label">个人简介</label>
+        <textarea
+          v-model.trim="formData.bio"
+          rows="4"
+          class="textarea"
+          :class="{ 'input-error': errors.bio }"
+        ></textarea>
+        <p v-if="errors.bio" class="error-tip">{{ errors.bio }}</p>
+      </div>
+
+      <!-- 提交按钮 -->
+      <button type="submit" class="submit-btn">保存修改</button>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useUserStore } from '@/stores/user.js';  // 引入Pinia用户状态
+import request from '@/utils/request';  // 引入封装的请求模块
+import { ElMessage } from 'element-plus';  // 使用Element Plus提示组件
+
+const router = useRouter();
+const userStore = useUserStore();
+
+// 从状态管理中获取用户ID和登录状态
+const userId = ref(userStore.userInfo.userid);
+const isLoggedIn = userStore.isLoggedIn;
+
+// 初始化表单数据
+const formData = ref({
+  nickname: '',
+  bio: ''
+});
+
+// 头像相关变量
+const avatarFile = ref(null);       // 选中的头像文件
+const previewAvatar = ref('');      // 新头像预览 URL
+const currentAvatar = ref('');      // 初始头像
+const errors = ref({});             // 错误提示
+
+// 组件挂载时检查登录状态并获取用户信息
+onMounted(async () => {
+  if (!isLoggedIn) {
+    ElMessage.error('请先登录');
+    router.push({ name: 'Login' });
+    return;
+  }
+
+  try {
+    // 使用封装的request模块请求用户信息
+    const res = await request.get(`/user/info/${userId.value}`);
+    if (res.code === 200) {
+      formData.value.nickname = res.data.nickname;
+      formData.value.bio = res.data.bio;
+      currentAvatar.value = res.data.avatar;
+    } else {
+      throw new Error(res.msg || '接口返回异常');
+    }
+  } catch (error) {
+    ElMessage.error(`获取用户信息失败：${error.message}`);
+  }
+});
+
+// 处理头像选择
+const handleAvatarChange = (e) => {
+  const file = e.target.files[0];
+  if (!file) return;
+
+  // 验证文件类型和大小（接口文档要求）
+  if (!file.type.startsWith('image/')) {
+    errors.value.avatar = '请选择图片文件（jpg/png等）';
+    return;
+  }
+  if (file.size > 5 * 1024 * 1024) { // 接口限制5MB
+    errors.value.avatar = '图片大小不能超过5MB';
+    return;
+  }
+
+  // 清除错误提示
+  errors.value.avatar = null;
+  // 生成预览 URL
+  const reader = new FileReader();
+  reader.onload = (e) => previewAvatar.value = e.target.result;
+  reader.readAsDataURL(file);
+  // 保存文件对象（用于上传）
+  avatarFile.value = file;
+};
+
+// 表单验证（根据接口文档规则）
+const validateForm = () => {
+  const newErrors = {};
+
+  // 昵称验证（接口要求：必填，≤20字符）
+  if (!formData.value.nickname) {
+    newErrors.nickname = '昵称不能为空';
+  } else if (formData.value.nickname.length > 20) {
+    newErrors.nickname = '昵称最多20字符';
+  }
+
+  // 简介验证（接口要求：≤100字符）
+  if (formData.value.bio.length > 100) {
+    newErrors.bio = '简介最多100字符';
+  }
+
+  errors.value = newErrors;
+  return Object.keys(newErrors).length === 0;
+};
+
+// 提交表单（调用接口文档中的 /user/info 接口）
+const handleSubmit = async () => {
+  if (!validateForm()) return;
+
+  try {
+    // 构建接口要求的 FormData
+    const formDataToSubmit = new FormData();
+    // 添加头像（可选，有选择时才添加）
+    if (avatarFile.value) {
+      formDataToSubmit.append('avatar', avatarFile.value);
+    }
+    // 添加其他字段（接口要求的 UserUpdateDTO 字段）
+    formDataToSubmit.append('nickname', formData.value.nickname);
+    formDataToSubmit.append('bio', formData.value.bio);
+
+    // 调用接口文档中的 PUT /user/info 接口（使用封装的request）
+    const res = await request.put(`/user/info/${userId.value}`, formDataToSubmit, {
+      headers: { 'Content-Type': 'multipart/form-data' }  // 必须设置
+    });
+
+    // 接口返回成功（根据文档：code=200 表示成功）
+    if (res.code === 200) {
+      // 更新当前头像（从接口返回新的头像 URL）
+      if (avatarFile.value) {
+        currentAvatar.value = res.data.avatar;  // 假设接口返回新头像 URL
+      }
+      ElMessage.success('修改成功！');
+    } else {
+      throw new Error(res.msg || '接口返回异常');
+    }
+  } catch (error) {
+    ElMessage.error(`修改失败：${error.message}`);
+  }
+};
+</script>
+
+<style scoped>
+/* 样式与原代码基本一致，仅调整无关字段的布局 */
+.change-info-container {
+  max-width: 600px;
+  margin: 2rem auto;
+  padding: 2rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.title {
+  color: #2c3e50;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 2rem;
+}
+
+.section-title {
+  color: #34495e;
+  font-size: 1.1rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+.avatar-section {
+  margin-bottom: 2rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.avatar-preview {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.current-avatar, .new-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid #bdc3c7;
+}
+
+.new-avatar {
+  border-color: #3498db; /* 新头像边框用蓝色区分 */
+}
+
+.upload-btn {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background: #3498db;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: background 0.3s ease;
+}
+
+.upload-btn:hover {
+  background: #2980b9;
+}
+
+.file-input {
+  display: none; /* 隐藏原生文件输入框 */
+}
+
+.form-item {
+  margin-bottom: 1.5rem;
+}
+
+.label {
+  display: block;
+  color: #34495e;
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.input, .textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #bdc3c7;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  transition: border-color 0.3s ease;
+}
+
+.input:focus, .textarea:focus {
+  outline: none;
+  border-color: #3498db;
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
+}
+
+.input-error {
+  border-color: #e74c3c;
+}
+
+.error-tip {
+  color: #e74c3c;
+  font-size: 0.8rem;
+  margin-top: 0.3rem;
+}
+
+.textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.submit-btn {
+  width: 100%;
+  padding: 0.75rem;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.submit-btn:hover {
+  background: #2980b9;
+}
+</style>
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/UserPage.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/UserPage.vue
index 32add28..6602c84 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/UserPage.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/UserPage.vue
@@ -1,23 +1,25 @@
 <template>
   <div class="user-page-container">
-    <!-- 左侧内容 -->
     <div class="left-container">
-      <!-- 用户信息卡片 -->
       <div class="user-info-card">
         <div class="user-avatar">
-          <img src="@/assets/default-avatar/boy_4.png" alt="用户头像" />
+          <img :src="userInfo.avatar" alt="用户头像" />
         </div>
         <div class="user-details">
-          <h2 class="username">cp3</h2>
+          <h2 class="username">{{ userInfo.userName }}</h2>
           <p class="user-status">ONLINE</p>
-          <p class="user-motto">不经巨大的困难，不会有伟大的事业</p>
+          <p class="user-motto">{{ userInfo.motto || '暂无个性签名' }}</p>
         </div>
       </div>
 
-      <!-- 帖子列表 -->
       <div class="user-posts">
         <h3>你的帖子</h3>
-        <div class="post-item" v-for="(post, index) in posts" :key="index" @click="goToPostDetail(post.id)">
+        <div 
+          class="post-item" 
+          v-for="post in userPosts" 
+          :key="post.id" 
+          @click="goToPostDetail(post.id)"
+        >
           <h4 class="post-title">{{ post.title }}</h4>
           <p class="post-summary">{{ post.summary }}</p>
           <div class="post-stats">
@@ -29,27 +31,25 @@
       </div>
     </div>
 
-    <!-- 右侧内容 -->
     <div class="right-container">
-      <!-- 个人统计信息卡片 -->
       <div class="user-stats-card">
-        <h3>cp3 个人信息</h3>
+        <h3>{{ userInfo.userName }} 个人信息</h3>
         <div class="stats">
           <div class="stat-item">
             <span>发帖数</span>
-            <span>5</span>
+            <span>{{ userStats.postCount }}</span>
           </div>
           <div class="stat-item">
             <span>粉丝</span>
-            <span>123</span>
+            <span>{{ userStats.followers }}</span>
           </div>
           <div class="stat-item">
             <span>你关注的人数</span>
-            <span>456K</span>
+            <span>{{ userStats.following }}</span>
           </div>
           <div class="stat-item">
             <span>获赞数</span>
-            <span>789</span>
+            <span>{{ userStats.likes }}</span>
           </div>
         </div>
       </div>
@@ -57,49 +57,58 @@
   </div>
 </template>
 
-<script setup lang="js" name="UserPage">
-import { ref } from 'vue';
+<script setup>
+import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
+import { useUserStore } from '@/stores/user.js';
 
-const posts = ref([
+const router = useRouter();
+const userStore = useUserStore();
+const userInfo = computed(() => userStore.userInfo);
+
+const userPosts = ref([
   {
     id: 1,
-    title: '雷霆连续两场或20分钟逆转什么水平',
-    summary: '今天保罗带领雷霆完成逆转',
+    title: "雷霆连续两场20分钟逆转什么水平？",
+    summary: "今天保罗带领雷霆完成逆转，末节狂胜15分！",
     likes: 1200,
-    comments: 10,
-    favorites: 100,
+    comments: 56,
+    favorites: 230
   },
   {
     id: 2,
-    title: '一个普通人需要多大努力才能考上985',
-    summary: 'mmmmmmmm',
+    title: "一个普通人需要多大努力才能考上985？",
+    summary: "分享我的备考经历，每天学习12小时，坚持300天...",
     likes: 2200,
-    comments: 20,
-    favorites: 200,
-  },
+    comments: 108,
+    favorites: 450
+  }
 ]);
 
-const router = useRouter();
+const userStats = ref({
+  postCount: userPosts.value.length,
+  followers: 0,
+  following: 0,
+  likes: 0
+});
+
 const goToPostDetail = (postId) => {
   router.push({ name: 'PostDetail', params: { id: postId } });
 };
 </script>
 
 <style scoped>
-/* 页面整体布局 */
 .user-page-container {
   display: flex;
   justify-content: center;
   gap: 20px;
   padding: 20px;
   background-color: #f5f5f5;
-  max-width: 1200px; /* 设置最大宽度 */
-  margin: 0 auto; /* 居中并在两边留白 */
+  max-width: 1200px;
+  margin: 0 auto;
   box-sizing: border-box;
 }
 
-/* 左侧内容 */
 .left-container {
   display: flex;
   flex-direction: column;
@@ -107,12 +116,10 @@ const goToPostDetail = (postId) => {
   flex: 3;
 }
 
-/* 右侧内容 */
 .right-container {
   flex: 1;
 }
 
-/* 用户信息卡片样式 */
 .user-info-card {
   display: flex;
   align-items: center;
@@ -140,8 +147,9 @@ const goToPostDetail = (postId) => {
 }
 
 .user-status {
-  color: green;
+  color: #54ac52;
   font-weight: bold;
+  margin: 8px 0;
 }
 
 .user-motto {
@@ -149,7 +157,6 @@ const goToPostDetail = (postId) => {
   font-size: 14px;
 }
 
-/* 个人统计信息卡片样式 */
 .user-stats-card {
   padding: 20px;
   background-color: white;
@@ -168,9 +175,9 @@ const goToPostDetail = (postId) => {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
+  color: #333;
 }
 
-/* 帖子列表样式 */
 .user-posts {
   padding: 20px;
   background-color: white;
@@ -181,35 +188,32 @@ const goToPostDetail = (postId) => {
 .post-item {
   padding: 10px 0;
   border-bottom: 1px solid #eee;
-   cursor: pointer;           
-    transition: box-shadow 0.3s;
+  cursor: pointer;
+  transition: transform 0.3s, box-shadow 0.3s;
 }
+
 .post-item:hover {
-  transform: translateY(-2px); /* 轻微上移（不超过间距的1/4） */
-    box-shadow: 
-        0 2px 6px rgba(0, 0, 0, 0.05),  /* 主阴影（更柔和） */
-        0 1px 2px rgba(0, 0, 0, 0.1);    /* 内阴影增加层次感 */
-    border-color: #e0e0e0; 
-}
-.post-item:last-child {
-  border-bottom: none;
+  transform: translateY(-2px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .post-title {
   font-size: 18px;
-  margin: 0;
+  font-weight: bold;
+  margin: 0 0 8px 0;
+  color: #2c3e50;
 }
 
 .post-summary {
-  color: #666;
   font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
 }
 
 .post-stats {
   display: flex;
-  gap: 10px;
+  gap: 15px;
   font-size: 12px;
   color: #999;
-  margin-left: 20px; 
 }
 </style>
\ No newline at end of file