饿了么项目---5、vue-resource的使用（版本：1.3.4）

一 、vue-resource的使用API

在vue-resource的官网上已经解释的很清楚了，贴上链接链接：
https://github.com/pagekit/vue-resource

1.1 下载vue-resource插件

首先在package配置

"dependencies": {
    "vue": "^2.3.3",
    "vue-resource": "1.3.4"
  }

然后在当前项目目录下，使用命令行安装：
npm install
此命令会安装package.json中未安装的依赖文件，不会重新下载全部依赖。

1.2、引入vue-resource

main.js中引入

import vueResource from 'vue-resource';
Vue.use(vueResource);

1.3vue-resource的具体使用

1.3.1发送服务端请求的方法

• get(url, [options])　　
• head(url, [options])　　
• delete(url, [options])　　
• jsonp(url, [options])　　
• post(url, [body], [options])　　
• put(url, [body], [options])　　
• patch(url, [body], [options])

配置option：

Parameter	Type	Description
url	string	URL to which the request is sent
body	Object, FormData, string	Data to be sent as the request body
headers	Object	Headers object to be sent as HTTP request headers
params	Object	Parameters object to be sent as URL parameters
method	string	HTTP method (e.g. GET, POST, …)
responseType	string	Type of the response body (e.g. text, blob, json, …)
timeout	number	Request timeout in milliseconds (0 means no timeout)
before	function(request)	Callback function to modify the request
progress	function(event)	Callback function to handle the ProgressEvent of uploads
credentials	boolean	Indicates whether or not cross-site Access-Control
emulateHTTP	boolean	Send PUT, PATCH and DELETE requests with a HTTP
emulateJSON	boolean	Send request body as

请求后返回response方法与属性,通过response的方法与属性获取相应数据

Property	Type	Description
url	string	Response URL origin
body	Object, Blob, string	Response body
headers	Header	Response Headers object
ok	boolean HTTP	status code between 200 and 299
status	number	HTTP status code of the response
statusText	string	HTTP status text of the response
Method	Type	Description
text()	Promise	Resolves the body as string
json()	Promise	Resolves the body as parsed JSON object
blob()	Promise	Resolves the body as Blob object

二、e le me中的使用

 此案例中的后台数据用json数据模拟,数据中格式为3个主要对象组成为seller、goods、ratings，每个对象代表一个部分的object对象数据

2.1、data.json数据准备

  将data.json数据放置在my_project项目根目录下，并在build文件夹中的dev-server.js中引入data.json文件
  配置好服务端的接口代码。
  vue-li搭建脚手架项目环境时，使用了express插件，该插件是 基于node.js平台的web 应用开发框架。
dev-server.js中该部分代码如下：

//引入express插件
var express = require('express')
var app = express()
//请求本地json数据
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

var apiRoutes = express.Router();

apiRoutes.get('/seller', function (req, res) {
  res.json({
    errno: true,
    data: seller
  });
});

apiRoutes.get('/goods', function (req, res) {
  res.json({
    errno: true,
    data: goods
  });
});

apiRoutes.get('/ratings', function (req, res) {
  res.json({
    errno: true,
    data: ratings
  });
});

app.use('/api', apiRoutes);

2.2、在app.vue中发送数据请求

使用create钩子函数，在其中请求数据。
response请求到的数据为服务接口中返回的json数据，请求数据成功的标志位response.errno，此标志为接口中定义好的。返回的数据使用response的body属性获取。
app.vue的代码如下：

<template>
    <div id='app'>
        <v-header></v-header>
        <div class='tab'>
            <div class='tab-item'>
              <router-link :to="{name:'goods'}">商品</router-link>
            </div>
            <div class='tab-item'>
              <router-link :to="{name:'ratings'}">评论</router-link>
            </div>
            <div class='tab-item'>
              <router-link :to="{name:'seller'}">商家</router-link>
            </div>
        </div>
        <div class='content'>
              <keep-alive>
                <router-view></router-view>
              </keep-alive>
        </div>
    </div>
</template>

<script>
import header from './components/header/header.vue';
export default {
  name:'app',
  data(){
    return{
      headerData:{}
    }
  },
  created(){
    this.$http.get('/api/seller').then((response)=>{
      response = response.body;
      if(response.errno){
        response =response.data;
        console.log(response)
      }

    },(response)=>{
      console.log(response)
    })
  },
  components:{'v-header':header}
}
</script>