[Django, Vue]Django + Vue CRUD 구현 4 - Front end

 

이전 포스팅에서 Create 기능에 대한 부분을 완벽하게 구현해 두었다. 지금부터는 Delete 기능을 구현해볼 것이다.

 

Content.vue

// Content.vue 수정

<template>
    <div>
        <!-- 변경 -->
        <v-container fluid>
            <!-- 전체 너비를 사용 : fluid -->
            <v-layout column>
                <v-flex>
                    <h3 class="subject">user CRUD</h3>
                </v-flex>
                <v-flex column>
                    <v-row>
                        <v-col cols="4" md="4">
                            <!-- 합이 12인 전체화면 -->
                            <v-text-field v-model="data.usename" :counter="15" label="Username" required></v-text-field>
                        </v-col>
                        <v-col cols="4" md="4">
                            <v-text-field v-model="data.age" label="Age" required></v-text-field>
                        </v-col>
                        <v-col cols="4" md="4">
                            <v-text-field v-model="data.city" :counter="15" label="City" required></v-text-field>
                        </v-col>
                    </v-row>
                    <v-btn @click="sendForm" style="background: green">create</v-btn>
                    <v-btn @click="clearForm" style="background: red">clear</v-btn>
                </v-flex>
                <!-- 변경 -->
 
                <v-flex class="userList" column>
                    <v-card max-width="600" tile>
                        <v-list-item v-for="(data, index) in propsdata" v-bind:key="index">
                            <v-list-item-content>
                                <v-list-item-title>이름 : {{ data.username }}</v-list-item-title>
                                <v-list-item-subtitle>나이 : {{ data.age }}세, 거주지: {{ data.city }}</v-list-item-subtitle>
                            </v-list-item-content>
                            <!-- 추가되는 코드 -->
                            <v-btn class="ma-2" @click="deleteUser(data.id)" color="#F44336">Delete</v-btn>
                        </v-list-item>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-container>
    </div>
</template>

methods: {
        sendForm: function() {
            axios({
                method: "POST",
                url: url,
                data: this.data,
            })
                .then((response) => {
                    this.userList = response.data;
                })
                .catch((error) => {
                    console.log("Failed to get userList", error.response);
                });
        },
        clearForm: function() {
            (this.data.username = ""), (this.data.age = ""), (this.data.city = "");
        },
        // 추가되는 코드
        deleteUser: function(id) {
            axios({
                method: "DELETE",
                url: url + id + "/", // localhost:8000/user/1 로 delete method
            })
                .then((response) => {
                    this.$emit("deleted"); // 상위 컴포넌트에 deleted 이벤트를 전송함
                    console.log("Success", response);
                })
                .catch((error) => {
                    console.log("Failed to get userList", error.response);
                });
        },
    },

Content.vue 파일에서 deleteUser 라는 함수를 새로 만들어 DELETE 요청을 axios 를 활용해 진행할 것이다.

deleteUser 함수에서는 http method 를 Delete 로 설정하고 user의 id 값과 함께 url 요청을 하도록 한다.

또한 상위 컴포넌트에 deleted 라는 이벤트를 전송함으로써 삭제 후 자동으로 새로고침된 데이터를 GET 할 수 있도록 한다.

 

App.vue

// App.vue 수정

<template>
    <div>
        <header></header>
        <!-- 수정하는 부분 -->
        <content v-bind:propsdata="userList" v-on:saved="getUserList" v-on:deleted="getUserList"></content>
        <!-- v-bind:하위컴포넌트 속성명="상위 컴포넌트 전달할 데이터명"  -->
        <footer></footer>
    </div>
</template>

content.vue 에서 deleted 이벤트를 전송 받을 때 이전에 만들어 두었던 getUserList 메소드를 다시 한번 이용하여 삭제 시에도
데이터가 바로 갱신되도록 설정하였다.

위의 작업을 하고 나면 정상적으로 DELETE 기능을 이용할 수 있게 된다.

 

정상 작동하는 Delete

 

다음 포스팅에서는 CRUD 기능중 마지막인 Update 기능을 구현해볼 것이다.