在Vue中調用和風天氣api展示天氣詳情和生活指數

api的具體使用可以看官網。
我主要使用兩個api。
我新建了一個叫Weather.vue的Vue組件。

HTML代碼：

我使用Element-UI框架的el-tabs，弄了一個標籤頁，可以切換查看天氣詳情和生活指數。

<template>
  <div>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="實況天氣" name="first">
        <div class="hxp-weather ">
          <div class=" hxp-weather-footer">
            <div class="text-center hxp-weather-footer-left">
              <h2>{{tmp}}℃</h2>
              <em>{{cond_txt}}</em>
            </div>
            <div class="hxp-weather-footer-right">
              <ol>
                <li>體感溫度：{{fl}}</li>
                <li>風向：{{wind_dir}}</li>
                <li>風速：{{wind_spd}}</li>
                <li>風力：{{wind_sc}}</li>
                <li>降水量：{{pcpn}}</li>
                <li>相對溼度：{{hum}}</li>
                <li>大氣壓強：{{pres}}</li>
                <li>能見度：{{vis}}</li>
              </ol>
            </div>
          </div>
          
        </div>
      </el-tab-pane>

      <el-tab-pane label="生活指數" name="second">
        <div class="hxp-lifestyle">
          <el-table
                  :data="tableData"
                  style="width: 100%">
            <el-table-column
                    prop="type"
                    label="生活指數"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="brf"
                    label="簡介"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="txt"
                    label="詳細描述">
            </el-table-column>
          </el-table>
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

handleClick方法：

點擊標籤可以切換界面

handleClick(tab, event) {
       // console.log(tab, event);
        if(this.activeName == "first"){
          this.getWeatherData()
        }else if(this.activeName == "second"){
          this.getLifeStyleData()
        }
      }

查看天氣詳情部分：

我使用的api爲https://free-api.heweather.net/s6/weather/now?key=應用key&location=經緯度，可以上官網看請求參數以及返回的具體參數應用。

getWeatherData() {
        let config = {
          //location是否要存入vuex中？
          url: 'https://free-api.heweather.net/s6/weather/now?key=應用key&location=經緯度',
          method: 'get',
        }

        axios(config)
            .then((response) => {
              console.log(response.data.HeWeather6[0])

              // cid: "CN101011600", location: "東城", parent_city: "北京", admin_area: "北京", cnty: "中國
              console.log(response.data.HeWeather6[0].basic)

              // {loc: "2020-02-11 17:18", utc: "2020-02-11 09:18"}
              console.log(response.data.HeWeather6[0].update)

              //"ok"
              console.log(response.data.HeWeather6[0].status)

              //{cloud: "51", cond_code: "101", cond_txt: "多雲", fl: "8", hum: "55", …}
              console.log(response.data.HeWeather6[0].now)

              this.tmp = response.data.HeWeather6[0].now.tmp
              this.cond_txt = response.data.HeWeather6[0].now.cond_txt
              this.wind_dir = response.data.HeWeather6[0].now.wind_dir
              this.wind_spd = response.data.HeWeather6[0].now.wind_spd
              this.wind_sc = response.data.HeWeather6[0].now.wind_sc
              this.pcpn = response.data.HeWeather6[0].now.pcpn
              this.vis = response.data.HeWeather6[0].now.vis
              this.fl = response.data.HeWeather6[0].now.fl
              this.hum = response.data.HeWeather6[0].now.hum
              this.pres = response.data.HeWeather6[0].now.pres
            })
      }

查看生活指數部分：

我調用的api是：https://free-api.heweather.net/s6/weather/lifestyle?key=應用key&location=經緯度，並將請求回來的數據放在el-table中進行展示。

getLifeStyleData(){
        let config = {
          //location是否要存入vuex中？
          url: 'https://free-api.heweather.net/s6/weather/lifestyle?key=應用key&location=經緯度',
          method: 'get',
        }

        axios(config)
            .then((response) => {
              console.log(response.data.HeWeather6[0])

              //{cloud: "51", cond_code: "101", cond_txt: "多雲", fl: "8", hum: "55", …}
              console.log(response.data.HeWeather6[0].lifestyle)

              var data = response.data.HeWeather6[0].lifestyle
              for(var i = 0; i <data.length; i++){
                if(data[i].type == "comf"){
                  data[i].type = "舒適度指數"
                }else if(data[i].type == "drsg"){
                  data[i].type = "穿衣指數"
                }else if(data[i].type == "flu"){
                  data[i].type = "感冒指數"
                }else if(data[i].type == "sport"){
                  data[i].type = "運動指數"
                }else if(data[i].type == "trav"){
                  data[i].type = "旅遊指數"
                }else if(data[i].type == "uv"){
                  data[i].type = "紫外線指數"
                }else if(data[i].type == "cw"){
                  data[i].type = "洗車指數"
                }else if(data[i].type == "air"){
                  data[i].type = "空氣指數"
                }
              }
              this.tableData = response.data.HeWeather6[0].lifestyle
            })
      }