除了 vue-resource 之外，還可以使用 axios 的第三方包實現實現資料的請求

1. 常見的資料請求型別 get post jsonp
2. 測試的URL請求資源地址：

- get請求地址： http://vue.studyit.io/api/getlunbo
- post請求地址：http://vue.studyit.io/api/post
- jsonp請求地址：http://vue.studyit.io/api/jsonp

JSONP的實現原理

• 由於瀏覽器的安全性限制，不允許AJAX訪問 協議不同、域名不同、埠號不同的 資料介面，瀏覽器認為這種訪問不安全；
• 可以通過動態建立script標籤的形式，把script標籤的src屬性，指向資料介面的地址，因為script標籤不存在跨域限制，這種資料獲取方式，稱作JSONP（注意：根據JSONP的實現原理，知曉，JSONP只支援Get請求）；
• 具體實現過程：
  
  • 先在客戶端定義一個回撥方法，預定義對資料的操作；
  • 再把這個回撥方法的名稱，通過URL傳參的形式，提交到伺服器的資料介面；
  • 伺服器資料介面組織好要傳送給客戶端的資料，再拿著客戶端傳遞過來的回撥方法名稱，拼接出一個呼叫這個方法的字串，傳送給客戶端去解析執行；
  • 客戶端拿到伺服器返回的字串之後，當作Script指令碼去解析執行，這樣就能夠拿到JSONP的資料了；
• 帶大家通過 Node.js ，來手動實現一個JSONP的請求例子；

        const http = require('http');
        // 匯入解析 URL 地址的核心模組
        const
 
 urlModule = require('url');

        const server = http.createServer();
        // 監聽 伺服器的 request 請求事件，處理每個請求
        server.on('request', (req, res) => {
          const url = req.url;

          // 解析客戶端請求的URL地址
          var info = urlModule.parse(url, true);

          // 如果請求的 URL 地址是 /getjsonp ，則表示要獲取JSONP型別的資料
          if
 
 (info.pathname === '/getjsonp') {
            // 獲取客戶端指定的回撥函式的名稱
            var cbName = info.query.callback;
            // 手動拼接要返回給客戶端的資料物件
            var data = {
              name: 'zs',
              age: 22,
              gender: '男',
              hobby: ['吃飯', '睡覺', '運動']
            }
            // 拼接出一個方法的呼叫，在呼叫這個方法的時候，把要傳送給客戶端的資料，序列化為字串，作為引數傳遞給這個呼叫的方法：
            var result = `${cbName}(${JSON.stringify(data)})`;
            // 將拼接好的方法的呼叫，返回給客戶端去解析執行
            res.end(result);
          } else {
            res.end('404');
          }
        });

        server.listen(3000, () => {
          console.log('server running at http://127.0.0.1:3000');
        });

1.vue-resource 的配置步驟：

• 直接在頁面中，通過script標籤，引入 vue-resource 的指令碼檔案；
• 注意：引用的先後順序是：先引用 Vue 的指令碼檔案，再引用 vue-resource 的指令碼檔案；

2.傳送get請求：

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

3.傳送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);
      });
    }

4.傳送JSONP請求獲取資料：

    jsonpInfo() { // JSONP形式從伺服器獲取資料
      var url = 'http://127.0.0.1:8899/api/jsonp';
      this.$http.jsonp(url).then(res => {
        console.log(res.body);
      });
    }