vue后台管理系統——主頁布局

本文轉載自查看原文 2020-08-01 22:19 3104 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. 左側菜單布局

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

需要使用到ElementUI中提供的NavMenu導航菜單

<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. 通過接口獲取菜單數據

需要授權的API，必須在請求頭中使用Authorization字段提供token令牌。通過axios請求攔截器添加token，保證擁有獲取數據的權限

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

在入口文件main.js中設置請求攔截器，為每一個請求添加一個請求頭

config對象的內容如下：

獲取左側菜單：

左側菜單的UI繪制：

所有的一級菜單都放到了data數組中，因此menulist數組中的每一項都是一個一級菜單。所有一級菜單中的children屬性又嵌套了二級菜單。所以如果需要繪制左側菜單，只需要使用雙層for循環即可，外層for循環用來渲染一級菜單，內層for循環用來渲染二級菜單。

出現一個bug，就是任意點開一個一級菜單，所有的一級菜單都會被展開

而我們的需求是：點擊一個一級菜單，只展開當前的菜單，不影響其他的菜單

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

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

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

修改一級菜單的字體圖標：

可以看到上面的每個一級菜單的圖標都不一樣，還是使用第三方的字體圖標庫

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

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

優化菜單欄：當前n多個菜單都可以被同時展開，但是實際上我們的需求是，每次只允許展開一個菜單，展開當前菜單，其他菜單默認都會被關閉。

如何實現呢？

注意：如果要寫成=“true”的形式，則一定要綁定屬性，否則就是字符串形式了:unique-opened="true"

另一個小細節：如何解決展開項沒有對齊的問題呢？

左側菜單折疊和展開功能：

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

4. 動態渲染菜單數據並進行路由控制

通過 v-for 雙層循環分別進行一級菜單和二級菜單的渲染
通過路由相關屬性啟用菜單的路由功能

<el-menu router>
    <el-submenu :index="item.id + ''" v-for=“item in menus" :key="item.id">
        <template slot="title">
            <span>{{item.authName}}</span>
        </template>
        <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" >
            <span slot="title">{{subItem.authName}}</span>
        </el-menu-item>
    </el-submenu>
</el-menu>