vue-resource實現(xiàn)get, post, jsonp]請求:

JSONP的實現(xiàn)原理:

• 由于瀏覽器的安全性限制，不允許AJAX訪問 協(xié)議不同、域名不同、端口號不同的 數(shù)據(jù)接口，瀏覽器認為這種訪問不安全；

• 可以通過動態(tài)創(chuàng)建script標簽的形式，把script標簽的src屬性，指向數(shù)據(jù)接口的地址，因為script標簽不存在跨域限制，這種數(shù)據(jù)獲取方式，稱作JSONP（注意：根據(jù)JSONP的實現(xiàn)原理，知曉，JSONP只支持Get請求）；

• 具體實現(xiàn)過程：

• 先在客戶端定義一個回調方法，預定義對數(shù)據(jù)的操作；

• 再把這個回調方法的名稱，通過URL傳參的形式，提交到服務器的數(shù)據(jù)接口；

• 服務器數(shù)據(jù)接口組織好要發(fā)送給客戶端的數(shù)據(jù)，再拿著客戶端傳遞過來的回調方法名稱，拼接出一個調用這個方法的字符串，發(fā)送給客戶端去解析執(zhí)行；

• 客戶端拿到服務器返回的字符串之后，當作Script腳本去解析執(zhí)行，這樣就能夠拿到JSONP的數(shù)據(jù)了；
  來手動實現(xiàn)一個JSONP的請求例子：

    // 導入 http 內置模塊
    const http = require('http')
   // 這個核心模塊，能夠幫我們解析 URL地址，從而拿到  pathname  query 
    const urlModule = require('url')
  
   // 創(chuàng)建一個 http 服務器
   const server = http.createServer()
   // 監(jiān)聽 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 發(fā)送給 客戶端， 客戶端去把 這個 字符串，當作JS代碼去解析執(zhí)行
   res.end(scriptStr)
   } else {
   res.end('404')
  }
   })
  
   // 指定端口號并啟動服務器監(jiān)聽
   server.listen(3000, function () {
   console.log('server listen at http://127.0.0.1:3000')
   })
  

1. vue-resource 的配置步驟：

• 直接在頁面中，通過script標簽，引入 vue-resource 的腳本文件；

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

    getInfo() { // 發(fā)起get請求
      //  當發(fā)起get請求之后， 通過 .then 來設置成功的回調函數(shù)
      this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
        // 通過 result.body 拿到服務器返回的成功的數(shù)據(jù)
        console.log(result.body)
      })
    },
    
    
   postInfo() { // 發(fā)起 post 請求   application/x-wwww-form-urlencoded
      //  手動發(fā)起的 Post 請求，默認沒有表單格式，所以，有的服務器處理不了
      //  通過 post 方法的第三個參數(shù)， { emulateJSON: true } 設置 提交的內容類型 為 普通表單數(shù)據(jù)格式
      this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
        console.log(result.body)
      })
    },
    
    
    jsonpInfo() { // 發(fā)起JSONP 請求
      this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
        console.log(result.body)
      })
    }
  

項目：品牌列表的增刪查項目

01.品牌列表-從數(shù)據(jù)庫獲取列表：

獲取所有的品牌列表
分析：
1. 由于已經導入了 Vue-resource這個包，所以 ，可以直接通過 this.http.get('url').then(function(result){})
4. 當通過 then 指定回調函數(shù)之后，在回調函數(shù)中，可以拿到數(shù)據(jù)服務器返回的 result
5. 先判斷 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 賦值給 this.list ; 如果不等于0，可以彈框提醒，獲取數(shù)據(jù)失??！

// 獲取所有的品牌列表 
      getAllList() {
          this.$http.get('http://www.baidu.com').then(result => {
            if (result.status === 0) {
              // 成功了
              this.list = result.message
            } else {
              // 失敗了
              alert('獲取數(shù)據(jù)失敗！')
            }

調用在data和methods之間：

當 vm 實例 的 data 和 methods 初始化完畢后，vm實例會自動執(zhí)行created 這個生命周期函數(shù)

    created() { 
       this.getAllList()
      }

02.品牌列表-完成添加功能:

添加品牌列表到后臺服務器
分析：
1. 聽過查看 數(shù)據(jù)API接口，發(fā)現(xiàn)，要發(fā)送一個 Post 請求， this.http.post() 中接收三個參數(shù)：
2.1 第一個參數(shù)： 要請求的URL地址
2.2 第二個參數(shù)： 要提交給服務器的數(shù)據(jù) ，要以對象形式提交給服務器 { name: this.name }
3.3 第三個參數(shù)： 是一個配置對象，要以哪種表單數(shù)據(jù)類型提交過去， { emulateJSON: true }, 以普通表單格式，將數(shù)據(jù)提交給服務器 application/x-www-form-urlencoded
3. 在 post 方法中，使用 .then 來設置成功的回調函

add(){
this.$http.post('api/addproduct', { name: this.name }, { emulateJSON: true }).then(result => {
            if (result.body.status === 0) {
              // 成功了！
              // 添加完成后，只需要手動，再調用一下 getAllList 就能刷新品牌列表了
              this.getAllList()
              // 清空 name 
              this.name = ''
            } else {
              // 失敗了
              alert('添加失??！')
            }
          }) 
}

03.品牌列表-完成刪除功能:

 del(id) { // 刪除品牌
          this.$http.get('api/delproduct/' + id).then(result => {
            if (result.body.status === 0) {
              // 刪除成功
              this.getAllList()
            } else {
              alert('刪除失敗！')
            }
          })
        }

04.品牌列表-全局配置數(shù)據(jù)接口的根域名與全局啟用 emulateJSON 選項:

注意：程序應寫在創(chuàng)建實例對象之前
如果我們通過全局配置了，請求的數(shù)據(jù)接口 根域名，則 ，在每次單獨發(fā)起 http 請求的時候，請求的 url 路徑，應該以相對路徑開頭，前面不能帶 / ，否則 不會啟用根路徑做拼接；

 Vue.http.options.root = 'http://xxxx';

全局啟用 emulateJSON 選項:

Vue.http.options.emulateJSON = true;