Nayha

export default {

	data() {
		return{
			timeCounter : 180, //3분
			resTimeData : ''
		}
	}
	create(){
		//3분 유효 타이머 시작 
		this.start()
	}
	methods: {
		start(){
			// 1초에 한번씩 start 호출
			this.polling = setInterval( () =>{
				timeCounter-- //1찍 감소
				resTimeData = this.preTime()
				if (this.timeCounter <= 0) this.timeStop()
			},1000)
		},
		// 시간 형식으로 변환 리턴
		prettyTime() {
		  let time = this.timeCounter / 60
		  let minutes = parseInt(time)
		  let secondes = Math.round((time - minutes) * 60)
		  return this.pad(minutes, 2) + ":" + this.pad(secondes, 2)
		},	
		// 2자리수로 만들어줌 09,08...
		pad(n, width) {
		  n = n + '';
		  return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n
		},		
		timeStop() {
		  clearInterval(this.polling)
		},		
		// 재발행
		smsReset() {
		  clearInterval(this.polling)
		  this.tcounter = 180
		  this.startTime()
		},		
	},
	beforeDestroy() {
		clearInterval(this.polling)
	}
    
}

VUE el-table colspan , rowspan 

뷰에서 그리드 대신 el-table 사용한다 

가로,새로 합치는 방법 

  <el-table 
	:data="rowData"
	:span-method="합쳐라메서드"
	empty-text="데이터없음.">
	
	<el-table-column label="A"  prop="id"></el-table-column>  
	<el-table-column label="B" prop="name"></el-table-column>
	<el-table-column label="C" prop="date"></el-table-column>
	
</el-table>			

합쳐라메서드({ row, column, rowIndex, columnIndex }) {
	// 첫번째 인덱스 && 특정값일때 가로 3줄 colspan
	if( columnIndex === 0 && row.id ==='test' ){
		return [1,3]
	}else if( columnIndex === 1 && row.id ==='test'){
		// 합쳐져서 데이터 columnIndex 밀려서 정확한 데이터 출력 위해
		return [0,0]
	}else if( columnIndex === 2 && row.id ==='test'){
		// 합쳐져서 데이터 columnIndex 밀려서 정확한 데이터 출력 위해
		return [0,0]
	}else{
		// 아래처럼 사용해도 되고 
		// npm install element-ui-table-span-method  설치 후 
		// https://github.com/h69/element-ui-table-span-method 
		// 아래 리턴 사용 해도 깔금하다..
		// return spanRow({ row, column, rowIndex, columnIndex }, this.rowData, this.option)
		if( columnIndex === 0 && row.id !='test' ){		
			//id test가 아닐때 세로 2줄 합치고 싶다
			return {rowspan: 2,colspan: 1}
		}else{
			return {rowspan: 0,colspan: 0}				
		}
	}
}	

  

코드 참조 :

https://codepen.io/JISOU/pen/byEVPP?&editable=true
 

https://element.eleme.io/#/en-US/component/table

axios.js 생성

import axios from "axios"

axios.defaults.baseURL = "https://reqres.in"
axios.defaults.headers.common["Authorization"] = "testcode"
axios.defaults.headers.post["Content-Type"] = "application/json; charset=utf-8"

main.js 에 axios import

import axios from "./axios"

new Vue({
  axios,
  render: h => h(App)
}).$mount("#app")

각 vue 에서

import axios from "axios"

export default {
  data() {
    return {
      email: "jiyu@korea.com",
      password: null
    }
  },
  computed: {
 
  },
  methods: {
    getlogin() {
      axios
        .get("/api/users?page=2")
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
        .then(() => {
          // always executed
        })
    },
    postTest() {
      axios
        .post("/api/register", {
          email: "sydney@fife",
          password: "pistol"
        })
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

VUEX 설치

npm install vuex --save

 store.js  파일 생성

import Vue from "vue" 
import Vuex from "vuex" 

Vue.use(Vuex) 

export default new Vuex.Store({ 

  state: { 
    testInfo: { id: 1, name: "공통사용", email: "test@test.com" }, 
  }, 

  //state 값을 변화 
  mutations: { 
  }, 
    //비지니스 로직 
  actions: { 
  } 

}) 

main.js  에서 전역 사용 설정

import store from './store' 

new Vue({ 
  el: '#app', 
  render: h => h(App), 
  router, 
  store 
}) 

사용할 VUE 생성

Test.vue

<template>
  <div>
    <h1> 전역변수 ---> {{ testInfo.name }}</h1>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  computed: {
    ...mapState(["userInfo", "testInfo"])
  }
}
</script>

rtnArraydata[0]['name']

배열데이터 rtnArraydata[ index 번호 ] name 값을 가져와라..

이게 생각이 안나서 폭풍 검색 했는데 안나옴..

이걸 키워드를 어떤걸 걸어야하나.. 다들 삽질 하지 마세요 ~

javascript array , return array ,삽질 방지 

구현 하려던 기능은

- 페이지 로딩하고 셀렉트 박스 동적 셋팅

- 동적 세팅된 값 중 첫번째 값 자동 선택

vue 코드 

export default {

  data () {

    return {

      roadData: {

        selectlist: [],

        selected: null

      }

    }

  },

  mounted () {

    this.onInit()

  },

  methods: {

    onInit () {

      this.doSearchInit()

    },      

    doSearchInit () {

        Http.get(`셀렉트박스데이터/url `, 전달파라미터 ).then(data => {

            this.roadData.selectlist = []

            this.roadData.selectlist = data

            this.roadData.selected = data[0]['name']

        })

    }    

  }

}

</script>

처음에는 구글 라이브러리를 쓸려다 

혹시 VUE 라이브러리도 있을까? 하고 찾아봤더니 있었음 !!!! ㅎㅎㅎ

vue 컴퍼넌트 설치 방법 공유

우선 PC에 

- nodeJs 설치 필요 그래야 npm 사용 가능 !!!

설치 후 VS_CODE 나 CMD 로 

cmd 에서 node -v  버전 나오면 설치 된거임

Webpack 설치(vue 통합 프레임웍 이라고 생각)

https://github.com/vuejs-templates/webpack-simple

$ npm install -g vue-cli

$ vue init webpack-simple my-project

$ cd my-project

$ npm install

$ npm run dev

프로젝트 뜨는것 확인 후 !!! ( 자동으로 브라우저가 뜬다) 해당 설정은 webpack.config.js 에서 확인 가능

다시 VUE-D2B 설치 (생키 다이어그램을 위해서 )

https://github.com/d2bjs/vue-d2b 

$ npm install vue-d2b --save

http://localhost:8080 에서 제일 처음 호출 되는 Vue 찾아서

- my-project 에 App.vue 

소스 변경 ( 안에 데이터를 좀 변경해봄)

<template>

  <div class = 'chart'>

    <chart-sankey :data = 'chartData' :config = 'chartConfig'></chart-sankey>

  </div>

</template>

<script>

  import { ChartSankey } from 'vue-d2b'

  export default {

    data () {

      return {

        // The chart data varies from chart to chart. To see what type of data

        // to provide each chart type head over to the d2bjs.org docs.

        chartData: {

          nodes: [

            {name: 'Node A'},

            {name: 'Node A_1'},

            {name: 'Node A_2'},

            {name: 'Node A_3'},

            {name: 'Node A_4'},                                    

            {name: 'Node B'},

            {name: 'Node C'},

            {name: 'Node D'},

            {name: 'Node E'},

            {name: 'Node 1'}

          ],

          links: [

            {source: 'Node A', target: 'Node E', value: 200},

            {source: 'Node A', target: 'Node C', value: 2000},

            {source: 'Node B', target: 'Node C', value: 3200},

            {source: 'Node B', target: 'Node D', value: 300},

            {source: 'Node C', target: 'Node D', value: 200},

            {source: 'Node C', target: 'Node E', value: 1202},

            {source: 'Node C', target: 'Node 1', value: 2400},

            {source: 'Node 1', target: 'Node E', value: 2800},

            {source: 'Node A_1', target: 'Node C', value: 120},

            {source: 'Node A_2', target: 'Node C', value: 20},

            {source: 'Node A_3', target: 'Node C', value: 40},

            {source: 'Node A_4', target: 'Node C', value: 80},

            {source: 'Node D', target: 'Node E', value: 400}

          ]

        },

        // There are many configuration options for each chart type, checkout

        // the d2bjs.org docs for more information.

        chartConfig (chart) {

          chart

            // returns the d2b svg sankey generator

            .sankey()

            // returns the d3 sankey generator

            .sankey()

            // now configure the d3 sankey generator through method chaining

            .nodePadding(50)

        }

      }

    },

    components: {

      ChartSankey

    }

  }

</script>

<style scoped>

  .chart{

    height: 500px;

  }

</style>

소스 저장하는 순간 !!!

webpack 에서 설치된 hot reload? 여하튼 그걸로 인하여 

이미 변..경 ㅎㅎㅎ

샘플 적용 끄~읏