【老司機帶你飛】vue.js基礎入門教程（十六）

vue-resouse（vue對ajax的封裝）

vue實現異步加載需要引入vue-resource庫
腳手架環境引入對應模塊

注意：完成這部分內容我們需要上節的知識，需要啓動node.js服務端監聽

<script src="js/vue-resource.js" type="text/javascript"></script>

1）查詢user表中的所有數據

<div id="app">
    <button v-on:click="getuser">查詢所有用戶</button>
    <div>
        <h3>顯示用戶數據</h3>
        <ul>
            <li v-for="(user,index) in users" :key="index">{{user.username}}---{{user.age}}---{{user.sex}}</li>
        </ul>
    </div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            users:[]
        },
        methods:{
            getuser:function () {
                var that = this;
                this.$http.get("http://localhost:3000/api/getuser").then( function(res) {
                    that.users = res.data;
                    console.log(res.data)
                })
            }
        }
    })
</script>

注意：在then的回調函數中，this並不指代vue實例，所以要在ajax外面取到全局的this。或者使用es6的語法，使用箭頭函數，即可在回調中使用this

 getuser:function () {
      this.$http.get("http://localhost:3000/api/getuser").then( (res)=> {
          this.users = res.data;
          console.log(res.data)
      })
 }

2）根據用戶id查詢用戶數據

this.$http.get("http://localhost:3000/api/getuserbyid",{params:{id:1}}).then( (res)=> {
    this.users = res.data.message;
    console.log(res)
},function () {
    console.log("請求失敗處理");
})

3）添加用戶

<div id="app">
    <form action="" @submit.prevent>
        <p>用戶名: <input type="text" v-model="user.username"></p>
        <p>年齡: <input type="text" v-model="user.age"></p>
        <p>性別:
            <input type="radio" v-model="user.sex" value="男">男
            <input type="radio" v-model="user.sex" value="女">女
        </p>
        <p><button @click="adduser">提交</button></p>
    </form>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            user:{
                username:"",
                age:"",
                sex:""
            }
        },
        methods:{
            adduser:function () {
               var params = this.user;
               this.$http.post("http://localhost:3000/api/adduser",params,{emulateJSON:true}).then((res)=>{
                   console.log(res);
               })
            }
        }
    })
</script>

vue-resource的post提交需要第三個參數：{emulateJSON:true}

4）刪除用戶

<div id="app">
    <button v-on:click="deluser">刪除用戶</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
        },
        methods:{
            deluser:function () {
                this.$http.get("http://localhost:3000/api/deluser",{params:{id:1}}).then((res)=>{
                    if(res.data.err_code==200){
                        alert("用戶刪除成功");
                    }else{
                        alert("刪除失敗");
                    }
                })
            }
        }
    })
</script>

5）修改用戶

<div id="app">
    <form action="" @submit.prevent>
        <p>用戶名: <input type="text" v-model="user.username"></p>
        <p>年齡: <input type="text" v-model="user.age"></p>
        <p>性別:
            <input type="radio" v-model="user.sex" value="男">男
            <input type="radio" v-model="user.sex" value="女">女
        </p>
        <p><button @click="updateuser">提交</button></p>
    </form>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            user:{
                id:"",
                username:"",
                age:"",
                sex:""
            }
        },
        created:function(){
            this.$http.get("http://localhost:3000/api/getuserbyid",{params:{id:2}}).then((res)=>{
                this.user=res.data.message[0];
            })
        },
        methods:{
            updateuser:function () {
                var user = this.user;
                this.$http.post("http://localhost:3000/api/updateuser",user,{emulateJSON: true}).then((res)=>{
                    console.log(res.data.message);
                })
            }
        }
    })
</script>

至此，我們使用vue-resource實現了數據庫的增刪改查操作。

QQ：732005030
掃碼加微信