vue後臺管理系統——主頁佈局 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. 左側選單佈局
選單分為二級，並且可以摺疊。
需要使用到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>
建立Welcome.vue元件，在Home頁面中放一個路由佔位符，然後將Welcome路由設定為home路由的子路由規則。這樣就在Home頁面中巢狀顯示了Welcome子元件。
將左側選單改為路由連結：開啟路由，則點選選單欄會跳轉到index所對應的值上
但是拿id作為跳轉地址並不合適，所以不能使用item.id來動態繫結index，而是使用path，但是每一個路由地址必須以‘/’開頭，所以path的值前面需要加一個‘/’
出現一個bug：當重新整理頁面後，或者再次點選當前的二級選單，雖然右側主體區顯示的是對應的內容，但是左側對應的選單並沒有高亮顯示
如何解決呢？如果你想讓選單中的哪一項高亮被啟用，你就把這一項對應的index值賦值為整個menu選單的default-active屬性
- 第一步，在每次點選菜單鏈接的時候，應該把對應的地址儲存到sessionStorage中，這樣的話就把需要啟用的連結儲存起來了；
- 第二步，當我們重新整理頁面的時候，可以從sessionStorage中把那個值取出來，動態的賦值給el-menu的default-active屬性。
首先給每個二級選單都新增一個點選事件
在data中新增activePath屬性
點選二級選單的連結，則儲存activePath的值到sessionStorage中
給el-menu動態繫結default-active屬性
在元件被建立的時候就賦值activePath，即可解決重新整理頁面時（重新繪製頁面）也高亮顯示當前所選的選單選項
但是還有一個問題，高亮效果的動態切換的問題：點選其他連結之後，再回退過來，路由地址已經顯示為/users，但是再次點選使用者列表選單欄，卻並沒有高亮顯示（並沒有重新繪製Home頁面）
解決方法：當點選不同連結的時候，需要給activePath重新賦下值
程式碼地址：https://github.com/Emliy-zcy/Backstage-Management-System-Based-on-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>
建立Welcome.vue元件，在Home頁面中放一個路由佔位符，然後將Welcome路由設定為home路由的子路由規則。這樣就在Home頁面中巢狀顯示了Welcome子元件。
將左側選單改為路由連結：開啟路由，則點選選單欄會跳轉到index所對應的值上
但是拿id作為跳轉地址並不合適，所以不能使用item.id來動態繫結index，而是使用path，但是每一個路由地址必須以‘/’開頭，所以path的值前面需要加一個‘/’
出現一個bug：當重新整理頁面後，或者再次點選當前的二級選單，雖然右側主體區顯示的是對應的內容，但是左側對應的選單並沒有高亮顯示
如何解決呢？如果你想讓選單中的哪一項高亮被啟用，你就把這一項對應的index值賦值為整個menu選單的default-active屬性
- 第一步，在每次點選菜單鏈接的時候，應該把對應的地址儲存到sessionStorage中，這樣的話就把需要啟用的連結儲存起來了；
- 第二步，當我們重新整理頁面的時候，可以從sessionStorage中把那個值取出來，動態的賦值給el-menu的default-active屬性。
首先給每個二級選單都新增一個點選事件
在data中新增activePath屬性
點選二級選單的連結，則儲存activePath的值到sessionStorage中
給el-menu動態繫結default-active屬性
在元件被建立的時候就賦值activePath，即可解決重新整理頁面時（重新繪製頁面）也高亮顯示當前所選的選單選項
但是還有一個問題，高亮效果的動態切換的問題：點選其他連結之後，再回退過來，路由地址已經顯示為/users，但是再次點選使用者列表選單欄，卻並沒有高亮顯示（並沒有重新繪製Home頁面）
解決方法：當點選不同連結的時候，需要給activePath重新賦下值
程式碼地址：https://github.com/Emliy-zcy/Backstage-Management-System-Based-on-vue