image.png
image.png

  1. <template>
  2.     <div>
  3.         <!-- 头部 -->
  4.         <Header></Header>
  5.         <!-- 左侧菜单 -->
  6.         <Asider></Asider>
  7.         <!-- 内容显示区域 -->
  8.         <router-view></router-view>
  9.     </div>
  10. </template>
  12. <script>
  13. import Asider from '@/components/Asider'
  14. import Header from '@/components/Header'
  15. export default {
  16.     components:{
  17.         Asider,
  18.         Header
  19.     }
  20. }
  21. </script>

image.png
image.png

1、左侧菜单编写

image.png

  1. <template>
  2.     <div class="sidebar">
  3.         <el-menu
  4.             class="sidebar-el-menu"
  5.             :default-active="onRoutes"  
  6.             :collapse="collapse"
  7.             background-color="#334256"
  8.             text-color="#ffffff"
  9.             active-text-color="#20a0ff"
  10.             router
  11.          >
  12.             <template v-for="item in items">
  13.                 <template>
  14.                     <el-menu-item :index="item.index" :key="item.index">
  15.                         <i :class="item.icon"></i>
  16.                         {{item.title}}
  17.                     </el-menu-item>
  18.                 </template>
  19.             </template>
  21.         </el-menu>
  22.     </div>
  23. </template>
  25. <script>
  26. import bus from "../assets/js/bus"
  27. export default {
  28.     data(){
  29.         return{
  30.             collapse: false,
  31.             items:[
  32.                 {
  33.                     icon: 'el-icon-document', //表示选项图标
  34.                     index: 'Info', //表示跳转到哪个路由
  35.                     title: '系统首页' //表示选项的标题
  36.                 },
  37.                 {
  38.                     icon: 'el-icon-document',
  39.                     index: 'Consumer',
  40.                     title: '用户管理'
  41.                 },
  42.                 {
  43.                     icon: 'el-icon-document',
  44.                     index: 'Singer',
  45.                     title: '歌手管理'
  46.                 },
  47.                 {
  48.                     icon: 'el-icon-document',
  49.                     index: 'SongList',
  50.                     title: '歌单管理'
  51.                 },
  53.             ]
  54.         }
  55.     },
  56.     computed:{
  57.         onRoutes(){
  58.             return this.$route.path.replace('/',''); //表示默认选中哪个路由，让其处于选中状态
  59.         }
  60.     },
  61.     created(){
  62.         //通过Bus进行组件间的通信，来折叠侧边栏
  63.         //接收Header头部传过来的信息，判断collapse是否为true，来折叠侧边栏
  64.         bus.$on('collapse',msg =>{
  65.             this.collapse = msg
  66.         })
  67.     }
  68. }
  69. </script>
  71. <style scoped>
  72. .sidebar {
  73.     display: block;
  74.     position: absolute;
  75.     left: 0;
  76.     top: 70px;
  77.     bottom: 0;
  78.     background-color: #334256;
  79.     overflow-y: scroll;
  80. }
  82. .sidebar::-webkit-scrollbar{
  83.     width: 0;
  84. }
  86. .sidebar-el-menu:not(.el-menu--collapse){
  87.     width: 150px;
  88. }
  90. .sidebar >ul {
  91.     height: 100%;
  92. }
  93. </style>

:default-active=”onRoutes” 表示默认选中哪个路由 :collapse=”collapse” 表示当collapse为true时，打开选项卡，否则，关闭选项卡 router 表示跳到哪个路由，与index一起搭配使用

2、头部菜单编写

image.png

  1. <template>
  2.     <div class="header">
  3.         <!-- 折叠图片 -->
  4.         <div class="collapse-btn" @click="collapseChange">
  5.             <i class="el-icon-menu"></i>
  6.         </div>
  7.         <div class="logo">music后台管理</div>
  8.         <div class="header-right">
  9.             <div class="btn-fullscreen" @click="handleFullScreen">
  10.                 <el-tooltip :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
  11.                     <i class="el-icon-rank"></i>
  12.                 </el-tooltip>
  13.             </div>
  14.             <div class="user-avator">
  15.                 <img src="../assets/img/user.jpg"/>
  16.             </div>
  17.             <el-dropdown class="user-name" trigger="click" @command="handleCommand">
  18.                 <span class="el-dropdown-link">
  19.                     {{userName}}                    
  20.                     <i class="el-icon-caret-bottom"></i>
  21.                 </span>
  22.                 <el-dropdown-menu slot="dropdown">
  23.                     <el-dropdown-item command="logout">退出登录</el-dropdown-item>
  24.                 </el-dropdown-menu>
  25.             </el-dropdown>
  26.         </div>
  27.     </div>
  28. </template>
  30. <script>
  31. import bus from "../assets/js/bus";
  32. export default {
  33.     data(){
  34.         return{
  35.             collapse: false,
  36.             fullscreen:false
  37.         }
  38.     },
  39.     computed:{
  40.         //获取用户名
  41.         userName(){
  42.             return localStorage.getItem('userName');
  43.         }
  44.     },
  45.     methods:{
  46.         //侧边栏折叠
  47.         collapseChange(){
  48.             this.collapse = !this.collapse;
  49.             bus.$emit('collapse',this.collapse);
  50.         },
  51.         //全屏事件
  52.         handleFullScreen(){
  53.             if(this.fullscreen){
  54.                 if(document.exitFullscreen){
  55.                    document.exitFullscreen();
  56.                 }else if(document.webkitCancelFullScreen){      //safari 、Chrome
  57.                     document.webkitCancelFullScreen();
  58.                 }else if (document.mozCancelFullScreen){        //firefox
  59.                     document.mozCancelFullScreen();
  60.                 }else if(document.msExitFullScreen){            //ie
  61.                     document.msExitFullScreen();
  62.                 }               
  63.             }else{
  64.                 let element = document.documentElement;
  65.                 if(element.requestFullscreen){
  66.                     element.requestFullscreen();
  67.                 }else if(element.webkitRequestFullScreen){      //safari 、Chrome
  68.                     element.webkitRequestFullScreen();
  69.                 }else if(element.mozRequestFullScreen){         //firefox
  70.                     element.mozRequestFullScreen();
  71.                 }else if (element.msRequestFullScreen){         //ie
  72.                     element.msRequestFullScreen();
  73.                 }
  74.             }
  75.             this.fullscreen = !this.fullscreen;
  76.         },
  77.         //退出登录
  78.         handleCommand(command){
  79.             if(command == "logout"){
  80.                 localStorage.removeItem('userName');
  81.                 this.$router.push("/");
  82.             }
  83.         }
  84.     }
  85. }
  86. </script>
  88. <style scoped>
  89. .header{
  90.     position: relative;
  91.     background-color: #253041;
  92.     box-sizing: border-box;
  93.     width: 100%;
  94.     height: 70px;
  95.     font-size: 22px;
  96.     color: #ffffff;
  97. }
  99. .collapse-btn{
  100.     float: left;
  101.     padding: 0 21px;
  102.     cursor: pointer;
  103.     line-height: 70px;
  104. }
  106. .header .logo{
  107.     float: left;
  108.     line-height: 70px;
  109. }
  111. .header-right{
  112.     float: right;
  113.     padding-right: 50px;
  114.     display:flex;
  115.     height: 70px;
  116.     align-items: center;
  117. }
  119. .btn-fullscreen{
  120.     transform: rotate(45deg);
  121.     margin-right: 5px;
  122.     font-size: 24px;
  123. }
  125. .user-avator{
  126.     margin-left: 20px;
  127. }
  129. .user-avator img{
  130.     display: block;
  131.     width: 40px;
  132.     height: 40px;
  133.     border-radius: 50%;
  134. }
  136. .user-name{
  137.     margin-left: 10px;
  138. }
  140. .el-dropdown-link{
  141.     color: #ffffff;
  142.     cursor: pointer;
  143. }
  144. </style>

2.1 侧边栏折叠

:collapse=”collapse” 表示当collapse为true时，打开选项卡，否则，关闭选项卡

  1.  <!-- 折叠图片 -->
  2. <div class="collapse-btn" @click="collapseChange">
  3.   <i class="el-icon-menu"></i>
  4. </div>
  1.  //侧边栏折叠
  2. collapseChange(){
  3.   this.collapse = !this.collapse;
  4.   bus.$emit('collapse',this.collapse);
  5. },

当点击侧边栏折叠图标时，发送一个侧边栏折叠事件总线，给父组件及其他组件调用。
通过this.$emit(‘事件名称’,值); 进行通知其他组件进行侧边栏的折叠

  1. created(){
  2.   //通过Bus进行组件间的通信，来折叠侧边栏
  3.   bus.$on('collapse',msg =>{
  4.     this.collapse = msg
  5.   })
  6. }

其他组件，通过this.$on(‘事件名称保持一致’,回调函数就是传过来的值)，来接收组件间的通信；

2.2 全屏事件

  1. <div class="btn-fullscreen" @click="handleFullScreen">
  2.   <el-tooltip :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
  3.     <i class="el-icon-rank"></i>
  4.   </el-tooltip>
  5. </div>
  1. //全屏事件
  2. handleFullScreen(){
  3.   if(this.fullscreen){ //表示当前全屏状态，需要退出全屏
  4.     if(document.exitFullscreen){
  5.       document.exitFullscreen();
  6.     }else if(document.webkitCancelFullScreen){      //safari 、Chrome
  7.       document.webkitCancelFullScreen();
  8.     }else if (document.mozCancelFullScreen){        //firefox
  9.       document.mozCancelFullScreen();
  10.     }else if(document.msExitFullScreen){            //ie
  11.       document.msExitFullScreen();
  12.     }               
  13.   }else{ //表示当前退出全屏状态，需要打开全屏
  14.     let element = document.documentElement;
  15.     if(element.requestFullscreen){
  16.       element.requestFullscreen();
  17.     }else if(element.webkitRequestFullScreen){      //safari 、Chrome
  18.       element.webkitRequestFullScreen();
  19.     }else if(element.mozRequestFullScreen){         //firefox
  20.       element.mozRequestFullScreen();
  21.     }else if (element.msRequestFullScreen){         //ie
  22.       element.msRequestFullScreen();
  23.     }
  24.   }
  25.   this.fullscreen = !this.fullscreen;
  26. },

document.exitFullscreen() 表示退出全屏； element.mozRequestFullScreen() 表示打开全屏；

2.3 获取登录的用户名

  1.  computed:{
  2.    //获取用户名
  3.    userName(){
  4.      return localStorage.getItem('userName');
  5.    }
  6.  },

2.4 退出登录

  1. <div class="user-avator">
  2.   <img src="../assets/img/user.jpg"/>
  3. </div>
  4. <el-dropdown class="user-name" trigger="click" @command="handleCommand">
  5.   <span class="el-dropdown-link">
  6.     <!-- 用户名 -->
  7.     {{userName}}                    
  8.     <i class="el-icon-caret-bottom"></i>
  9.   </span>
  10.   <el-dropdown-menu slot="dropdown">
  11.     <el-dropdown-item command="logout">退出登录</el-dropdown-item>
  12.   </el-dropdown-menu>
  13. </el-dropdown>
  1. //退出登录
  2. handleCommand(command){
  3.   if(command == "logout"){
  4.     //移除本地客户端存储的用户名
  5.     localStorage.removeItem('userName');
  6.     //跳转到登录页面
  7.     this.$router.push("/");
  8.   }
  9. }

3、Home主页面编写

image.png

  1. <template>
  2.     <div>
  3.         <!-- 头部 -->
  4.         <Header></Header>
  5.         <!-- 左侧菜单 -->
  6.         <Asider></Asider>
  7.         <!-- 内容显示区域 -->
  8.         <div class="content-box" :class="{'content-collapse':collapse}">
  9.             <router-view></router-view>
  10.         </div>
  11.     </div>
  12. </template>
  14. <script>
  15. import Asider from '@/components/Asider'
  16. import Header from '@/components/Header'
  17. import bus from "../assets/js/bus";
  18. export default {
  19.     components:{
  20.         Asider,
  21.         Header
  22.     },
  24.     data(){
  25.         return {
  26.             collapse: false
  27.         }
  28.     },
  29.     created(){
  30.         //通过Bus进行组件间的通信，来折叠侧边栏
  31.         bus.$on('collapse',msg =>{
  32.             this.collapse = msg
  33.         })
  34.     }
  35. }
  36. </script>

:class=”{‘content-collapse’:collapse}” 表示当点击折叠侧边栏的时候，内容显示区域也随之侧边栏折叠改变而改变

4、编写内容显示Page页面

image.png

image.png

配置路由

  1. export default new Router({
  2.   routes: [
  3.     {
  4.       path: '/',
  5.       component: resolve => require(['../pages/Login.vue'], resolve)
  6.     },
  7.     {
  8.       path: '/Home',
  9.       component: resolve => require(['../components/Home.vue'], resolve),
  10.       children:[
  11.         {
  12.           path: '/Info',
  13.           name : '后台首页',
  14.           component: resolve => require(['../pages/InfoPage.vue'], resolve)
  15.         },
  16.         {
  17.           path: '/Consumer',
  18.           name : '用户管理页面',
  19.           component: resolve => require(['../pages/ConsumerPage.vue'], resolve)
  20.         },
  21.         {
  22.           path: '/Singer',
  23.           name : '歌手页面',
  24.           component: resolve => require(['../pages/SingerPage.vue'], resolve)
  25.         },
  26.         {
  27.           path: '/SongList',
  28.           name : '歌单页面',
  29.           component: resolve => require(['../pages/SongListPage.vue'], resolve)
  30.         }
  31.       ]
  32.     },
  34.   ]
  35. })