['21.07.20] Delete Method #2

1. method실행 후 프론트에 반영이 안된다.

---

['21.07.19] DB에서 삭제하기

앞선 글에서 말했다 시피, 삭제 버튼 클릭 시 DB에선 삭제가 되나, 프론트에서 표시가 안되는 문제가 있었다.

 

즉 결과적으로, delete method시행 후 프론트를 업데이트 하기위해 findAll이 실행되어야 하는데,

 

실행되지 않아 발생한 문제인 것 같다.

 

<변경 전> 변경 전 코드를 보면 method spqndp deleteMovie 실행 후 getMovie를 실행하도록 되어있다.

    // 맛집 목록 vue object
    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,                   
                });
                
                getMovieList();
            }

        }
    });

하지만 실제 버튼을 클릭하면 delete query진행 후 select query가 실행되지 않는다.

 

 

 

2. ajax 활용

---

그래서 다른 방법으로 ajax내부에 해당 method성공 시 실행할 function을 정의했다.

 

ajax의 기본 구조는 아래와 같다. success시, error시 callback function을 지정할 수 있다.

$.ajax('/jquery/getjsondata', 
{
    dataType: 'json', // type of response data
    timeout: 500,     // timeout milliseconds
    success: function (data,status,xhr) {   // success callback function
        $('p').append(data.firstName + ' ' + data.middleName + ' ' + data.lastName);
    },
    error: function (jqXhr, textStatus, errorMessage) { // error callback 
        $('p').append('Error: ' + errorMessage);
    }
});

 

<변경 후> 위의 방법을 정용하여 성공시 getMovie()를 실행하도록 했다.

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

        }
    });

 

3. 실행결과

---

delete query이후 select query를 통해 DB의 data를 불러왔다.

Hibernate: 
    delete 
    from
        movie_entity 
    where
        id=?
Hibernate: 
    select
        movieentit0_.id as id1_1_,
        movieentit0_.actor as actor2_1_,
        movieentit0_.director as director3_1_,
        movieentit0_.image as image4_1_,
        movieentit0_.link as link5_1_,
        movieentit0_.pub_date as pub_date6_1_,
        movieentit0_.subtitle as subtitle7_1_,
        movieentit0_.title as title8_1_,
        movieentit0_.user_rating as user_rat9_1_ 
    from
        movie_entity movieentit0_
MovieDTO(id=0, title=null, stateCode=SC_NoResult, link=null, image=null, subtitle=null, director=null, actor=null, userRating=null, commentDTOs=[])

 

프론트에서도 바로바로 반영을 해주고 있다.

 

 

 

4. 앞으로 할 일

---

1) 이미지는 Naver 이미지 검색 API를 따로 사용하여 가져오기. --> 고화질

2) Delete 되도록 코드 이해하고, 고쳐놓기

3) DB에 저장된 영화에 대하여 comment추가할 수 있도록 기능 추가.

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

 

 

5. GitHub : 210720, Front End#4, Delete method

---

 

bsh6463/MovieManager

.