首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 03.vue-resource

Vue 03.vue-resource

作者头像
LittlePanger
发布2020-04-14 09:04:37
5040
发布2020-04-14 09:04:37
举报

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()
            })
        },

    }
})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vue-resource 发送请求
    • vue-resource 的配置
      • get请求
        • post请求
          • jsonp请求
            • JSONP的实现原理
        • demo:品牌管理改造
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档