[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-G7CRiFiL":3,"public-project-articles-G7CRiFiL":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},1086,"G7CRiFiL",54,"02. 导入并运行项目脚手架","## 软件\n\n\u003Cfont style=\"color:rgb(44, 62, 80);\">jdk21、NodeJS18+、MySQL8.0\u003C\u002Ffont>\n\n\u003Cfont style=\"color:rgb(44, 62, 80);\">Navicat、Maven3.8\u003C\u002Ffont>\n\n\u003Cfont style=\"color:rgb(44, 62, 80);\">IDEA2024.1\u003C\u002Ffont>\n\n## 解压脚手架\n\nD:\u002F毕设\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765266416751-e6e5fada-a4f6-498f-a1d5-896ac4f75db9.png)\n\n## 导入 SQL\n\n新建数据库 **school_share**\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765266832692-9901fab9-51bf-4fa7-91f5-a79b06a5dbbf.png)\n\n执行数据库脚本 \n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765266887255-005b7c78-37aa-48a8-b1e3-5773e0c6e0d0.png)\n\n## 运行 Springboot 工程\n\n在网上找一下 IDEA 的破解教程，要求安装 IDEA 的旗舰版\n\n点击按钮导入 MAVEN 依赖\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765266468197-f4c072ec-ee20-4abe-af11-a484c8b24e21.png)\n\n\n\n打开 SpringBootApplication 验证下\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765266559125-7740dec7-2d41-45ab-b4f6-3f1758f383f3.png)\n\n\n\n设置编码 UTF-8\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765266605520-e297b8d9-05f7-4987-b70d-c1b1e4f4d7d3.png)\n\n\n\n安装插件\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765266637441-1090acc5-8588-4e09-9b84-1877db05ae37.png)  \n\n设置 JDK\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765266724275-979f364f-9407-4693-99f6-ad15b0232466.png)\n\n修改 application.yml 配置\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765266774979-9c2f931a-2d9c-4de7-a901-39050a984c5d.png)\n\n\n\n修改 IDEA 的默认菜单样式  views -> Appearance\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765266985190-44a8761d-cb6a-4cbd-966e-71dbfc3f4dea.png)\n\n\n\n知道什么是  IDEA 的控制台\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765267079044-7d2d752b-ce43-463f-9ca3-02cbd8faea41.png)\n\n## 运行 Vue 工程\n\n配置 npm 的国内镜像\n\n> npm config set registry [https:\u002F\u002Fregistry.npmmirror.com](https:\u002F\u002Fregistry.npmmirror.com)\n\n通过 **npm i **安装 vue 工程的依赖\n\n\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765267292711-e936b80c-3181-4142-a2cc-78f9a33f4e50.png)\n\n\n\n后续可以通过快捷 方式启动 vue\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765267328766-35dbbbc1-4e80-486a-9aca-dd9a3ec33520.png)\n\n\n\n打开 vue 页面\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765267369018-2fa43274-15b4-4c4a-a3ef-64ffb3a72b6f.png)\n\n\n\n登录系统  输入 admin   admin\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765267423959-f2e794ba-3593-438b-aa04-a5481245b671.png)\n\n\n\n如果出现问题，一定要去看 idea 的控制台错误，**一般都是数据库的错误（配置的数据库密码错误，数据库服务没启动，数据库 sql 没执行，没创建数据库...）**\n\n------\n\n启动成功\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765267614373-d880a364-36af-4644-afcd-133fd929c820.png)\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765267635214-23962a5c-b287-4274-a847-e0fce183417c.png)\n\n## logo\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765183551403-03b9e4b1-8f1c-4430-bee6-24c1917ebbe7.png)\n\n## 系统样式\n\n头部 div 设置： **background-color:** #080c23;  **color: white; **\n\nmenu 外层 div 设置： **background-color: #001529;**\n\n```css\n.el-menu {\n  background-color: #001529;\n}\n.el-menu-item {\n  color: #ddd;\n}\n:deep(.el-sub-menu__title) {\n  color: #ddd;\n}\n:deep(.el-sub-menu__title):hover {\n  background-color: #001529;\n}\n.el-menu--inline .el-menu-item {\n  background-color: #000c17;\n}\n:deep(.el-menu-item.is-active) {\n  background-color: #1890ff;\n  color: #fff;\n}\n.el-menu-item:not(.is-active):hover {\n  background-color: #001529;\n  color: #fff;\n}\n```\n\n\n\n最后完成的效果：\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765268149459-3e212f96-0b45-4746-8894-23ef07fc74a5.png)\n\n## Manager.vue 源码\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv style=\"height: 60px; background-color: #080c23;  color: white;  display: flex; align-items: center;\">\n      \u003Cdiv style=\"flex: 1\">\n        \u003Cdiv style=\"padding-left: 20px; display: flex; align-items: center\">\n          \u003Cimg src=\"@\u002Fassets\u002Fimgs\u002Flogo.png\" alt=\"\" style=\"width: 40px\">\n          \u003Cdiv style=\"font-weight: bold; font-size: 24px; margin-left: 5px\">校园物品分享系统\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"width: fit-content; padding-right: 10px; display: flex; align-items: center;\">\n        \u003Cimg style=\"width: 40px; height: 40px; border-radius: 50%\" :src=\"data.user.avatar || 'https:\u002F\u002Fcube.elemecdn.com\u002F3\u002F7c\u002F3ea6beec64369c2642b92c6726f1epng.png'\" alt=\"\">\n        \u003Cspan style=\"margin-left: 5px\">{{ data.user.name }}\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv style=\"display: flex\">\n      \u003Cdiv style=\"width: 200px; background-color: #001529; min-height: calc(100vh - 60px)\">\n        \u003Cel-menu\n            router\n            style=\"border: none\"\n            :default-active=\"router.currentRoute.value.path\"\n            :default-openeds=\"['user']\"\n        >\n          \u003Cel-menu-item index=\"\u002Fmanager\u002Fhome\">\n            \u003Cel-icon>\u003CHomeFilled \u002F>\u003C\u002Fel-icon>\n            \u003Cspan>系统首页\u003C\u002Fspan>\n          \u003C\u002Fel-menu-item>\n          \u003Cel-sub-menu index=\"user\">\n            \u003Ctemplate #title>\n              \u003Cel-icon>\u003CMemo \u002F>\u003C\u002Fel-icon>\n              \u003Cspan>用户管理\u003C\u002Fspan>\n            \u003C\u002Ftemplate>\n            \u003Cel-menu-item index=\"\u002Fmanager\u002Fadmin\">\n              \u003Cel-icon>\u003CUser \u002F>\u003C\u002Fel-icon>\n              \u003Cspan>管理员信息\u003C\u002Fspan>\n            \u003C\u002Fel-menu-item>\n          \u003C\u002Fel-sub-menu>\n          \u003Cel-menu-item index=\"\u002Fmanager\u002Fperson\">\n            \u003Cel-icon>\u003CUser \u002F>\u003C\u002Fel-icon>\n            \u003Cspan>个人资料\u003C\u002Fspan>\n          \u003C\u002Fel-menu-item>\n          \u003Cel-menu-item index=\"\u002Fmanager\u002Fpassword\">\n            \u003Cel-icon>\u003CLock \u002F>\u003C\u002Fel-icon>\n            \u003Cspan>修改密码\u003C\u002Fspan>\n          \u003C\u002Fel-menu-item>\n          \u003Cel-menu-item index=\"\u002Flogin\" @click=\"logout\">\n            \u003Cel-icon>\u003CSwitchButton \u002F>\u003C\u002Fel-icon>\n            \u003Cspan>退出系统\u003C\u002Fspan>\n          \u003C\u002Fel-menu-item>\n        \u003C\u002Fel-menu>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv style=\"flex: 1; width: 0; background-color: #f8f8ff; padding: 10px\">\n        \u003Crouter-view @updateUser=\"updateUser\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport router from \"@\u002Frouter\";\nimport {ElMessage} from \"element-plus\";\n\nconst data = reactive({\n  user: JSON.parse(localStorage.getItem('system-user') || '{}')\n})\n\nif (!data.user?.id) {\n  ElMessage.error('请登录！')\n  router.push('\u002Flogin')\n}\n\nconst updateUser = () => {\n  data.user = JSON.parse(localStorage.getItem('system-user') || '{}')\n}\n\nconst logout = () => {\n  ElMessage.success('退出成功')\n  localStorage.removeItem('system-user')\n  router.push('\u002Flogin')\n}\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.el-menu {\n  background-color: #001529;\n}\n.el-menu-item {\n  color: #ddd;\n}\n:deep(.el-sub-menu__title) {\n  color: #ddd;\n}\n:deep(.el-sub-menu__title):hover {\n  background-color: #001529;\n}\n.el-menu--inline .el-menu-item {\n  background-color: #000c17;\n}\n:deep(.el-menu-item.is-active) {\n  background-color: #1890ff;\n  color: #fff;\n}\n.el-menu-item:not(.is-active):hover {\n  background-color: #001529;\n  color: #fff;\n}\n\n:deep(th)  {\n  color: #333;\n}\n\u003C\u002Fstyle>\n```\n\n","coding",1,670,2119,"2025-12-09 16:59:49","2026-05-03 22:49:02","基于SpringBoot3+Vue3的校园物品分享系统","campus-item-sharing",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,28,35,42,50,57,64,71,78,85,92,99],{"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},1085,"bKvz3GMB","01. 校园物品分享系统介绍",1584,2118,"2026-04-01 22:12:21",{"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":29,"uuid":30,"project_id":6,"title":31,"type":9,"status":10,"public_enabled":10,"views":32,"sort":33,"created_at":34,"updated_at":14,"project_title":15,"project_slug":16},1087,"pgDLuOpz","03. 开发普通用户信息管理功能",544,2121,"2025-12-09 16:59:38",{"id":36,"uuid":37,"project_id":6,"title":38,"type":9,"status":10,"public_enabled":10,"views":39,"sort":40,"created_at":41,"updated_at":14,"project_title":15,"project_slug":16},1090,"2l7FVzgx","04. 开发普通用户登录、注册、个人信息、修改密码功能",365,2131,"2025-12-10 16:11:48",{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":49,"project_title":15,"project_slug":16},1091,"l5SB4JYK","05. 开发系统公告管理功能",417,2132,"2025-12-10 16:12:08","2026-05-07 15:36:12.649662+00",{"id":51,"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},1098,"mXLOXdBC","06. 开发物品分类信息管理功能",297,2143,"2025-12-11 16:37:57",{"id":58,"uuid":59,"project_id":6,"title":60,"type":9,"status":10,"public_enabled":10,"views":61,"sort":62,"created_at":63,"updated_at":14,"project_title":15,"project_slug":16},1099,"nj87VT4L","07. 开发物品信息管理功能",406,2144,"2025-12-11 16:38:16",{"id":65,"uuid":66,"project_id":6,"title":67,"type":9,"status":10,"public_enabled":10,"views":68,"sort":69,"created_at":70,"updated_at":14,"project_title":15,"project_slug":16},1107,"nGHKfpf4","08. 开发用户端物品展示功能",329,2162,"2025-12-15 17:27:07",{"id":72,"uuid":73,"project_id":6,"title":74,"type":9,"status":10,"public_enabled":10,"views":75,"sort":76,"created_at":77,"updated_at":14,"project_title":15,"project_slug":16},1123,"A6caJxFd","09. 开发物品申请交换功能",322,2196,"2025-12-19 16:16:03",{"id":79,"uuid":80,"project_id":6,"title":81,"type":9,"status":10,"public_enabled":10,"views":82,"sort":83,"created_at":84,"updated_at":14,"project_title":15,"project_slug":16},1135,"s5I1gomY","10. 开发物品收藏功能",285,2223,"2025-12-23 17:38:15",{"id":86,"uuid":87,"project_id":6,"title":88,"type":9,"status":10,"public_enabled":10,"views":89,"sort":90,"created_at":91,"updated_at":14,"project_title":15,"project_slug":16},1159,"qadunvVA","11. 开发论坛帖子管理功能",263,2266,"2025-12-30 16:08:47",{"id":93,"uuid":94,"project_id":6,"title":95,"type":9,"status":10,"public_enabled":10,"views":96,"sort":97,"created_at":98,"updated_at":14,"project_title":15,"project_slug":16},1202,"CpPqHdiT","12. 开发论坛帖子展示功能",220,2339,"2026-01-19 17:04:21",{"id":100,"uuid":101,"project_id":6,"title":102,"type":9,"status":10,"public_enabled":10,"views":103,"sort":104,"created_at":105,"updated_at":14,"project_title":15,"project_slug":16},1203,"7YABYvbd","13. 开发论坛帖子点赞和评论功能",239,2340,"2026-01-19 17:04:37"]