[레시피] 댓글 달기 기능 get

 

[ ReplyController ]

@GetMapping("/{bno}") //게시글에 달린 댓글들 불러오기
public List<ReplyVO> replyListGET(@PathVariable int bno){
    return replyService.getReplyList(bno);
}

 

 

[ get.html ]

댓글버튼 클릭시 해당 게시판의 댓글 가져옴

http                   
       .get('/reply/'+'[[${board.id}]]')
       .then((res) => console.log(res))
       .catch((err) => console.log(err));

 

예를들어 파라미터에  localhost:8080/reply/203 치면 json타입으로 리턴을 해줌.

 

 

댓글 가져와서 댓글 리스트 만들기 

: ul 태그안에 li태그 댓글들 만들어 넣기

<!-- 댓글 리스트 (없음) -->
<div class="row mt-2">
    <div class="col-md-10 me-auto ms-auto">
        <div class="card card-plain">
            <ul class="list-group" id="reply-list">

            </ul>
        </div>
    </div>
</div>

 

[ get.html ]

// 댓글 리스트에 입력할 태그(ul)객체
function replyListView(items){
    const replyList = document.getElementById('reply-list');
    let lis = ''; //댓글 리스트 변수선언
    console.log(items);
}

 

댓글 가져오는 결과에 replyListView 함수를 넣으면  res결과가 items 로 들어감 

→  .then((res) => replyListVeiw(res)) -> function replyListVeiw(items)

http                   
       .get('/reply/'+'[[${board.id}]]')
       .then((res) => replyListView(res))
       .catch((err) => replyListView(err));

 

items 을 반복문을 사용

: items 결과를 반복문 써서 변수 li 에 넣어 댓글 리스트를 만든다.

 function replyListView(items) { //res결과가 items로 들어옴
    const replyList = document.getElementById('reply-list');
    let lis = ''; //댓글 리스트 변수선언
    // console.log(items);
    items.forEach(function (item) {
        let writer = item.writer;
        let content = item.content;
        let updateDate = item.updated_at;
        let id = item.reply_no;

        let li =
            `<li class="list-group-item" style="position: relative">
                <div>${writer}  ( ${updateTime} ) </div>
                <p class="mb-0">${content}</p>
                <textarea class="w-100" style="display:none">${content}</textarea>
                <div style="position: absolute; top: 10px; right: 10px">
                    <button class="badge bg-gradient-info ms-auto">수정</button>
                    <button class="badge bg-gradient-danger">삭제</button>
                </div>
            </li>`;
            lis += li; //각각의 댓글 데이터가 들어간 li태그를 더해준다.
    });

    //댓글 리스트에 실제 댓글들을 넣어준다.
    replyList.innerHTML = lis;
}

 

let li = ` `  백틱 쓰는 이유??  = 변수가 바로 문자열로 입력할 수 있다. ${writer} ${updateTime} ..

 

replyList.innerHTML = lis; 

: 댓글을 적으면 밑에 댓글 리스트가 바로 나온다

 

 

 

 

 

 

※  html 문서가 준비되면 실행되는 이벤트
document.addEventListener('DOMContentLoaded', function(){
    console.log('준비 완료');
});

 

 

댓글 리스트를 화면에 표시하기 위해 get코드 옮긴다.

document.addEventListener('DOMContentLoaded', function(){
    // console.log('준비 완료');
    // 댓글리스트를 화면에 표시하는 코드
    http
        .get('/reply/' + '[[${board.id}]]')
        .then((res) => replyListView(res))
        .catch((err) => replyListView(err));
});

 

 

 

댓글 달고 댓글폼 새로고침  location.reload()

: post 밑에 넣기

http
    .post('/reply', data)
    .then((res) => console.log(res))
    .catch((err) => console.log(err));

location.reload(); //새로고침