完成并测试了/manageProfile

src/views/authentication/ManageProfile.vue

@@ -1,35 +1,111 @@
 <script setup>
-import {ref} from 'vue';
+import {onMounted, ref} from 'vue';
 import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElRadio, ElRadioGroup, ElTabPane, ElTabs} from 'element-plus';
 import 'element-plus/dist/index.css';
+import axios from "axios";
+import {useStore} from 'vuex';
+import {useRouter} from 'vue-router';
 
+const store = useStore();
+const router = useRouter();
+
+const token = store.getters['authentication/token'];
 const nickname = ref('');
 const phoneNumber = ref('');
 const email = ref('');
 const gender = ref('');
-const oldPassword = ref('');
+const department = ref('');
+const role = ref('');
+const currentPassword = ref('');
 const newPassword = ref('');
 const confirmPassword = ref('');
 
-const handleSaveProfile = () => {
+onMounted(
+    async () => {
+      try {
+        // 从Vuex中获取JWT token
+        if (!token) {
+          store.commit('authentication/logout');
+          router.push('/login');
+        }
+
+        // 发送请求并附带token参数
+        const response = await axios.get(`/api/userProfile?token=${token}`);
+
+        if (response.status === 200) {
+          const user = response.data;
+          nickname.value = user.nickname;
+          phoneNumber.value = user.phoneNumber;
+          email.value = user.email;
+          gender.value = user.gender;
+          department.value = user.department;
+          role.value = user.role;
+        } else {
+          ElMessage.error('获取用户信息失败，请重试');
+        }
+      } catch (error) {
+        console.error('Error fetching user profile:', error);
+        ElMessage.error('获取用户信息失败，请重试');
+      }
+    }
+)
+
+const handleSaveProfile = async () => {
   console.log('Saving profile with', {
     nickname: nickname.value,
     phoneNumber: phoneNumber.value,
     email: email.value,
-    gender: gender.value
+    gender: gender.value,
+    department: department.value,
+    role: role.value
   });
   // 处理保存资料逻辑
-  ElMessage.success('资料保存成功');
+  try {
+    const response = await axios.post('/api/manageUserProfile', {
+      token: token,
+      nickname: nickname.value,
+      phoneNumber: phoneNumber.value,
+      email: email.value,
+      gender: gender.value,
+      department: department.value,
+      role: role.value
+    });
+    if (response.status === 200) {
+      ElMessage.success('资料保存成功');
+    } else {
+      ElMessage.error('保存用户信息失败，请重试');
+    }
+  } catch (error) {
+    console.info('Error saving user profile:', error);
+    ElMessage.error('保存用户信息失败，请重试');
+  }
+
 };
 
-const handleChangePassword = () => {
+const handleChangePassword = async () => {
   if (newPassword.value !== confirmPassword.value) {
     ElMessage.error('新密码和确认密码不一致');
     return;
   }
-  console.log('Changing password with', {oldPassword: oldPassword.value, newPassword: newPassword.value});
+  // console.log('Changing password with', {currentPassword: currentPassword.value, newPassword: newPassword.value});
   // 处理修改密码逻辑
-  ElMessage.success('密码修改成功');
+  try {
+    const response = await axios.post('/api/changePassword', {
+      token: token,
+      currentPassword: currentPassword.value,
+      newPassword: newPassword.value
+    });
+    if (response.status === 200) {
+      ElMessage.success('密码修改成功，请重新登录');
+      store.commit('authentication/logout');
+      router.push('/login');
+    } else {
+      ElMessage.error('修改密码失败，请重试');
+    }
+  } catch (error) {
+    console.info('Error changing password:', error);
+    ElMessage.error('修改密码失败，请重试');
+  }
 };
 </script>
 
@@ -55,6 +131,18 @@ const handleChangePassword = () => {
                 <ElRadio label="女">女</ElRadio>
               </ElRadioGroup>
             </ElFormItem>
+            <ElFormItem label="部门">
+              <ElInput v-model="department" type="text" placeholder="请输入部门" required/>
+            </ElFormItem>
+            <ElFormItem label="角色">
+              <ElInput v-model="role" type="text" placeholder="请输入角色" required/>
+            </ElFormItem>
+            <!--            <ElFormItem label="角色">-->
+            <!--              <ElSelect v-model="role" placeholder="请选择角色" required>-->
+            <!--                <ElOption label="管理员" value="admin"/>-->
+            <!--                <ElOption label="用户" value="user"/>-->
+            <!--              </ElSelect>-->
+            <!--            </ElFormItem>-->
             <ElFormItem>
               <ElButton type="primary" @click="handleSaveProfile">保存</ElButton>
               <ElButton type="danger">取消</ElButton>
@@ -64,7 +152,7 @@ const handleChangePassword = () => {
         <ElTabPane label="修改密码">
           <ElForm @submit.prevent="handleChangePassword" label-width="100px">
             <ElFormItem label="旧密码">
-              <ElInput v-model="oldPassword" type="password" placeholder="请输入旧密码" required/>
+              <ElInput v-model="currentPassword" type="password" placeholder="请输入旧密码" required/>
             </ElFormItem>
             <ElFormItem label="新密码">
               <ElInput v-model="newPassword" type="password" placeholder="请输入新密码" required/>
@@ -78,10 +166,12 @@ const handleChangePassword = () => {
           </ElForm>
         </ElTabPane>
       </ElTabs>
+      <ElButton type="text" @click="() => $router.push('/profile')">返回</ElButton>
     </div>
   </div>
 </template>
 
+
 <style scoped>
 .profile-container {
   display: flex;