Vue SpringBoot 연동하기

화면단은 Vue, 백단은 SpringBoot를 Proxy방식으로 연동하는 방법을 기록한다.

 

Front와 Back은 분리하여 개발하는 것이 편의성이 좋으므로 아래와 같은 구조로 분리하겠다.

1. Vue 설정

   1.1 vue.config.js에서 proxy방식을 사용하기 위한 설정을 추가한다.

     build후 결과물 저장위치를 outputDir,

     back단 호출방식과 주소를 devServer 오브젝트에 proxy를 key로 주어 설정한다.

back단 호출방법은 localhost:port/api/xxx 이다.

   1.2 back단 호출 함수 선언 및 테스트용 버튼 구현

   1.3 npm run build 실행:  outputDir에 지정한 위치에 빌드생성

 

 

 

2. SpringBoot 설정

   2-1 . Controller

   /api/data를 호출하면 {"result": "api data"}  를 리턴한다.

   2-2. Configuration

 

   2-3. application.properties : 포트번호 지정

 

 

3. back단과 front단 서버실행 후 연동확인

콘솔에 찍힌 result값인 "api data" 출력된 모습