[vuejs] http 기본 데이터 통신

spring boot의 controller와 http통신을 하여 데이터를 가져오기를 예제이다.

axios를 이용하여 통신을 할 예정이다.

 

vue 프로젝트를 생성한 소스 정리 및 기본적인 controller를 작성

 vue 프로젝트를 생성하면 다음과 같은 구조로 되어있다.

1. App.vue에서 필요없는 내용은 제거

기본 뼈대만 남겨놓고 전부 지운 소스

2. 기본적인 controller  작성

정말 간단하게 GetMapping을 통해 해당 도메인을 호출하면 문자열을 return 해주는 소스이다.

 

3. HelloWorld.vue에서 axios를 이용하요 http 통신

 3.1 HelloWorld.vue에 필요없는 소스를 제거 후 기본적은 msg데이터를 출력하는 화면을 만든다.

 3.2 axios를 설치

 - npm install --save axios

 3.3 axios 설정 

axios를 import하고 Vue.prototype.$http = axios;로 설정한다.

 

 3.4 http 통신 설정

먼저 controller를 호출하는 버튼을 하나 만든 후  methods를 위와같이 추가한다.

 

이제 버튼을 클릭하면 controller와 통신하여 데이터가 바뀌는 것을 확인할 수 있다.