🧩1.댓글 달기
글 상세 보기 페이지에서 댓글 달기 버튼을 클릭하면 모달창이 뜨고
ajax를 이용해서 다른 사람이 작성한 글에 댓글을 달 수 있다.
✂️본인 글에서는 수정/삭제만 가능하고 댓글 작성은 할 수 없다.
✂️게시글을 다른 사람이 작성한 경우 댓글을 작성할 수 있다.
- 댓글추가도 가능하다.
🖋️ajax란?
비동기 통신 방식으로 특정 부분만 서버랑 통신한다.
댓글 달기나 아이디 중복 체크 등 일부 응답이 필요한 경우에 사용하기 때문에 꼭 필요한 기능이다.
💡pom.xml에 json 사용을 위해 라이브러리를 추가한다.
<!-- JSON.stringify(문자열 json타입 변경) -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.5</version>
</dependency>
📕dto 만들기
private String replyer;
private String title;
private String replyContent;
private int replyGroup;
private Timestamp replyDate;- 댓글을 달기위한 dto를 만들어준다.
- 댓글 작성자, 제목, 댓글 내용, 글그룹, 작성일 항목을 만든다.
replyGroup은 몇번 게시글에 대한 댓글인지 같은 글 번호를 그룹으로 묶는다.(원글삭제시 참조하는replyGroup도 삭제된다.)
📕jsp
- 댓글은 모달 창으로 만들고 상세 보기 페이지에 코드를 추가했다.
- css코드는 중요한 부분이 아니기 때문에 생략
<body onload="replyData()">
<div id="modal_wrap">
<!-- 모달 추가 -->
<div id="first">
<div style="width: 250px; margin: 0 auto; padding-top: 20px;">
<form id="frm">
<input type="hidden" name="write_num"
value="${detailWriteData.writeNum}"> <b>댓글달기</b>
<hr>
<b>작성자 : ${successUser}</b>
<hr>
<b>제목</b><br> <input type="text" id="title" size="30"
name="title">
<hr>
<b>내용</b><br>
<textarea name="replyContent" id="content" rows="9" cols="30"></textarea>
<hr>
<button type="button"
style="background: white; border-radius: 4px; border-color: white; height: 30px;"
onclick="reply()">댓글달기</button>
<button type="button"
style="background: white; border-radius: 4px; border-color: white; height: 30px;"
onclick="slide_hide()">취소</button>
</form>
</div>
</div>
</div>- 댓글 달기 버튼을 클릭하면 모달 창이 뜨고 해당 글 번호와 로그인 세션이 있는 작성자 아이디를 불러온다.
- 제목과 내용을 작성하고 정한
name으로 데이터를 보내며 댓글을 달거나 취소할 수 있는 버튼이 있다. - 페이지가 모두 로딩 된 후
<body>로replyData()함수를 호출한다.onload를 써야 댓글을 달았을 때 글이 바로 뜬다.
📕replyController
- 댓글 달기 컨트롤러를 따로 만들어서 사용했다.
@RestController
@RequestMapping("board")
public class boardReplyController implements loginSessionName {
@Autowired boardService bs;
@PostMapping(value="addReply", produces = "application/json; charset=utf-8")
public String addReply(@RequestBody Map<String, Object> map, HttpSession session){
boardReplyDTO dto = new boardReplyDTO();
dto.setReplyer( (String)session.getAttribute(LOGIN) );
dto.setReplyGroup( Integer.parseInt((String)map.get("write_num")) ); //원글에 대한 그룹번호를 원글번호와 맞추자
dto.setTitle((String)map.get("title"));
dto.setReplyContent((String)map.get("replyContent"));
return bs.addReply(dto);
}@RestController는 jsp가 아니라 데이터를 리턴으로 돌려준다.requestbody로 json을 받아주고map에 키/값, 세션을 가져온다.- 댓글 dto 객체를 만들고 dto에 작성자, 같은 글에 대한 댓글을 묶은 그룹, 제목, 내용을 추가하고 이 데이터를 service로 보낸다.
📕Service/serviceImpl
public String addReply(boardReplyDTO dto);public String addReply(boardReplyDTO dto) {
int result = mapper.addReply(dto);//매퍼로 넘기기
String msg= null;
if(result==1) {
msg = "{\"result\" : true}";
}else {
msg = "{\"result\" : false}";
}
return msg;
}- dto를 mapper로 넘길 값을 result 변수로 지정하고 값이 1이면 성공을 1이 아니면 실패 메시지를 돌려준다.
📕mapper.java
public int addReply(boardReplyDTO dto);📕mapper.xml
<insert id="addReply">
insert into
talk_board_reply(replyer,title,reply_content,reply_group)
values(#{replyer},#{title},#{replyContent},#{replyGroup})
</insert>- 댓글을 추가하기 때문에
insert로 쿼리문을 작성한다.
🧩2.댓글 데이터 얻어오기
🎨jsp
<script type="text/javascript">
function replyData(){
$.ajax({
url : "replyData/" + ${detailWriteData.writeNum},
type : "GET",
dataType : "json",
success : function(reply){
let html = "";
reply.forEach(function(data){
let date = new Date(data.replyDate);
let replyDate = date.getFullYear()+"년 "+(date.getMonth()+1)+"월 ";
replyDate += date.getDate()+"일 "+date.getHours()+"시 "
replyDate += date.getMinutes()+"분 "+date.getSeconds()+"초 "
html += "<div align='left'><b>작성자</b> | "+data.replyer+"<br>"
html += "<b>작성일</b> | "+replyDate+"<br>"
html += "<b>제목</b> | "+data.title+"<br>"
html += "<b>내용</b> | "+data.replyContent+"<hr></div>"
})
$("#replyGet").html(html);
},
error : function(){
alert('댓글을 가져올 수 없습니다');
}
})
}
</script><body>로 호출한 코드를 실행하고 db로부터 댓글을 가져온다.$는 제이쿼리 문법으로url는 컨트롤러 경로를 의미하고,
서버로부터 해당 글 번호를type을 get방식으로 댓글을 가져온다.dataType은 json- 성공시
function(reply)함수를 실행해 작성자, 작성일, 제목, 내용 순으로forEach를 사용해 댓글을 추가한다. - 실패시 에러 메시지를 출력한다.
📕replyController
//댓글 가져오기
@GetMapping(value="replyData/{replyGroup}", produces="application/json;charset=utf-8")
public List<boardReplyDTO> replyData(@PathVariable int replyGroup) {
return bs.getReplyList(replyGroup);
}- json방식으로 저장된 댓글을
list형식으로 데이터를 글 번호 그룹별로 가져오고 service로 보낸다.
📕Service/serviceImpl
public List<boardReplyDTO> getReplyList( int replyGroup);public List<boardReplyDTO> getReplyList( int replyGroup){
return mapper.getReplyList(replyGroup);
}- 데이터를 mapper로 보낸다.
📕mapper.java
public List<boardReplyDTO> getReplyList( int replyGroup);📕mapper.xml
<resultMap id="replyGet" type="com.care.board.board.dto.boardReplyDTO">
<result property="replyer" column="replyer" />
<result property="title" column="title" />
<result property="replyContent" column="reply_content" />
<result property="replyGroup" column="reply_group" />
<result property="replyDate" column="reply_date" />
</resultMap>
<!-- 댓글 가져오기 -->
<select id="getReplyList" resultMap="replyGet">
select * from talk_board_reply where reply_group=#{replyGroup} order by reply_date desc
</select>
-
댓글을 가져오기 위해 dto와 sql을 연결하는 매핑 작업을 한다.
-
댓글 그룹을 작성일을 내림차순으로 가져온다.
꾸준히 성장하는 개발자