项目实战请求数据

 

用axios配合接口实现一个简单的例子

第一步：

第二步：

第三步：

第四步：

第五步：

这里是我的项目需求 

一：这里需要传的参数为图下(且都设置默认值)

 data() {
    return {
      params: {
        pageNum: 1, // 当前页
        pageSize: 5, // 当前每页含多少数据
        orderBy: '' // 排序过滤
      },
  },

二：可以看到我是用get传参，不同的参数，后台会返回不同的值

这里order传的"hot"就代表热门，上面的需求详情也说过

<div :class="{'active': params.orderBy === ''}" @click="setOrderBy('')">最新发</div>
<div :class="{'active': params.orderBy === 'hot'}" @click="setOrderBy('hot')">热门发布</div>

三：浏览器network的请求如何看

all：all代表全部所有http请求，里面包括很多静态文件的下载等，比如下面很多的图片请求

xhr就过滤ajax请求，就是与后台交互的请求

点到xhr里的headers是传递的参数及头部信息

点到xhr里的preview是响应数据信息

然后一步步来做不同参数查询

orderBy：

之前设置过params这是用get方式传参的方法，设置orderBy默认为空字符串

 data() {
    return {
      params: {
        pageNum: 1, // 当前页
        pageSize: 5, // 当前每页含多少数据
        orderBy: '' // 排序过滤
      },
  },

设置一个setOrderBy方法 

我们在需要加hot的热门发布点击事件里添加hot ，由后端数据安排就可以按热门排序了

<div :class="{'active': params.orderBy === ''}" @click="setOrderBy('')">最新发</div>
<div :class="{'active': params.orderBy === 'hot'}" @click="setOrderBy('hot')">热门发布</div>

 遇到一个问题

当页数不是第一页的时候应该重新从第一页开始排序
如何解决的：

应该设置这个函数运行点击事件时，将当前页面设置为第一页：this.params.pageNum(当前页） = 1

这个问题同时存在分页page没有跟着变，怎么解决的

应该是当我们设置params.pageNum的值时，下面的分页组件的当前页就自动响应为设置的pageNum值，这相当于也是一个双向绑定的过程。当点击分页组件时我们通过this.params.pageNum = page 来设置值，保证了分页组件的current-page变化，那么params.pageNum也跟随变化。那我们现在就是需要实现params.pageNum变化时，分页组件的current-page也自动变化。

正好看elementUI文档有提供这个属性，也就是current-page，那我们增加这个属性就可以了。

curChange：

这个是当前页数，设置this.params.pageNum = page

   curChange(page){
      this.params.pageNum = page
      this.fetchData()
    }

这个是在element里调用的，调用事件就用上图红线标记的就好了，下图为调用代码

      <el-pagination class="ta_c mb20"
        background
        layout="sizes, prev, pager, next, jumper, ->, total"
        :total="total"
        :page-sizes="[5,10,15]"
        :page-size="5"
        :current-page="params.pageNum"
        @size-change="sizeChange"
        @current-change="curChange">
      </el-pagination>

 

sizeChange:

这里遇到一个问题，改变每一页sizechange的时候同时触发了当前页curChange，导致请求了2次

怎么解决的:

Element属性及方法怎么使用和设置：

      <el-pagination class="ta_c mb20"
        background
        layout="sizes, prev, pager, next, jumper, ->, total"
设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。
        :total="total"   /总条目数
        :page-sizes="[5,10,15]"  /每页显示个数选择器的选项设置
        :page-size="5"       /默认选择器第一位为5
        :current-page="params.pageNum"  /当前页数,这里设置为当前页数等于当前点击的页数
        @size-change="sizeChange"      /事件调用，调用函数sizeChang()
        @current-change="curChange">
      </el-pagination>

 

设置总条目数为自适应：

完整代码；

<template>
    </div>
      <el-pagination class="ta_c mb20"
        background
        layout="sizes, prev, pager, next, jumper, ->, total"
        :total="total"
        :page-sizes="[5,10,15]"
        :page-size="5"
        :current-page="params.pageNum"
        @size-change="sizeChange"
        @current-change="curChange">
      </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      params: {
        pageNum: 1, // 当前页
        pageSize: 5, // 当前每页含多少数据
        orderBy: '' // 排序过滤
      },
      total: 0,
      textarea: ''
    };
  },
  // 方法
  methods: {
    setOrderBy(orderBy) {
      this.params.orderBy = orderBy
      // 设置当前页数为第一页
      this.params.pageNum = 1
      this.fetchData()
    },
    fetchData () {
      ajax({
        url: 'event/orderList',
        // 点切换页数，数据也会重新改变
        params: this.params
      }).then(res => {
        this.demands = res.data.list
        this.total = res.data.total
      })
    },
    sizeChange(size){
      this.params.pageSize = size
      // this.fetchData() 当 当前页面改变并请求数据时，每条页面也会请求数据
    },
    curChange(page){
      this.params.pageNum = page
      this.fetchData()
    }
  },
  mounted(){
    this.fetchData()
  }
};
</script>