從后端到前端之Vue（三）小結以及一顆真實的大樹

　　上一篇寫了一下tab，下面整理一下用過的知識點，本想按照官網的文檔，整理一下可以更清晰，結果也許是我的方法不對吧，總之更模糊了。

按照官網文檔的順序整理到了表單輸入綁定之前，因為之前大致也就只涉及到這一些，另外一個原因就是整理的有點頭暈暈。

先展示一下成果吧。Emmm，好吧，很懷疑自己的歸納總結的能力，這都是怎么歸類的，這么亂呢？這可怎么看？最后，是不是可以吐槽一下官方文檔，有點太散亂了。先記錄一下，然后在整理，因為現在掌握的知識點還不夠全面。

圖片

 

 

一、目標 —— 一顆真實的大樹

　　下面開始做大樹。首先介紹一下背景，以前有一個自己的項目，也是前后端分離的設計，后端用asp.net開發，有很多現成的api接口，可以提供頁面描述信息以及各種數據。前端用jQuery，自己寫了幾個插件實現的。

　　現在正好拿來做一下對比，同時也圓了我以前的一個夢想——后端不變的情況下，前端可以換各種UI！那時候前端框架的概念還不流行呢。現在的夢想就是：后端不變，前端換各種框架。

　　所以打算直接用以前的后端接口來做。這樣不就省着等后端開發了嘛，而且這是完全真實的數據，比假想一些需求要好的多。

　　樹做好了之后，加上事件，可以動態創建tab。

 

二、思路

　　后端有一個接口可以提供樹的數據，那么我們直接拿過來用。樹的結構非常簡單，只不過有點非主流，是我自己設計的，自己用着爽就好了。

　　然后把上次的tab拿過來改改。基本就是這樣了。當然后面還要加上數據列表，還有分頁控件，還有按鈕控件，最后還有最麻煩的表單控件。這些控件放在下次再說。

三、設計與編碼

1.   獲取后端數據和data設計

　　使用vue-resource.min.js ，這個是我百度的，后來發現似乎要用axios。Emmm先不改了。

 

　　后端會提供一個這樣的數據，那么我們根據這個數據做一個數據包，只保留需要的幾個屬性，其他的可以舍去。

var tree = new Vue({

        el: '#divTree',
        data: {
            trees: [
                {
                    ModuleID: -10,
                    ModuleLevel: 1,
                    ModuleName: "系統管理",
                    ParentID: 0,
                    ParentIDAll: "0"
                    URL: "#"
                }
            ]
        },

        methods: {
            //下面介紹
            }
        }
});

 

2.   模板設計

<div id="divTree">
            <div v-bind:id="'tree_' + tree.ModuleID" v-for="tree in trees" v-on:click="treeClick(tree.ModuleID,tree.ModuleName)" v-bind:class="'tree' + tree.ModuleLevel">{{tree.ModuleName}}</div>
</div>

 

 

　　模板的地方就很簡單了，這里使用樣式表來設定樹的遞進結構。

 

3.   樹事件設計

methods: {

            treeClick: function (id,title) {
                //隱藏當前的tab
                var oldId = tab.currentTabId; //記錄切換前tab的id
                tab.beforeTabId = oldId;
                tab.tabs["tab" + oldId].isShow = false;  //隱藏切換前的tab
                tabDiv.tabMains["tab" + oldId].isShow = false;  //隱藏切換前的tab容器
                tab.currentTabId = id;  //記錄新的id

                //創建tab
                var newTab = {
                    //可以有多個標簽，
                    id: id, //標簽識別標示
                    title: title,
                    isShow: true, //是否顯示
                    message: title
                };
 
                //創建tab 的容器
                var main = {
                    //可以有多個標簽，
                    message:title,
                    isShow: true, //是否顯示
                    tabId: id //標簽識別標示
                };

                if (typeof (tab.tabs["tab" + id]) === "undefined")
                    tab.tabNumber = tab.tabNumber + 1;
               
                Vue.set(tab.tabs, "tab" + id, newTab);
                Vue.set(tabDiv.tabMains, "tab" + id, main);
  
            }        

 

 

　　這里是點擊節點，動態創建tab。然后tab里面是空的。這個還不太清楚，如果實現tab里面的內容可以隨便設定，現在只能實現tab里面用table，但是這個顯然太呆板了，不符合需求。看看vue里面的介紹吧。一步一步來。

 

 

 

四、          運行效果

截個圖吧。也不太好標示效果。

 

五、          總結

初步使用vue沒啥問題，問題是熟練使用以及思路的變換。因為對vue不熟，所以第一反應還是用以前的方法如何來實現。這個嘛，一點一點的換成vue的方式唄，還可以順便做個對比。哪種方式更好，肯定選更舒服的方式了。