게시판 댓글 리스트 가져오기

17 Dec 2020 in Web Dev on Java Spring

◇ Ajax 포스팅 시리즈 ◇

게시글에 달린 댓글을 가져오도록 한다.
댓글을 쓰고 삭제하는 작업은 다음 포스트에서 하는 걸로!

ezgif com-gif-maker

설정 확인

jstl core 추가되어있는지 (<!DOCTYPE html>)위에

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

ajax는 dependency에 추가해서 그냥 쓰면 된다. (pom.xml에 추가해준다.)

  <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
  <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.12.0</version>
  </dependency>

jquery 파일도 script 폴더에 추가해서 import 해준다.
```
<script src="script/jquery-3.5.1.min.js"></script>
```

Interface로 틀 만들기

1. 화면에 댓글 목록을 보여주고, 2. 댓글을 추가하고, 3. 댓글을 삭제하는 작업을 할 것이다. interface에 함수 등록을 해놓는다.

replyMapper.java (interface)

public interface ReplyMapper {
    //댓글 전체 요청
    public List<Reply> replyList(int boardseq);
    // 댓글 등록
    public int replyInsert(Reply reply);
    //댓글 삭제
    public int replyDelete(int replyseq);
}

mapper 생성하고 등록하기

replyMapper.xml 을 src/main/resources/mappers 에 만들어 놓는다. 코드는 야중에 추가하더라도…

<?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">
    <!--코드 추가할 자리-->
</mapper>

mybatis-config.xml 에 mapper 등록을 해준다. (src/main/resources/폴더에 있음)

그리고 param 타입 full 네임 쓰기 귀찮으니까 typealias에서 설정해준다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <typeAliases>
        <typeAlias type ="sesoc.intern.board.vo.Member" alias = "Member"/>
        <typeAlias type ="sesoc.intern.board.vo.Board" alias = "Board"/>
        <typeAlias type ="sesoc.intern.board.vo.Reply" alias = "Reply"/>
    </typeAliases>

    <mappers>
        <mapper resource="mappers/memberMapper.xml" />
        <mapper resource="mappers/boardMapper.xml" />
        <mapper resource="mappers/replyMapper.xml" />
    </mappers>
</configuration>

뒷단에 필요한 파일들 replyController, replyRepository 를 일단 생성은 해놓는다. 코드 추가 하지 않아도

댓글 화면 만들기

boardDetail.jsp - html 부분

jstl core 문법으로 <c:if 문을 사용해 sessionScope.loginId 이 empty 가 아닐 경우에만 댓글창이 보이게 해준다.
sessionScope.loginId는 우리가 login 할 때 controller에서 HttpSession 객체에 저장해 놓은 정보이다.
boardController.java

<!-- 댓글입력 : 로그인한 사람만 실명으로 댓글 달 수 있다. -->
<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);
})

init 함수

controller 에서 model에 저장한 board객체의 boardseq를 받아온다.
$.ajax() 로 페이지 로딩없이 정보만 갱신한다. replyController의 @RequestMapping(value=”/replyList”,method=”RequestMethod.POST”) 가 있는 함수와 매핑되어서 정보를 주고받는다.
정보를 무사히 가져오면 output 함수가 실행된다.

function init(){
    var bordseq = ${board.boardseq}
    sendData={"boardseq":boardseq}
    $.ajax({
        data : sendData,
        method :'POST',
        url: 'replyList',
        success :output
    })
}
}

output 함수

$.each(resp,function(pram))을 사용해서 리스트 안 객체를 하나씩 꺼내 문자열에 저장한다. 그 후 result 를 화면에 표시한다.
이벤트를 $(function(){}) 이 함수 안이 아닌, output 함수에서 추가를 해주는데 그 이유는 이벤트를 추가해줄 버튼이 동적으로 생성되기 때문에 (화면을 로드할때만 생성되는게 아니라, 데이터를 주고 받은 결과로 생성되기때문에) 그 요소를 화면에 추가하고 그 직후에 이벤트를 걸어주는 코드를 넣어준다.
delete 하는 코드는 다음 포스트에 추가할 것이다.

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)
}

replyController.java

ReplyRepository repository; 를 전역으로 선언한다. (@autowired 하면 spring이 알아서 객체 생성해줌)

@Autowired
ReplyRepository repository;
@ResponseBody
@RequestMapping(value="/replyList", method=RequestMethod.POST)
public List<Reply> replyList(int boardseq){
    List<Reply> replyList = repository.replyList(boardseq);
    return replyLiMemberRepositoryst;
}

replyRepository.java

두말하면 입아팡… SqlSession session; session.getMapper(interface명.class); 가 포인트

@Repository
public class ReplyRepository {
	@Autowired
	SqlSession session;
	public List<Reply> replyList(int boardseq){
		ReplyMapper mapper = session.getMapper(ReplyMapper.class);
		List<Reply> replyList = mapper.replyList(boardseq);
		return replyList;
	}
}

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">
    <!-- 댓글 목록 요청 -->
    <select id = "replyList" resultType="Reply" parameterType="int">
        SELECT
        replyseq,
        boardseq,
        userid,
        replytext,
        to_char(regdate,'YYYY-MM-DD') as regdate
        FROM
        reply
        WHERE
        boardseq = #{boardseq}
        ORDER BY
        replyseq DESC
    </select>
</mapper>

왔다갔다 하면서 해야돼서 사을짝 헷갈릴 수 있지만 몇번해보니 어렵지는 않다. 패턴에 익숙해져서 그런듯 싶다. 얕게 아는데 그치지 말고, 왜 그런지 깊게 공부하도록 해야겠다. 디지털 노마드.. 되 고 만 다…

게시판 댓글 리스트 가져오기

설정 확인

Interface로 틀 만들기

mapper 생성하고 등록하기

댓글 화면 만들기

Yeji 'Callie'

Error

설정 확인

Interface로 틀 만들기

mapper 생성하고 등록하기

댓글 화면 만들기

Templates (for web app):

Error