vue-resource 小抄

vue.js自己沒有提供網絡訪問能力，可是能夠經過插件完成。vue-resource就是這樣一個不錯的插件。它封裝了XMLHttpRequest和JSONP，實現異步加載服務端數據。

咱們如今搭建一個測試環境，由服務器提供json數據，啓動後等待客戶端的請求。數據爲user信息，內容爲：

var users = [
   {"name" : "1"},
   {"name" : "2"},
   {"name" : "3"},
]

咱們首先從最簡單的GET方法入手，場景以下：

1. 客戶端使用HTTP GET方法來訪問/users

2. 服務端返回整個json格式的user

3. 客戶端檢查返回的結果，和指望作驗證

我使用了以下庫：express.js作HTTP Server，且它自己就已經提供了GET方法監聽的內置支持

首先初始化項目，並安裝依賴：

npm init
npm i express --save

而後建立index.js文件，內容爲：

var express = require('express');
var app = express();
var path = require('path')
var public = path.join(__dirname, 'public')
app.use('/',express.static(public))
var users = [
   {"name" : "1"},
   {"name" : "2"},
   {"name" : "3"},
]
app.get('/users', function (req, res) {
  res.end( JSON.stringify(users));
})
var server = app.listen(8080, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("listening at http://%s:%s", host, port)
})

代碼行：

var public = path.join(__dirname, 'public')
app.use('/',express.static(public))

則是指明運行後，客戶端url的根目錄指向的是服務器的public目錄內。此目錄用來放置靜態文件，html+js+css等。代碼行：

app.get('/users', function (req, res) {
  res.end( JSON.stringify(users));
})

會監聽對/users的GET請求，若是發現請求到來，就會調用回調函數，並在在req、res內傳遞Request對象和Response對象。咱們在res對象內把users對象作一個字符串化，而後由res對象傳遞給客戶端。

客戶端訪問代碼：

<script src="https://unpkg.com/vue@2.0.6/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

<div id="app">
  {{msg}}
</div>
<script>
  var app = new Vue(
  {
      el:'#app',
      data:{
        msg:'hello'
      },
      mounted(){
        this.$http.get('/users').then((response) => {
          var j = JSON.parse(response.body)
          console.log(j.length == 3,j[0].name == '1',j[1].name == '2',j[2].name == '3')
        }, (response) => {
          console.log('error',response)
        });
       
    }
  })
</script>

如今啓動服務器：

node index.js

訪問

localhost:8080

在控制檯內發現：

true true true true

打印出來的結果所有爲true，就代表咱們已經完整的取得了users對象，由於咱們的代碼和指望是一致的。

對於GET類的HTTP請求方法，這樣作就OK了。另外幾種請求方法，監聽的作法是相似的。不一樣的地方，主要是客戶端可能會傳遞json過來到服務器，好比POST方法，能夠用來添加一個user，此時就須要客戶端傳遞一個JSON對象過來，服務器則須要解析JSON對象。此時有一個庫能夠幫咱們作這件事，它就是body-parser庫。代碼：

var bodyParser = require('body-parser')
app.use(bodyParser.json())

把body-parser庫的.json()做爲插件，插入到express內，這樣咱們就可使用：

response.body

取得客戶端發來的json對象了。

完整代碼以下(index.js)：

var express = require('express');
var app = express();
var path = require('path')
var bodyParser = require('body-parser')
app.use(bodyParser.json())
var public = path.join(__dirname, 'public')
app.use('/',express.static(public))
var users = []
function rs(){
  users = [
         {"name" : "1"},
         {"name" : "2"},
         {"name" : "3"},
      ]
}
rs()
app.put('/user/:id', function (req, res) {
  var userkey = parseInt(req.params.id) 
  users[userkey] = req.body
  res.end( JSON.stringify(users));
  rs()
})
app.delete('/user/:id', function (req, res) {
  var userkey = parseInt(req.params.id) 
  users.splice(userkey,1)
  res.end( JSON.stringify(users));
  rs()
})
app.get('/user/:id', function (req, res) {
  var userkey = parseInt(req.params.id) 
  res.end( JSON.stringify(users[userkey]));
})
app.get('/users', function (req, res) {
  res.end( JSON.stringify(users));
})
app.post('/user', function (req, res) {
  users.push(req.body)
  res.end(JSON.stringify(users))
  rs()
})
var server = app.listen(8080, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("listening at http://%s:%s", host, port)
})

這段服務器的代碼，提供了對5個url的監聽，其中兩個是GET方法，一個POST，一個PUT，一個DELETE。其中的rs()函數有些特別，目的是爲了測試方便。它讓每一個會修改數據對象的方法執行後均可以恢復原狀，以便供其餘客戶端訪問前都和初始值是同樣的。

node index.js

此時服務器已經就緒，等待客戶端的鏈接。而後是客戶端文件index.html。此時vue-resource派上用場。使用vue-resource首先須要加載vue.js，而後加載本身。咱們偷個懶，就不下載這些代碼到本地，而好似直接使用網絡上現成的代碼：

<script src="https://unpkg.com/vue@2.0.6/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

完整代碼以下：

<script src="https://unpkg.com/vue@2.0.6/d...

<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

<div id="app">
  {{msg}}
</div>
<script>
  var app = new Vue(
  {
    el:'#app',
    data:{
      msg:'hello'
    },
    mounted(){
       this.a()
       this.b()
       this.c()
       this.d()
       this.e()
    },
    methods:{
      a(){
        this.$http.get('/users').then((response) => {
          var j = JSON.parse(response.body)
          console.log('getall',j.length == 3,j[0].name == '1',j[1].name == '2',j[2].name == '3')
        }, (response) => {
          console.log('error',response)
        });
      },
      b(){
        this.$http.get('/user/0').then((response) => {
          var j = JSON.parse(response.body)
          console.log('getone',j.name == '1')
        }, (response) => {
          console.log('error',response)
        });
      },
      c(){
        this.$http.put('/user/0',{name:'1111'}).then((response) => {
          var j = JSON.parse(response.body)
          console.log('put',j.length == 3,j[0].name == '1111')
        }, (response) => {
          console.log('error',response)
        });
      },
      d(){
          this.$http.post('/user',{name:'4'}).then((response) => {
          var j = JSON.parse(response.body)
          // console.log(j)
          console.log('post',j.length == 4,j[3].name == '4')
        }, (response) => {
          console.log('error',response)
        });
      },
      e(){
        this.$http.delete('/user/2').then((response) => {
          var j = JSON.parse(response.body)
          // console.log(j)
          console.log('delete',j.length == 2)
        }, (response) => {
          console.log('error',response)
        });
      }
    }
  })
</script>

最後，打印出來的結果所有爲true，就代表咱們的代碼和指望是一致的。