vue-resource 实现 get, post, jsonp请求

vue-resource 实现 get, post, jsonp请求

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求。
ps：现在不推荐使用vue-resource，只是作为学习。

1. 之前的学习中，如何发起数据请求？
2. 常见的数据请求类型？ get post jsonp
3. 测试的URL请求资源地址：

• get请求地址： http://vue.studyit.io/api/getlunbo (链接失效)
• post请求地址：http://vue.studyit.io/api/post (链接失效)
• jsonp请求地址：http://vue.studyit.io/api/jsonp (链接失效)

4. JSONP的实现原理

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

   // 导入 http 内置模块
const http = require('http')
// 这个核心模块，能够帮我们解析 URL地址，从而拿到  pathname  query 
const urlModule = require('url')

// 创建一个 http 服务器
const server = http.createServer()
// 监听 http 服务器的 request 请求
server.on('request', function (req, res) {

 // const url = req.url
 const { pathname: url, query } = urlModule.parse(req.url, true)

 if (url === '/getscript') {
   // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用
   // var scriptStr = 'show()'

   var data = {
     name: 'xjj',
     age: 18,
     gender: '女孩子'
   }

   var scriptStr = `${query.callback}(${JSON.stringify(data)})`
   // res.end 发送给 客户端， 客户端去把 这个 字符串，当作JS代码去解析执行
   res.end(scriptStr)
 } else {
   res.end('404')
 }
})

// 指定端口号并启动服务器监听
server.listen(3000, function () {
 console.log('server listen at http://127.0.0.1:3000')
})

前台调用

5. vue-resource 的配置步骤：

• 直接在页面中，通过script标签，引入 vue-resource 的脚本文件；
• 注意：引用的先后顺序是：先引用 Vue 的脚本文件，再引用 vue-resource 的脚本文件；

6. 发送get请求：

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

7. 发送post请求：

postInfo() {
  var url = 'http://127.0.0.1:8899/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);
  });
}

8. 发送JSONP请求获取数据：

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

源代码

vue-resource改造品牌列表案例

  
  
  
  
  
  
  



  




    

      

        
添加品牌
      
      


        
          Name:
          
        

        
      
    



    

      

        

          
Id
          
Name
          
Ctime
          
Operation
        
      
      

        

          
{{item.id}}
          
{{item.name}}
          
{{item.ctime}}
          

            删除
          
        
      
    


  

  

源代码下载
视频学习地址