diff --git a/my-vue-app/src/assets/img/F01.png b/my-vue-app/src/assets/img/F01.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b2c6b8aae3fbb3deece9e01384dacfc49e2f644
Binary files /dev/null and b/my-vue-app/src/assets/img/F01.png differ
diff --git a/my-vue-app/src/assets/img/F02.jpg b/my-vue-app/src/assets/img/F02.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e51d4cc65639414f9bcb598a3b8613cdd4f8b61d
Binary files /dev/null and b/my-vue-app/src/assets/img/F02.jpg differ
diff --git a/my-vue-app/src/assets/img/F03.jpg b/my-vue-app/src/assets/img/F03.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..75e0ab6640e13699f85c6a34ea66ce1426e67d32
Binary files /dev/null and b/my-vue-app/src/assets/img/F03.jpg differ
diff --git a/my-vue-app/src/assets/img/F04.jpg b/my-vue-app/src/assets/img/F04.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9fd59cfeb47df8114cad1f36b7402204cc0204e2
Binary files /dev/null and b/my-vue-app/src/assets/img/F04.jpg differ
diff --git a/my-vue-app/src/assets/img/F05.jpg b/my-vue-app/src/assets/img/F05.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..96bf9d16452f48638b2ed06b2bf6184e3cf1064c
Binary files /dev/null and b/my-vue-app/src/assets/img/F05.jpg differ
diff --git a/my-vue-app/src/assets/img/F06.jpg b/my-vue-app/src/assets/img/F06.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b2eb46a44e32a789792a92d20d4d6ded66ca0cd2
Binary files /dev/null and b/my-vue-app/src/assets/img/F06.jpg differ
diff --git a/my-vue-app/src/assets/img/F07.jpg b/my-vue-app/src/assets/img/F07.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0189006e24b582bef661d2f4048681503c9331ab
Binary files /dev/null and b/my-vue-app/src/assets/img/F07.jpg differ
diff --git a/my-vue-app/src/assets/img/F08.jpg b/my-vue-app/src/assets/img/F08.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..87dc4660197b871f4118af011cb2d969d20efba7
Binary files /dev/null and b/my-vue-app/src/assets/img/F08.jpg differ
diff --git a/my-vue-app/src/assets/img/F09.jpg b/my-vue-app/src/assets/img/F09.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4a71080c2e5e6b0407c8373cf8bce09bc19d2192
Binary files /dev/null and b/my-vue-app/src/assets/img/F09.jpg differ
diff --git a/my-vue-app/src/assets/img/F099.jpg b/my-vue-app/src/assets/img/F099.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6d0f4a94c0f67ee0ed6300e6f4be9407bb2d3219
Binary files /dev/null and b/my-vue-app/src/assets/img/F099.jpg differ
diff --git a/my-vue-app/src/assets/img/F10.jpg b/my-vue-app/src/assets/img/F10.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cb6690849b59d6440500b07c51e526dbf4ff30c3
Binary files /dev/null and b/my-vue-app/src/assets/img/F10.jpg differ
diff --git a/my-vue-app/src/assets/img/M01.jpg b/my-vue-app/src/assets/img/M01.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..17bb71ac7d28e2b71477204617182d6c3078fe3a
Binary files /dev/null and b/my-vue-app/src/assets/img/M01.jpg differ
diff --git a/my-vue-app/src/assets/img/M02.jpg b/my-vue-app/src/assets/img/M02.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..64ac570b4821f90cb613c6a9b6d1362dfc06ed1e
Binary files /dev/null and b/my-vue-app/src/assets/img/M02.jpg differ
diff --git a/my-vue-app/src/assets/img/M03.jpg b/my-vue-app/src/assets/img/M03.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..35d759eb1fb0c74fb0291064e149c8f21df35f43
Binary files /dev/null and b/my-vue-app/src/assets/img/M03.jpg differ
diff --git a/my-vue-app/src/assets/img/M04.jpg b/my-vue-app/src/assets/img/M04.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f095ead9b8932e7741b9d787b7ae16f7520a3539
Binary files /dev/null and b/my-vue-app/src/assets/img/M04.jpg differ
diff --git a/my-vue-app/src/assets/img/M05.jpg b/my-vue-app/src/assets/img/M05.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e71f10b41a187de2850f2c6f224168601e058d12
Binary files /dev/null and b/my-vue-app/src/assets/img/M05.jpg differ
diff --git a/my-vue-app/src/assets/img/M06.jpg b/my-vue-app/src/assets/img/M06.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..70fbc5c5c461e5b5fe1652b328f008b331915ee5
Binary files /dev/null and b/my-vue-app/src/assets/img/M06.jpg differ
diff --git a/my-vue-app/src/assets/img/M07.jpg b/my-vue-app/src/assets/img/M07.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ad46b69e6e91fac60e279627cf4eab311ba5dc91
Binary files /dev/null and b/my-vue-app/src/assets/img/M07.jpg differ
diff --git a/my-vue-app/src/assets/img/M08.jpg b/my-vue-app/src/assets/img/M08.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9f713b0509a20ab6f3708d5ec5e65cd5cf90b2a9
Binary files /dev/null and b/my-vue-app/src/assets/img/M08.jpg differ
diff --git a/my-vue-app/src/assets/img/M09.jpg b/my-vue-app/src/assets/img/M09.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cc00672674b38d11647ad67c8104c4d6aa212343
Binary files /dev/null and b/my-vue-app/src/assets/img/M09.jpg differ
diff --git a/my-vue-app/src/assets/img/M10.jpg b/my-vue-app/src/assets/img/M10.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6145d47e69744e45751afa27b4f2af49d986a5db
Binary files /dev/null and b/my-vue-app/src/assets/img/M10.jpg differ
diff --git a/my-vue-app/src/assets/img/R01.jpg b/my-vue-app/src/assets/img/R01.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..90fdb916a163edae16f804c6586742b28a5591d9
Binary files /dev/null and b/my-vue-app/src/assets/img/R01.jpg differ
diff --git a/my-vue-app/src/assets/img/R02.jpg b/my-vue-app/src/assets/img/R02.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..15f1dbc137b3a4bae348eb2179b7bfc03562bcd7
Binary files /dev/null and b/my-vue-app/src/assets/img/R02.jpg differ
diff --git a/my-vue-app/src/assets/img/R03.jpg b/my-vue-app/src/assets/img/R03.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..45102d5cf21feb3d4cc1177dfae7132937463c38
Binary files /dev/null and b/my-vue-app/src/assets/img/R03.jpg differ
diff --git a/my-vue-app/src/assets/img/R04.jpg b/my-vue-app/src/assets/img/R04.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4de14537beee8ae48ed77bd6893138e7dd437279
Binary files /dev/null and b/my-vue-app/src/assets/img/R04.jpg differ
diff --git a/my-vue-app/src/assets/img/R05.jpg b/my-vue-app/src/assets/img/R05.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ab6397bf8d3b39ac20d0edd7f955e96d0080f6fd
Binary files /dev/null and b/my-vue-app/src/assets/img/R05.jpg differ
diff --git a/my-vue-app/src/assets/img/R06.jpg b/my-vue-app/src/assets/img/R06.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3d67a919f9ef36c5ba45f9303802f6e7c8c6a88c
Binary files /dev/null and b/my-vue-app/src/assets/img/R06.jpg differ
diff --git a/my-vue-app/src/assets/img/R07.jpg b/my-vue-app/src/assets/img/R07.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d535a0b12f63f70a146474eb7b8d3ac598b180b8
Binary files /dev/null and b/my-vue-app/src/assets/img/R07.jpg differ
diff --git a/my-vue-app/src/assets/img/R08.jpg b/my-vue-app/src/assets/img/R08.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..01dfaa95c38a2db192e9c02c2ba28f3e8809eb2e
Binary files /dev/null and b/my-vue-app/src/assets/img/R08.jpg differ
diff --git a/my-vue-app/src/assets/img/R09.jpg b/my-vue-app/src/assets/img/R09.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6d90bbbae071979aa9d22734e440956b0d8a5329
Binary files /dev/null and b/my-vue-app/src/assets/img/R09.jpg differ
diff --git a/my-vue-app/src/assets/img/R10.jpg b/my-vue-app/src/assets/img/R10.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..401f04c21d8f0d47d67c073d0791102afbf3f593
Binary files /dev/null and b/my-vue-app/src/assets/img/R10.jpg differ
diff --git a/my-vue-app/src/assets/img/bg2.jpg b/my-vue-app/src/assets/img/bg2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..05b024aa4e00584d3ff5f33f9f26c245f3c0d737
Binary files /dev/null and b/my-vue-app/src/assets/img/bg2.jpg differ
diff --git a/my-vue-app/src/assets/img/bg3.jpg b/my-vue-app/src/assets/img/bg3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6f36f32c34881e056bed42c9d51116cdffc782db
Binary files /dev/null and b/my-vue-app/src/assets/img/bg3.jpg differ
diff --git a/my-vue-app/src/assets/img/bg4.jpg b/my-vue-app/src/assets/img/bg4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..55c6e714ecc325b3f07e0b856e64e4715e5f8bac
Binary files /dev/null and b/my-vue-app/src/assets/img/bg4.jpg differ
diff --git "a/my-vue-app/src/assets/img/\346\262\231\345\217\221.jpg" "b/my-vue-app/src/assets/img/\346\262\231\345\217\221.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..03f0cb1cb7b28e0f5f521bc49d67e86d2b4bcf7c
Binary files /dev/null and "b/my-vue-app/src/assets/img/\346\262\231\345\217\221.jpg" differ
diff --git "a/my-vue-app/src/assets/img/\350\245\277\347\223\234.png" "b/my-vue-app/src/assets/img/\350\245\277\347\223\234.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4b2c6b8aae3fbb3deece9e01384dacfc49e2f644
Binary files /dev/null and "b/my-vue-app/src/assets/img/\350\245\277\347\223\234.png" differ
diff --git "a/my-vue-app/src/assets/\350\245\277\347\223\234.png" "b/my-vue-app/src/assets/\350\245\277\347\223\234.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4b2c6b8aae3fbb3deece9e01384dacfc49e2f644
Binary files /dev/null and "b/my-vue-app/src/assets/\350\245\277\347\223\234.png" differ
diff --git a/my-vue-app/src/components/a_loginPage.vue b/my-vue-app/src/components/a_loginPage.vue
index 05d7788f19464eb04794432f777a6956eee98c6d..e1eb3447f029054c4ef25151c0fd6d44faf580c8 100644
--- a/my-vue-app/src/components/a_loginPage.vue
+++ b/my-vue-app/src/components/a_loginPage.vue
@@ -26,11 +26,11 @@
         <el-form-item label="用户名" prop="username">
           <el-input v-model="registerForm.username"></el-input>
         </el-form-item>
-        <el-form-item label="新密码" prop="password">
+        <el-form-item label="密码" prop="password">
           <el-input type="password" v-model="registerForm.password"></el-input>
         </el-form-item>
-        <el-form-item label="输入新密码" prop="password">
-          <el-input type="password" v-model="rregisterForm.password"></el-input>
+        <el-form-item label="确认密码" prop="password">
+          <el-input type="password" v-model="registerForm.checkPassword"></el-input>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="register">注册</el-button>
@@ -41,6 +41,13 @@
 </template>
 
 <script>
+import axios from 'axios';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { ElMessage } from 'element-plus';
+
+const store=useStore()
+
 export default {
   data() {
     return {
@@ -52,24 +59,20 @@ export default {
       },
       registerForm: {
         username: '',
-        password: ''
-      },
-      rregisterForm: {
-        username: '',
-        password: ''
+        password: '',
+        checkPassword:''
       },
+      
       loginFormRules: {
         username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
         password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
       },
       registerFormRules: {
         username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
-      },
-      rregisterFormRules: {
-        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+        checkPassword:[{ required: true, message: '请确认密码', trigger: 'blur' }]
       }
+     
     };
   },
   methods: {
@@ -81,26 +84,126 @@ export default {
       this.isLoginFormVisible = false;
       this.isRegisterFormVisible = true;
     },
-    login() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          // 处理登录逻辑
-          console.log('登录成功');
-        } else {
-          console.log('表单验证失败');
-        }
-      });
-    },
+    // login() {
+    //   this.$refs.loginForm.validate(valid => {
+    //     if (valid) {
+    //       // 处理登录逻辑
+    //       console.log('登录成功');
+    //     } else {
+    //       console.log('表单验证失败');
+    //     }
+    //   });
+    // },
+        login(){
+
+          console.log("Login...123654")
+          console.log(this.loginForm.username)
+          console.log(this.loginForm.password)
+          //console.log(this.ruleFormRef)
+          axios.post("http://localhost:8081/userManage/login",null,{
+            params:{passWord:this.loginForm.password,
+                userName:this.loginForm.username}
+                
+              
+        }).then(response=>{
+          console.log(response.data);
+          //console.log(response.data[0].role);
+          if(response.data[0]==null)
+          {
+            console.log("用户登录失败")
+          }else
+          {
+            if(response.data[0].role=='普通用户')
+            {
+              console.log(response.data[0].role);
+              // 在登录成功后,将用户数据保存到Vuex的状态中
+              // console.log(store)
+              // console.log(this.$store)
+              // this.$store.state.userId=response.data[0].id
+              // console.log(this.$store.state.userId)
+              sessionStorage.setItem('userId', response.data[0].id)
+              console.log(sessionStorage.getItem('userId'))
+              this.$router.push({
+              path:'/u_mainPage'
+            })
+            }
+            else if(response.data[0].role=='管理员'){
+              console.log(response.data[0].role);
+              this.$router.push({
+              path:'/m_homePage'
+            })
+            }
+          }
+        })    
+          // if(this.ruleForm.pass==="admin"){
+          //   this.router.push({
+          //   path:'/Home'
+          // })
+          // }else{
+          //   this.router.push({
+          //   path:'/main'
+          // })
+          // }
+
+        },
     register() {
-      this.$refs.registerForm.validate(valid => {
-        if (valid) {
-          // 处理注册逻辑
-          console.log('注册成功');
-          path:'/u_mainPage';
-        } else {
-          console.log('表单验证失败');
-        }
-      });
+      // this.$refs.registerForm.validate(valid => {
+      //   if (valid) {
+      //     // 处理注册逻辑
+      //     console.log('注册成功');
+      //     path:'/u_mainPage';
+      //   } else {
+      //     console.log('表单验证失败');
+      //   }
+      // });
+      if((this.registerForm.username==null)||(this.registerForm.password!=this.registerForm.checkPassword))
+      {
+        console.log("请输入正确的信息")
+      }
+      else
+      {
+        console.log(this.registerForm.password)
+        console.log(this.registerForm.username)
+        axios.post("http://localhost:8081/userManage/registration",null,{
+            params:{
+              passWord:this.registerForm.password,
+              userName:this.registerForm.username
+              }
+        }).then(response=>{
+          console.log(response);
+          console.log(response.data);
+          //console.log(response.data[0].role);
+          // if(response.data==null)
+          // {
+          //   console.log("用户注册失败")
+          // }else
+          // {
+            if(response.data==1)
+            {
+              console.log("注册成功")
+               ElMessage({
+                   message: '用户注册成功!',
+                   type: 'success',
+               })
+              this.showLoginForm()
+              // this.router.push({
+              //   path:'/a_loginPage'
+              // })
+              
+            }
+            else if(response.data==0){
+              ElMessage({
+                   message: '注册失败!',
+                   type: 'waring',
+               })
+              console.log("注册失败")
+            //   this.router.push({
+            //   path:'/m_homePage'
+            // })
+            }
+          
+        })    
+      }
     }
   }
 };
diff --git a/my-vue-app/src/components/u_editPage.vue b/my-vue-app/src/components/u_editPage.vue
index d61b7972d0fc83a9a43b6cb5742b2d1aee000fbe..0432aec6fff31c27a985eab696ded8139e128923 100644
--- a/my-vue-app/src/components/u_editPage.vue
+++ b/my-vue-app/src/components/u_editPage.vue
@@ -6,8 +6,8 @@
       fileType="jpeg"
       toolBgc="#4ba4f6"
       :isModal="false"
-      :boxWidth="1200"
-      :boxHeight="500"
+      :boxWidth="700"
+      :boxHeight="300"
       :cutWidth="250"
       :cutHeight="250"
       :sizeChange="true"
diff --git a/my-vue-app/src/components/u_feedBackPage.vue b/my-vue-app/src/components/u_feedBackPage.vue
index edfb05d147d4aee2e3e62197dad17cf60f822dc0..237684c31ac4c5d0888d3de4ba232c3b1585acb2 100644
--- a/my-vue-app/src/components/u_feedBackPage.vue
+++ b/my-vue-app/src/components/u_feedBackPage.vue
@@ -18,6 +18,7 @@
 </template>
 <script>
 import { ref } from 'vue';
+import axios from 'axios'
 export default {
   name: 'SubmitSuggestion',
   setup() {
@@ -27,9 +28,18 @@ export default {
     const showPopup = () => {
       // 在这里处理提交建议的逻辑
       // 这里仅为示例,实际项目中需根据需求自行处理
+      console.log(suggestion.value)
       if (suggestion.value.trim() === '') {
         popupText.value = '建议不能为空';
       } else {
+        axios.post("http://localhost:8081/feedBack/AddFeedback",null,{
+          params:{describtion:suggestion.value,
+              user_id:sessionStorage.getItem('userId')
+            }
+        }).then(response=>{
+          console.log(response)
+
+        })
         popupText.value = `感谢您的支持和反馈!我们会认真考虑您的建议,并努力改进我们的服务。建议内容如下:${suggestion.value}`;
       }
       dialogVisible.value = true;
@@ -40,7 +50,8 @@ export default {
       popupText,
       showPopup
     };
-  }
+  },
+
 };
 </script>
 <style scoped>
diff --git a/my-vue-app/src/components/u_mainPage.vue b/my-vue-app/src/components/u_mainPage.vue
index 660d019038cea07ad2ec75bce3bc3f600b8a9de3..0d4dbcb5e6e8351d4bae7ffc27bfc85819a83c18 100644
--- a/my-vue-app/src/components/u_mainPage.vue
+++ b/my-vue-app/src/components/u_mainPage.vue
@@ -71,6 +71,7 @@
    import { reactive, toRefs } from 'vue';
    import { UserFilled } from '@element-plus/icons-vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
+   import axios from 'axios';
   //  import type { Action } from 'element-plus'
    export default{
     computed: {
@@ -81,7 +82,8 @@
     },
     data() {
     return {
-      massage:'fdsaf'
+      massage:'fdsaf',
+      title:""
     };
   },
      methods: {
@@ -92,18 +94,16 @@
       console.log(key, keyPath)
      },
      open(){
-       this.massage+='aaaa'
-  ElMessageBox.alert(this.massage, 'Title', {
-    // if you want to disable its autofocus
-    // autofocus: false,
-    confirmButtonText: 'OK',
-    // callback: (action: Action) => {
-    //   ElMessage({
-    //     type: 'info',
-    //     message: `action: ${action}`,
-    //   })
-    // },
-  })
+      axios.get('http://localhost:8081/userManage/selectAnnByMaxId').then(res=>{
+        console.log(res)
+        this.massage=res.data[0].content
+        this.title=res.data[0].title
+        ElMessageBox.alert(this.massage, this.title, {
+        confirmButtonText: 'OK', 
+        })
+      })
+       
+   
 }
     },
     mounted(){
diff --git a/my-vue-app/src/components/u_photosPage.vue b/my-vue-app/src/components/u_photosPage.vue
index 4a942ce88ec899a3325962e479eefd5816d5ba5f..b5b09f902bef7514290551f7d7554e667b066e7d 100644
--- a/my-vue-app/src/components/u_photosPage.vue
+++ b/my-vue-app/src/components/u_photosPage.vue
@@ -1,6 +1,5 @@
 <template>
-
-  <!-- 对话框:添加、修改功能 -->
+    <!-- 对话框:添加、修改功能 -->
   <el-dialog v-model="dialogFormVisible" title="新增相册">
            <el-form :model="form">
            <el-form-item label="相册名称" :label-width="formLabelWidth">
@@ -18,133 +17,221 @@
            </template>
        </el-dialog>
 
- <div><h1>我的相册</h1></div>
- <div>
+  <div><h1>我的相册</h1></div>
+   <div>
    <el-button type="primary" @click="handleAdd">新增相册</el-button>
    <el-button type="success"><RouterLink to="/u_defaultPhotoPage"><div>默认相册</div></RouterLink></el-button>
+   <el-button type="primary" @click="openFilePicker">上传照片</el-button>
+   <input ref="fileInput" type="file" style="display: none" @change="handleFileChange">
  </div>
- <div>
-   <el-menu :default-active="activeCategory" mode="horizontal" @select="handleCategorySelect" background-color="#545c64">
-     <el-menu-item v-for="category in categories" :key="category.id" :index="category.id">{{ category.name }}</el-menu-item>
-   </el-menu>
-
-   <el-row :gutter="20">
-     <el-col :span="6" v-for="photo in filteredPhotos" :key="photo.id">
-       <el-card :body-style="{ padding: '0px' }">
-         
-         <img :src="photo.url" style="width: 100%" @click="openPhoto(photo)">
-          <!-- 下拉框 -->
-          <el-select v-model="selectedValue" filterable placeholder="排序方式" @change="handleRequest">
-           <el-option
-             v-for="item in options"
-             :key="item.value"
-             :label="item.label"
-             :value="item.value"
-           />
-           </el-select>
-       </el-card>
-     </el-col>
+  <div>
+    <el-menu :default-active="activeCategory" mode="horizontal" @select="handleCategorySelect" background-color="#545c64">
+      <el-menu-item v-for="category in categories" :key="category.id" :index="category.id">{{ category.album_name }}</el-menu-item>
+    </el-menu>
 
-     <el-upload
-         class="avatar-uploader"
-         action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-         :show-file-list="false"
-         :on-success="handleAvatarSuccess"
-         :before-upload="beforeAvatarUpload"
-       >
-         <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-         <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-     </el-upload>
-   </el-row>
-   <el-dialog :visible.sync="dialogVisible" :before-close="closePhoto">
-     <img :src="selectedPhoto.url" style="width: 100%">
-   </el-dialog>
- </div> 
+    <el-row :gutter="20">
+      <el-col :span="6" v-for="photo in filteredPhotos" :key="photo.id">
+        <el-card :body-style="{ padding: '0px' }">
+          
+          <img :src="photo.path" style="width: 100%" @click="openPhoto(photo)">
+           <!-- 下拉框 -->
+           <el-select v-model="selectedValue" filterable placeholder="排序方式" @change="handleRequest">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+            </el-select>
+        </el-card>
+      </el-col>
+<!-- 
+      <el-upload
+          class="avatar-uploader"
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+      </el-upload> -->
+    </el-row>
+    <!-- <el-dialog :visible="dialogVisible" @update:visible="dialogVisible = $event" :before-close="closePhoto">
+      <img :src="selectedPhoto.url" style="width: 100%">
+    </el-dialog> -->
+  </div>
 
-     
-       
 </template>
 
 <script>
 import { reactive } from 'vue';
 import { ref } from 'vue'
 import { Plus } from '@element-plus/icons-vue'
+import axios from 'axios';
 
 export default {
- data() {
-   return {
-     categories: [
-       { id: 1, name: '风景' },
-       { id: 2, name: '动物' },
-       { id: 3, name: '人物' },
-     ],
-     photos: [
-       { id: 1, category: 1, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.9e45a633e95179a37c907fa2797999ad?rik=aMuPS4TunAh5ZA&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214Q2.jpg&ehk=P%2firfYpARc1fHht%2bWpapYR4W15p6SLABE8CBexoeon4%3d&risl=&pid=ImgRaw&r=0' },
-       { id: 2, category: 1, url: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.DOOxGtkUiW8QevWtAxsRtAHaEK?pid=ImgDet&rs=1' },
-       { id: 3, category: 2, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.b7e2aa7df9555d4777e3a04aa0bb8242?rik=O4HJ1yRYJYwcTg&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305130P1.jpg&ehk=PrtmnkVTBD6mGRhndwEhBOPfolKK6W9OVIPkX4J%2bTrM%3d&risl=&pid=ImgRaw&r=0' },
-       { id: 4, category: 2, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.462f061a9142a1dfcad938b0239a56bf?rik=fXziJWNywsZ1aQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131005.jpg&ehk=4nwV39CXlpLR%2fOmwYriWmyc86no2zgC9D9KVlSuRvv0%3d&risl=&pid=ImgRaw&r=0' },
-       { id: 5, category: 3, url: 'https://img.zcool.cn/community/0196395640045e6ac7259e0fc657f0.jpg@1280w_1l_2o_100sh.jpg' },
-       { id: 6, category: 3, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.44324efca6e852d9e09ceb46406c76e3?rik=s%2f2cbaShbrOpxA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fitbbs%2f1503%2f16%2fc22%2f3936655_1426478737629_mthumb.jpg&ehk=PlTEBr9xmKanJV6YELdm1Gbbtb1djCcwf8DEMFzRWgo%3d&risl=&pid=ImgRaw&r=0' },
-       { id: 7, category: 1, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.c2f6165e1acf6b986a20e8b676f13bdd?rik=Dm%2bD%2fgeM4oqgBw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303215045.jpg&ehk=sdIsCQj%2bvjKfUs%2fDw%2fZekILroLb1ALwbKghApSPIq4U%3d&risl=&pid=ImgRaw&r=0'},
-       { id: 8, category: 2, url: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/02/ChMkJlbKxZyIGFNMAATlhTeYCRsAALHYgOXS9sABOWd753.jpg'},
-       { id: 9, category: 3, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.0487cbf71da6269a55b4bd82eeea2b2d?rik=9PqZrG7dgzHlZg&riu=http%3a%2f%2fimg.daimg.com%2fuploads%2fallimg%2f160401%2f3-160401225608.jpg&ehk=M%2bUTMpstHRcSxJ8FeMBaNzlrnqc0TeFZGmAD0eeilTY%3d&risl=&pid=ImgRaw&r=0'},
-     ],
-     activeCategory: '1',
-     selectedPhoto: null,
-     dialogVisible: false,
-     dialogFormVisible:false, //对话框是否显示
-     form: {},
-   };
- },
- computed: {
-   filteredPhotos() {
-     return this.photos.filter(photo => photo.category === parseInt(this.activeCategory));
-   },
- },
- methods: {
-   handleCategorySelect(categoryId) {
-     this.activeCategory = categoryId;
-   },
-   openPhoto(photo) {
-     this.selectedPhoto = photo;
-     this.dialogVisible = true;
-   },
-   closePhoto(done) {
-     this.dialogVisible = false;
-     this.selectedPhoto = null;
-     done();
-   },
-   handleAdd(){   //新增相册
-               this.btnName = "新增"
-               this.title = "新增用户信息"
-               this.dialogFormVisible = true 
-               console.log("openHandleAdd")
-       
- },
- btnAddUpdate(form)
- {
-               console.log("新增操作")
-               var _this = this;
-               //接口
-               this.$http.post("$http").then(function(response){
-               console.log(response.data);
-               if(response.data == 1){
+  data() {
+    return {
+      categories: [
+        // { id: 1, album_name: '风景' },
+        // { id: 2, album_name: '动物' },
+        // { id: 3, album_name: '人物' },
+      ],
+      photos: [
+      //   { id: 1, album_id: 4, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.9e45a633e95179a37c907fa2797999ad?rik=aMuPS4TunAh5ZA&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214Q2.jpg&ehk=P%2firfYpARc1fHht%2bWpapYR4W15p6SLABE8CBexoeon4%3d&risl=&pid=ImgRaw&r=0' },
+      //   { id: 2, album_id: 4, path: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.DOOxGtkUiW8QevWtAxsRtAHaEK?pid=ImgDet&rs=1' },
+      //   { id: 3, album_id: 5, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.b7e2aa7df9555d4777e3a04aa0bb8242?rik=O4HJ1yRYJYwcTg&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305130P1.jpg&ehk=PrtmnkVTBD6mGRhndwEhBOPfolKK6W9OVIPkX4J%2bTrM%3d&risl=&pid=ImgRaw&r=0' },
+      //   { id: 4, album_id: 5, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.462f061a9142a1dfcad938b0239a56bf?rik=fXziJWNywsZ1aQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131005.jpg&ehk=4nwV39CXlpLR%2fOmwYriWmyc86no2zgC9D9KVlSuRvv0%3d&risl=&pid=ImgRaw&r=0' },
+      //   { id: 5, album_id: 3, path: 'https://img.zcool.cn/community/0196395640045e6ac7259e0fc657f0.jpg@1280w_1l_2o_100sh.jpg' },
+      //   { id: 6, album_id: 3, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.44324efca6e852d9e09ceb46406c76e3?rik=s%2f2cbaShbrOpxA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fitbbs%2f1503%2f16%2fc22%2f3936655_1426478737629_mthumb.jpg&ehk=PlTEBr9xmKanJV6YELdm1Gbbtb1djCcwf8DEMFzRWgo%3d&risl=&pid=ImgRaw&r=0' },
+      //   { id: 7, album_id: 1, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.c2f6165e1acf6b986a20e8b676f13bdd?rik=Dm%2bD%2fgeM4oqgBw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303215045.jpg&ehk=sdIsCQj%2bvjKfUs%2fDw%2fZekILroLb1ALwbKghApSPIq4U%3d&risl=&pid=ImgRaw&r=0'},
+      //   { id: 8, album_id: 2, path: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/02/ChMkJlbKxZyIGFNMAATlhTeYCRsAALHYgOXS9sABOWd753.jpg'},
+      //   { id: 9, album_id: 3, path: 'https://ts1.cn.mm.bing.net/th/id/R-C.0487cbf71da6269a55b4bd82eeea2b2d?rik=9PqZrG7dgzHlZg&riu=http%3a%2f%2fimg.daimg.com%2fuploads%2fallimg%2f160401%2f3-160401225608.jpg&ehk=M%2bUTMpstHRcSxJ8FeMBaNzlrnqc0TeFZGmAD0eeilTY%3d&risl=&pid=ImgRaw&r=0'},
+      ],
+      activeCategory: '1',
+      selectedPhoto: null,
+      dialogVisible: false,
+      dialogFormVisible:false,
+      form:{},
+    };
+  },
+  computed: {
+    filteredPhotos() {
+      console.log("filter:")
+      console.log(this.photos);
+      this.photos=this.photos.filter(photo => photo.album_id === parseInt(this.activeCategory));
+      // console.log(this.photos[0].path);
+      console.log(this.photos)
+      return this.photos;
+    },
+  },
+  methods: {
+    handleFileChange(event) {
+      // 获取选择的文件
+      const file = event.target.files[0];
+      
+      // 在这里执行你的文件处理逻辑,比如上传文件等
+      console.log('选择的文件:', file);
+      
+      const formData = new FormData();
+      formData.append('file', file); // 将文件对象添加到表单数据中
+      // formData.append('brand', ""); // 将文件对象添加到表单数据中
+            console.log("formData")
+            console.log(formData)
+        // 发送请求
+        axios.postForm(`http://localhost:8081/Photo/upload`, formData,{
+          params:{id:sessionStorage.getItem("userId")}
+        })
+          .then(response => {
+            console.log(response)
+            console.log("formData")
+            console.log(formData)
+            // 文件上传成功的处理逻辑
+          })
+          .catch(error => {
+            // 文件上传失败的处理逻辑
+          });
+    },
+      handleAdd(){   //新增相册
+              this.btnName = "新增"
+              this.title = "新增用户信息"
+              this.dialogFormVisible = true
+              console.log("openHandleAdd")
+      
+      },
+
+     openFilePicker() {
+      // 触发文件选择器的点击事件
+      this.$refs.fileInput.click();
+    },
+
+    handleCategorySelect(categoryId) {
+      this.activeCategory = categoryId;
+      console.log("选择了",categoryId,"相册")
+      console.log(categoryId)
+      axios.post("http://localhost:8081/Photo/FindPhotoByAlbumId",null,{
+            params:{id:categoryId}
+        }).then(response=>{
+          console.log(response)
+          this.photos=response.data
+          //this.photos.path="my-vue-app\\src\\photos\\"+response.data.path
+          // console.log("..\\photos\\"+response.data[0].path)
+          // console.log("C:\Users\张林涛\Desktop\PCMS\src\main\resources\static\photo\\",this.photos[0].path);
+          for(let a=0;a<response.data.length;a++)
+          {
+            this.photos[a].path="/src/assets/img/"+response.data[a].path
+            console.log("zlt123")
+            console.log( this.photos[a].path);
+            //this.photo[a].path='assets\\bg1.jpeg'
+          }
+          console.log(this.photos)
+        })
+    },
+    openPhoto(photo) {
+      this.selectedPhoto = photo;
+      this.dialogVisible = true;
+    },
+    closePhoto(done) {
+      this.dialogVisible = false;
+      this.selectedPhoto = null;
+      done();
+    },
+     btnAddUpdate(form){
+        const album={
+        "album_discribtion": form.albumDescript,
+        "album_name": form.albumName,
+        "id": 1,
+        "photos_num": 0,
+        "user_id": sessionStorage.getItem('userId')
+      }
+
+      axios.post("http://localhost:8081/Photo/AddAlbum",album).then(response=>{
+            console.log(response)
+            if(response.data == 1){
+              
                ElMessage({
                    message: '用户信息添加成功!',
                    type: 'success',
                })
-               }
-               else{
+            }
+            else{
                ElMessage({
                    message: '用户信息添加失败!',
                    type: 'waring',
                })
-               }
-               } ) 
-               console.log(this.form)
-           },
+            }
+        })
+      // console.log("新增操作")
+      // var _this = this;
+      // //接口
+      // this.$http.post("$http").then(function(response){
+      // console.log(response.data);
+      // if(response.data == 1){
+      // ElMessage({
+      //     message: '用户信息添加成功!',
+      //     type: 'success',
+      // })
+      // }
+      // else{
+      // ElMessage({
+      //     message: '用户信息添加失败!',
+      //     type: 'waring',
+      // })
+      // }
+      // } ) 
+      // console.log(this.form)
+  },
  },
- 
+  mounted(){
+    console.log(sessionStorage.getItem('userId'))
+    axios.post("http://localhost:8081/Photo/FindAlbumByUser_id",null,{
+            params:{id:sessionStorage.getItem('userId')}
+        }).then(response=>{
+          console.log(response)
+          this.categories=response.data
+        })
+  },
 };
 </script>