Spring Boot - Vue.js 연동

Spring Boot로 MyBatis 와의 연동을 진행해 봤으니 (2018/08/29 - [IT/Spring] - Spring Boot - MyBatis 연동) 

이젠 화면을 만들어 볼 시간이다.

JSP 로 구현해도 되겠지만 6월달까지 공부를 진행했던 vue.js 를 이용해서 화면을 만들어 보면 더 재미있을 것 같다. 
최종적인 모습은 Spring Boot + JPA + Vue.js (with bootstrap) 이며 
일단 Spring Boot + MyBatis + Vue.js 로 간단한 CRUD 를 만들어 보고 

그럴싸한 프로젝트를 하나 구상해서 개발 한 후에 MyBatis ==> JPA 로 변경하는 작업을 할 예정이다.

사실 Vue.js 와의 '연동' 이라는 표현은 그리 적절하지 않다.  ('연동' 이라고 할만한 작업이 없기 때문이다...)

프로젝트의 Package 구성을 살펴보면 아래와 같다. 

src, target 과 같은 level 에 frontend 라는 폴더를 하나 만들었고

src/main/resources 밑에 static 폴더가 생성되었으며 그 아래 index.html 이 있다. 

먼저 콘솔에서 프로젝트 폴더로 이동하고 webpack 기반의 vue.js 프로젝트를 만든다.

vue init webpack frontend

위와 같이 vue-cli 명령어를 이용하여 프로젝트를 생성한다. 
그럼 frontend 폴더가 생성되고 그 안에 webpack  기반의 프로젝트가 구성된다. 
vue-cli 를 이용한 프로젝트 구성에 대한 상세한 내용은 아래 링크를 통해 확인할 수 있다. 
https://blog.naver.com/spdlqjdudghl/221293422474

이제 설정만 바꾸면 끝난다. 

잘 만들어진 frontend 프로젝트를 들어가 보면 config 라는 폴더가 있고 그 안에 index.js 파일이 있다. 

build : { ... } 부분의 index 와 assetsRoot 부분을 위 그림과 같이 수정하자. 

(spring boot 프로젝트에서 default 로 바라보는 index.html 위치로)

이제 vue.js 프로젝트를 build 하면 결과물(index.html)이 spring boot 에서 바라보는 위치로 저장될 것이다. 

이제 작업은 끝났다. 
Spring Boot 프로젝트를 실행시키고 localhost:8080 으로 접속 해 보자. ^^

쉽다. 
이제 Backend 는 Spring Boot 로 작업하고 Frontend 는 Vue.js 로 작업하면서 간단한 CRUD 를 만들어보자. 

source code는 아래 링크에서 확인 가능하다.
https://github.com/kimyounghoi/springboot/tree/master/firstproject