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

梦里梦外; 2022-06-01 03:36 195阅读 0赞

<template>
            
            <div class="right_col" role="main">
              
              <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>
            
    </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>