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

金色海洋（jyk）陽光男孩發表於2019-07-24
後端前端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的方式唄，還可以順便做個對比。哪種方式更好，肯定選更舒服的方式了。

相關文章