粉丝管理 (二)-粉丝列表-pagination分页组件-带有背景色的分页模式 & 粉丝图片id超出js最大安全数值-需要使用json-bigint处理 & async调用接口数据，拿到并解构数据

02-粉丝管理-粉丝列表

pagination分页组件-带有背景色的分页模式：
https://element.eleme.cn/#/zh-CN/component/pagination

结构：src/views/fans/index.vue中的div盒子里

<el-tab-pane label="粉丝列表" name="list">
          <div class="fans_list">
            <!-- id 默认是对象类型 超出了js最大安全数值  需要使用json-bigint处理
                                  key需要字符串 转 数字类型   toString() -->
            <div class="fans_item" v-for="item in fansList" :key="item.id.toString()">
              <el-avatar :size="80" :src="item.photo"></el-avatar>
              <p>{{item.name}}</p>
              <el-button type="primary" plain size="small">+关注</el-button>
            </div>
          </div>
           <!-- 分页 -->  //拿到分页组件，看需要哪些数据进行局部修改
          <el-pagination
          style="text-align:center"
          background layout="prev, pager, next"
          :total="total"
          :page-size="reqParams.per_page"
          :current-page="reqParams.page"
          @current-change="changePager"
          hide-on-single-page
          ></el-pagination>

数据：src/views/fans/index.vue中的data里

 reqParams: {
        page: 1,   //页表
        per_page: 24   //总条数
      },
      fansList: [],
      total: 0

函数：src/views/fans/index.vue中的methods里

  // post 请求 post(‘地址’，‘数据’)
    // get 请求 get(‘地址’，‘{params:数据}’)

    //解构赋值
// 得到 用户 信息  res.data.data  res = {data:{data:'用户信息',message:'提示'}}
// 以前获取对象中的属性值：res.data ={data:'用户信息'}
// ES6提供解构赋值语法：{data:{data:data}}

  // 函数的返回值  加载await之后  是then接受的数据
  // 在使用await之后在 外层函数必须用async 来申明  
//await向后台发请求

//拿数据  改分页
changePager (newPage) {
      this.reqParams.page = newPage
      this.getFans()
    },
    async getFans () {
        //调用接口数据，拿到数据，解构数据
      const { data: { data } } = await this.$http.get('followers', { params: this.reqParams })
      this.fansList = data.results
      this.total = data.total_count
    }

修改样式：

转行内块，可设置宽高

display: inline-block;
  margin-right: 50px;
  margin-bottom: 20px;