spring boot와 vue.js 설치하기

1. application property에 정의 먼저하기 
2. mapper config의 설정 
3. mapper파일 
4. vo만들기 
   1. date에 모두 @JSONFormat 어노테이션 달아주기 
      JSON으로 보낼때 원래날짜로 입력되기 위해서
5. BookMapper만들기 
6. Service만들기 
7. web패키지 만들기 
   1. Controller
      1. @RestController
         
         1. json의 형태로 응답 주고 받는다.
      2. @slff4j
         1. logger를 확인할 수 있다.
      3. @CrossOrigin(Orgin="*")
         1. 정보를 가져가는 것에 대한 설정. 전체 경로 설정
      4. @RequestMapping으로 설정(경로는 /api/으로)
   2. form
      1. insertForm
      2. dataFormat
      3. Criteria ->page, opt, value 값을 설정한다.
   3. model
      1. 응답으로 데이터를 내려보낼 때 일관된 모양으로 보내고 싶을 때 설정한다.
      2. ResponseData :요청처리여부와 에러메세지가 담긴 data(아래에서 설명예정)
         1. extends한 singleResponseData
            1. 클라이언트에게 데이터가 하나 전달되는 응답메세지를 표현하는 클래스
            2. private<T> 정의
         2. extends한 ListResponseData
            
            1. 클라이언트에게 데이터가 여러개 전달되는 응답메세지를 표현하는 클래스
            2. private List item<T>정의 
         3. 정의한 메소드가 담긴 ResponseService
   4. dto
      1. 클라이언트에게 전달할 pagination
8. DAO에 interface에 코딩한다. mapper.xml에 정의한다. 
9. service에 업무로직 구현한다. 
10. Controller를 구현한다. 
    1. @Autowired는 service와 responseDataService를 정의한다. 
    2. 모든 답변이 response로 진행된다. 
    3. 링크로 넘어오는 경우 @PathVariable로 정의한다. 
       1. ((name="no") int no) 매개변수로 설정한다. 
       2. @GetMapping("/{no}")으로 설정한다. 
       3. 경로의 값을 설정할 때 이렇게 둘을 설정한다. 
    4. 요청방식에 따라서 얻는 값이 다르고, 경로는 동일하다. 
    5. 추가 : post
    6. 조회 : get
    7. 삭제 : delete
    8. 변경 : put
11. 책의 추가는 Book객체에 Build패턴을 이용하여 정의한다. Builder().getName().build()하고 보낸다
12. vue -create front-end 를 cmd창에서 해당 spring boot에서 검색한다. 
13. manually select features 를 검색 router체크 3.0으로 설정 ,json과 history에는 yes를 선택한다. 

 

ResponseService

• Service로 help클래스이다. 
• 5개의 메소드가 적혀 있다. 
  • <T> singleResponseData<T> getResponseData(T item)
    singleResponseData response = new singleResponseData();
    setSuccess();
    setItem();
  • 매개변수로 나오는 값이 <T>의 값으로 결정된다.
  • 클라이언트에게 데이터가 여러개 전달시 반환된다. 
    <T> ListResponseData<T> getResponseData(List<T> item)
  •  ResponseData로 성공의 유무만 보낸다,
    return은 get으로 (true, null) -->item은 null로 보낸다.
  • 클라이언트를 전달하지 않고, 실패여부와 에러메세지를 전달하는 응답메세지를 반환하는 클래스 
    {"success":false,"message:"아이디와 비밀번호가 다릅니다."}
  • 전체적으로 모든메세지들이 success/ message/items로만 설정되어 있고 JSON의 형태로 보내기 위함이다. 

vue.js객체의 소개

• node-modules 
  • 애플리케이션에서 사용하는 자바스크립트 라이브러리(package)를 포함하는 폴더이다. 
  • 자동으로 생성된다. 
  • 버젼관리의 대상이 아니다. 
  • package.json은 설정파일에 정의한 라이브러리를 npm이 자동으로 다운로드 해서 저장한다. 
• public
  • 정적리소스 파일이 위치할 폴더이다. (css/이미지 등)
  • index.html은 이 app의 첫 화면을 표현하는 페이지이다. 
  • 수정없이 그대로 사용한다. 
• src(빌드도구)
  • 바벨(webpack)로 애플리케이션을 빌드(변환/패키징)할 때 빌드 대상이 되는 폴더이다. 
• assets
  • 번들에 포함시킬 정적리소스 파일이 위치하는 폴더다.
  • 번들은 여러개 하니면 하나로 vue를 js로 바꿀떄 사용하는 폴더이다. 
• components
  • 화면을 구성하는 부품으로 사용되는 컴포넌트 파일이 위치하는 곳이다. 
  • 여기에 정의된 컴포넌트들은 여러화면에서 재사용될 수 있다. 
•  router
  • vue-router 설정파일이 위치하는 폴더이다. 
  • vue-router는 라우팅을 지원하는 라이브러리이다. 
  • url에 따라서 페이지를 (실제로는 컴포넌트)를 전환시킬 수 있다. 
  • index.js에는 경로와 컴포넌트가 mappin되어 있으며, 해당경로를 요청하는 지정된 컴포넌트가 <router-view />자리에 표시된다. 
• service
  • 여러 컴포넌트에서 공통으로 사용되는 기능이 정의된 자바스크립트 파일이 위치하는 폴더이다. 
  • 주로 컴포넌트들의 공통으로 사용하는 기능, 서버와 HTTP통신(AJAX)을 해서 필요한 데이터를 주고 받은 기능들이 정의되어 있다. 
  • BookService.js는 책정보의 추가/조회/변경/삭제 작업이 정의되어 있다. 
  • axios를 사용해서 서버와 연결한다. 
• view
  • components폴더의 컴포넌트가 화면을 구성하는 부품이라면 view폴더의 컴포넌트는 화면이다. 
  • components폴더에 정의된 컴포넌트를 조합해서 화면을 구성하는 컴포넌트가 정의되어 있다. 
• App.vue
  • vue.js애플리케이션의 루트컴포넌트다. 
• main.js
  • vue.js의 메인 스크립트 파일이다. 
  • vue Application을 생성하고, vue-router를 애플리케이션에 추가하고 App.vue Root components를 public폴더의 index, Html폴더에 추가한다. 
• package.json
  • vue.js 애플리케이션 프로젝트의 설정정보가 정의된 파일이다. 
  • 자바프로젝트의 pom.xml과 같은 역활을 수행한다.