20230922 _[79일차]_01. Vue (4차)_게시판 댓글창 만들기

오늘은 댓글만들자

 

댓글 CRUD

 

1. comments와 연동하기

 1-1. 보드에 댓글 수 출력하기

   comments에 최근글에 대한 댓글 더미데이터 넣어주세요.

   쿼리문 변경

   boardList.vue 변경

 

2. 상세보기 눌렀을 때 화면에 댓글들 출력하기

 2-1. 

 

 

 

---

글제목 옆에 댓글 갯수 먼저 표시해줄건데 

게시판 글 list를 불러온 boardview에 이미 commentcount가 있다.

그래서 그냥 vue에서 댓글 갯수를 뽑아내 주기만 하면 된다.

<template>

  <div>

    <h1>board</h1>

    <table>

      <thead>

        <tr>

          <th>번호</th>

          <th>제목</th>

          <th>글쓴이</th>

          <th>날짜</th>

          <th>조회수</th>

        </tr>

      </thead>

      <tbody>

        <tr v-for="n in list" v-bind:key="n.bno">

          <td>{{ n.bno }}</td>

          <td class="title">

            <a v-on:click="viewDetail(`${n.bno}`)">{{ n.btitle }}</a>

            <span class="comment"> ({{ n.commentcount }})</span>

          </td>

          <td>{{ n.m_name }}</td>

          <td>{{ n.bdate }}</td>

          <td>{{ n.blike }}</td>

        </tr>

      </tbody>

    </table>

    <button @click="write">글쓰기</button>

  </div>

</template>

 

이제 detailPage에도 댓글을 띄워보자.

일단 서버에서 불러오고

댓글:[

{m_no=3, bno=722, c_no=32, m_name=뽀로로, c_date=2023-09-22 09:16:28.0, m_id=pororo, c_comment=수정이나해}, 

{m_no=3, bno=722, c_no=33, m_name=뽀로로, c_date=2023-09-22 09:16:24.0, m_id=pororo, c_comment=테스트용 댓글댓글}, 

{m_no=3, bno=722, c_no=34, m_name=뽀로로, c_date=2023-09-22 09:16:15.0, m_id=pororo, c_comment=노는게젤좋아}]

 

 

이렇게 불러온 댓글을 vue에서 잡아서 띄워보자.

 

Map 에 담긴 댓글요소들을 List에 담아서 가져왔기 때문에 게시글을 뽑아낸것처럼 해줘야 한다.

 data() {

    return {

      requestBody: this.$route.query,

      detail: {

        bno: this.$route.query.bno,

        btitle: "",

        bcontent: "",

        bdate: "",

        m_name: "",

        blike: "",

      },

      comments: [],

    };

위처럼 comments를 list로 선언해준다.

boardDetail() 메소드 부분에 댓글도 추가해주고

boardDetail() {

      //alert('페이지가 구동되면 바로 호출됩니다.');

      this.$axios

        .get(this.$server + "/detail?bno=" + this.$route.query.bno)

        .then((res) => {

          this.detail = res.data.detail;

          this.comments = res.data.comments;

          //alert(res.data.comments[0].c_no);

        })

        .catch((err) => {

          alert("오류가 발생했습니다." + err);

        });

    },

temlate 부분에서 v-for 로 꺼내주고 그 내부의 c_no, c_comment, c_date를 하나하나 뽑아내준다.

수정 삭제 버튼도 넣어줬다.

  <hr>

  <div v-for="c in comments" v-bind:key="c.c_no">

    <div class="commentBox">

      {{ c.c_no }} . {{ detail.m_name }} || {{ c.c_comment }} || <span class="cdate">{{ c.c_date }}</span>

      <button v-on:click="cedit">수정</button>

      <button v-on:click="cdel">삭제</button>

    </div>

  </div>

 

---

삭제기능 만들자.

삭제버튼에 클릭했을때 cdel 메소드가 실행되는 기능 넣어준다.

이때 매개변수로 cno와 bno를 함께 가져가야 한다.

<button v-on:click="cdel(`${c.c_no}`, `${detail.bno}`)">삭제</button>

cdel메소드에서 매개변수 cno와 bno를 받아서 requestBody에 붙여서 서버로 보낸다

이때 매개변수가 하나가 아니라 여러개여서 data : this.requestBody로 해줘야 한다.

게시글만들때 bno 하나를 잡아갈때는 query 로 했었다.

 

그냥 bno랑 cno 를 number라는 객체에 넣어서 한번에 보내줬다.

 

 cdel(cno, bno) {

      if (confirm("댓글을 삭제하시겠습니까?")) {

        let numbers = {};

        numbers.cno = cno;

        numbers.bno = bno;

        console.log(numbers);

        //alert(numbers.bno);

        this.$axios({

          url: this.$server + "/cdel",

          method: "post",

          data: numbers,

        })

          .then((res) => {

            if (res.data.result == 1) {

              alert("댓글을 삭제했습니다.");

              this.$router.push({

                path : "/detail",

                query: { bno: bno }

              });

            }

          })

          .catch((err) => {

            alert("에러가 발생했습니다" + err);

          });

      }

    },

 

서버에서는 이렇게 설정해주고 c_del값 변경에 성공하면 result값 1을 받는다.

 

그러면 삭제를 눌렀을때 confirm창이 뜨고

확인을 누르면 댓글을 삭제했다는 팝업이 뜨고

db의 c_del값이 0으로 변경되면서 댓글이 삭제되는데 

바로 적용은 안되고 새로고침 해야 적용이 된다. 어떻게 해야 할까