vue-resource发送请求

使用vue-resource发送请求

1.引入文件（vue.js文件和vue-resource.js文件)

2.通过this.$http.请求方式(请求方式对应的参数).then(成功回调函数，失败回调函数)

3.通过成功回调函数的result.body获取数据

<div class="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo">
</div>

<script src="../lib/vue-2.4.0.js"></script>
<script src="../lib/vue-resource-1.3.4.js"></script>
<script>
    var vm = new Vue({
        el:'.app',
        data:{},
        methods:{
            getInfo(){
                this.$http.get('http://jsonplaceholder.typicode.com/users').then(function (result) {
                    console.log(result.body)
                })
            },
            postInfo(){
                this.$http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(function (result) {
                    console.log(result.body)
                })
            },
            jsonpInfo(){
                this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(function (result) {
                    console.log(result.body);
                })
            }
        }
    })
</script>

配置全局数据接口根域名：

Vue.http.options.root=" 跟域名/ "

this.$http.get(url路径)

配置了全局根域名后，当发起http请求的时候，应该以相对路径开头，前面不能带“/”:this.$http.get(url路径)

---

配置全局post请求头JSON类型

Vue.http.options.emulateJSON = true

---

从数据库发起请求获取商品列表

 /*在创建实例（created），有了data和methods时，调用获取数据库数据的方法，展示在页面上*/

    <link href="../lib/bootstrap.css" rel="stylesheet">
<div class="app">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">商品列表</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                Name:
                <input type="text" class="form-control">
            </label>
            <input type="button" class="btn btn-primary" value="添加">
        </div>
    </div>

    <table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>email</td>
            <td>Option</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
            <td>
                <a href="">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="../lib/vue-2.4.0.js"></script>
<script src="../lib/vue-resource-1.3.4.js"></script>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            list:[
                {id:1,name:"兰博基尼",time:new Date()}
            ]
        },
        /*在创建实例，有了data和methods时，调用获取数据库数据的方法，展示在页面上*/
        created(){
            this.getData();
        },
        methods:{
            /*获取数据库数据:发送请求*/
            getData(){
                this.$http.get('http://jsonplaceholder.typicode.com/users').then(function (result) {
                    this.list = result.body;
                })
            }
        }
    })
</script>