[Vue] 六、vue-resource插件的使用—demo

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/Marker__/article/details/95973720

上一篇博客总结了一下vue-resource插件的使用，这一篇博客用vue-resource来写一个小的demo。

一、需求描述：

通过vue-resource插件从服务器获取数据后显示到界面上，并且实现数据的增加和删除。

二、初步实现：

首先HTML代码：这里为了样式能好看一点用到了bootstrap.css

[code]<div id="app">

<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>Name:
<input type="text" v-model="name" class="form-control"/>
</label>
<input type="button" value="添加" @click="add" class="btn btn-primary"/>
</div>
</div>

<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Opreation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td><a href="#" @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>

JavaScript代码：

[code]var vm = new Vue({
el:'#app',
data:{
name:'',
list:[//这个数组初步存放一些数据
{id:1,name:'二哈',ctime:new Date()},
{id:2,name:'柯基',ctime:new Date()}
]
}
});

初步效果图如下：

三、从服务器请求数据并显示到网页上

JavaScript代码：

[code]var vm = new Vue({
el:'#app',
data:{
name:'',
list:[//存放数据的数组
{id:1,name:'二哈',ctime:new Date()},
{id:2,name:'柯基',ctime:new Date()}
]
},
created(){//当vm实例的data和methods初始化完毕之后，vm实例会自动执行created生命周期函数
this.getAllList()
},
methods:{
getAllList(){//从服务器获取数据
//分析：
//1.由于已经导入了vue-resource包，所以可以直接通过this.$http来发起数据请求
//2.获取列表的时候该向服务器发起一个get请求
//3.this.$http.get('url').then(function(result){})
//4.通过then指定回调函数之后，在回调函数中，可以拿到数据服务器返回的result
//5.先判断result.status是否等于0，如果是0就成功了，可以把result.result赋值给this.list
//	如果不等于0，可以弹框提醒，获取数据失败.

this.$http.get('http://www.liulongbin.top:3005/api/getprodlist').then(result => {
//注意：通过shttp获取到的数据，都在result.body中放着
var result = result.body
if (result.status === 0) {
//成功了
this.list = result.message
}else{
//失败了
alert('获取数据失败')
}
})
}
}
});

此时服务器中的数据：

发送get请求之后的页面：

四、完成添加功能

JavaScript代码：

[code]add(){//添加数据到服务器
//分析：
//1.完成添加功能要发送一个Post请求，this.$http.post
//2.this.$http.post()中接收三个参数
//	2.1 第一个参数：要请求的URL地址
//	2.2 第二个参数：要提交给服务器的数据，以对象的形式提交:{name:this.name}
//	2.3 第三个参数：一个配置对象，要以哪种表单数据类型提交过去，
//		{emulateJSON:true}，以普通表单格式提交给服务器application/x-www-form-urlencoded
//3.在post方法中使用.then来设置成功的回调函数，然后通过result.body来拿到成功的结果
this.$http.post('http://www.liulongbin.top:3005/api/addproduct',{name:this.name},{emilateJSON:true})
.then(result => {
if (result.body.status === 0) {
//成功了
//向服务器添加数据完成后，只需要手动调用getAllList()方法，就能刷新品牌列表
this.getAllList()
this.name = ''	//添加完成后清空name
}else{
//失败了
alert('添加失败！');
}
})
}

这部分代码写在Vue实例的methods里面就可以实现数据的添加，效果就不演示了

五、完成删除功能：

[code]del(id){//删除数据
this.$http.get('http://www.liulongbin.top:3005/api/delproduct/' + id)
.then(result => {
if (result.body.status === 0) {
//删除成功
this.getAllList()
} else{
//删除失败
alert('删除失败！')
}
})

}

这部分代码写在Vue实例的methods里面就可以实现：点击每条数据后面的删除按钮就会删除相应的每一条数据。

六、全局配置数据接口和根域名

[code]//如果我们通过全局配置了请求的数据接口根域名，则在每次单独发起http请求的时候，请求的ur1路径，
//应该以相对路径开头，前面不能带/，否则不会启用根路径做拼接
Vue.http.options.root = 'http://www.liulongbin.top:3005/';

这部分代码写在Vue实例的methods里面，全局配置数据接口和根域名之后，在每次单独发起http请求的时候，直接写url的相对路径就行了，而且如果有需求变动或者域名被更改，只需要更改全局的根据名就行了。

 

 

以上内容可参考vue-resource的GitHub

上一篇博客是vue-resource的介绍，这里是链接：vue-resource的介绍