webpack+vue項目實戰(zhàn)（二，開發(fā)管理系統(tǒng)主頁面）

Harpsichord1207 發(fā)布于2019-08-20 17:43 / 2474人閱讀

摘要：運行一下，發(fā)現(xiàn)路由變了，當前項有標識了，子菜單的顯示與隱藏也有了原理也很簡單。

1.前言

上篇文章(webpack+vue項目實戰(zhàn)（一,搭建運行環(huán)境和相關(guān)配置）)搭建了好了基本的一個項目目錄，安好好了一些要用到的依賴，以及把項目跑了起來。接下來，我們就進行第二步的操作，第二步就是做好一個開發(fā)系統(tǒng)的主頁面，這個頁面主要也就是一個側(cè)邊欄，通過側(cè)邊欄的各個選項來進行操作（切換各個組件）。比如回款管理，訂單管理，物流管理等等的操作。

2.頂部組件

開始屬于排版這一塊了，是時候在index.js引入一個公用樣式了,相當于一個樣式重置表。

需求有一個，頁面上面需要放一個退出的登錄按鈕，我就寫了一個頂部組件的文件。首先就是創(chuàng)建這個文件

代碼如下

然后入口文件(index.js)引用這個文件，并且在vue中注冊組件import topbarComponent from "./../components/admin_base/topbar.vue";

然后入口模板文件，index.html引入標簽

頁面結(jié)果（基于上一篇文章，已經(jīng)跑起來的結(jié)果）

頁面上的class在公用樣式里面有寫好樣式，還有一些樣式是element-ui提供的，
退出登錄就是element-ui提供的組件，在入口文件index.js已經(jīng)引入了element-ui。這里直接用就好！

這個比較簡單，我就不多說了。

3.側(cè)邊欄組件

這個側(cè)邊欄就是這篇文章的重點，也是整個項目操作的重點。先在目錄上創(chuàng)建這樣一個的側(cè)邊欄的組件文件。

下面圖片是我們要實現(xiàn)的效果，那些排版切圖的樣式我不多說了，相信不會難倒大家

1.首先，創(chuàng)建一下這個側(cè)邊欄所需要的數(shù)據(jù)

從上面的效果圖的看到。有3個菜單（首頁，銷售消息通知，銷售管理）。而且首頁這個菜單可以點擊，執(zhí)行跳轉(zhuǎn)，其它兩個菜單又有子菜單，點擊只是一個子菜單顯示與隱藏的操作。
所以，側(cè)邊欄的數(shù)據(jù)肯定是一個數(shù)組，并且是一個對象數(shù)組。每個對象至少有四個屬性(要顯示的文字，跳轉(zhuǎn)的url，是否有子菜單，是否當前菜單)。然后對于有子菜單的菜單，要給一個屬性控制是否展開顯示子菜單，要一個屬性，儲存子菜單。
如下面文字

[
    {
        菜單名:"菜單名稱(首頁)",
        跳轉(zhuǎn)的url:"url(/index)",
        是否當前標識:"一個標志string(0)",
        是否有子菜單:"是否     true||false"
    }，
    {
        菜單名:"菜單名稱(首頁)",
        跳轉(zhuǎn)的url:"url(/index)",
        是否當前標識:"一個標志string(0)",
        是否有子菜單:"true||false",
        是否展示:"是否     true||false",
        子菜單:[]
    }
]

對于子菜單，由于沒有子菜單了，所以需要三個屬性（要顯示的文字，跳轉(zhuǎn)的url，是否當前標識:"一個標志string(0)"）就好。由于子菜單不止一個，所以，子子菜單這個肯定也是一個數(shù)組，每個子菜單也有屬性，所以，也是一個對象屬性，所以，數(shù)據(jù)大概如下面。

[
    {
        菜單名:"菜單名稱   (首頁)",
        跳轉(zhuǎn)的url:"url  (/index)",
        是否當前標識:"一個標志string   (0)",
        是否有子菜單:"是否     true||false"
    }，
    {
        菜單名:"菜單名稱  (首頁)",
        跳轉(zhuǎn)的url:"url  (/index)",
        是否當前標識:"一個標志string    (1)",
        是否有子菜單:"是否     true||false",
        是否展示:"是否    true||false",
        子菜單:[
            {
                菜單名:"菜單名稱    (首頁)",
                跳轉(zhuǎn)的url:"url   (/index)",
                是否當前標識:"一個標志string   (1_1)"
            },
            {
                菜單名:"菜單名稱   (首頁)",
                跳轉(zhuǎn)的url:"url   (/index)",
                是否當前標識:"一個標志string   (1_2)"
            }
        ]
    }
]

最后，整理出來的數(shù)據(jù)就是！（tag這個標識數(shù)據(jù)，是我自己起的，大家也可以隨意起。這個標識在下面會用到，在這里可以暫時不關(guān)注）

data(){
    return {
        currentTag: "0",
        menus: [
            {
                name: "首頁",
                url: "/index",
                tag: "0",
                hasExtend: false, //是否有二級菜單
            },
            {
                name: "銷售消息通知",
                url: "/saleR",
                tag: "sale",
                hasExtend: true, //是否有二級菜單
                fold: true, //是否展開
                extend: [
                    {
                        name: "待確認訂單",
                        url: "/order/list/0?ordConfirmStatus=0",
                        tag: "1_1",
                    },
                    {
                        name: "待出庫物流",
                        url: "/logistics/logisticsList/0",
                        tag: "1_2"
                    },
                    {
                        name: "待發(fā)貨物流",
                        url: "/logistics/logisticsList/1",
                        tag: "1_3"
                    },
                    {
                        name: "待收貨物流",
                        url: "/logistics/logisticsList/2",
                        tag: "1_4"
                    },
                    {
                        name: "待確認回款",
                        url: "/cash/cashList/0",
                        tag: "1_5"
                    },
                    {
                        name: "待開票申請",
                        url: "/invoice/invoiceWriteList/0",
                        tagIndex: "1_6"
                    }
                ]
            },
            {
                name: "銷售管理",
                url: "/workbench",
                hasExtend: true, //是否有二級菜單
                fold: true,  //是否展開
                extend: [
                    {
                        name: "創(chuàng)建銷售單",
                        url: "/order/create",
                        tag: "2_1"
                    },
                    {
                        name: "銷售單管理",
                        url: "/order/list",
                        tag: "2_2"
                    },
                    {
                        name: "物流管理",
                        url: "/logistics/logisticsList",
                        tag: "2_3"
                    },
                    {
                        name: "回款管理",
                        url: "/cash/cashList",
                        tag: "2_4"
                    },
                    {
                        name: "開票管理",
                        url: "/invoice/invoiceWriteList",
                        tag: "2_9"
                    },
                    {
                        name: "票據(jù)管理",
                        url: "/invoice/invoiceManageList",
                        tag: "2_5"
                    },
                    {
                        name: "提成管理",
                        url: "/commission/commissionList",
                        tag: "2_6"
                    },
                    {
                        name: "提成設置",
                        url: "/commission/commissionSet",
                        tag: "2_7",
                    },
                    {
                        name: "合同管理",
                        url: "/contract/contractList",
                        tag: "2_8"
                    },
                ]
            },
        ],
    }
},

上面的數(shù)據(jù)相信大家都沒什么問題，一一對應上就好（name--菜單名稱, url--跳轉(zhuǎn)的url,tag--當前的標識, hasExtend--是否有二級菜單，fold--是否展開extend--子菜單）

2.遍歷側(cè)邊欄的數(shù)據(jù)

flod和switchNav這個兩個屬性大家暫時不需要關(guān)注，下面會用到

遍歷數(shù)據(jù)這個，大家看了上面的代碼和注釋，很好理解。我就不多說了！然后，在index.js里面，引入和注冊這個組件。

然后index.html頁面引用

然后ctrl+s一下，就可以看到效果了（前面在webpack.config.label.js已經(jīng)配置了熱刷新。所以直接就可以看到效果，保存一下，或者改了一些代碼后，一段時間沒操作了，瀏覽器都會刷新，如下圖）

看到運行結(jié)果，側(cè)邊欄出來了。然后，下一步！

3.給側(cè)邊欄寫相關(guān)的一些操作

關(guān)于側(cè)邊欄的操作，比較簡單，無非就是點擊菜單，跳轉(zhuǎn)路由，標志當前項以及菜單下面子菜單的顯示與隱藏。
1.首先，觸發(fā)路由的跳轉(zhuǎn)和標志當前項
我們用到的是是上面代碼的switchNav這個方法;
我們簡單分析一下，這個方法，要實現(xiàn)跳轉(zhuǎn)路由，標志當前項。就必須要接收兩個參數(shù)（要跳轉(zhuǎn)路由的url,當前的標識）。下面就實現(xiàn)下

switchNav(url,tag){
    //標識當前導航
    this.currentTag = tag;
    //router導航
    this.$router.push({
        "path": url,
        "query": {
            "tag": tag
        }
    });
}

看著代碼是不是特別簡單，每次點擊的時候，用一個變量this.currentTag記錄當前的tag，在html遍歷的時候，如果遍歷道的tag等于currentTag的話，就加上active的類名，標志當前項，不等于就不加類名。

比如一開始‘this.currentTag="0",然后，首頁的tag又是等于"0"，所以遍歷道‘首頁’的時候，就會給‘首頁’那個菜單加上active的類名’

然后跳轉(zhuǎn)路由那個沒有什么可以說的了，就把url當成參數(shù)傳進去而已。

2.最后，實現(xiàn)菜單下面子菜單的顯示與隱藏。這個方法就一行代碼。

 //展開收起導航面板
flod(index){
    this.menus[index].fold = !this.menus[index].fold;
},

因為只有兩級，所以，只是根據(jù)傳進來的索引（index）來操作menus這個數(shù)組而已，把要操作的項的fold屬性，取反。

運行一下，發(fā)現(xiàn)路由變了，當前項有標識了，子菜單的顯示與隱藏也有了！原理也很簡單。

運行完了，附上這個文件(snav-component.vue)的代碼大概就是這樣

有一點要注意下，除了點擊首頁能看到一張圖片之外，點擊其它的菜單，右邊都是白色的一片。因為其它的菜單的url。并沒有對應的組件。

比如：這個url在路由里面并沒有對應的組件。

怎么知道？在上一篇文件說到的router.js里面，并沒有配置‘/order/list/0?ordConfirmStatus=0’這個url對應的組件。所以在index.html的輸出的就是空白的一片。現(xiàn)在這里算是復習上一篇的內(nèi)容了。也是給下一篇埋了一個伏筆。下一篇就講這個配置。

4.未完待續(xù)

今天就到這里了。主要就是一個主頁面，主要是側(cè)邊欄的一個開發(fā)。這個側(cè)邊欄就是根據(jù)控制錄用的變化。技術(shù)棧主要也就是vue和vue-router。原理就是根據(jù)路由的變化執(zhí)行組件的切換。達到一個頁面跳轉(zhuǎn)的效果。下一篇就會說到，配置路由和路由對應的組件。希望能幫到大家。最后還是那句老話-如果大家發(fā)現(xiàn)我哪里寫錯了，或者是哪里寫得不好，歡迎指點下。