글 작성 (Springboot + Vue)

수정내용

---

 

컬럼 변경 내용
 1. board table의 password 삭제 
 2. 기존 board id인 id 를 bid 로 변경 (member id를 참조키로 받기위해)
 3. member table id -> mid 수정

DB table 관계변경
-> member mid를 board 에서 참조

springboot 수정내용
 1. board id 를 bid 그리고 password 컬럼을 삭제했으므로 dto.BoardDTO & model.Board에 해당내용 적용
 2. 위 내용의 변경사항에 따라 BoardRepository 수정
 3 Member id -> mid로 수정했으니 MemberController, JwtTokenUtil, Member 파일 수정

 4 수정파일

• dto.BoardDTO
• model.Board
• BoardRepository
• (BoardController, BoardService)
• MemberController
• JwtTokenUtil
• Member

 

Vue 수정내용
 1. 글 list를 출력하는 Home.vue 에 board.id -> board.bid 수정
 2. board.vue 의 id를 bid로 수정

• board.vue
• home.vue

 

 

 

글 등록하기

---

boardWrite.vue

 

제목과 내용을 입력하면 boardjpa/write 로 닉네임, 제목, 내용, member id 를 전송한다

여기서 닉네임과 member id 는 UserStore의 State에서 가져온다

Vue에서 보낸 내용을 Springboot에서 이전 방법과 동일하게 DB에 저장한다.

 

 

아래는 Controller에서 보낸 내용을 Service에서 받아 저장하는 부분이다.

이전과 달라진 점은 author에 현재 로그인 되어있는 닉네임이 들어갔고, password가 빠진 것을 볼 수 있다.

 

//BoardSerivce
  public Board boardWrite( BoardDTO boardDTO) {
        int newBoardBidValue = this.getNewBoardBidValue(boardRepository);

        Board postData = Board.builder()
                .bid(newBoardBidValue)
                .mid(boardDTO.getMid())
                .author(boardDTO.getAuthor()) //닉네임
                .subject(boardDTO.getSubject())
                .content(boardDTO.getContent())
                .commentCount(0)
                .depth(0)
                .orderNum(0)
                .isDel("N")
                .readCount(0)
                .replyRootId(newBoardBidValue)
                .writeDate(LocalDate.now())
                .writeTime(LocalTime.now())
                .build();
        return boardRepository.save(postData);
    }

 

 

getNewBoardBidValue는 게시글의 번호를 저장하는 로직. (Bid = Board id)

board data가 없으면 값을 1로 설정 & 아니면 max Bid +1 로 설정하는 것을 볼 수 있다.

 

// boardService
    private int getNewBoardBidValue(BoardRepository boardRepository) {
        int result;
        Board boardOfMaxId = boardRepository.findTopByOrderByBidDesc();

        if(boardOfMaxId == null) {
            result = 1;
            log.debug("no board data, maxId is 1");
        } else {
            result = boardOfMaxId.getBid() + 1;
            log.debug("maxIdFromBoard="+boardOfMaxId.getBid());
        }
        log.debug("newBoardIdValue="+result);
        return result;
    }

 

 

 

아래 사진에서 성공적으로 글이 등록된 것을 볼 수 있다.

조회수에는 새로고침 또는 같은 아이디로 글을 조회 시 조회수가 오르는 것을 방지하는 코드를 짜보자.

Home.vue

 

 

 

글 등록을 구현하는것은 매우 간단하지만.. 기존 데이터 칼럼값을 수정하는 부분에서 많은 시간을 쓴 것 같다.

그리고 Vue 프론트엔드 부분을 어떻게 꾸며야 할지..