get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])
具体举例如下：
1、导入vue-resource
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
2、基于全局Vue对象使用http
// 通过someUrl获取后台数据，成功后执行then的代码
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback)
3、在一个Vue实例内使用$http
// $http是在vue的局部范围内的实例
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback)
说明：
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。
首先引入一下element的js?
1
<script src="plugins/element-ui/index.js"></script>
然后引入需要用到的vue相关的js文件
?
1
2
3
4
<script src="plugins/vue/vue.js"></script>
<script src="plugins/vue/vue-resource.js"></script>
<script src="plugins/vue/vue-moment.min.js"></script>
<script src="js/jquery.min.js"></script>
下面先说一下html文件
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div id="user">
<!-- 操作 -->
<ul class="btn-edit fr">
<li >
<el-button type="primary" @click="dialogCreateVisible = true">添加用户</el-button>
<el-button type="primary" icon="delete" :disabled="selected.length==0" @click="removeUsers()" >删除</el-button>
<el-button type="primary" icon="edit" :disabled="selected.length==0" >停用</el-button>
<el-button type="primary" icon="edit" :disabled="selected.length==0" >激活</el-button>
</li>
</ul>
<!-- 用户列表-->
<el-table :data="users"
stripe
v-loading="loading"
element-loading-text="拼命加载中..."
style="width: 100%"
height="443"
@sort-change="tableSortChange"
@selection-change="tableSelectionChange">
<el-table-column type="selection"
width="60">
</el-table-column>
<el-table-column sortable="custom" prop="username"
label="用户名"
width="120">
</el-table-column>
<el-table-column prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column prop="phone"
label="手机"
>
</el-table-column>
<el-table-column prop="email"
label="邮箱">
</el-table-column>
<el-table-column prop="create_time" sortable="custom" inline-template
label="注册日期"
width="260">
<div>{{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}</div>
</el-table-column>
<el-table-column inline-template
label="操作"
width="250">
<el-button type="primary" size="mini" @click="removeUser(row)">删除</el-button>
<el-button type="primary" size="mini" @click="setCurrent(row)">编辑</el-button>
</el-table-column>
</el-table>
<!--分页begin-->
<el-pagination class="tc mg"
:current-page="filter.page"
:page-sizes="[10, 20, 50, 100]"
:page-size="filter.per_page"
layout="total, sizes, prev, pager, next, jumper"
:total="total_rows"
@size-change="pageSizeChange"
@current-change="pageCurrentChange">
</el-pagination>
<!--分页end-->
</div>
这一段是element的表单以及编辑还有分页样式 可以直接复制进来 其中添加了一些click操作 后面需要用到，然后我们就开始引入js
了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据 一些规则 定义一些变量
在methods进行我们的操作
?
1
2
3
4
5
vm = new Vue({
el: '#user',
data:{},
methods:{}
})
首先 我们先从读取数据开始
放入你的url
users是表格绑定的数组 也是存放从后台获取的数据
将需要显示的数据放在filter中
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
vm = new Vue({
el: '#user',
// 数据模型
data: function() {
return {
url: 'url',
users: [],
filter: {
per_page: 10, // 页大小
page: 1, // 当前页
name:'',
username:'',
phone:'',
is_active:'',
sorts:''
},
total_rows: 0,
loading: true,
}
},
methods:{}
})
接下来我们添加methods
pageSizeChange() 以及 pageCurrentChange()是用于分页的函数
在query() 是用于搜索的项目
getUsers() 就是用于获取数据
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
methods: {
pageSizeChange(val) {
this.filter.per_page = val
this.getUsers()
},
pageCurrentChange(val) {
this.filter.page = val
this.getUsers()
},
query(){
this.filter.name=''
this.filter.username=''
this.filter.phone=''
this.filter[this.select]=this.keywords
this.getUsers()
},
// 获取用户列表
getUsers() {
this.loading = true
var resource = this.$resource(this.url)
resource.query(this.filter)
.then((response) =>{
this.users = response.data.datas
this.total_rows = response.data.total_rows
this.loading = false
})
.catch((response)=>{
this.$message.error('错了哦，这是一条错误消息')
this.loading = false
})
},
}
