[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-BkumMnOk":3,"public-project-articles-BkumMnOk":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},30,"BkumMnOk",26,"13. 开发个人资料功能","\n# 学生管理上传头像\n\n```vue\n\u003Cel-upload action=\"http:\u002F\u002Flocalhost:9090\u002Ffiles\u002Fupload\" list-type=\"picture\" :on-success=\"handleImgUploadSuccess\">\n  \u003Cel-button type=\"primary\">上传头像\u003C\u002Fel-button>\n\u003C\u002Fel-upload>\n```\n\n```java\nconst handleImgUploadSuccess = (res) => {\n  data.form.avatar = res.data\n}\n```\n\n在表格里显示图片\n\n```vue\n\u003Cel-table-column prop=\"avatar\" label=\"头像\">\n  \u003Ctemplate #default=\"scope\">\n    \u003Cel-image v-if=\"scope.row.avatar\" :src=\"scope.row.avatar\" :preview-src-list=\"[scope.row.avatar]\" style=\"width: 40px; height: 40px; border-radius: 5px\">\u003C\u002Fel-image>\n  \u003C\u002Ftemplate>\n\u003C\u002Fel-table-column>\n```\n\n# 个人资料\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv class=\"card\" style=\"width: 50%; padding: 40px\">\n      \u003Cel-form :model=\"data.form\" ref=\"formRef\" label-width=\"100px\" label-position=\"right\"\n               style=\"padding-right: 40px\">\n        \u003Cel-form-item label=\"学生头像\">\n          \u003Cel-upload class=\"avatar-uploader\" action=\"http:\u002F\u002Flocalhost:9090\u002Ffiles\u002Fupload\" :show-file-list=\"false\"\n                     :on-success=\"handleImgUploadSuccess\">\n            \u003Cimg v-if=\"data.form.avatar\" :src=\"data.form.avatar\" class=\"avatar\">\n            \u003Cel-icon v-else class=\"avatar-uploader-icon\">\u003CPlus \u002F>\u003C\u002Fel-icon>\n          \u003C\u002Fel-upload>\n        \u003C\u002Fel-form-item>\n        \u003Cel-form-item label=\"学生账号\" prop=\"username\">\n          \u003Cel-input v-model=\"data.form.username\" autocomplete=\"off\" disabled \u002F>\n        \u003C\u002Fel-form-item>\n        \u003Cel-form-item label=\"学生密码\" prop=\"password\">\n          \u003Cel-input show-password v-model=\"data.form.password\" autocomplete=\"off\"\u002F>\n        \u003C\u002Fel-form-item>\n        \u003Cel-form-item label=\"学生名称\">\n          \u003Cel-input v-model=\"data.form.name\" autocomplete=\"off\"\u002F>\n        \u003C\u002Fel-form-item>\n        \u003Cel-form-item label=\"手机号\">\n          \u003Cel-input v-model=\"data.form.phone\" autocomplete=\"off\"\u002F>\n        \u003C\u002Fel-form-item>\n        \u003Cel-form-item label=\"邮箱\">\n          \u003Cel-input v-model=\"data.form.email\" autocomplete=\"off\"\u002F>\n        \u003C\u002Fel-form-item>\n        \u003Cel-form-item label=\"性别\">\n          \u003Cel-radio-group v-model=\"data.form.sex\">\n            \u003Cel-radio label=\"男\">\u003C\u002Fel-radio>\n            \u003Cel-radio label=\"女\">\u003C\u002Fel-radio>\n          \u003C\u002Fel-radio-group>\n        \u003C\u002Fel-form-item>\n        \u003Cel-form-item label=\"生日\">\n          \u003Cel-date-picker style=\"width: 100%\" format=\"YYYY-MM-DD\" value-format=\"YYYY-MM-DD\"\n                          v-model=\"data.form.birth\">\u003C\u002Fel-date-picker>\n        \u003C\u002Fel-form-item>\n        \u003Cel-form-item>\n          \u003Cel-button type=\"primary\" @click=\"update\">保 存\u003C\u002Fel-button>\n        \u003C\u002Fel-form-item>\n      \u003C\u002Fel-form>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport {reactive} from \"vue\";\nimport request from \"@\u002Futils\u002Frequest\";\nimport {ElMessage} from \"element-plus\";\nimport router from \"@\u002Frouter\";\nimport {Plus} from \"@element-plus\u002Ficons-vue\"\n\nconst data = reactive({\n  form: JSON.parse(localStorage.getItem('student-user') || \"{}\")\n})\n\nconst handleImgUploadSuccess = (res) => {\n  data.form.avatar = res.data\n}\n\nconst update = () => {\n  request.put('\u002Fstudent\u002Fupdate', data.form).then(res => {\n    if (res.code === '200') {\n      ElMessage.success(\"操作成功\")\n      router.push('\u002Flogin')\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n\u003C\u002Fscript>\n\n\u003Cstyle>\n.avatar-uploader .el-upload {\n  border: 1px dashed #d9d9d9;\n  border-radius: 6px;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n}\n.avatar-uploader .el-upload:hover {\n  border-color: #409EFF;\n}\n.avatar-uploader-icon {\n  font-size: 28px;\n  color: #8c939d;\n  width: 100px;\n  height: 100px;\n  line-height: 100px;\n  text-align: center;\n}\n.avatar {\n  width: 100px;\n  height: 100px;\n  display: block;\n}\n\u003C\u002Fstyle>\n```\n\nManager 改了点东西\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1700577001223-797fadb8-d1ff-4aad-91e7-03265f4d6212.png#averageHue=%232d2c2b&clientId=ud4cd09fc-e8bd-4&from=paste&height=127&id=u37cf27b1&originHeight=159&originWidth=1352&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=32436&status=done&style=none&taskId=u716ebf63-17de-49a5-84cd-a4873015128&title=&width=1081.6)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1700577016180-c4c18924-fa50-46b9-a7c1-e28e6fe39ee6.png#averageHue=%232d2c2b&clientId=ud4cd09fc-e8bd-4&from=paste&height=441&id=u413618ac&originHeight=551&originWidth=1032&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=64936&status=done&style=none&taskId=u67efc939-4cfa-4c1b-a7e2-c0ca8a96002&title=&width=825.6)\n","coding",1,980,31,"2024-04-16 02:36:03","2026-05-03 22:49:02","SpringBoot+Vue3的学生成绩管理系统","student-performance",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,33,39,45,51,57,63,68,74,80,86,91,92,98,104],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":14,"project_title":15,"project_slug":16},18,"7r0zrxqF","01. 学生成绩管理系统介绍",3753,19,"2025-01-09 10:22:30",{"id":25,"uuid":28,"project_id":6,"title":29,"type":9,"status":10,"public_enabled":10,"views":30,"sort":31,"created_at":32,"updated_at":14,"project_title":15,"project_slug":16},"h5U5WN1A","02. 脚手架介绍",3957,20,"2025-01-09 10:22:49",{"id":31,"uuid":34,"project_id":6,"title":35,"type":9,"status":10,"public_enabled":10,"views":36,"sort":37,"created_at":38,"updated_at":14,"project_title":15,"project_slug":16},"aKzqZqzY","03. 实现登录功能",3607,21,"2024-04-16 02:36:48",{"id":37,"uuid":40,"project_id":6,"title":41,"type":9,"status":10,"public_enabled":10,"views":42,"sort":43,"created_at":44,"updated_at":14,"project_title":15,"project_slug":16},"xve1cq5m","04. 开发课程管理页面",1907,22,"2024-04-16 02:36:40",{"id":43,"uuid":46,"project_id":6,"title":47,"type":9,"status":10,"public_enabled":10,"views":48,"sort":49,"created_at":50,"updated_at":14,"project_title":15,"project_slug":16},"KUfmmtjB","05. 开发课程分页查询接口",1303,23,"2024-04-16 02:36:36",{"id":49,"uuid":52,"project_id":6,"title":53,"type":9,"status":10,"public_enabled":10,"views":54,"sort":55,"created_at":56,"updated_at":14,"project_title":15,"project_slug":16},"5aLIaQCP","06. 开发课程前后台数据对接",1040,24,"2024-04-16 02:36:32",{"id":55,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},"dTwkIyqR","07. 开发课程新增和编辑功能",990,25,"2024-04-16 02:36:27",{"id":61,"uuid":64,"project_id":6,"title":65,"type":9,"status":10,"public_enabled":10,"views":66,"sort":6,"created_at":67,"updated_at":14,"project_title":15,"project_slug":16},"NlyNo5n8","08. 开发课程管理删除功能",666,"2024-04-16 02:36:23",{"id":6,"uuid":69,"project_id":6,"title":70,"type":9,"status":10,"public_enabled":10,"views":71,"sort":72,"created_at":73,"updated_at":14,"project_title":15,"project_slug":16},"dDLZGpA4","09. 开发学生登录功能",1019,27,"2024-04-16 02:36:20",{"id":72,"uuid":75,"project_id":6,"title":76,"type":9,"status":10,"public_enabled":10,"views":77,"sort":78,"created_at":79,"updated_at":14,"project_title":15,"project_slug":16},"5qCBv54l","10. 开发学生注册功能",811,28,"2024-04-16 02:36:15",{"id":78,"uuid":81,"project_id":6,"title":82,"type":9,"status":10,"public_enabled":10,"views":83,"sort":84,"created_at":85,"updated_at":14,"project_title":15,"project_slug":16},"smeYDA8N","11. 开发学生管理功能",1060,29,"2024-04-16 02:36:10",{"id":84,"uuid":87,"project_id":6,"title":88,"type":9,"status":10,"public_enabled":10,"views":89,"sort":4,"created_at":90,"updated_at":14,"project_title":15,"project_slug":16},"eji2Bt8v","12. 开发文件上传下载功能",914,"2024-04-16 02:36:07",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":12,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},"C7ux2BRH","14. 开发学生选课功能",1221,32,"2024-04-16 02:35:58",{"id":96,"uuid":99,"project_id":6,"title":100,"type":9,"status":10,"public_enabled":10,"views":101,"sort":102,"created_at":103,"updated_at":14,"project_title":15,"project_slug":16},"fLHT6xiE","15. 开发成绩管理功能",1253,33,"2024-04-16 02:35:54",{"id":105,"uuid":106,"project_id":6,"title":107,"type":9,"status":10,"public_enabled":10,"views":108,"sort":109,"created_at":110,"updated_at":111,"project_title":15,"project_slug":16},56,"k3gvEqlV","基于SpringBoot+Vue3的学生成绩管理系统资料汇总",355,100,"2024-12-26 16:23:07","2026-05-07 15:36:12.649662+00"]