连着两篇都在记录继续製作小工具的必要知识，终于要继续写实际的程式了，超级开心。

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。