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 - 学习总目录