flask+vue：创建一个数据列表并实现简单的查询功能(二)

昨天写了一个简单的数据列表，传送门：flask+vue：创建一个数据列表并实现简单的查询功能(一) 

上述功能中还存在着几个缺陷：

1、进入这个菜单后，没有自动触发请求获取数据，导致页面为空；

2、切换页码或者重新选择每页条数后，没有自动重新加载数据，需要点一下查询按钮才行；

3、切换页码或者点击查询获取数据时，视觉上没有动态加载效果

 

本篇博客针对上述问题进行一些优化

在methods下新增一个方法query_data()

它里面的代码其实和submitForm()方法中的代码一样，都是获取前端参数发送请求，然后获取后端返回的数据(只是这个方法中不传任何参数)

query_data() {
      let url1 = "http://127.0.0.1:5000/"
      let payload = {
        class_type: this.form.class,
        create_date: this.form.create_date,
        page_num: this.currentPage,
        page_size: this.pageSize
      }
      
      axios({
        timeout: 10000,
        method: "get",
        params: payload,  //发送get请求，使用params关键字接收请求参数
        url: url1+"api/select_data"
      }).then(res => {
        let data_list = res.data.records.map(function(array) {
          let rObj = {};
          rObj["date"] = array[2]
          rObj["type"] = array[0]
          rObj["value"] = array[1]
          return rObj;})
        console.log(data_list)
        this.tableData = data_list
        // let data_count = res.data.count
        this.count = res.data.count

        if(res.data.code === 200){  //判断响应中的code是否为200
          console.log(res.data)
        }
        else{
          console.log(res.data)
        }
      }).catch((reason)=>{
        console.log(reason)
        this.button_mark = false
        this.$message({
          message: '接口调用失败，请检查系统是否正常',
          type: 'warning'
        });
      })


    }

1、打开列表菜单，自动触发请求

要实现这个功能，可以在<script>标签下添加生命周期钩子函数created()

然后把query_data()放在下面，这样每当进入这个页面后就会调用query_data()

2、切换页码或者重新选择每页条数后，自动重新加载数据

这个只需要在handleSizeChange()和handleCurrentChange()下调用query_data()即可，这样的话，当页码切换或者每页条数变更后会自动触发这2个事件，也会调用里面的query_data()方法，自动触发请求并传入当前的页码和每页条数

3、给列表添加loading加载提示

使用Loading 加载组件给列表添加动态加载效果

在<el-table>标签下添加v-loading 指令

在data()下新增一个参数loading，默认为false

当发起请求时，把loading值置为true，请求结束后把loading值置为false即可

整体效果如下