게시판 댓글 추가, 삭제하기

19 Dec 2020 in Web Dev on Java Spring

◇ Ajax 포스팅 시리즈 ◇

저번시간에는 댓글 작업에 필요한 여러가지 설정을 해주고, 파일들을 만들었다.
이번시간에는 만들어진 파일에 댓글을 추가하고 삭제하는 기능을 추가하는 코드를 볼 것이다. (화면에 대한 코드는 양이 적어서 저번시간에 다룸. 이 글에서는 뒷단을 주로 볼 것임)
차근차근 설명하고 싶지만, 시간관계상 중요한 포인트들만 적고 넘어가도록 할 것이다. 점점 나만을 위한 블로그가 되는 것 같..

ezgif com-gif-maker

댓글 추가

boardDetail.jsp - html 부분

<!-- 댓글입력 : 로그인한 사람만 실명으로 댓글 달 수 있다. -->
<c:if test="${not empty sessionScope.loginId}">
    <input class="reply" name="replytext"  id="replytext" placeholder="댓글내용" style="width:450px">
    <input type="button" id="replyInsert" value ="댓글 달기">
</c:if>
<div id = "replyresult">
</div>

boardDetail.jsp - javascript, jquery, ajax 부분

화면 요소가 로딩된 후, 댓글리스트를 화면에 뿌려주는 함수인 init()을 실행시킨다.
replyInsert 가 눌리면 replyInsert()함수가 실행되어 입력한 정보를 DB에 저장시킨다.

$(function(){
	init();
	$('#replyInsert').on('click',replyInsert);
})

replyInsert 함수

reply에 필요한 정보를 ajax로 서버로 보낸다. 필요한 정보는 다음과 같고 약간 뇌절이지만.. 그래도 난 설명을 쓴다.

//controller에서 model에 저장한 board 객체에서 정보 받아 변수에 저장
var boardseq="${board.boardseq}"

//sessionScope로 controller에서 HttpSession 객체에 저장해놓은 정보 받아 변수에 저장
var userid="${sessionScope.loginId}"

//#replytext 의 value값 읽어와 변수에 저장
var replytext =$("#replytext").val()

정보를 무사히 가져오면 댓글 입력란이 리셋되고 화면에 댓글을 뿌려주는 함수가 실행된다.
전체코드

function replyInsert(){
    var boardseq="${board.boardseq}"
    var userid="${sessionScope.loginId}"
    var replytext =$("#replytext").val()
    if (replytext.trim().length==0){
        alert("댓글을 입력해주세요!")
        $("#replytext").focus();
        return;
    }
    var reply = {"boardseq": boardseq,"userid":userid,"replytext" :replytext};
    $.ajax({
        url:'replyInsert',
        method:'POST',
        data : JSON.stringify(reply),
        contentType : 'application/json; charset=UTF-8',
        success: function(){
            $('#replytext').val("");
            init();
        }
    })
}

replyController.java

@ResponseBody 뿐 아니라 @RequestBody 도 사용한다. json 형식의 데이터 보낼 것이라.

@ResponseBody
@RequestMapping(value="/replyInsert", method=RequestMethod.POST)
public String replyInsert(@RequestBody Reply reply) {
    String message=null;
    int result =repository.replyInsert(reply);
    if(result==1) {//사용할 수 있다. db에서 찾았는데없으니까
        message = "success";
    }else {
        message ="fail";
    }
    return message;
}

replyRepository.java

SqlSession session; session.getMapper(interface명.class); 가 포인트..

public int replyInsert(Reply reply) {
    ReplyMapper mapper = session.getMapper(ReplyMapper.class);
    int result = mapper.replyInsert(reply);
    return result;
}

replyMapper.java 코드를 추가한다.

스펠링 틀려도 찾기 어렵다. 개고생함 ㅜㅜ 스펠링 틀리지 않게 조심히 치거라…

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="sesoc.intern.board.dao.ReplyMapper">
    <insert id ="replyInsert" parameterType = "Reply">
        INSERT INTO REPLY
        (
        replyseq,
        boardseq,
        userid,
        replytext
        )
        VALUES
        (reply_seq.nextval,
        #{boardseq},
        #{userid},
        #{replytext}
        )
    </insert>
</mapper>

댓글 삭제

delete 버튼은 댓글이 동적으로 생성돼 화면에 뿌려질 때 같이 탄생한다. output 함수에서 탄생

result +="<td><input type = button  class='replyDelete'"+ diasble+" data-del= '"+item['replyseq']+"' value= '"+item['replyseq']+"'></td>"

전체 코드는 아래와 같다.

객체리스트들을 each 문을 통해 화면에 나타낸다. 객체의 replyseq 정보를 data-del 속성에 저장한다.
화면에 html 을 꽂아넣고 난 후, 즉시 이벤트를 추가해준다.

function output(resp){
    var result ='<table border="1">	<tr>	<th>아이디</th><th>댓글 내용</th><th>등록일</th><th>비고</th>	</tr>';

    $.each(resp,function(index, item){
        result +="<tr><td>"+item["userid"]+"</td>"
        result +="<td><pre style='height : 70px'>"+item['replytext']+"</pre></td>"
        result +="<td>"+item['regdate']+"</td>"
        var diasble="";
        if(${sessionScope.loginId} != item["userid"])
        {diasble=" disabled"}
        result +="<td><input type = button  class='replyDelete'"+ diasble+" data-del= '"+item['replyseq']+"' value= '"+item['replyseq']+"'></td>"
        result += "</tr>"
    })
    result +=	"</table>"
    $("#replyresult").html(result)
    $("input:button.replyDelete").on('click',replyDelete)
}

replyDelete함수

함수에서 $this.attr(“data-del) 을 이용해 replyseq 정보를 받아서 서버에 보내주면 일련의 과정을 통해 DB에서도 삭제되게 한다.

function replyDelete(){
    var replyseq = $(this).attr("data-del");
    var sendData = {"replyseq": replyseq}
    $.ajax({
        method: 'GET',
        url : 'replyDelete',
        data : sendData,
        success: init
    })
}

replyController.java

@ResponseBody
@RequestMapping(value="/replyDelete", method=RequestMethod.GET)
public String replyDelete(int replyseq) {
    int result =repository.replyDelete(replyseq);
    String message=null;
    if(result==1) {//사용할 수 있다. db에서 찾았는데없으니까
        message = "success";
    }else {//사용할 수 없다.
        message ="fail";
    }
    return message;
}

replyRepository.java

public int replyDelete(int replyseq) {
    ReplyMapper mapper = session.getMapper(ReplyMapper.class);
    int result = mapper.replyDelete(replyseq);
    return result;
}

replyMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="sesoc.intern.board.dao.ReplyMapper">
    <delete id="replyDelete" parameterType="int">
        DELETE reply
        WHERE
        replyseq=#{replyseq}
    </delete>
</mapper>

계속 똑같이 반복됨.. 항상 이런식이야.. 이 젠 지 쳐..

디지탈 노마드 되고싶당~ 발리에서 코딩하고싶당 ~흐흐흐

게시판 댓글 추가, 삭제하기

댓글 추가

댓글 삭제

Yeji 'Callie'

Error

댓글 추가

댓글 삭제

Templates (for web app):

Error