Vue (45) 썸네일형 리스트형 9. 도서 위시리스트 위시리스트 구현 동작 DB Springboot Vue.js 1. 위시리스트 동작 책 추가 , 책 삭제, 카테고리 삭제, 카테고리 추가 사진1. 각각의 책 card에 있는 위시리스트 추가 버튼을 누르면 다음과 같은 나의 위시리스트 다이얼로그 표시 (Dialog = true) 사진2. 나의 위시리스트 다이얼로그에는 로그인된 정보에 해당하는 위시리스트 카테고리들이 출력된다. 카테고리를 선택하면 사진1. 에서 선택한 책번호(bid)를 등록하겠냐는 문구가 출력 -> 사진3. 사진3. 등록버튼을 누르면 정보(책 번호, 선택한 카테고리)가 Springboot 로 넘어간다 Springboot 에서는? 1. 선택한 카테고리에서 해당 책 번호가 있는지 확인 -> 있다면 사진4. 2. 없다면 새로운 카테고리 번호(Title.. 8. 도서 위시리스트 (Spring boot) Wishlist Table bid와 mid를 외래키로 받는 비식별 관계 테이블을 생성했다 Springboot Jpa Entity에서도 복합키 설정을 해주려 했지만 many to one (lazy) 관계에서 join n+1 문제 fetch join시 on을 사용하지 못하는 불편함과 제일 큰 문제점인 insert에 문제가 생겼다. 필요한 데이터가 많지 않아서 Jpa에서 단일 테이블로 필요 데이터를 집어넣는 방식으로 구성을 했다. @Slf4j @Service @RequiredArgsConstructor public class WishlistService { final WishlistRepository wishlistRepository; final MemberRepository memberRepository; .. 7. 도서 리스트 1 책 등록 수정 카카오api를 사용하여 도서 정보를 가져왔는데 책 소개 내용도 잘리고 이미지 화질도 너무 별로였다. 그래서 isbn을 입력하면 교보문고의 이미지를 가져오도록 수정하였다. 도서 리스트 출력 저번 글 이후 부터 거의 Vue를 사용한 작업만 한거같다. vuetify에서 제공하는 v-row & col을 사용하여 구역을 나누고 책을 출력했지만 원하는 결과가 나오지 않아서 결국 v-layout과 v-flex를 사용하였다. vue를 사용하면 할수록 기본을 잘 배워두고 시작할걸 후회중이다.. v-carousel을 사용하여 책을 보여주는 mainBook.vue 화면과 카테고리 또는 태그를 선택하여 책을 분류해주는 about.vue (이름 바꿔야함..) 화면으로 구성하였다. footer는 선택한 태그를 보여.. 6. postBook - 도서등록 2 들어가기 이전 1. 카카오 책 검색 API 사용 API를 사용하면 키워드를 따로 등록해야 하고, 정보도 전체정보가 아닌 일부 정보만 제공했기 때문에 책API를 사용하지 않고 책을 하나하나 등록하려고 했었다. 직접 하나하나 등록하다가 보니 너무 막노동이라 카카오API를 통해 제공하는 정보는 넣고 추가로 넣어줘야 하는 정보는 직접 검색해서 넣어주기로 했다. 2. 추가되는 컬럼 벌써 4~5번이나 추가되고 삭제하는 것 같은데.. isbn은 String으로 바꿔주었고 책 소개 / 목차 / 서평 컬럼이 추가되었다. 그리고 전체적으로 컬럼 명이 바뀌었다. 3. 다양한 에러 그리고 컬럼이 추가되고 API를 사용하여 적용하는 도중 많은 에러가 떴었고 그 중 기억에 남는 에러는 400, 500에러와 데이터 타입에러 그리고.. 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 COM.. 4. bookStore - Book CRUD 간단히 CRUD 기능을 구현했다 아래 코드는 BookService 부분의 코드이다. (Controller는 getHub에서 확인 가능하다) @RequiredArgsConstructor @Service @Slf4j public class BookJpaService { final BookRepository bookRepository; final MemberRepository memberRepository; //리스트 가져오기 public List getBookList() { return bookRepository.findBookByIsDel("N"); } //지정한 책만 가져오기 public Book getBookId(long bid) { Optional bookData = bookRepository.fin.. 3. BookStore jwtToken 인증 추가 https://dwc04112.tistory.com/101 49 : /authenticate - Sequence Diagram (Springboot) Start url에서 /authenticate를 실어서 authenticate을 요청한다 JwtRequest body에는 e-mail, password가 들어간다 JwtAuthenticationController createAuthenticationToken(JwtRequest request) > 요청으로 들.. dwc04112.tistory.com 로그아웃 1 (Springboot + Vue) Vue 에서 로그아웃 버튼을 누르면 userStore의 action으로 dispatch dispatch된 logout action에서 post : /api/logo.. book Entity - Setter ? Builder? Entity @Entity @Getter @ToString @Table(name = "book") @NoArgsConstructor(access = AccessLevel.PROTECTED) @Builder public class Book { @Id @Column(name = "bid") private long bid; @Column(unique = true) private String author; private String subject; private int price; private LocalDate published_date; private String tag; private String detail_tag; private String keyword; private String isDel; pub.. 이전 1 2 3 4 5 6 다음
