5. bookStore 도서 등록

도서등록을 하기전에 

 

 1. 로그인 구현

 2. Store를 사용하여 토큰 state에 담기

 3. 인터셉터로 토큰 실어주기

 

이전 Springboot + Vue 게시판에서 구현한 부분을 똑같이 만들어주었다.

도서 판매사이트를 참고하여 도서 테이블을 다시 만들었더니 컬럼의 수가 엄청 늘어났다.

 

CREATE TABLE `book` (
  `bid` bigint(20) NOT NULL COMMENT '책id',
  `mid` bigint(20) NOT NULL COMMENT 'member id',
  `title` varchar(300) NOT NULL COMMENT '책제목',
  `sub_title` varchar(200) NOT NULL COMMENT '부제목',
  `author` varchar(200) NOT NULL COMMENT '저자',
  `translator` varchar(200) NOT NULL COMMENT '번역가',
  `content` varchar(2000) COMMENT '책 소개',
  `page` int(20) not null comment '책 페이지',
  `isbn` int(20) not null comment 'isbn',
  `price` int(11)  NOT NULL COMMENT '가격',
  `size` varchar(200)  NOT NULL COMMENT '크기/무게',
  `thumb` varchar(200)  NOT NULL COMMENT '썸네일',
  `publisher` varchar(200) NOT NULL COMMENT '출판사',
  `published_date` date NOT NULL COMMENT '출판일',
  `tag` varchar(200) NOT NULL COMMENT '태그',
  `detail_tag` varchar(200) NOT NULL COMMENT '디테일 태그',
  `keyword` varchar(2000) COMMENT '키워드',
  `isDel` enum('Y','N') not null default 'N',
  PRIMARY KEY (`bid`)
)

 

 

 

vue - bookpost

---

 

18개의 항목을 가지고있고, 키워드와 책 소개 컬럼을 제외하면 모두 필수 입력 항목이다.

vuetify의 rules로 필수입력, 특정 문자만 입력, 이미지 사이즈 제한 등 5가지 검증부분을 구현했다

 

    rules:{
      required : value => !!value || '필수 입력란입니다.',
      min : v => (v && v.length === 10 || v.length ===13 ) || 'ISBN은 10자 또는 13자 입니다',
      intType :  v => /^[0-9]*$/.test(v) || '숫자만 입력해주세요.',
      intStrType : v => /^[a-zA-Z0-9]*$/.test(v) || '영문+숫자만 입력 가능합니다.',
      img : v => !v || v.size < 2000000 || 'Avatar size should be less than 2 MB!',
    },

 

썸네일 등록은 v-file-input 태그와 디테일 태그는 v-select 출판일은 v-date-picker을 사용하였다.

 

v-date-picker를 사용하여 출간일 입력

 

 

태그를 선택하면 세부태그를 선택할수 있다.

 

v-combobox를 사용하여 키워드 등록

 

Springboot - bookpost

---

 

 

book컬럼을 추가하여 빌드할 항목이 추가되었다. 그 외는 이전 코드와 같다

vue에서 업로드한 파일 관리하는 부분을 추가해야한다.

public ApiResponse<Book> postBook(BookDTO bookDTO) {
        log.debug(bookDTO.getContent());
        long newBookBidValue = this.getNewBookBidValue(bookRepository);
        long memberId = getMemberIdByEmail(memberRepository);

        Book postData = Book.builder()
                .bid(newBookBidValue)
                .mid(memberId)
                .title(bookDTO.getTitle())
                .sub_title(bookDTO.getSub_title())
                .author(bookDTO.getAuthor())
                .translator(bookDTO.getTranslator())
                .content(bookDTO.getContent())
                .page(bookDTO.getPage())
                .isbn(bookDTO.getIsbn())
                .price(bookDTO.getPrice())
                .size(bookDTO.getSize())
                .thumb(bookDTO.getThumb())
                .publisher(bookDTO.getPublisher())
                .published_date(bookDTO.getPublished_date())
                .detail_tag(bookDTO.getDetail_tag())
                .tag(bookDTO.getTag())
                .keyword(bookDTO.getKeyword())
                .isDel("N")
                .build();
        bookRepository.save(postData);
        return new ApiResponse<>(true, "Registration successfully ", postData);
    }