【老司机带你飞】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
扫码加微信