SpringBoot) 블로그 프로젝트_12. 댓글쓰기_블로그 만들기 최종!

 

블로그 만들기 프로젝트 최종!

댓글 기능 구현하기

 

---

 

1. 댓글 구현하기

댓글 작성 및 삭제

 

- 화면 구현

 

- 댓글 DB 연동

 

 

1) 댓글 작성 기능 구현

 

• BoardApiController

//댓글 작성
@PostMapping("/api/board/{boardId}/reply")
public ResponseDto<Integer> replySave(@RequestBody ReplySaveRequestDto replySaveRequestDto) {
    boardService.댓글쓰기(replySaveRequestDto);
    return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);	// 200 : http 전송 성공
}

 

• BoardService

//댓글 작성
@Transactional
public void 댓글쓰기(ReplySaveRequestDto replySaveRequestDto) {
 int result =replyRepository.mSave(replySaveRequestDto.getUserId(), replySaveRequestDto.getBoardId(), replySaveRequestDto.getContent());
}

 

• Board.js

상단 위치

$("#btn-reply-save").on("click", () => {
			this.replySave();
		});

 

하단

//댓글쓰기
replySave: function() {
    let data = {
        userId: $("#userId").val(),
        boardId: $("#boardId").val(),
        content: $("#reply-content").val()
    };

    $.ajax({
        type: "POST", 
        url:`/api/board/${data.boardId}/reply`,	//오류 수정 -  요청 주소에 데이터 값이 존재할때 ``이걸로 요청함
        data: JSON.stringify(data), //http body  데이터
        contentType: "application/json; charset=utf-8",
        dataType:"json"
    }).done(function(resp){
        alert("댓글 작성이 완료되었습니다.");
        location.href=`/board/${data.boardId}`;
    }).fail(function(error){
        alert(JSON.stringify(error));
    }); 
}

 

 

 

2) 댓글 삭제 기능 구현

 

• BoardApiController

//댓글 삭제
@DeleteMapping("/api/board/{boardId}/reply/{replyId}")
public ResponseDto<Integer> replyDelete(@PathVariable int replyId){
    boardService.댓글삭제(replyId);
    return new ResponseDto<Integer>(HttpStatus.OK.value(), 1);	// 200 : http 전송 성공
}

 

 

• BoardService

//댓글 삭제
@Transactional
public void 댓글삭제(int replyId) {
    replyRepository.deleteById(replyId);
    System.out.println("댓글 삭제 : "+replyId);
}

 

 

 

• Board.js

//댓글삭제
replyDelete: function(boardId, replyId) {
    $.ajax({
        type: "DELETE", 
        url:`/api/board/${boardId}/reply/${replyId}`,	//오류 수정 -  요청 주소에 데이터 값이 존재할때 ``이걸로 요청함
        dataType:"json"
    }).done(function(resp){
        alert("댓글이 삭제 되었습니다.");
        location.href=`/board/${boardId}`;
    }).fail(function(error){
        alert(JSON.stringify(error));
    }); 
  },
}

 

 

별거 아닌 거 같지만 오류로 인해 시간을 많이 보냈다...

항상 오류는 생각보다 별거 아니여서 진짜 허무하다ㅠㅠ

 

 

- 오류 출력

Resolved [org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: Failed to convert value of type 'java.lang.String' to required type 'int'; nested exception is java.lang.NumberFormatException: For input string: "${boardId}"]

 

url:'/api/board/${boardId}/reply' 기존 코드는 이랬다.

 

알고 보니 url 주소에 데이터 값이 있을 경우 `` 표시한다고 한다!

 

이유는 기존에 데이터 값을 보내야 할 때 /api/board/${boardId}/reply -> "api/board"+boardId+"/reply" 이런 형식으로 요청했었다.

요새는 ${}를 바로 사용할 수 있도록 ``표기법을 사용한다!!

 

- 오류 수정

url:`/api/board/${boardId}/reply`

 

 

2. 블로그 만들기 프로젝트 최종 결과!

 

 

 

 

 

 

 

 

 

1일 1 커밋