vue-resource 配置小抄

完成vue-resource的第一步后，接下来看看它的配置。

配置案例

我们以一个配置项目root为例。它是比较有用的，因为我们常常规划api在一个url根下面，就可以使用此配置项简化api访问url。比如我们设计的api形如：

/api/user
/api/item

那么不妨设置root为/api，随后的/api/user就可以使用user来访问，/api/item就可以使用item访问。当然换成/user或者/item就不可以了。现在随便创建一个目录，进入此目录，然后来搭建实验环境：

   npm init -y
   npm i express --save

客户端代码（index.html，放置于public之下）：

  {{user}}

  {{item}}

服务端代码(index.js,放置于工程的根目录）：

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

app.get('/api/user', function (req, res) {
  res.end('hello user');
})
app.get('/api/item', function (req, res) {
  res.end('hello item');
})

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

方法$http可以传入一个options对象，在此对象内传递url，method等参数值。这样，在客户端写URL访问就可以使用相对URL，这样用起来多方便的。

这个案例中，使用了 http:{root:'/api'},在Vue实例内完成配置。当然也完全可以做全局配置，比如：

Vue.http.options.root = '/api'

这行代码放在创建Vue实例之前即可。

options对象还可以传递header，data进来的。比如：

  var options = {
    root:'/api',
    headers:{
      'Accept-Language':'en-US',
      Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='
    },
    data：{
      number:1
    }
  }

HTTP headers可以很多，具体的条目需要参考HTTP标准。在基本http调用方法$http之上，还可以使用

便利方法

vue-resource提供了如下的便利方法：

get(url,[data],[options])
post(url,[data],[options])
put(url,[data],[options])
delete(url,[data],[options])
jsonp(url,[data],[options])

方法get等分别对应HTTP method的GET、POST、PUT、DELETE方法，因此代码：

       options = {url:'/api/item',method:'get'}
       this.$http(options)

等同于:

 
 this.$http.get('/api/item')
 

其中的JSONP比较特别，单独介绍。