前端窗体实时刷新

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_37508531/article/details/88902209

前言

  本次实现的功能：刷卡。界面连上刷卡机，当没有卡时，提示“寻卡失败”，有卡时，直接获取卡的物理卡号，因为使用的是创建的生命周期函数，只能获取一次卡号，如果进行换卡时，需要进行刷新界面，所以就有了让窗体实时刷新的功能，本次设置5秒一刷新，通过if判断，当卡号框不为空时，调用Isend方法，进行卡的一系列判断。

具体代码

    getData(data) {
      var url = this.apiUrl + "/OrderSystem/Card/GetPhysicalCardNumber";
      var vm = this;
      axios.get(url).then(function(response) {
        var card = response.data;
        vm.maincard = card;
        if (vm.maincard != "") {
          vm.Isend();
        }
        vm.initSetTimeout(vm.today);
      });
    },

  到时间初始化的方法：

initSetTimeout(today) {
      var vm = this;
      setInterval(() => {
        vm.getData(today);
      }, 5000);                                    //5000毫秒就是5秒
    }

  生命周期钩子函数：

created() {
    var url = this.apiUrl + "/OrderSystem/Card/GetPhysicalCardNumber";
    var vm = this;
    axios.get(url).then(function(response) {
      var card = response.data;
      vm.maincard = card;
      if (vm.maincard != "") {
        vm.Isend();
      }
      vm.initSetTimeout(vm.today);
    });
  }

结语

  代码的功能好强大！