springboot insert시키기

요청핸들러는 Book 응답데이터는 JSON 자바스크립트 jSON으로 응답을 받는다. 

• Map<String , object> map = new HashMap<>();
• map.put("no",1);
• 이렇게 하나씩값을 주거나 
• List<map<String, object>> maps = new ArrayList<>();
• map<String, object> map1 = new Hashmap<>();
• map<String, object> map2 = new Hashmap<>();
• List.add(map1);
• List.add(map2); 이렇게 기본자료형의 값과 문자열은 보여주면 된다. 

BookList컴포넌트 

• 자식컴포넌트(List vue)를 사용한다. 
• 자식컴포넌트에게 Books에 저장된 데이터를 전달한다. 
• 자식컴포넌트에게는 BookList라는 props를 선언해서 전달받은 값을 저장해야한다. 
• 이 컴포넌트가 사용하는 데이터는 data메소드가 반환하는 객체이다. 
• data 메소드가반환하는 객체에 저장된 데이터는 이 컴포넌트 안에서 this.프로퍼티 명으로 접근할 수 있다. 
• 그래서 this.book으로 response => this.book = response.data로 값을 넣는것이다. 
• created메소드에 정의된 수행문은 이 컴포넌트 객체가 생성된 직후에 실행된다. 
• created메소드는 컴포넌트에서 사용할 초기데이터를 서버와 통신해서 받아오는 작업을 수행한다. 

List컴포넌트 

• 부모컴포넌트(BookList.vue)로부터 전달받은 데이터로 props:["bookList"]로 작성했다. 
• props는 부모컴포넌트로부터 전달받은 데이터를 저장할 변수명을 추가하는 곳이다.
• v-for를 이용해서 bookList에 저장된 책 목록을 반복처리한다. 
• book은 bookList에서 순서대로 하나씩 꺼낸값이 저장되는 변수다. 

template에는 엘리먼트를 2개이상 넣으면안된다. 1개만 가지고 있어야한다. 

전달되는 데이터는 JSON이다. 이전까지는 &처럼 전달되었으나 이제는 json으로 전달된다.

헤더부는 post http://localhost/api/book으로 설정한다. @postMapping으로 감싼다. 이전과는 post는 동일하지만 body부는 json의 형태로 만들어줘야한다. public Book save(@RequestBody BookForm form) {}으로 @RequestBody로 감싸고, postMapping 메소드는 save로 넣어주는 것이좋다. 

컨텐츠타입은 application/x-www-formarlencoded으로 요청메세지의 바디부에 포한되어 전달된 데이터는 전부 요청 객체의 요청 파라미터로 저장된다. 

bookinsertForm객체를 생성한다. 

• Book객체 멤버변수 명칭 및 타입을 분석하고 요청 객체의 요청파라미터데이터에서 멤버변수명과 같은이름을 가진 객체를 저장하고 save메소드로 BookinsertForm객체를 전달한다. 
• Book book = Book.builder().title(form.getTitle())
  .author(form.getAuthor())
  .publisher(form.getPublisher())
  .price(form.getPrice())
  .discountPrice(form.getDiscountPrice())
  .stock(form.getStock())
  .build(); //빌드패턴으로 만들어서 전달한다 
  Book savedBook = bookService.insertNewBook(book);
  return savedBook; //return으로 값을 보내준다.
• service 
  • public Book insertNewBook(Book book) {
    bookmapper.insertBook(book);
    return bookmapper.getBookByNo(book.getNo());//insert한 책정보를 리턴한다. 
    }
  • 모든 객체를 Book이라는 객체를 반환하게 만든다. 
• vue.js에서 
  • 모든 input박스에 v-model로 양방향 데이터를 받을 수 있게 한다.
    v-model="book.stock"/>
    
    
  • import BookService from '../service/BookService';//.다른 컴포넌트를 호출한다.
  • export default에서 컴포넌트에서 나오는 데이터는 그냥 data메소드로 return하는 값에 작성해야한다.
    • data(){
      return{//여기에 작성한다.
      book:{ //담을 변수를 지정한다. 
                      title:'',

                      author:'',

                      publisher:'',

                      pubDate:'',

                      price: 0,

                      discountPrice:0,

                      stock:0

                  }
      },
    • methods:{ //사용자와의 이벤트 핸들러를 등록한다. 등록버튼에 click이벤트를 등록한다. 
      formsubmit(){
      BookService.insertBook(this.book) //메소드를 호출하고 this.data를 반환한다. 
      .then(response => { //응답이 성공하면 
      alert(responser.data.title + "등록되었습니다.") //response.data에 정보가 들어있다
      this.$router.push(book/list/1) // 지정된 경로로 이동시킨다.  //특정함수로 이동하면 된다. 
      })
      .catch(()=>alert("책 정보 등록 중 오류가 발생하였습니다."))
      //$는 특수목적 함수로 router가 지정된 곳으로 이동시킨다. 
      }
      }
      }
  • 요청 객체에 전달받은 값 그대로 저장되어 있다. 
  • 요청메세지의 body부에서 JSON텍스트를 조회한다. 
  • jack-databred와 라이브러리가 JSON text를 분석해서 BookInsert에 객체로 변환한다. 
  • save()메소드를 호출할때 bookInsertform객체가 전달된다.
  • 꼭 백엔드에서는 Book을 반환하도록 해야한다.