1.首页布局

  1. <template>
  2. <!-- 头部区域 -->
  3.  <el-container class="body_container">
  4.   <el-header>Header<el-button type="info" @click="loginOut">退出</el-button></el-header>
  5.   <!-- 页面主体区域 -->
  6.   <el-container>
  7.       <!-- 侧边栏 -->
  8.     <el-aside width="200px">Aside</el-aside>
  9.     <!-- 右侧主体区域 -->
  10.     <el-main>Main</el-main>
  11.   </el-container>
  12. </el-container>
  13. </template>
  1. .el-header{
  2.     background-color: #373d41;
  3. }
  4.  .el-aside{
  5.      background-color:#333744;
  6.  }
  7.  .el-main{
  8.      background-color: #eaedf1;
  9.  }
  10.  .body_container{
  11.      height: 100%;
  12.  }

2.头部布局

  1.  <el-header>
  2.       <div>
  3.  <img src="../../assets/images/logo-header.png" alt="" class="logo_image">
  4.  <span>电商后台管理系统</span>
  5.       </div>
  6.     <el-button type="info" @click="loginOut">退出</el-button>
  7.     </el-header>
  1. .el-header{
  2.     background-color: #373d41;
  3.     display: flex;
  4.     justify-content: space-between;
  5.     padding-left:0;
  6.     align-items: center;
  7.     color: #fff;
  8.     font-size: 20px;
  9.     >div{
  10.         display: flex;
  11.         align-items: center;
  12.         span{
  13.             margin-left: 15px;
  14.         }
  15.     }
  16. }
  17.  .el-aside{
  18.      background-color:#333744;
  19.  }
  20.  .el-main{
  21.      background-color: #eaedf1;
  22.  }
  23.  .body_container{
  24.      height: 100%;
  25.  }
  26.  .logo_image{
  27.      height: 80px;
  28.      width: 80px;
  29.      background-color: #333744;
  30.  }

3.获取数据

通过axios请求拦截器添加token，保证用户有获取数据的权限

在main.js中

  1. axios.interceptors.request.use(config => {
  2.   config.headers.Authorization = window.sessionStorage.getItem("token") //设置响应头
  3.   return config
  4. }, err => {
  5.   console.log(err)
  6. })

在首页组件中

  1.  data() {
  2.     return {
  3.       menuList: []
  4.     };
  5.   },
  1.  created() {
  2.     this.getMenList();
  3.   },
  1.  async getMenList() {
  2.       const { data: res } = await this.$http.get("menus");
  3.       if (res.meta.status !== 200) {
  4.         return this.$message.error(res.meta.msg);
  5.       }
  6.       this.menuList = res.data;
  7.     }