用户管理分页 网络请求 图片路径

<template>
<!-- page content -->
<div class="right_col" role="main">
<!-- top tiles -->
<div class="row">
<div class="col-xs-12 x_title">
<h3>用户列表</h3>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<form class="form-inline">
<div class="form-group">
<label for="page-size">每页显示记录数：</label>
<select v-model="pageSize" class="form-control" id="page-size">
<option value="10">10</option>
<option value="20">20</option>
<option value="40">40</option>
<option value="60">60</option>
<option value="80">80</option>
<option value="100">100</option>
</select>
</div>
</form>
</div>
<div class="col-xs-4 col-xs-offset-5">
<div class="form-group has-feedback">
<label for="product-kw" class="sr-only">搜索关键字：</label>
<input class="form-control" type="text" id="product-kw" placeholder="请输入搜索关键字">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table class="table table-hover table-striped" id="table-laptop">
<thead>
<tr>
<th>
<div class="checkbox" style="margin: 0;">
<label>
<input type="checkbox">全选
</label>
</div>
</th>
<th>编号</th>
<th>头像</th>
<th>登录名</th>
<th>用户名</th>
<th>性别</th>
<th>邮箱</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table-laptop tbody">
<tr v-if="list.length==0">
<td colspan="8">
<div class="loading">
<img src="../assets/img/loading.gif" alt="">
</div>
</td>
</tr>
<tr v-for="u in list">
<td><input type="checkbox"></td>
<td>{{u.uid}}</td>
<td><img class="pic" :src="require('../assets/'+u.avatar)"></td>
<td><p class="fname" :title="u.uname">{{u.uname}}</p></td>
<td><p class="title" :title="u.user_name">{{u.user_name}}</p></td>
<td><p class="spec" :title="u.gender">{{u.gender}}</p></td>
<td><p class="spec" :title="u.email">{{u.email}}</p></td>
<td><p class="spec" :title="u.phone">{{u.phone}}</p></td>
<td>
<a href="user_details.html">详情</a>
<a href="user_update.html">修改</a>
<a href="user_delete.html">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-xs-12">
<ul class="pagination pull-right" id="pagination">
<li v-if="pno>1"><a @click="modifyPage(false)">上一页</a></li>
<li :class="{active:page==pno}" v-for="page in pageList">
<a @click="changePage(page)">{{page}}</a>
</li>
<li v-if="pno<pageCount"><a @click="modifyPage(true)">下一页</a></li>
</ul>
</div>
</div>
</div>
</div>
<br>
</div>
<!-- /page content -->
</template>

<script>
export default{
created:f
dc91
unction(){
this.loadUserPage();
},
data:function(){
return {
pno:1,
pageSize:10,
html:"",
list:[],
pageCount:0,
pageList:[]
}
},
methods:{
loadUserPage(){
this.$http.get('http://localhost/admin/data/user_list.php?pno='+this.pno+"&pageSize="+this.pageSize).then((response)=>{
this.list=response.data.data;
this.pageCount=response.data.pageCount;
this.pageList=[];
for(var i=0;i<this.pageCount;i++){
this.pageList.push(i+1);
}
})
},
modifyPage(isNext){
if(isNext){
this.pno++;
}else{
this.pno--;
}
this.loadUserPage();
},
changePage(page){
this.pno=page;
this.loadUserPage();
}
},
watch:{
pageSize:function(){
this.pno=1;
this.loadUserPage();
}
}
}
</script>