Downloaded 11 times
Uploaded by월간 IT 슬라이드
Hands-on Vue Springboot Simple Admin
vue와 springboot를 이용한 간단 admin 운영툴 만들기 구글 슬라이드 : https://docs.google.com/presentation/d/1hBeWgdhD-wTk1cU8Irvvsmsafo4nm62XWkuT7-WwRBI/edit?usp=sharing
![[월간 슬라이드] 한시간안에 게시판 만들기 with 스프링부트](https://cdn.slidesharecdn.com/ss_thumbnails/monthlyslidespringbootbbs-190302052932-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[EWD2014]CLASS10](https://cdn.slidesharecdn.com/ss_thumbnails/ewdclass10-140513011233-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[뷰제이에스학원]뷰제이에스(Vue.js) 프로그래밍 입문(프로그레시브 자바스크립트 프레임워크)](https://cdn.slidesharecdn.com/ss_thumbnails/vue-180116043929-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js](https://cdn.slidesharecdn.com/ss_thumbnails/random-171213075952-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Hands-on Vue Springboot Simple Admin
- 1. Hands-on Vue.js + SpringBoot Simple Admin 월간 슬라이드 4월 고재성
- 2. 목표 Vue.js 와 SpringBoot를 사용해서 빠르게 심플한 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 세팅 개요 BootstrapVue를 사용 : 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.
- 15. Router 설치 > npmi 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.
- 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. 빌드 - npmrun 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.
- 30.
- 31.
- 32. menu2 화면에 테이블로뿌리기 menu1을 참고하여 menu2에 세팅. /user/api/list로 주소 변경
- 33.
- 34. Build 후 스프링부트화면에서 확인
- 35.