[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-cwsTdvo9":3,"public-project-articles-cwsTdvo9":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},499,"cwsTdvo9",47,"06. Vue3搭建后台管理系统","## 本节课做完后你可以达到这样效果\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728892705704-554c3c08-ebe1-47a9-a2d3-e21b61765d8f.png)\n\n## 搭建后台基本框架\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728889303279-dcc5b40c-be6e-4d14-8ec0-3672b5b93f99.png)\n\n## 配置导航菜单\n\n点击 menu 里面的某一项 跳转页面怎么做？\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728891026302-dc657419-8510-45cd-8ba7-8f9882aa2052.png)\n\n高亮显示当前展示的路由\n\n可以通过 **router.currentRoute.value.path** 获取当前展示的路由\n\n```vue\n:default-active=\"router.currentRoute.value.path\"\n```\n\n\n\n图片取色器\n\n[https:\u002F\u002Fwww.jyshare.com\u002Ffront-end\u002F6214\u002F#65ae8f](https:\u002F\u002Fwww.jyshare.com\u002Ffront-end\u002F6214\u002F#65ae8f)\n\n#e6ecf7\n\n## 主体区域\n\n配置一个 card 卡片样式\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1728890394675-36b32b00-dd74-4bbd-9107-9079d036db88.png)\n\n```vue\n.card {\n    background-color: white;\n    padding: 10px;\n    border-radius: 5px;\n    box-shadow: 0 0 8px rgba(0, 0, 0, .12);\n}\n```\n\n## 配置标题和 Logo\n\n头像 url：\n\n\u003Cfont style=\"color:rgb(3, 47, 98);background-color:rgb(245, 247, 250);\">https:\u002F\u002Fcube.elemecdn.com\u002F3\u002F7c\u002F3ea6beec64369c2642b92c6726f1epng.png\u003C\u002Ffont>\n\n## \u003Cfont style=\"color:rgb(3, 47, 98);background-color:rgb(245, 247, 250);\">本节课源码 Manager.vue\u003C\u002Ffont>\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!--  头部开始 -->\n    \u003Cdiv style=\"height: 60px; background-color: #3c7fff; display: flex; align-items: center\">\n      \u003Cdiv style=\"width: 200px; display: flex; align-items: center; padding-left: 15px\">\n        \u003Cimg style=\"width: 40px\" src=\"@\u002Fassets\u002Flogo.png\" alt=\"\">\n        \u003Cspan style=\"font-size: 22px; color: white; margin-left: 5px\">后台管理系统\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"flex: 1\">\u003C\u002Fdiv>\n      \u003Cdiv style=\"width: fit-content; display: flex; align-items: center; padding-right: 10px\">\n        \u003Cimg src=\"https:\u002F\u002Fcube.elemecdn.com\u002F3\u002F7c\u002F3ea6beec64369c2642b92c6726f1epng.png\" alt=\"\" style=\"width: 40px; height: 40px\">\n        \u003Cspan style=\"color: white; margin-left: 5px\">青哥哥\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003C!--  头部结束 -->\n\n    \u003C!-- 下面部分开始 -->\n    \u003Cdiv style=\"display: flex\">\n      \u003C!-- 左侧导航菜单开始 -->\n      \u003Cdiv style=\"width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)\">\n        \u003Cel-menu router :default-active=\"router.currentRoute.value.path\" :default-openeds=\"['1']\" style=\"border: 0\">\n          \u003Cel-menu-item index=\"\u002Fmanager\u002Fhome\">\n            \u003Cel-icon>\u003CHouse \u002F>\u003C\u002Fel-icon>\n            系统首页\n          \u003C\u002Fel-menu-item>\n          \u003Cel-menu-item index=\"\u002Fmanager\u002Fdata\">\n            \u003Cel-icon>\u003CDataAnalysis \u002F>\u003C\u002Fel-icon>\n            数据统计\n          \u003C\u002Fel-menu-item>\n          \u003Cel-sub-menu index=\"1\">\n            \u003Ctemplate #title>\n              \u003Cel-icon>\u003CUser \u002F>\u003C\u002Fel-icon>\n              \u003Cspan>用户管理\u003C\u002Fspan>\n            \u003C\u002Ftemplate>\n            \u003Cel-menu-item>管理员信息\u003C\u002Fel-menu-item>\n            \u003Cel-menu-item>普通用户信息\u003C\u002Fel-menu-item>\n          \u003C\u002Fel-sub-menu>\n          \u003Cel-menu-item index=\"\u002Fmanager\u002Fhome\">\n            \u003Cel-icon>\u003CUserFilled \u002F>\u003C\u002Fel-icon>\n            个人信息\n          \u003C\u002Fel-menu-item>\n          \u003Cel-menu-item index=\"\u002Fmanager\u002Fhome\">\n            \u003Cel-icon>\u003CSwitchButton \u002F>\u003C\u002Fel-icon>\n            退出登录\n          \u003C\u002Fel-menu-item>\n        \u003C\u002Fel-menu>\n      \u003C\u002Fdiv>\n      \u003C!-- 左侧导航菜单结束 -->\n\n      \u003C!-- 右侧主体区域开始 -->\n      \u003Cdiv style=\"flex: 1; width: 0; background-color: #f5f7ff; padding: 10px\">\n        \u003CRouterView \u002F>\n      \u003C\u002Fdiv>\n      \u003C!-- 右侧主体区域结束 -->\n    \u003C\u002Fdiv>\n    \u003C!-- 下面部分结束 -->\n\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport router from \"@\u002Frouter\u002Findex.js\";\n\u003C\u002Fscript>\n\n\u003Cstyle>\n.el-menu .is-active {\n  background-color: #e6ecf7 !important;\n}\n\u003C\u002Fstyle>\n```\n\n## Data.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-input style=\"width: 240px; margin-right: 10px\" v-model=\"data.name\" placeholder=\"请输入名称查询\" prefix-icon=\"Search\">\u003C\u002Fel-input>\n      \u003Cel-button type=\"primary\">查 询\u003C\u002Fel-button>\n      \u003Cel-button type=\"warning\">重 置\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-button type=\"primary\">新 增\u003C\u002Fel-button>\n      \u003Cel-button type=\"warning\">批量删除\u003C\u002Fel-button>\n      \u003Cel-button type=\"info\">导入\u003C\u002Fel-button>\n      \u003Cel-button type=\"success\">导出\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-table :data=\"data.tableData\" stripe>\n        \u003Cel-table-column label=\"日期\" prop=\"date\" \u002F>\n        \u003Cel-table-column label=\"名称\" prop=\"name\" \u002F>\n        \u003Cel-table-column label=\"地址\" prop=\"address\" \u002F>\n      \u003C\u002Fel-table>\n      \u003Cdiv style=\"margin-top: 15px\">\n        \u003Cel-pagination\n            v-model:current-page=\"data.pageNum\"\n            v-model:page-size=\"data.pageSize\"\n            :page-sizes=\"[5, 10, 15, 20]\"\n            background\n            layout=\"total, sizes, prev, pager, next, jumper\"\n            :total=\"data.total\"\n        \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport { Search } from \"@element-plus\u002Ficons-vue\"\n\nconst data = reactive({\n  name: null,\n  tableData: [\n    {  id: 1, date: '2024-10-11', name: '亲哥哥哥', address: '安徽合肥' },\n    {  id: 2, date: '2024-10-12', name: '小鲁班', address: '上海浦东' },\n    {  id: 3, date: '2024-10-13', name: '小妲己', address: '北京大兴' },\n  ],\n  pageNum: 1,\n  pageSize: 10,\n  total: 47\n})\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n\n\u003C\u002Fstyle>\n```\n\n","coding",1,7421,964,"2024-10-14 16:02:49","2026-05-03 22:49:02","1天学会SpringBoot3+Vue3实战项目开发","learn-springboot-vue",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,42,49,56,57,64,71,78,85,92,99,106,113,120],{"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},475,"OgrBbww7","01. 1天学会SpringBoot3+Vue3实战项目课程介绍",17862,910,"2024-10-11 16:50:50",{"id":28,"uuid":29,"project_id":6,"title":30,"type":9,"status":10,"public_enabled":10,"views":31,"sort":32,"created_at":33,"updated_at":14,"project_title":15,"project_slug":16},476,"U58ISSFR","02. 从0带你搭建Vue3工程",12899,911,"2024-10-11 16:47:49",{"id":35,"uuid":36,"project_id":6,"title":37,"type":9,"status":10,"public_enabled":10,"views":38,"sort":39,"created_at":40,"updated_at":41,"project_title":15,"project_slug":16},478,"tK3YUYq8","03. Vue3集成Element-Plus",9899,919,"2024-10-14 22:18:17","2026-05-07 15:33:28.189425+00",{"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":14,"project_title":15,"project_slug":16},488,"J2MV6UAG","04. Element-Plus组件使用速成",8093,938,"2024-10-11 16:49:40",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},489,"zGi4XJsb","05. Vue3集成Vue-Router实现路由跳转",7443,939,"2024-10-12 15:44:41",{"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":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},501,"JlXltpKA","07. Mysql语法简介（速成）",5208,973,"2024-10-15 16:52:18",{"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},509,"c3XrOTcU","08. 从0带你搭建SpringBoot3工程",9397,992,"2024-10-16 15:43:13",{"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},516,"QsKwbDX7","09. SpringBoot3集成Mybatis",10348,1004,"2024-10-17 16:36:15",{"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},519,"qKG13ySo","10. SpringBoot3+Vue3实现基本的增删改查功能",9572,1013,"2024-10-18 16:34:55",{"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},527,"7uED9n7e","11. Vue3开发登录注册页面",7106,1031,"2024-10-21 17:35:30",{"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},535,"poUfWrWc","12. Vue3管理系统开发个人信息、修改密码页面",5777,1050,"2024-10-22 17:50:30",{"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},542,"FxHR3hNR","13. SpringBoot3+Vue3实现文件上传下载功能",4489,1057,"2024-10-23 17:31:02",{"id":107,"uuid":108,"project_id":6,"title":109,"type":9,"status":10,"public_enabled":10,"views":110,"sort":111,"created_at":112,"updated_at":14,"project_title":15,"project_slug":16},548,"VPZNSTxr","14. SpringBoot3+Vue3实现富文本编辑器功能",3931,1072,"2024-10-24 17:38:21",{"id":114,"uuid":115,"project_id":6,"title":116,"type":9,"status":10,"public_enabled":10,"views":117,"sort":118,"created_at":119,"updated_at":14,"project_title":15,"project_slug":16},555,"nal0yVxM","15. SpringBoot3+Vue3实现数据批量导入导出功能",3577,1090,"2024-10-28 17:39:21",{"id":121,"uuid":122,"project_id":6,"title":123,"type":9,"status":10,"public_enabled":10,"views":124,"sort":125,"created_at":126,"updated_at":14,"project_title":15,"project_slug":16},564,"XxSPPFGi","16. SpringBoot3+Vue3实现数据统计图表功能",4236,1109,"2025-01-09 09:40:57"]