Vue 03.vue-resource

vue-resource 发送请求

vue-resource GitHub文档

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求

vue-resource 的配置

• 直接在页面中，通过script标签，引入 vue-resource 的脚本文件；

• 注意：引用的先后顺序是：先引用 Vue 的脚本文件，再引用 vue-resource 的脚本文件；

• 全局配置根路径及emulateJSON 选项

• // 如果通过全局配置请求的数据接口根域名，则在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带/，否则不会启用根路径做拼接；
  Vue.http.options.root = 'http://baidu.com/';
  // 全局启用 emulateJSON 选项
  Vue.http.options.emulateJSON = true;
  

get请求

getInfo() { // get 方式获取数据
  this.$http.get('http://vue.studyit.io/api/getlunbo').then(res => {
    console.log(res.body);
  })
}

post请求

postInfo() {
  var url = 'http://vue.studyit.io/api/post';
  // post 方法接收三个参数：
  // 参数1： 要请求的URL地址
  // 参数2： 要发送的数据对象
  // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
    console.log(res.body);
  });
}

jsonp请求

jsonpInfo() { // JSONP形式从服务器获取数据
  var url = 'http://vue.studyit.io/api/jsonp';
  this.$http.jsonp(url).then(res => {
    console.log(res.body);
  });
}

JSONP的实现原理

• 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
• 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
• 具体实现过程：
  • 先在客户端定义一个回调方法，预定义对数据的操作；
  • 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
  • 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
  • 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；

demo:品牌管理改造

html

<div id="app">
    <input type="text" v-model="add_name">
    <button @click="addInfo">添加</button>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>time</th>
            <th>operation</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime}}</td>
            <td><a href="" @click.prevent="delInfo(item.id)">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>

js

Vue.http.options.root = 'http://127.0.0.1:5000/';
var vm = new Vue({
    el:"#app",
    data:{
        add_name:'',
        list:[]
    },
    created(){
        this.getInfo()
    },
    methods:{
        getInfo() { // 获取所有数据
            url = "get_brand";
            this.$http.get(url).then(res => {
                this.list = res.body.data
            })
        },
        addInfo(){  // 添加数据
            url = "add_brand";
            this.$http.post(url,{name:this.add_name}, { emulateJSON: true }).then(res => {
                this.getInfo()
                this.add_name=''
            })
        },
        delInfo(id){  // 删除数据
            url = "del_brand";
            this.$http.post(url,{id:id}, { emulateJSON: true }).then(res => {
                this.getInfo()
            })
        },

    }
})