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

<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:function(){
        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>