Vue項目練習--電商后台管理系統的功能---主頁的頁面布局

Vue項目練習--電商后台管理系統的功能---主頁的頁面布局

1. 整體布局

整體布局：先上下划分，之后左右划分，這是使用ElementUI中提供的Container組件

 

 

 

<el-container>
    <!-- 頭部區域 -->
    <el-header></el-header>
    <el-container>
        <!-- 側邊欄區域 -->
        <el-aside></el-aside>
        <!-- 右側主體區域 -->
        <el-main></el-main>
    </el-container>
</el-container>

2. 左側菜單布局

菜單分為二級，並且可以折疊，二級菜單默認隱藏

 

 

 

<el-menu>
    <el-submenu>
        <!-- 這個 template 是一級菜單的內容模板 -->
        <i class="el-icon-menu"></i>
        <span>一級菜單</span>
        <!-- 在一級菜單中，可以嵌套二級菜單 -->
        <el-menu-item>
            <i class="el-icon-menu"></i>
            <span slot="title">二級菜單</span>
        </el-menu-item>
    </el-submenu>
</el-menu>

3. 通過接口獲取菜單數據

　　3.1·除登錄接口外的其它接口需要授權的API，必須在請求頭中使用Authorization字段提供token令牌。通過axios請求攔截器添加token，保證擁有獲取數據的權限 ，入口文件main.js中設置請求攔截器，為每一個請求添加一個請求頭

// axios請求攔截
axios.interceptors.request.use(config => {
    // 為請求頭對象，添加 Token 驗證的 Authorization 字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})

 

 

 　　3.2 獲取左側菜單的數據--這里用生命周期函數，在頁面一加載時就獲取左側菜單數據

 

 

 

 

 

 

 

 

　　3.3 左側菜單的UI繪制

 

 

 

 

一級菜單都放到了data數組中，因此menulist數組中的每一項都是一個一級菜單。

一級菜單中的children屬性又嵌套了二級菜單。所以如果需要繪制左側菜單，只需要使用雙層for循環即可，外層for循環用來渲染一級菜單，內層for循環用來渲染二級菜單。

 

 

 4.解決出現點開一個菜單，另外的菜單也會彈出的bug

 

 

 原因是因為所有的一級菜單的index都是相同的，因此每個一級菜單都應該有一個唯一的index值。

解決辦法：將item.id的值動態綁定給index（:index）

但是會有另一個bug：因為index只能接收字符串，不接收數值，而item.id是數值類型的，最簡單的方法是給item.id拼接上一個空字符串

 

 

 

 

 

 

 

 

 

 5.修改一級菜單的字體圖標

修改后：

 

 

 每個一級菜單的圖標都不一樣，這里使用第三方的字體圖標庫

如何才能將這幾個字體圖標按照順序加過去呢？每一個一級菜單都是通過for循環自動生成的，如何在自動生成期間修改不同圖標呢？

解決方案：先定義一個字體圖標的對象，在這個對象中，以一級菜單的id作為key，字體圖標當作值

 

 

 6. 解決菜單邊緣不能對齊的狀態

 

 

 方法：

 

 

 

 

 如果是折疊狀態，則側邊欄的寬度為64px，展開的情況下是200px

 

 

 7. 創建Welcome.vue組件，在Home頁面中放一個路由占位符，然后將Welcome路由設置為home路由的子路由。這樣就在Home頁面中嵌套顯示了Welcome子組件。

ps：記得要在頁面主體里面設置一個路由出口router-view標簽

 

 8. 將左側菜單改為路由鏈接，開啟路由，則點擊菜單欄會跳轉到index所對應的值上

 

 

 但是這樣會造成以id為路徑跳轉：

 

 

 所以不能使用item.id來動態綁定index，而是使用path，但是每一個路由地址必須以‘/’開頭，所以path的值前面需要加一個‘/’：

 

 

出現一個bug：當刷新頁面后，或者再次點擊當前的二級菜單，雖然右側主體區顯示的是對應的內容，但是左側對應的菜單並沒有高亮顯示

 

 

 

 解決方法：

想讓菜單中的哪一項高亮被激活，就把這一項對應的index值賦值為整個menu菜單的default-active屬性

 

 

 　　1.在每次點擊菜單鏈接的時候，應該把對應的地址保存到sessionStorage中，這樣的話就把需要激活的鏈接保存起來了

 　　2.當我們刷新頁面的時候，可以從sessionStorage中把那個值取出來，動態的賦值給el-menu的default-active屬性

　　3.首先給每個二級菜單都添加一個點擊事件：

 

 

 　　4.在data中添加activePath屬性

 

 　　5.點擊二級菜單的鏈接，則保存activePath的值到sessionStorage中

　

 

　　6.給el-menu動態綁定default-active屬性

 

 　　7.在組件被創建的時候就賦值activePath，即可解決刷新頁面時（重新繪制頁面）也高亮顯示當前所選的菜單選項

 

 

 但是還有一個問題，高亮效果的動態切換的問題：點擊其他鏈接之后，再回退過來，路由地址已經顯示為/users，但是再次點擊用戶列表菜單欄，卻並沒有高亮顯示（並沒有重新繪制Home頁面）

如何解決：

當點擊不同鏈接的時候，需要給activePath重新賦下值