2017년 4월 19일 Vuetiful Korea 첫번째 밋업의 세번째 발표자료입니다.
Vue.js 한국어 사용자 모임에서 발표를 하게 된 디자이너, 그녀는 과연 Vue.js를 쓸 수 있을 것인가?
발표자료에서 소개되는 게임은 smilee.github.io/vuetiful-korea-170419 을 참고해 주시기 바랍니다.
2017년 4월 19일 Vuetiful Korea 첫번째 밋업의 세번째 발표자료입니다.
Vue.js 한국어 사용자 모임에서 발표를 하게 된 디자이너, 그녀는 과연 Vue.js를 쓸 수 있을 것인가?
발표자료에서 소개되는 게임은 smilee.github.io/vuetiful-korea-170419 을 참고해 주시기 바랍니다.
쉽고 빠른 웹앱 프로토타이핑을 진행할 수 있게 도와주는 툴입니다.
node.js 기반으로 주요 기능으로는 아래와 같습니다.
* 스케폴딩으로 인한 빠른 프로젝트 템플릿 구성
* LiveReload를 이용한 라이브 코딩
* 이미지 optimization
* Compass, CoffeeScript 자동 컴파일링
* JS 라이브러리의 의존성 체크 및 업데이트 관리
* 정적검사 및 유닛 테스트
* JS/CSS merge 및 minimize 그리고 dist 배포
쉽고 빠른 웹앱 프로토타이핑을 진행할 수 있게 도와주는 툴입니다.
node.js 기반으로 주요 기능으로는 아래와 같습니다.
* 스케폴딩으로 인한 빠른 프로젝트 템플릿 구성
* LiveReload를 이용한 라이브 코딩
* 이미지 optimization
* Compass, CoffeeScript 자동 컴파일링
* JS 라이브러리의 의존성 체크 및 업데이트 관리
* 정적검사 및 유닛 테스트
* JS/CSS merge 및 minimize 그리고 dist 배포
[TechDays Mini]에서 발표한 "ASP.NET Web API를 활용한 RESTful 서비스 개발" 세션의 발표 자료입니다.
※ 이 자료는 업로드 시점 대비 오래전 진행한 내용을 다루고 있습니다. 변경된 부분이 있거나 유용하지 않을 수 있으니 참고하시길 바랍니다.
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
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
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에서 만든 파일들이 빌드해서 위치하
는 경로
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`)
)