連著兩篇都在記錄繼續製作小工具的必要知識，終於要繼續寫實際的程式了，超級開心。

axios

實現AJAX技術的程式，簡單的說就是可以非同步執行程式，詳細內容可以參考這篇文章

注意!在使用之前需要安裝npm或是cdn
在這裡利用axios對伺服器發送要求取得資料

//html
<input type="submit" id="app" @click="send( )">

//js
    methods:{
        send:function(){
            axios.get("http://伺服器IP ? 條件 = &_order = ")
             .then(function(response){
                 console.log(response)
             })
         }
    }

這個部份因為我的資料庫或伺服器的URL自帶條件與排序的要求功能，但其他資料庫的方法我並沒有深入研究，所以每次在實作的時候要自行調整更改。

將 Vue 掛載到 id 為 app 的 div 上，並且在被點擊時執行 send( ) 將要求傳送出去並且在接收完成之後console.log( response )出來檢視。

結果在拿到資料後發現 response 除了想要的資料之外還有一大堆對我來說沒有用的 垃圾 data。

建構子

我選擇將拿到的response data以建構子的方法清洗並 push 進 text 陣列。

function search(response,inflist){
    this.plant = response[0].Plant, 
    this.line = response[0].Line, 
    this.position = response[0].PositionID, 
    this.inflist = [inflist]
}
function list(response){
    this.date = listarr[0].Date,
    this.ng = listarr[0].NGNG,
    this.ok = listarr[0].OKOK,
    this.total = listarr[0].Total
}

    text.push(new search(response, new list(response)))

new 一個建構子並將 response data 丟入就可以完成清洗並且 push 入 text 內。
以正規化來設計建構子，在同廠房同產線同零件編號的情況下每個日期的 NG 數、 OK 數 、Total 數，當廠房產線有不一樣的時候就要另存一個 search 。

text 可能會有無數個search，每個 search 的 inflist 會有無數個 list。