在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
            })
      }