vue-프로젝트 : 날씨크롤링(3일차)

날씨 크롤링

<template>
  <div class="all">
    <button v-on:click="getData">
      날씨
    </button>

    <div>
      <dt class="detail">
        <dd class="temperature" v-for="(Temperature) in Temperature">
          {{Temperature}}
        </dd>
      </dt>
      <dt class="detail">
        <dd class="weather" v-for="(weather, index) in weather">
          {{weather}}
          <!-- <dd v-if="weather[index+1]==='맑음'"> 맑음1</dd>
          <dd v-else-if="weather[index+1]==='구름많음'"> 구름많음1</dd>
          <dd v-else-if="weather[index+1]==='흐림'"> 흐림1</dd> -->
        </dd>
      </dt>

      <dt class="detail">
        <dd class="time" v-for="(time) in time">
          {{time}}
        </dd>
      </dt>
    </div>




  </div>
</template>

<script>
var axios = require('axios')
var cheerio = require('cheerio');

export default {
  data() {
    return {
      number : '',
      Temperature : [],
      weather: [],
      time : [],
      checkWeather : ["구름많음", "흐림", "맑음" ]

    }
  },
  methods: {
    getData(){
      axios.get('https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=%EB%82%A0%EC%94%A8')
      .then(res => {
        var $ = cheerio.load(res.data)
        var number = $("#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.table_info.bytime._todayWeatherByTime > div.info_list.weather_condition._tabContent > ul > li").length
        this.number = number

        for(var i=1; i<=number; i++){
          this.Temperature.push($("#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.table_info.bytime._todayWeatherByTime > div.info_list.weather_condition._tabContent > ul > li:nth-child("+i+") > dl > dd.weather_item._dotWrapper > span:nth-child(1)").text())
        }
        for(var i=1; i<=number; i++){
          this.weather.push($("#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.table_info.bytime._todayWeatherByTime > div.info_list.weather_condition._tabContent > ul > li:nth-child("+i+") > dl > dd.item_condition > span").text())
        }
        for(var i=1; i<=number; i++){
          this.time.push($("#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.table_info.bytime._todayWeatherByTime > div.info_list.weather_condition._tabContent > ul > li:nth-child("+i+") > dl > dd.item_time > span").text())
        }
        console.log(this.weather)
      })
    }
  },
}
</script>

<style scoped>

  .detail{
    display: flex;
    flex-direction: row;
  }
  .temperature, .weather, .time{
    width: 12.5%;
    padding-top: 20px;
  }

</style>