Vue.js : 데이터 바인딩(vue, axios, springboot)

 

 

 

테이블 생성(html)

윗 줄에 데이터 항목명, 아래 줄에 데이터를 넣으려 합니다.

 

 

 

 

Vue 객체에 data, methods, method 실행 시점 설정

 var vm = new Vue({
	el: '#app',
    
	//사용할 데이터
	data: {

	},

	//마운트 된 시점수행
	mounted: function(){
		
	},
    
	//함수
	methods: {
    
    },

});

저는 기존에 작성되어 있는 컴포넌트를 이용한 부분이 있어서 

코드를 작성하면 의미가 없을 것 같아

순서를 기록해두려 합니다.

 

data : 테이블 리스트 데이터를 배열로 가져오도록 코드 작성했습니다.

methods : 데이터를 가져오는 함수를 작성했습니다.

mounted : 메서드가 실행되는 시점을 마운트 된 시점으로 잡아 작성한 함수를 호출했습니다. 

 

 

 

axios로 통신

 

axios get 메서드를 작성하여 컨트롤러에 요청을 보냅니다.

 

 

Controller - Service - Xml 작성하여 DB 데이터 접근

 

컨트롤러에서 서비스로 , 서비스에서 다오 연결 후 xml 쿼리를 통해 DB에서 데이터를 불러오고

 

다시 서비스 - 컨트롤러로 응답하여 뷰 객체로 돌아옵니다.

 

응답에 따른 로직은 뷰 객체 하부에 작성한대로 처리될 것입니다 :)