Intellij IDEA Community
mysql 8.0.34
Spring Data JPA
JDK 11
SpringBoot 2.6.13
게시물에 댓글을 다는 거
<!--댓글 작성 부분-->
<div id="comment-write">
<input type = "text" id="commentWriter" placeholder="작성자">
<input type = "text" id="commentContents" placeholder="내용">
<button id="comment-write-btn" onclick="commentWrite()">댓글 작성</button>
작성자, 내용을 작성 받는 부분
const commentWrite = () => {
const writer = document.getElementById("commentWriter").value;
const contents = document.getElementById("commentContents").value;
console.log("작성자: ", writer);
console.log("내용: ", contents);
const id = [[${board.id}]];
$.ajax({
// 요청방식: post, 요청주소: /comment/save, 요청데이터: 작성자, 작성내용, 게시글번호
type: "post",
url: "/comment/save",
data: {
"commentWriter": writer,
"commentContents": contents,
"boardId": id
},
success: function (res) {
console.log("요청성공", res);
let output = "<table>";
output += "<tr><th>댓글번호</th>";
output += "<th>작성자</th>";
output += "<th>내용</th>";
output += "<th>작성시간</th></tr>";
for (let i in res) {
output += "<tr>";
output += "<td>" + res[i].id + "</td>";
output += "<td>" + res[i].commentWriter + "</td>";
output += "<td>" + res[i].commentContents + "</td>";
output += "<td>" + res[i].commentCreatedTime + "</td>";
output += "</tr>";
}
output += "</table>";
document.getElementById('comment-list').innerHTML = output;
document.getElementById('commentWriter').value = '';
document.getElementById('commentContents').value = '';
},
error: function (err) {
console.log("요청실패", err);
}
});
}
Element에서 각 데이터들을 받아온 뒤 ajax를 이용하여 post request, 후 다시 받아서 서버의 응답에 따라 succes function error function 실행
<div id="comment-list">
<table>
<tr>
<th>댓글번호</th>
<th>작성자</th>
<th>내용</th>
<th>작성시간</th>
</tr>
<tr th:each="comment: ${commentList}">
<td th:text="${comment.id}"></td>
<td th:text="${comment.commentWriter}"></td>
<td th:text="${comment.commentContents}"></td>
<td th:text="${comment.commentCreatedTime}"></td>
</tr>
</table>
</div>
success 함수에서 생성한 테이블을 html 엘리먼트들로 출력함
@GetMapping("/{id}")
public String findById(@PathVariable Long id, Model model, @PageableDefault(page = 1) Pageable pageable) {
boardService.updateHits(id);
BoardDTO boardDTO = boardService.findByid(id);
List<CommentDTO> commentDTOList = commentService.findAll(id);
model.addAttribute("commentList", commentDTOList);
게시물 조회했을 때도 commentservice에서 불러와서 model로 넘길 수 있게 해줌
@RequestMapping("/comment")
public class CommentController {
private final CommentService commentService;
@PostMapping("/save")
public ResponseEntity save(@ModelAttribute CommentDTO commentDTO) {
//System.out.println("commentDTO = " + commentDTO);
//저장된 comment_table의 id 반환
Long saveResult = commentService.save(commentDTO);
if (saveResult != null) {
// 작성 성공하면 댓글목록을 가져와서 리턴
// 댓글 목록 ==> 해당 게시글의 댓글 전체 ==> 가져올때 해당 게시글을 기준으로 가져와야함
List<CommentDTO> commentDTOList = commentService.findAll(commentDTO.getBoardId()); //아이디 기준으로 찾기
return new ResponseEntity<>(commentDTOList, HttpStatus.OK); // ok 사인 도 같이 보내줌
}
else {
return new ResponseEntity<>("해당 게시물이 존재하지 않습니다", HttpStatus.NOT_FOUND); // ok 사인 도 같이 보내줌
}
}
}
Service의 save메서드 호출
작성 성공하면 commentDTOList 받아서 반환
@RequiredArgsConstructor
public class CommentService {
private final CommentRepository commentRepository;
private final BoardRepository boardRepository;
public Long save(CommentDTO commentDTO) {
// 부모엔티티 먼저 조회 조회를 못했을 수도 있으니까 optional 클래스로 선언한거임
Optional<BoardEntity> optionalBoardEntity = boardRepository.findById(commentDTO.getBoardId());
if (optionalBoardEntity.isPresent()) {
BoardEntity boardEntity = optionalBoardEntity.get();
CommentEntity commentEntity = CommentEntity.toSaveEntity(commentDTO, boardEntity);
return commentRepository.save(commentEntity).getId(); //저장된 entity id 반환
}
else {
return null;
}
}
public List<CommentDTO> findAll(Long boardId) {
// select * from comment_table where board_id=? order by id desc;
BoardEntity boardEntity = boardRepository.findById(boardId).get(); //board_table에서 entity 받아옴
List<CommentEntity> commentEntityList = commentRepository.findAllByBoardEntityOrderByIdDesc(boardEntity); // boardendtity에서 comment list 받아옴
List<CommentDTO> commentDTOList = new ArrayList<>();
for (CommentEntity commentEntity: commentEntityList) {
CommentDTO commentDTO = CommentDTO.toCommentDTO(commentEntity, boardId);
commentDTOList.add(commentDTO);
}
return commentDTOList;
}
}
save : boardEntity를 감싸고 있는 Optional 클래서 선언, commentDTO의 참조테이블 아이디를 이용해서 boardtable 찾음
DTO를 entity class로, 성공 여부 반환
findall : 거의 save의 역순임
Optional
자바의 java.util 패키지에 포함된 클래스로, 값이 있을 수도 있고 없을 수도 있는 상황을 다루기 위한 컨테이너임 ispresent 메서드 많이 씀
확실히 MVC 패턴을 이해하기 시작한 거 같음. service, controller, repository, dto, entity 의 개념도 체화되기 시작했음. 다만 아쉬운 점이 있다면
새롭게 찾아본 것
- jquery?
자바스크립트 라이브러리. 자주 사용되는 작업을 쉽게 처리할 수 있도록 도와줌, 이벤트 처리, 애니메이션 등- jQuery CDN?
jquery 라이브러리를 제공하는 주소라고 생각하면 됨. cdn은 전세계의 다양한 서버 컨텐츠를 분산하여 제공해주는 시스템임