Vue + ElementUI的電商管理系統實例02 主頁

1、打開Element網站，找到主頁需要的布局格式

修改Home.vue：

<template>
  <el-container class="home-container">
    <!-- 頭部 -->
    <el-header>
      Header
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 主體 -->
    <el-container>
      <!-- 側邊欄 -->
      <el-aside width="200px">Aside</el-aside>
      <!-- 右側內容主體 -->
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  methods: {
    logout() {
      // 清空token
      window.sessionStorage.clear('token')
      // 跳轉到登錄頁
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background: #373d41;
  color: #fff;
}
.el-aside {
  background: #333744;
}
.el-main {
  background: #eaedf1;
}
</style>

效果圖如下：

2、美化Header區域布局樣式

<template>
  <el-container class="home-container">
    <!-- 頭部 -->
    <el-header>
      <div>
          <img src="../assets/heima.png" alt="">
          <span>電商后台管理系統</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 主體 -->
    <el-container>
      <!-- 側邊欄 -->
      <el-aside width="200px">Aside</el-aside>
      <!-- 右側內容主體 -->
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background: #373d41;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  font-size: 20px;
  > div {
      display: flex;align-items: center;
      span {margin-left: 15px;}
  }
}
.el-aside {
  background: #333744;
}
.el-main {
  background: #eaedf1;
}
</style>

3、左側導航菜單

菜單分為二級，並且可以折疊

找到Element里的導航菜單代碼：

<!--左側導航菜單-->
     <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>導航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分組一</template>
              <el-menu-item index="1-1">選項1</el-menu-item>
              <el-menu-item index="1-2">選項2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分組2">
              <el-menu-item index="1-3">選項3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">選項4</template>
              <el-menu-item index="1-4-1">選項1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">導航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">導航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">導航四</span>
          </el-menu-item>
        </el-menu>

然后在element.js里添加：

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message, Container, Header, Aside, Main,
  Menu, Submenu, MenuItemGroup, MenuItem } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
// 掛載到Vue全局
Vue.prototype.$message = Message

簡單修改導航菜單代碼：

<!--左側導航菜單-->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
          <!-- 一級菜單 -->
          <el-submenu index="1">
            <!-- 一級菜單模板區域 -->
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>導航一</span>
            </template>
            <!-- 二級菜單-->
            <el-menu-item index="1-1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>選項1</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>

4、通過axios攔截器添加token驗證

接口說明里：

API V1 認證統一使用 Token 認證

需要授權的 API ，必須在請求頭中使用 `Authorization` 字段提供 `token` 令牌

修改main.js文件：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
// 導入全局樣式表
import './assets/css/global.css'
// 導入字體樣式
import './assets/fonts/iconfont.css'
import axios from 'axios'
// 配置請求的根路徑
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// axios請求攔截
axios.interceptors.request.use(config => {
  console.log(config)
  // 為請求頭對象，添加token驗證的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 最后必須return config
  return config
})
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

重新退出，再登錄，打開瀏覽器Network會發現：

5、獲取左側菜單數據

打開接口文檔，發現請求路徑：menus，請求方法：get

// 獲取左側菜單數據
    async getMenuList() {
      const { data: res } = await this.$http.get('menus')
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menuList = res.data
   }

控制台：

6、雙層for循環渲染左側菜單列表

一級菜單：

<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
<!--index前面加: 變為動態綁定數據，這時會報錯，因為index只接受字符串，最簡單的辦法是后面 +'' -->

二級菜單：

<el-menu-item :index="subItem.id + ''" v-for="subItem in item.children" :key="subItem.id">
  <template slot="title">
       <i class="el-icon-location"></i>
       <span>{{subItem.authName}}</span>
   </template>
</el-menu-item>

效果圖：

7、為選中菜單設置字體顏色並添加分類圖標

active-text-color="#409eff"  
//激活的文本顏色 替換成自己想要的顏色就行了

先把二級菜單的圖標替換為：

<i class="el-icon-menu"></i>

給每個一級菜單替換不同的圖標：

新建一個圖標對象，每一個菜單項都有一個唯一的id，我們就以id為key，對應的圖標當做value，然后綁定:class

<!-- 一級菜單模板區域 -->
<template slot="title">
    <i :class="iconsObject[item.id]"></i>
    <span>{{item.authName}}</span>
</template>

<script>
export default {
  data() {
    return {
      menuList: [], // 左側菜單數據
      iconsObject: { //一級菜單圖標對象 125 103這些是menuList一級菜單的id
        '125': 'iconfont icon-user',
        '103': 'iconfont icon-tijikongjian',
        '101': 'iconfont icon-shangpin',
        '102': 'iconfont icon-danju',
        '145': 'iconfont icon-baobiao'
      }
    }
  },
}
</script>

<style lang="less" scoped>
.iconfont {
  margin-right: 10px;
}
</style>

效果圖：

8、每次只允許展開一個一級菜單

Menu Attribute里有個unique-opened屬性：  表示是否只保持一個子菜單的展開  默認為false

<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" :unique-opened="true">
<!--如果把某個值重置為true的話，可以簡寫-->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" unique-opened>

注意：如果unique-opened="true"這樣寫，這個true只是字符串，必須前面加上:才表示布爾值。

邊框線問題：

.el-aside {
  background: #333744;
  /*el-menu邊框線*/
  .el-menu {
    border-right: none;
  }
}

9、實現左側菜單折疊與展開效果

在側邊欄與左側菜單之間添加div和樣式：

<el-aside width="200px">
      <div class="toggle-button">|||</div>

<style lang="less" scoped>
.toggle-button {
  background: #4a5064;
  color:#fff;
  font-size: 10px;
  line-height:24px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>

然后添加點擊事件：

Menu Attribute里有個collapse屬性： 表示是否水平折疊收起菜單（僅在 mode 為 vertical 時可用）  默認為false

<div class="toggle-button" @click="toggleCollapse">|||</div>
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" :unique-opened="true" :collapse="isCollapse">

<script>
export default {
   data() {
      return {
         isCollapse: false // 菜單是否折疊
      }
   },
   methods: {
      // 點擊切換左側菜單的折疊與展開
      toggleCollapse() {
         this.isCollapse = !this.isCollapse
      }
   }
}
</script>

現在點擊按鈕已經有切換效果了，不過有點卡頓。

Menu Attribute里有個collapse-transition屬性： 表示是否開啟折疊動畫   默認是true開啟狀態，我們把它關閉就好了

<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff"
          :unique-opened="true" :collapse="isCollapse" :collapse-transition="false">

這時候發現菜單折疊后，效果如下：

檢查代碼發現側邊欄寬度是寫死的200px，我們想要的效果是，當菜單折疊起來后，側邊欄也跟着縮小。

查看元素發現菜單折疊后的寬度是64px，我們就可以根據是否折疊來動態賦值。當isCollapse為真時寬度64，否則200

<el-aside :width="isCollapse ? '64px' : '200px'">

這時折疊后效果：

10、實現首頁路由的重定向 

新建Welcome.vue：

<template>
<div>
  <h3>Welcome</h3>  
</div>    
</template>

修改路由文件，建立Welcome路由在Home子路由中：

import Welcome from '../components/Welcome.vue'

const routes = [
  { path: '/', redirect: '/login' }, // 重定向
  { path: '/login', component: Login },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome', // 重定向
    children: [ // 子路由
      { path: '/welcome', component: Welcome }
    ]
  }
]

修改Home.vue中的main區域代碼，添加路由占位符：

<!-- 右側內容主體 -->
<el-main>
     <!--路由占位符-->
     <router-view></router-view>
</el-main>

此時效果圖：重新登錄后Home重定向到了Welcome頁

11、實現側邊欄的路由鏈接的改造

Menu Attribute里有個router屬性： 表示是否使用 vue-router 的模式，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉   默認為false

為側邊欄開啟路由模式：

<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff"
          :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" :router="true">
<!--或者-->
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff"
          unique-opened :collapse="isCollapse" :collapse-transition="false" router>

此時點擊二級菜單就發生了跳轉。例如：http://localhost:8080/#/110

我們知道110是二級菜單的id值，這時我們要修改二級菜單的index為path的值，不過后端數據沒有加/，我們要自己補上：

<!-- 二級菜單-->
<el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children"  :key="subItem.id">

此時點擊二級菜單跳轉地址就變成了：http://localhost:8080/#/users