🔥 댓글 작성 기능 🔥
✔️ Spring_Project에서 진행함
📌 을 진행하기 전에 로그인 안 된 상태인데 댓글 쓸 수 있는 거 매우 킹받음
💻 boardDetailView
👉🏻 로그인 전후로 조건 나누어 로그인 전인 경우 댓글을 등록할 수 없게 막아두기
👉🏻 로그인 된 상태일 경우 댓글 작성 요청용 ajax를 사용하기 위해 addReply 함수를 script에 선언
✔️ 내용을 적었을 때만 등록 가능하게 하는 설정 추가
👉🏻 form 태그 내에서는 required 속성이 적용되지만 form 태그 밖에서는 required 속성이 소용 없음!
👉🏻 댓글 내용이 있는지 먼저 검사 후에 있다면 ajax 요청 보내기!
(textarea 요소에 value 속성값 기준으로 공백 제거 후 길이가 0이 아닌 경우)
<table id="replyArea" class="table" align="center">
<thead>
<tr>
<c:choose>
<c:when test="${ empty loginUser }">
<!-- 로그인 전 -->
<th colspan="2">
<textarea class="form-control" name="" id="content" cols="55" rows="2" style="resize:none; width:100%;" readonly>로그인한 사용자만 이용 가능한 서비스입니다. 로그인 후 이용 바랍니다.</textarea>
</th>
<th style="vertical-align:middle"><button class="btn btn-secondary" disabled>등록하기</button></th>
</c:when>
<c:otherwise>
<!-- 로그인 후 -->
<th colspan="2">
<textarea class="form-control" name="" id="content" cols="55" rows="2" style="resize:none; width:100%;"></textarea>
</th>
<th style="vertical-align:middle"><button class="btn btn-secondary" onclick="addReply();">등록하기</button></th>
</c:otherwise>
</c:choose>
</tr>
<tr>
<td colspan="3">댓글(<span id="rcount">0</span>)</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<br><br>
<script>
// 모든 요소들이 화면에 출력된 다음 바로 실행
$(function() {
selectReplyList();
});
// 해당 게시글에 딸린 댓글 리스트 조회용 ajax 요청
function selectReplyList() {
$.ajax({
url : "rlist.bo",
data : {bno: ${ b.boardNo }},
success : function(result) {
// console.log(result);
var resultStr = "";
for(var i = 0; i < result.length; i++) {
resultStr += "<tr>"
+ "<td>" + result[i].replyWriter + "</td>"
+ "<td>" + result[i].replyContent + "</td>"
+ "<td>" + result[i].createDate + "</td>"
+ "</tr>";
}
$("#replyArea>tbody").html(resultStr);
// 댓글 개수 출력 => 기존 0에서 조회된 값으로 덮어씌우기
$("#rcount").text(result.length);
},
error : function() {
console.log("댓글 리스트 조회용 ajax 통신 실패!");
}
});
}
function addReply() { // 댓글 작성 요청용 ajax
if($("#content").val().trim().length != 0) {
$.ajax({
url : "rinsert.bo",
data : { // ajax 요청 또한 커맨드 객체 방식 가능 (키값을 필드명이랑 맞춰 줌)
refBoardNo:${ b.boardNo },
replyWriter:"${ loginUser.userId }",
replyContent:$("#content").val()
},
success : function() {
},
error : function() {
console.log("댓글 작성용 ajax 통신 실패!");
}
});
} else {
alertify.alert("댓글 작성 실패!", "댓글 작성 후 등록 가능합니다.");
}
}
</script>
⌨️ 댓글을 불러올 수 있는지 확인해 볼 BoardController
@RequestMapping(value="rinsert.bo")
public void ajaxInsertReply(Reply r) {
System.out.println(r);
}
📌 현재 상황
👉🏻 로그인 하지 않았을 때
👉🏻 로그인 했을 때
👉🏻 댓글을 달아 보자
👉🏻 Controller 도착 확인
🔥 댓글 작성 기능 start 🔥
💻 BoardServiceImpl
@Override
public int insertReply(Reply r) {
return boardDao.insertReply(sqlSession, r);
}
💻 BoardDao
public int insertReply(SqlSessionTemplate sqlSession, Reply r) {
return sqlSession.insert("boardMapper.insertReply", r);
}
💻 board-mapper.xml
<insert id="insertReply" parameterType="reply">
INSERT INTO REPLY (REPLY_NO
, REPLY_CONTENT
, REF_BNO
, REPLY_WRITER)
VALUES (SEQ_RNO.NEXTVAL
, #{replyContent}
, #{refBoardNo}
, #{replyWriter})
</insert>
💻 BoardController
@ResponseBody
@RequestMapping(value="rinsert.bo", produces="text/html; charset=UTF-8")
public String ajaxInsertReply(Reply r) {
// System.out.println(r);
int result = boardService.insertReply(r);
// if(result > 0) {
// } else {
// }
// if문 써도 무방하나 삼항 연산자를 사용해 볼 것!
return (result > 0) ? "success" : "fail";
}
💻 boardDetailView
function addReply() { // 댓글 작성 요청용 ajax
// form 태그 내에서는 required 속성이 적용되지만
// form 태그 밖에서는 required 속성이 소용 없음!
// => 댓글 내용이 있는지 먼저 검사 후에 있다면 ajax 요청 보내기!
// (textarea 요소에 value 속성값 기준으로 공백 제거 후 길이가 0이 아닌 경우)
if($("#content").val().trim().length != 0) {
$.ajax({
url : "rinsert.bo",
data : { // ajax 요청 또한 커맨드 객체 방식 가능 (키값을 필드명이랑 맞춰 줌)
refBoardNo:${ b.boardNo },
replyWriter:"${ loginUser.userId }",
replyContent:$("#content").val()
},
success : function(result) {
// "success" 또는 "fail"이라는 문자열이 들어 있음
if(result == "success") {
// 댓글 작성 성공 시 새로이 댓글 리스트를 불러올 것
// 화면이 깜빡거리지 않고 새롭게 작성한 댓글을 추가 후 리스트가 다시 보여지게 될 것
selectReplyList();
// 댓글 작성창 초기화
$("#content").val("");
}
},
error : function() {
console.log("댓글 작성용 ajax 통신 실패!");
}
});
} else {
alertify.alert("댓글 작성 실패!", "댓글 작성 후 등록 가능합니다.");
}
}
📌 현재 상황
👉🏻 댓글을 작성하기 위해 로그인부터 진행하고
👉🏻 댓글을 작성 후 등록하기를 누르면
👉🏻 댓글 등록이 자동 업데이트(댓글 리스트 조회 메소드 재호출) 되고, 댓글창이 잘 비워짐!
👉🏻 DB에도 잘 등록됨! (5번은... 오류 때문에 하나 날려먹음)