Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hands-on Vue Springboot Simple Admin

261 views

Published on

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

Published in: Technology
  • Be the first to comment

Hands-on Vue Springboot Simple Admin

  1. 1. Hands-on Vue.js + Spring Boot Simple Admin 월간 슬라이드 4월 고재성
  2. 2. 목표 Vue.js 와 Spring Boot를 사용해서 빠르게 심플한 Admin(운영툴) 뼈대를 만들어 보는 것 관련 예제 소스 : https://github.com/kjs850/vue-admin
  3. 3. 개요 ● Vue Cli 을 통한 프론트 페이지 작성 ○ Vue Bootstrap ○ Vue Router ○ Axios ● Spring Boot를 통한 백엔드 API 작성 ○ Mysql ○ Spring JPA ● Vue + Spring Boot 연동 ● Vue 빌드된 파일 + Spring Boot로 서비스
  4. 4. 스프링 부트로 프로젝트 세팅 스프링 부트로 간단한 웹 환경 구성. - Web, Rest Repository - Thymeleaf - JPA, Mysql
  5. 5. 프로젝트 구조 vue-admin 이란 프로젝트 세팅
  6. 6. Vue 세팅 개요 Bootstrap Vue를 사용 : https://bootstrap-vue.js.org/ Vue cli 3를 통한 방법을 사용 : https://bootstrap-vue.js.org/docs#vue-cli-3
  7. 7. BootstrapVue 세팅 vue-admin 프로젝트 내, frontend란 이름으로 세팅 > npx @vue/cli create frontend - default 선택 > cd frontend > npm i bootstrap-vue
  8. 8. 세팅 후 vue-admin 프로젝트 구조 및 화면 vue-admin 프로젝트 내 fronend 폴더 생성 frontend 폴더 내 > npm run serve 페이지 구동 및 화면 확인
  9. 9. BootstrapVue 플러그인 등록 https://bootstrap-vue.js.org/docs#vue-cli-3 과 같이 bootstrap-vue 설정 추가 설정파일 : frontend > src > main.js
  10. 10. Header NavBar 붙여보기 https://bootstrap-vue.js.org/docs/components/navbar 위 링크의 해당 마크업을 copy & paste components 하위 Header.vue라는 컴포넌트로 생성
  11. 11. App.vue에서 Header 컴포넌트 불러오기 App.vue는 index.html 에 삽입되는 컴포넌트 App.vue에서 Header 컴포넌트를 불러와 준다.
  12. 12. NavBar 붙인화면 확인 > npm run serve 실행된 상태에서 localhost:8080 확인하면 확인 가능. 디폴트로 8080 포트 사용.
  13. 13. NavBar 링크 클릭시 메뉴이동 구현 (Router달기) /menu1 /menu2
  14. 14. Router 개요 개요 https://router.vuejs.org/kr/installation.html https://router.vuejs.org/kr/guide/
  15. 15. Router 설치 > npm i vue-router
  16. 16. Router 설정 및 링크메뉴 컴퍼넌트 추가 https://router.vuejs.org/kr/guide/#javascript 참고
  17. 17. router-link, router-view 추가 https://router.vuejs.org/kr/guide/#html 참고, 라우터된 페이지들이 보일수 있도록 설정. App.vue Header.vue 화면이 보이는 영 역
  18. 18. NavBar 링크 클릭시 메뉴이동 확인 /menu1 /menu2
  19. 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. 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. 21. Axios 설정 main.js
  22. 22. 화면에서 불러오기 Menu1.vue API의 내용 중 제목만 추출하여 뿌 림.
  23. 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. 24. 빌드 - npm run build
  25. 25. 폴더 변경 사항 확인 resource/static쪽에 빌드된 파일들이 위치하게된다.
  26. 26. 스프링부트 컨트롤러 설정
  27. 27. 스프링부트 기동 후 페이지 확인 빌드된 vue로 만든 화면들이 스프링 부트로 서비스 가능.
  28. 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. 29. UserRepository
  30. 30. UserRestController
  31. 31. user/api/list API 확인
  32. 32. menu2 화면에 테이블로 뿌리기 menu1을 참고하여 menu2에 세팅. /user/api/list로 주소 변경
  33. 33. Table 태그 BootstrapVue로 바꾸기
  34. 34. Build 후 스프링부트 화면에서 확인
  35. 35. The End

×