vue와 springboot를 이용한 간단 admin 운영툴 만들기 구글 슬라이드 : https://docs.google.com/presentation/d/1hBeWgdhD-wTk1cU8Irvvsmsafo4nm62XWkuT7-WwRBI/edit?usp=sharing

1. Hands-on
Vue.js + Spring Boot
Simple Admin
월간 슬라이드 4월
고재성

2. 목표
Vue.js 와 Spring Boot를 사용해서
빠르게 심플한 Admin(운영툴) 뼈대를 만들어 보는 것
관련 예제 소스 : https://github.com/kjs850/vue-admin

3. 개요
● Vue Cli 을 통한 프론트 페이지 작성
○ Vue Bootstrap
○ Vue Router
○ Axios
● Spring Boot를 통한 백엔드 API 작성
○ Mysql
○ Spring JPA
● Vue + Spring Boot 연동
● Vue 빌드된 파일 + Spring Boot로 서비스

4. 스프링 부트로 프로젝트 세팅
스프링 부트로 간단한 웹 환경 구성.
- Web, Rest Repository
- Thymeleaf
- JPA, Mysql

5. 프로젝트 구조
vue-admin 이란 프로젝트 세팅

6. Vue 세팅 개요
Bootstrap Vue를 사용 : https://bootstrap-vue.js.org/
Vue cli 3를 통한 방법을 사용 : https://bootstrap-vue.js.org/docs#vue-cli-3

7. BootstrapVue 세팅
vue-admin 프로젝트 내, frontend란 이름으로 세팅
> npx @vue/cli create frontend
- default 선택
> cd frontend
> npm i bootstrap-vue

8. 세팅 후 vue-admin 프로젝트 구조 및 화면
vue-admin 프로젝트 내 fronend 폴더 생성
frontend 폴더 내
> npm run serve
페이지 구동 및 화면 확인

9. BootstrapVue 플러그인 등록
https://bootstrap-vue.js.org/docs#vue-cli-3 과 같이 bootstrap-vue 설정 추가
설정파일 : frontend > src > main.js

10. Header NavBar 붙여보기
https://bootstrap-vue.js.org/docs/components/navbar
위 링크의 해당 마크업을 copy & paste
components 하위 Header.vue라는 컴포넌트로 생성

11. App.vue에서 Header 컴포넌트 불러오기
App.vue는 index.html 에 삽입되는 컴포넌트
App.vue에서 Header 컴포넌트를 불러와 준다.

12. NavBar 붙인화면 확인
> npm run serve 실행된 상태에서
localhost:8080 확인하면 확인 가능.
디폴트로 8080 포트 사용.

13. NavBar 링크 클릭시 메뉴이동 구현 (Router달기)
/menu1
/menu2

14. Router 개요
개요
https://router.vuejs.org/kr/installation.html
https://router.vuejs.org/kr/guide/

15. Router 설치
> npm i vue-router

16. Router 설정 및 링크메뉴 컴퍼넌트 추가
https://router.vuejs.org/kr/guide/#javascript 참고

17. router-link, router-view 추가
https://router.vuejs.org/kr/guide/#html 참고, 라우터된 페이지들이 보일수 있도록 설정.
App.vue
Header.vue
화면이 보이는 영
역

18. NavBar 링크 클릭시 메뉴이동 확인
/menu1
/menu2

19. API를 통한 화면 구성
Axios - HTTP 클라이언트 라이브러리
https://www.npmjs.com/package/axios
http://vuejs.kr/update/2017/01/04/http-request-with-axios/
설치
메뉴1에 api를 통해 얻어온 데이터를 뿌려보자.
- Axios 사용
- 공개 API 사용

20. 해커뉴스 API
HNPWA API목록 : https://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md
테스트 할 api : https://api.hnpwa.com/v0/news/1.json

21. Axios 설정
main.js

22. 화면에서 불러오기
Menu1.vue
API의 내용 중 제목만 추출하여 뿌
림.

23. 스프링 부트와 vue 연동
vue빌드 파일을 스프링 부트가 바라보는 resource/static/ 쪽으로 연결해준다.
설정값 설명 : https://github.com/nicejade/awesome-vue-cli3-example/blob/master/vue.config.js 샘플 참조
vue.config.js 생성 후 아래와 같이 설정
spring.thymeleaf.prefix=classpath:/static/ 설정
기존 웹팩 devserver port를 8080(default) -> 3000 변
경
Proxy : 모든 요청을 localhost:8080 으로 연결
outputDir : vue에서 만든 파일들이 빌드해서 위치하
는 경로

24. 빌드 - npm run build

25. 폴더 변경 사항 확인
resource/static쪽에 빌드된 파일들이 위치하게된다.

26. 스프링부트 컨트롤러 설정

27. 스프링부트 기동 후 페이지 확인
빌드된 vue로 만든 화면들이
스프링 부트로 서비스 가능.

28. Spring boot로 만든 User API와 연결하기
Mysql 테이블 하나 추가, JPA로 entity, repository, controller 를 통해 테이블 내용 가져오는 API 만들어보
자
User.java
CREATE TABLE `user` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`user_id` varchar(255) COLLATE utf8mb4_bin NOT NULL,
`name` varchar(255) COLLATE utf8mb4_bin NOT NULL,
PRIMARY KEY (`id`)
)

29. UserRepository

30. UserRestController

31. user/api/list API 확인

32. menu2 화면에 테이블로 뿌리기
menu1을 참고하여 menu2에 세팅. /user/api/list로 주소 변경

33. Table 태그 BootstrapVue로 바꾸기

34. Build 후 스프링부트 화면에서 확인

35. The End