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之下）：

<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">
  {{user}}<br>
  {{item}}
</div>
<script>
  Vue.http.options.root = '/api'
  var app = new Vue(
  {
      el:'#app',
      http:{
        root:'/api',
      },
      data:{
        user:'placeholder',
        item:'placeholder'
      },
      mounted(){
        var options = {url:'user',method:'get'}
        this.$http(options).then((response) => {
          this.user = response.body
        }, (response) => {
          console.log('error',response)
        });
       options = {url:'/api/item',method:'get'}
       this.$http(options).then((response) => {
          this.item = response.body
        }, (response) => {
          console.log('error',response)
        });
    }
  })
</script>

服务端代码(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比较特别，单独介绍。