['21.07.20] comment기능 추가

영화 리뷰 관리를 위해 필요한 필수 기능인 comment 기능을 추가해보자.

 

이미 필요 기능은 구현되어 있고, 프론트를 통해 실행시킬 수 있어야 한다.

 

1. 자바스크립트

---

 

기존에 작성되어있는, Vue객체인 movie_list 내부에 addComment function을 추가했다.

 

해당 fucntion은 commentBox의 content를 가져와서 Post method를 실행한다.

 

이후 성공시 전체 movie리스트를 불러와서 프론트를 업데이트한다.

   var movie_list = new Vue({
        el: '#movie-list',
        data: {
            movie_list : {}
        },
        methods: {

            deleteMovie: function (id) {
                $.ajax({
                    type: "DELETE" ,
                    async: true ,
                    url: `/api/delete/movie/${id}`,
                    timeout: 3000,
                    error: function (request, status, error) {

                    },
                    success: function (response, status, request) {
                        getMovieList();
                    }
                });
                //getMovieList();
            },

            addComment: function (id) {
                const content = $("#commentBox").val();
                $.ajax({
                    type: "POST" ,
                    async: true ,
                    url: `/api/comment/${id}?content=${content}`,
                    timeout: 3000,
                    error: function (request, status, error) {

                    },
                    success: function (response, status, request) {
                        getMovieList();
                    }
                });
                //getMovieList();
            }

        }
    });

 

2. HTML

---

 

기존 영화 list 정보 하위에 리뷰를 입력하고 보여주는 부분을 추가했다.

 

리뷰는 일단 movie에서 commentDTOs를 불러왔다. 해당 객체는 list로.. 이후에 list를 어떻게 표기할지는 공부해서 수정해 보겠다..

 

"입력" 버튼을 클릭하면 해당 movie id를 가지고 addComment function이 실행된다.

<li class="list-group-item">리뷰 : {{movie.commentDTOs}}</li>
<li class="list-group-item">
  <div>
  <input id="commentBox" style="height: 46px" class="form-control form-control-lg" type="text"
  placeholder="comment 입력" value="">
  </div>
  <button v-on:click="addComment(movie.id)" type="button" class="btn btn-primary btn-lg"
  style="width: 100%;">입력
  </button>
 </li>

 

 

3. 실행 결과

---

comment가 입력 되고 잘 불어와 진다..? 

 

어림도 없지..

 

아래 영화의 코멘트 추가를 위해 입력 버튼을 누르면, 첫 번째 영화의 코멘트 입력창에 있는 값이 반영된다. 

 

 

4. 앞으로 할 일

---

1) 기능은 추가되었으나, comment입력 값을 가져오는 곳이 일치하지 않음. 개선필요.

2) 프론트 공부하기...?

 

 

5. GitHub : 210720, Front End#5, comment function

---

 

bsh6463/MovieManager