Hetianhan的博客
0%

axios

发表于 更新于 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
//三段提交内容，只有第一部分是必须
axios
     .post("http://localhost:8090/smartparking/status", 
           {carId: that.carId}
          )
     .then(function(response) {
       that.status = response.data[0].status;
       that.resCarId = response.data[0].carId;
     })
     .catch(function(error) {
       console.log(error);
     })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
   //搭配定时器使用
   //利用watch来观察status的变化
watch: {
    status: function() {
      console.log(this.status);
      //根据响应值status来判断车位状态  (-1: 未预约  -  白色 #FFFFFF)
      //                              (0:  已预约  -  绿色 #00CD00)
      //                              (1:  已停车  -  红色 #FF0000)
      //                              (  服务器错误   黑色 #030303)

      //发现一个问题，因为信道的问题还是什么？？有时候carId会错乱，需要判定一下request的carId和response的carId是否一致
      if (this.resCarId === this.carId) {
        if (this.status === -1) {
          console.log("未预约");
          this.backgroundcolor = "#FFFFFF";
        } else if (this.status === 0) {
          console.log("已预约");
          this.backgroundcolor = "#00CD00";
        } else if (this.status === 1) {
          console.log("已停车");
          this.backgroundcolor = "#FF0000";
        } else {
          console.log("数据库错误");
          this.backgroundcolor = "#030303";
        }
      }
    }
  },

mounted() {
    const that = this;
    that.timer = setInterval(() => {
      axios
        .post("http://localhost:8090/smartparking/status", 
              {carId: that.carId}
             )
        .then(function(response) {
          that.status = response.data[0].status;
          that.resCarId = response.data[0].carId;
        })
        .catch(function(error) {
          console.log(error);
        });
    }, 2000);
  },
  beforeDestroy() {
    window.clearInterval(this.timer);
  }
}