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>