front-end와 back-end rest API연결

bookstore 
-------------------------------------------------------------- 백엔드(서버 사이드) 애플리케이션
src/main/java
스프링부트 애플리케이션 자바 소스
src/main/resources
스프링부트 설정파일
마이바티스 설정파일 및 매퍼파일
src/test/java
-------------------------------------------------------------- 프론트엔드 애플리케이션
front-end
/node-modules
vue.js 관련 라이브러리
/public
index.html - 서버에서 처음으로 내려받는 페이지
/src
/assets - 정적 리소스가 저장되는 폴더
/components
BookCard.vue - 화면을 구성하는 부품 컴포넌트
/router
index.js - 화면 전환(url에 따른 컴포넌트 전환)이 설정되어 있는 파일
/views
BookList.vue - 하나의 화면을 담당하는 컴포넌트
BookForm.vue - 하나의 화면을 담당하는 컴포넌트
BookDetail.vue - 하나의 화면을 담당하는 컴포넌트
Home.vue - 하나의 화면을 담당하는 컴포넌트
main.js - vue 객체를 생성하고, 최상위 컴포넌트(App.vue)를 index.html에 렌더링하는 스크립트
App.vue - 최상위 컴포넌트
package.json - 프로젝트의 정보 및 라이브러리 의존성 정보가 설정되어 있는 파일
--------------------------------------------------------------

백엔드 애플리케이션
+ 스프링부트로 REST API 애플리케이션을 구현
+ REST API
+ 무상태 애플리케이션
+ 클라이언트 - 서버 구조 애플리케이션
+ HTTP의 요청방식(GET, POST, PUT, DELETE)이 수행할 작업을 나타내고, 요청URI는 자원을 나타낸다.

책정보 관련 인터페이스 설계
+ 책정보 관련 REST API
요청 요청방식 요청URI 요청메세지 응답메세지
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
도서목록 조회 GET /books 없음 {success:true, message:null, items:[{no:100, title:"이것이자바다"}, {no:101, title:"자바의 정석"}]}
도서정보 추가 POST /books {title:"이것이자바다",author:"신용권"} {success:true, message:null}
도서정보 조회 GET /books/100 없음 {success:true, message:null, item:{no:100, title:"이것이자바다"}}
도서정보 삭제 DELETE /books/101 없음 {success:true, message:null}
도서정보 변경 PUT /books/102 {title:"이것이자바다",author:"신용권"} {success:true, message:null}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------