Javascript - Vue - axios

本地crud的一個例子 

作個簡單的本地增刪查的例子

<div class="box">
    <p>列表</p>
    <div class="operation-box">
        <div>
            <label>ID：</label>
            <input type="number"  disabled="disabled"  />
        </div>
        <div>
            <label>姓名：</label>
            <input type="text" v-model="name"/>
            <button @click="add">OK</button>
        </div>

        <div>
            <label>搜索</label>
            <input type="text" v-model="keyWords"/>
        </div>
    </div>
    <table>
        <tr>
            <th>ID</th>
            <th>name</th>
            <th>operation</th>
        </tr>
        <tr v-for="item in search(keyWords)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td><a href="#"  @click="del(item.id)">刪除</a></td>
        </tr>
    </table>
</div>

列表的讀取再也不是直接從vue裏讀取list，而是經過調用方法search方法來獲得列表數據。搜索框使用了v-model，這樣能夠方便vue即時監視keywords的動態變化。當循環tr時，會調用search方法，向該方法傳遞了搜索框的keywords值，這樣vue就會即時監視這個值的變更，一旦keywords發生變化，就會從新觸發search方法獲得按條件查詢的數據。

var vm = new Vue({
    el: ".box",
    data: {
        name: "",
        keyWords:"",
        list: [
            { id: 1, name: "tim" },
            { id: 2, name: "korn" },
            { id: 3, name: "leo" }
        ]
    },
    methods: {
        add: function () {
            this.list.push({ id: this.list.length+1, name: this.name });
        },
        del: function (id) {
            var index = this.list.findIndex((item) => {
                if (item.id === id) return true;
            });
            this.list.splice(index, 1);
        },
        search: function (keystr) {
            if (keystr.trim() === "") {
                return this.list;
            }
            else {
                return this.list.filter(item => {
                    if (item.name.includes(keystr)) return item;
                });
            }
        }
    }
});

使用axios向服務端發起請求

這是官方推薦的新的ajax插件，用於客戶端向服務端發送請求。下載：axios

<div id="box">
    {{msg}}
    <button @click="sendGet">GetInfo</button> //發起get請求
    <button @click="sendPost">PostInfo</button> //發起post請求
</div>
</body>
</html>
<script type="text/javascript">

var vm = new Vue({
    el: "#box",
    data: {
        msg: "wait data",
        sendData: {
            name: "sam",
            age:18
        }
    },
    methods: {       
        sendGet: function () {
            var self=this;
            var getObj=axios.get("http://localhost:53385/Handler.ashx", {
                params: self.sendData    
            });
            var endObj= getObj.then(function (response) {
                self.msg = response.data;
            });
            endObj.catch(function (error) {
                self.msg = error.status + error.statusText;
            });
        },
        sendPost: function () {
            var self = this;
            var postObj = axios.post("http://localhost:53385/Handler.ashx", self.sendData);
            var endObj=postObj.then(function (response) {
                self.msg = response.data;
            });
            endObj.catch(function (error) {
                self.msg = error.status + error.statusText;
            });
        }
    }
});
</script>

服務端

ublic class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Write("OK");
        context.Response.End();
    }  
}

另外一個獲取json數據的例子

export  default  {
   data :  function ()  {
     return  {
      productList :  []
     };
   },
  methods :  {
     get :  function ()  {
       var  self  =  this ;
       self . $ajax
         .get ( "http://localhost:3000/src/json/productList.json" )
         .then ( function ( response )  {
           self . productList  =  response .data ; //不用轉換數據格式，直接賦值給本地變量便可
         })
         .catch ( function ( error )  {
           Toast ( "數據加載失敗"  +  error );
         });
     }
   },
   created :  function ()  {
     this .get ();
   }
};

　　

參考

axios簡書

 

Javascript - 學習總目錄