從後端到前端之Vue（一）寫個表格試試水

時間 2019-11-05

標籤後端前端 vue 表格試試简体版

原文原文鏈接

目錄：css

一、腳本式開發.前端

二、工程化開發vue

三、工程化和腳本的區別node

四、來個table試試水mysql

4,一、目標sql

4.二、思路數據庫

4.三、設計與編碼npm

4.四、效果json

五、業務分離後端

六、功能拓展——個性化設置

正文：

　　我之前是後端（asp.net）開發，會點js、jQuery，可是不會寫js特效，至於css嘛，拿來用現成的能夠，本身動手寫就不會了。

　　發現如今前端開發的勢頭太猛了，有一點要幹掉後端的感受，因而萌發了想要學一學前端開發的想法。那麼前端三大框架，先學哪個呢？就先學學Vue吧，爲啥呢？很簡單呀，他只有三個英文字母，好記好寫。

　　Vue的學習時間比較短，才3、五天吧，因此有些用法可能很稚嫩，甚至是錯誤的，不過不怕，纔剛開始學，及時發現錯誤及時改正就好。天天都寫點心得，萬一碰見好人給指點一二，那就掙大發了。

　　Vue至少有兩種開發方式：腳本是開發和工程化開發。

1、腳本式開發

　　就是和jQuery的使用有點像，在頁面裏引用vue.js，而後按照vue的規則寫模板、寫代碼，就能夠開魯了。這種方式和jQuery挺像的，用着也是很爽的，改完代碼一保存，瀏覽器裏面一刷新就能夠看到效果，很直觀方便。

　　這種方式適合初初學者，以及對一些想法作測試，驗證想法是否行的通。可是正式項目裏面可不能夠這麼用呢？一本書裏面說——不能夠。可是做爲一個Vue的初學者，我如今尚未能力作這個判斷。

2、工程化開發

　　這個剛一開的時候感受很懵逼，可是看着看着發現了，這個不就是後端作開發的方式嗎？簡直太像了。

　　後端開發，以asp.net mvc 爲例（爲啥不用其餘語言呢？千萬別掙，由於我只會這一種，其餘的不會）。打開IDE，創建一個項目，選擇框架版本，選擇項目類型，選擇。。。。。而後IDE會根據你的選擇，加載DLL引用，加載必須的js腳本，創建文件夾，創建配置文件，創建默認頁面、代碼。而後一運行，一個簡單的網站就出來了。

　　Vue的工程化開發竟然也是這個樣子的。首先要安裝node和npm，而後安裝Vue-cli，這個叫作腳手架，emmm，一臉懵逼這是啥？看看上一段我寫的，這個腳手架通通能作。固然不是引用dll這類的，而是引用Vue開發須要的各類東東，也會讓你作各類選擇，最後創建文件夾，而後神奇的是，能夠用node作一個站點，直接就運行了。還能夠模擬後端。

　　這個也太牛叉了吧，我感受，再加上一個數據庫（好比mysql），就沒有後端啥事了。

　　具體怎麼作就不細說了，emmmm，好吧我如今也只是只知其一;不知其二。反正很神奇就對了。

3、工程化和腳本的區別

　　若是說腳本開發，是把js文件引入到頁面，而後寫代碼的話，那麼工程化是把本身的代碼加到了Vue的框架裏面，給框架補點肉，整個項目就出來了。

　　歷史的發展就是這樣的，無論我的喜不喜歡，這種開發方式一定愈來愈火，不肯意接受的，遲早會被淘汰的。

4、來個table試試水

　　看官網、查百度會有一些簡單的介紹，這裏也是依據這些簡單的介紹，來點稍微複雜一些的，也是比較實用的一種用法。由於我也只是初學，不知道這種用法屬於什麼級別的，拋磚引玉，拿出來供你們參考一下。

　　一、目標

　　　　無論作什麼事情，都要先定一個目標，這裏雖然只是一個試水，可是也應該知道要作成啥樣子的。那麼就定一個簡單的表格吧，好比下圖這個樣子的。

　　　　很簡單的一個表格，列很少，由於列數不是問題。看了實現方式你就知道了。

　　二、思路

　　　　Vue的特色就是——數據驅動視圖。數據爲主，而後把數據綁定到頁面。這個是核心，千萬別跑偏了。

　　　　那麼咱們來分析一下，這個表格由兩個部分組成：表頭和表體。

　　　　表頭：公司名稱、電話等。實際項目裏確定還會有不少列。這裏先拿兩個舉例。使用<tr><th>來標示。

　　　　表體：就是公司信息的列表，由多條數據組成，字段數量和表頭對應。用<tr><td>來標示。

　　　　那麼咱們設計一個表頭和表體的數據包，而後讓Vue一綁定就ok了。

　　三、設計與編碼

　　　　先設計一個數據包，emmmm，不知道專業的叫法是啥，反正就是弄一個json的結構。好比這樣：

var table = new Vue({
        el: '#table',
        data: {
            message: '公司信息!',
            orderBy: ["c1", "c2"], //能夠控制字段的前後順序，想調整列的前後順序，改這個數組就行，能夠作個性化設置
            tableTh: {//表頭的描述信息
                c1: {
                    title: "公司名稱", //還能夠增長其餘描述，好比width等
                    align: "left"
                },
                c2: {
                    title: "電話",
                    align: "right"
                }
            },
            dataList: [
                {
                    //數據包，字段名做爲關鍵字，便於列的調整前後順序
                    c1: "度娘2",
                    c2: "123123123"
                },
                {
                    c1: "企鵝2",
                    c2: "7897899787"
                },
                {
                    c1: "阿里爸爸2",
                    c2: "456456456"
                }
            ]
        }
    });

　　el 這個是Vue的保留字，必須這麼寫，後面是dom的ID，好比<div id="table"> 。用jQuery的思路就是 $(‘#table’)。

　　data 這個也是Vue的保留字，後面是model，結構能夠隨意設置，怎麼玩就看想象力了。

　　固然Vue還有不少保留字，好比方法的等等，不過這裏先介紹這兩個，其餘的之後再說。

　　而後在設計一個模板，好比這樣：

<div id="table">
    {{ message }}
    <table class="table_default1" >
        <tr>
            <th>序號</th>
            <th v-for="th in tableTh" >
                {{th.title}}
            </th>
        </tr>
        <tr v-for="(tr,index) in dataList">
            <td>{{index+1}}</td>
            <td v-for="td in tr" >
                {{td}}
            </td>
        </tr>
    </table>
</div>

　　不知道你們有沒有發現一個問題：這裏面沒有任何和業務相關的東東，那個「序號」不算的話。

　　這個模板也很簡單，表頭用一個循環就出來了，數據包裏面有多少列，就能夠循環出來多少列，因此我開頭說的，多少列不重要，由於循環就對了，管他多少列呢？

　　表體用了兩個循環（嵌套循環）就出來了。這個用法比較很好理解吧。這個我就不想多解釋了，說多了會有一種湊字數的感受。

　　四、效果

　　發現我劇透了，上面那個圖就是運行效果。數據包設計好，模板設置好，而後交給Vue就能夠了，打開瀏覽器查看網頁，就能夠看到這個效果。

5、業務分離

　　這個模板能夠看作是全部列表的通用模板，由於他適合任何一種數據，無論是公司信息列表，仍是員工信息，仍是產品信息，均可以這樣寫，並且copy過來以後不用改！由於我把業務相關的通通放到了數據包裏面。增長一個列表需求，只須要寫數據包便可，不用改模板代碼，是否是很方便？

　　固然，若是你們都是這麼作的，那麼就是英雄所見略同。昨天在一個前端羣裏問了半天，也沒有人告訴我，他們的數據列表是怎麼作的，結果我到如今也仍是不知道在Vue裏面你們是怎麼作數據列表的。百度了一下，也沒發現啥有用的信息。

6、功能拓展個性化設置

　　不知道你們有沒有遇到這樣的狀況，接到一個任務，要求作一個數據列表裏面有n個字段，這個沒啥的嘛，作唄。可是這麼多的列哪一個在前哪一個在後呢？若是文檔裏明確說明了，那麼好辦，按照文檔裏的來唄。若是文檔裏沒有明確說明前後順序，那麼咋辦？只能按照本身的習慣來了。

　　而後作好以後給用戶看，第一個領導看了說，這個電話怎麼放這了，不重要放最後好了。

　　而後給另外一個領導看說，哎，這個電話怎麼放最後了，不是和大家說了嗎，這個要放前面！

　　？？？剛纔那個領導說，，，，，。

　　而後又給操做人員看，操做人說，這個電話放這裏不習慣，能不能改一改？

　　這裏只是舉一個簡單的例子，客戶的需求老是千奇百怪的，調整順序只是最簡單最多見的。

　　對於客戶來講，不就是改個位置嗎，我用Excel每天改順序，大家這個項目確定比Excel厲害吧，改個順序很難嗎？

　　不難呀，只是別改來改去的，另外我到底聽誰的？

　　細心的你可能會發現，數據包裏面有一個orderBy: ["c1", "c2"]沒有用上，這個是幹嗎的？

　　這個不是給數據排序的，而是給列排序的。這個數組裏放的是key，後面兩個數據包都是以這些key來組織數據的。那麼這個數組裏的key的前後順序就是列的前後順序。

　　因此只須要改這個數組裏的key就能夠了。而後咱們能夠爲每個用戶都設置一個獨立的數組，這樣每一個用戶均可以有本身的列的順序了，互相不干擾。這樣客戶都滿意了，咱們也不用老是調整順序了。

　　最後，模板須要改一下：

<div id="table">
    {{ message }}
    <table class="table_default1" style=" ">
        <tr>
            <th>序號</th>
            <th v-for="key in orderBy" >
                {{tableTh[key].title}}
            </th>
        </tr>
        <tr v-for="(tr,i) in dataList">
            <td>{{i+1}}</td>
            <td v-for="key in orderBy"  v-bind:align="tableTh[key].align">
                {{tr[key]}}
            </td>
        </tr>
    </table>
</div>