vue-프로젝트 (7일차)

(참고)
업비트 API 블로그
https://blog.naver.com/PostView.nhn?blogId=nhj7&logNo=221364410986&categoryNo=57&parentCategoryNo=0

내일 할일
1. 모든 코인 가격 추출하는법 찾기
2. 메인 타이틀에 날씨 어떻게 넣을지 고민하기
3. 상승폭이 크거나 작은 코인 차트로 만들기

1, for문 중단해서 검색
2. api호출 속도 제한

 

<template>
  <div class="total">

    <div class="left">
      <div class="korea">
        날씨
      </div>
    </div>


    <div class="tradeTitle">

      <div class="korea">
        <div>코스피</div>
        <strong>{{koreaPrice}}</strong>
        <span class="up" v-if="koreaCheck ==='상승'">
           ▲ {{koreaChange}} + ({{koreaPercent}}%)
        </span>
        <span class="down" v-else-if="koreaCheck ==='하락'">
          {{koreaPrice}} ▼ {{koreaChange}} - ({{koreaPercent}}%)
        </span>
      </div>

      <div class="america">
        <div>나스닥</div>
        <strong>{{americaPrice}}</strong>
        <span class="up" v-if="americaCheck ==='상승'">
           ▲ {{americaChange}} + ({{americaPercent}}%)
        </span>
        <span class="down" v-else-if="americaCheck ==='하락'">
           ▼ {{americaChange}} - ({{americaPercent}}%)
        </span>
      </div>

      <div class="bit">
        <div>비트코인</div>
        <strong>{{bitPrice}}</strong>
        <span class="up" v-if="bitCheck ==='RISE'">
           ▲ {{bitChange}} + ({{bitPercent}}%)
        </span>
        <span class="down" v-else-if="bitCheck ==='FALL'">
           ▼ {{bitChange}} - ({{bitPercent}}%)
        </span>
      </div>

    </div>
  </div>





</template>

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

export default {

  data() {
    return {
      loaded: false,
      koreaPrice: '',
      koreaChange: [],
      koreaCheck: '',
      koreaPercent:'',

      americaPrice: '',
      americaChange: [],
      americaCheck: '',
      americaPercent: '',

      bitPrice: '',
      bitChange: '',
      bitCheck: '',
      bitPercent: '',

      allCoin: [],
      allCoinChange: []

    }
  },
  methods: {
    koreaData(){
      axios.get('https://finance.naver.com/sise/sise_index.nhn?code=KOSPI')
      .then(res => {
        var $ = cheerio.load(res.data)
        this.loaded = true
        // 코스피 현재 가격
        this.koreaPrice = $('#now_value').text().split(',')
        this.koreaPrice = parseFloat(this.koreaPrice[0]+this.koreaPrice[1])

        // 코스피 수치 증감
        var beforeFilter = $('#change_value_and_rate > span').text()
        this.koreaChange = parseFloat(beforeFilter.substring(0,(beforeFilter.length-2)))

        // 코스피 상승, 하락 구분
        this.koreaCheck = beforeFilter.substring((beforeFilter.length-2), (beforeFilter.length))
        // if(this.koreaCheck === '상승'){
        //   this.koreaCheck = '하락'
        // } else if(this.koreaCheck === '하락'){
        //   this.koreaCheck = '상승'
        // }

        // 코스피 전날 대비 증감% - ((현재가-전일종가)/전일종가 * 100).
        // this.koreaPercent = parseFloat(this.koreaChange)/parseFloat(this.koreaPrice)
        if(this.koreaCheck === '하락'){
          this.koreaPercent = ((this.koreaPrice-(this.koreaPrice+this.koreaChange)) / (this.koreaPrice + this.koreaChange)*100).toFixed(2)
        } else if(this.koreaCheck === '상승'){
          this.koreaPercent = ((this.koreaPrice-(this.koreaPrice-this.koreaChange)) / (this.koreaPrice - this.koreaChange)*100).toFixed(2)
        }

      })
    },
    americaData(){
      axios.get('https://finance.naver.com/world/sise.nhn?symbol=NAS@IXIC')
      .then(res => {
        var $ = cheerio.load(res.data)
        this.loaded = true
        // 나스닥 현재 가격
        this.americaPrice = $('#content > div.rate_info > div.today > p.no_today > em').text().split(',')
        this.americaPrice = parseFloat(this.americaPrice[0]+this.americaPrice[1])

        // 나스닥 수치 증감
        this.americaChange = $('#content > div.rate_info > div.today > p.no_exday > em:nth-child(2)').text()
        this.americaChange = parseFloat(this.americaChange)

        // 나스닥 상승, 하락 구분
        var beforeCheck = $('#content > div.rate_info > div.today > p.no_exday > em:nth-child(3) > span.ico.plus').text()

        if(beforeCheck === '+'){
          this.americaCheck = '상승'
        } else if (beforeCheck === '-'){
          this.americaCheck = '하락'
        }

        // 코스피 전날 대비 증감% - ((현재가-전일종가)/전일종가 * 100).
        // this.koreaPercent = parseFloat(this.koreaChange)/parseFloat(this.koreaPrice)
        if(this.americaCheck === '하락'){
          this.americaPercent = ((this.americaPrice-(this.americaPrice+this.americaChange)) / (this.americaPrice + this.americaChange)*100).toFixed(2)
        } else if(this.americaCheck === '상승') {
          this.americaPercent = ((this.americaPrice-(this.americaPrice-this.americaChange)) / (this.americaPrice - this.americaChange)*100).toFixed(2)
        }

      })
    },
    bitCoin(){
      axios.get('https://api.upbit.com/v1/ticker?markets=KRW-BTC')
      .then(res => {
        this.loaded = true
        var bit = res.data[0]
        console.log(bit)
        var tranlate = /\B(?=(\d{3})+(?!\d))/g // 1000원마다 , 찍어주는식
        this.bitPrice = bit.trade_price.toString().replace(tranlate, ',')
        this.bitChange = bit.change_price
        this.bitCheck = bit.change
        this.bitPercent = (bit.change_rate*100).toFixed(2)

      })
    },
    allData(){
      var Str = '';

      // 모든코인 이름 배열에 담기
      axios.get('https://api.upbit.com/v1/market/all')
      .then(res => {
        for(var i=0; i<res.data.length; i++){
          Str += res.data[i].market+","
        }
        this.allCoin = Str.split(',')

        // 모든코인 가격 배열에 담기
        var test = [];
        for(var j=0; j<9; j++){
          axios.get('https://api.upbit.com/v1/ticker?markets='+this.allCoin[j])
          .then(res2 => {
            test.push(res2.data[0])
            this.allCoinChange.push(res2.data[0].trade_price)
          })
        }
        console.log(test)
        console.log(this.allCoinChange)
      })

    },
  },

  mounted(){
    this.koreaData()
    this.americaData()
    this.bitCoin()
    this.allData()
  },
}
</script>

<style scoped>
 .up{
   color: red;
 }
 .down{
   color: blue;
 }
 strong{
   font-size: 18px;
 }
 .total{
   display: flex;
   flex-direction: row;
 }
 .tradeTitle{
   width: 50%;
   text-align: left;
   margin-left: 50px;
 }
 .america{
   padding-top: 10px;
   padding-bottom: 10px;
 }
 .left{
   width: 50%;
   text-align: left;
 }
</style>

1. 메인 부분에 코스피, 나스닥, 비트코인 표시

2. 변수에 코인마다 가격 담기