[Spring] 댓글 목록 조회

댓글 조회

샘플데이터 넣은 글에 넣은 샘플 데이터 조회하기!

 

 

 

비동기 - 동시에 일을처리

동기 - 순차적 처리

 

contextPath : /fin

// JSON: JS 객체 형태의 문자열( 모든 프로그램에서 사용 가능)
// 응답 데이터 형식이 JSON 형식임을 알려주어 자동으로 JS객체로 변환시켜준다 

-> 반환된 값이 Object로 반환된다.

---

ReplyController

 

@RestController // 요청 시 값만 반환되는 컨트롤러 @Controller + @ResponseBody
@RequestMapping("/reply/*")
public class ReplyController {
	
	@Autowired
	private ReplyService service;
    
    // 댓글 목록 조회
	@RequestMapping(value="select", method = RequestMethod.GET)
	public String selectList(int boardNo) {
							
		List<Reply> rList = service.selectList(boardNo);
		
		return new Gson().toJson(rList);
	}
    
}

 

매개변수

int boardNo : RequestParam 생략 형식

(ajax 코드의 data 속성에 작성된 key값을 매개변수로 보내준다. )

조회된 rList를 JSON형식으로 변경
-> 직접 변경 / JSONSimple 라이브러리 / GSON 라이브러리 
이 중에서 GSON 라이브러리 사용!

new Gson().toJson(rList) : object를 JSON형태로 변환

---

 

ReplyController에서 GSON 라이브러리 사용하기때문에 POM.XML에 GSON 라이브러리 추가 

 

GSON: JSON의 길어지는 코드를 간결하게 하기 위해 사용되는 라이브러리

 

라이브러리 모아둔 곳에 추가

 

 

 

@RequestMapping(value="select", method = RequestMethod.GET)
	public String selectList(int boardNo) {
							// ajax 코드의 data 속성에 작성된 key값을 매개변수로 보내준다. 
		
		List<Reply> rList = service.selectList(boardNo);
		
		// 조회된 rList를 JSON형식으로 변경
		//-> 직접 변경 / JSONSimple 라이브러리 / GSON 라이브러리 
		// GSON 라이브러리 사용!
		
		// POM.XML가서 라이브러리 추가하고오기
		// new Gson().toJson(rList) : object를 JSON형태로 변환
		
		return new Gson().toJson(rList);
	}

 

reply.js

-ajax진행

// 댓글 목록 조회
function selectReplyList(){

// 비동기 통신(ajax)를 이용해서 JSON 형태로 댓글 목록 조회 및 출력
$.ajax({
    url : contextPath + "/reply/select",
    data : {"boardNo" : boardNo}, // 현재 게시글 번호
    type : "get",
    dataType : "JSON",  // JSON: JS 객체 형태의 문자열( 모든 프로그램에서 사용 가능)
                        // 응답 데이터 형식이 JSON 형식임을 알려주어 자동으로 JS객체로 변환시켜준다 

    success : function(rList){
        console.log(rList);
        // 댓글 목록을 요소로 만들어서 화면에 출력

        // 기존 댓글 영역 내용 삭제 
        // $("#replyListArea").html("");  // 내용을 지워라
        $("#replyListArea").empty(); // 내용을 비워라(이게 더 빠름)

        // rList 요소를 순차적으로 반복 접근
        // reply에서 하나씩 꺼내오면 그게 reply니깐 그걸로 적음 
        $.each(rList, function(index, reply){

            //const li = $("<li>").addClass("reply-row");
            const li = $('<li class="reply-row">');

            // 자식 댓글인 경우 li요소에 클래스 추가
            // 부모댓글이 0이 아닐때라는 조건을 한 이유 : db에서는 null, java에서는 int로 기본값 0이 들어간다
            if (reply.parentReplyNo != 0) li.addClass("child-reply");

            const div = $('<div>');

            const rWriter = $('<p class="rWriter">').text(reply.memberName);
            const rDate = $('<p class="rDate">').text('작성일 : ' + reply.replyCreateDate);
            // p 태그에 작성된 내용들을
            // div에 자식으로 rWriter, rDate 추가
            div.append(rWriter, rDate);

            // 댓글 내용
            // 내용은 html로 하는 이유: <br> 태그를 태그 자체로 인식해서 출력해야하니깐
            const rContent = $('<p class="rContent">').html(reply.replyContent);

            li.append(div, rContent);
            // 위의 div와 내용을 li에 추가 


            // 1. 버튼 영역 요소 생성 
            const replyBtnArea = $('<div class="replyBtnArea">');

            // 로그인 되어있다면  
            if (loginMemberNo != "") {
                // 버튼 생성 : css가 들어있는 클래스를 추가, 내용 추가
                const childReply = $("<button>").addClass("btn btn-primary btn-sm ml-1").text("대댓글");

                //버튼 클릭 시 대댓글 작성 영역을 출력하는 함수 호출 
                // reply.replyNo : 현재 댓글 번호, 대댓글의 부모 번호 댓글 번호 (parentReplyNo))
                // this : 이벤트가 발생한 요소 자체 
                //      - 해당요소를 기준점으로 하여 
                //          parent(), children(), prev(), next() 등의 순회(탐색)메서드
                //          append(), after(), before() 등의 요소 삽입 메서드를 작성할 예정

                // 화면이 계속 바뀌니깐 언제 어느 요소를 넣을지 모르니 기준점을 기준으로 탐색해서 만든다
                childReply.attr("onclick", "showInsertReply(" + reply.replyNo + ", this)");

                // 버튼 영역에 추가
                replyBtnArea.append(childReply);
            }


            // 댓글 작성자 == 로그인 멤버 -> 버튼 영역 생성
            if (reply.memberNo == loginMemberNo) { // 자신이 쓴 댓글이니 수정, 삭제 가능

                // 수정버튼 생성
                const showUpdate = $('<button>').addClass('btn btn-primary btn-sm ml-1').text('수정');
                showUpdate.attr("onclick", "showUpdateReply(" + reply.replyNo + ", this)");

                // 삭제 버튼 생성
                const deleteReply = $('<button>').addClass('btn btn-primary btn-sm ml-1').text('삭제');
                deleteReply.attr("onclick", "deleteReply(" + reply.replyNo + ")");

                replyBtnArea.append(showUpdate, deleteReply);
            }


            li.append(replyBtnArea);

            // ul태그에  li 요소를 하나씩 마지막 자식으로 삽입 
            $("#replyListArea").append(li);


        });



    }, error : function(req, status, error){
        console.log("댓글 목록 조회 실패");
        console.log("req.responseText");
    }


});

 

 

---

BoardController

- 상세조회 메서드에 replyservice 호출 

// 게시글 상세 조회
@RequestMapping("view/{boardNo}")
public String selectBoard(@PathVariable("boardNo") int boardNo,
        @RequestParam(value = "cp", required = false, defaultValue = "1") int cp, // 파라미터로 cp값을 받아오는데 없으면 1
        Model model, RedirectAttributes ra
        /*@ModelAttribute("loginMember") Member loginMember*/, HttpSession session) { 

        // @SessionAttributes
        // 1) Model.addAttribute(K,V) 수행 시 K가 일치하는 값을 Requst -> Session Scope로 이동
        // 2) Model.addAttribute(K,V)  Session으로 이동한 값을 얻어와 -> @ModelAttribute("K")에 전달

    int memberNo = 0;

    // session에 로그인 멤버가 있을 경우
    if(session.getAttribute("loginMember") != null) {
        memberNo = ( (Member)session.getAttribute("loginMember")).getMemberNo(); 
        //여기서 왜 값을 loginMember로 받아????
    }

    // 게시글 조회 Service 호출 (작성자가 보면 조회수 증가하지 않기위해 회원번호를보낸다)
    Board board = service.selectBoard(boardNo, memberNo);

    String path = null;

    if(board != null) {// 조회 성공 : 값이 있다

        // 댓글 목록 조회 Service 호출
        List<Reply> rList = replyService.selectList(boardNo);

        model.addAttribute("rList", rList);
        model.addAttribute("board", board); // requestScope로 전달
        path="board/boardView"; // forward

    } else { // 조회 실패

        Util.swalSetMessage("해당 글이 존재하지 않습니다", null, "info", ra);
        path = "redirect:../list";			
    }

    return path;
}

---

ReplyService

/** 댓글 목록 조회
 * @param boardNo
 * @return rList
 */
List<Reply> selectList(int boardNo);

---

ReplyService

// 댓글 목록 조회 
@Override
public List<Reply> selectList(int boardNo) {
    return dao.selectList(boardNo);
}

---

ReplyDAO

/** 댓글 목록 조회
 * @param boardNo
 * @return rList
 */
public List<Reply> selectList(int boardNo) {
    return sqlSession.selectList("replyMapper.selectList", boardNo); // boardNo를 파라미터로 넘긴다 
}

---

reply-mapper

<!-- 댓글 목록 조회 
parameterType="_int" 생략되어있다-->
<select id="selectList" resultMap="reply_rm">
    SELECT LEVEL, R.*
    FROM (SELECT REPLY_NO, REPLY_CONTENT, TO_CHAR(REPLY_CREATE_DT, 'YYYY"년"
        MM"월" DD"일" HH24"시" MI"분" SS"초"') REPLY_CREATE_DT,
        BOARD_NO, REPLY.STATUS_CD, PARENT_REPLY_NO, MEMBER_NO, MEMBER_NM
        FROM REPLY
        JOIN MEMBER USING(MEMBER_NO)
        WHERE BOARD_NO = #{boardNo}
        AND REPLY.STATUS_CD = 1) R

    START WITH PARENT_REPLY_NO IS NULL
    CONNECT BY PRIOR REPLY_NO = PARENT_REPLY_NO
    ORDER SIBLINGS BY REPLY_NO
</select>