一 、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>