7. 도서 리스트 1

책 등록 수정

카카오api를 사용하여 도서 정보를 가져왔는데 책 소개 내용도 잘리고 이미지 화질도 너무 별로였다.

그래서 isbn을 입력하면 교보문고의 이미지를 가져오도록 수정하였다.

 

 

 

도서 리스트 출력

저번 글 이후 부터 거의 Vue를 사용한 작업만 한거같다. vuetify에서 제공하는 v-row & col을 사용하여 

구역을 나누고 책을 출력했지만 원하는 결과가 나오지 않아서 결국 v-layout과 v-flex를 사용하였다.

vue를 사용하면 할수록 기본을 잘 배워두고 시작할걸 후회중이다..

 

 

v-carousel을 사용하여 책을 보여주는 mainBook.vue 화면과

카테고리 또는 태그를 선택하여 책을 분류해주는 about.vue (이름 바꿔야함..) 화면으로 구성하였다.

footer는 선택한 태그를 보여주게 하단에 고정시켜놨다.

    getBookInfo(){

      this.$axios.get('book/info')
      .then(response=>{
        console.log(response.data);
        this.bookDatas = response.data

        for(let i =0; i<response.data.length; i++){
          this.keywords.push(response.data[i].bookKeyword.split(','))
          this.show.push({data:false})
        }
      })
      .catch(error =>{
        console.log(error.response);
      })
    },

String으로 DB에 저장된 키워드는 쉼표 기준으로 나눠서 리스트에 저장하였고

show는 책 썸네일을 클릭하면 동작하는 <v-expand-transition> 의 상태이다

 

두 자식 컴포넌트를 부모화면인 Home.vue에 불러와

스크롤을 움직이면 화면이 이동되도록 구현했다. 

(각각 구역을 정한 후 마우스 휠이 위 또는 아래로 동작하면 현재 위치를 확인 후 다음 구역으로 이동)

 

 

 

Springboot와 다르게 만들때 마다 하나하나 기록을 못해서 간단하게 작성했다