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

時間 2019-11-05

標籤後端前端 vue 小結以及一顆真實大樹简体版

原文原文鏈接

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

按照官網文檔的順序整理到了表單輸入綁定以前，由於以前大體也就只涉及到這一些，另一個緣由就是整理的有點頭暈暈。vue

先展現一下成果吧。Emmm，好吧，很懷疑本身的概括總結的能力，這都是怎麼歸類的，這麼亂呢？這可怎麼看？最後，是否是能夠吐槽一下官方文檔，有點太散亂了。先記錄一下，而後在整理，由於如今掌握的知識點還不夠全面。ios

圖片axios

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

　　下面開始作大樹。首先介紹一下背景，之前有一個本身的項目，也是先後端分離的設計，後端用asp.net開發，有不少現成的api接口，能夠提供頁面描述信息以及各類數據。前端用jQuery，本身寫了幾個插件實現的。後端

　　如今正好拿來作一下對比，同時也圓了我之前的一個夢想——後端不變的狀況下，前端能夠換各類UI！那時候前端框架的概念還不流行呢。如今的夢想就是：後端不變，前端換各類框架。api

　　因此打算直接用之前的後端接口來作。這樣不就省着等後端開發了嘛，並且這是徹底真實的數據，比假想一些需求要好的多。前端框架

　　樹作好了以後，加上事件，能夠動態建立tab。框架

2、思路

　　後端有一個接口能夠提供樹的數據，那麼咱們直接拿過來用。樹的結構很是簡單，只不過有點非主流，是我本身設計的，本身用着爽就行了。asp.net

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

3、設計與編碼

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);
  
            }