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

 

드디어 CRUD중 마지막 기능인 Update를 구현해 볼 것이다. update 버튼을 누를 시 수정할 수 있는 폼이 등장하고, 데이터를 수정하고 Save 버튼을 누르면 장고 백엔드 서버로 PATCH method를 보내는 것을 구현하려고 한다.

 

먼저 수정하는 폼은 update 버튼을 누를 시에만 구현되도록 할 것이기 때문에 이를 체크하는 is_hidden 이라는 플래그 변수를 활용하려고 한다.
장고의 model 에 is_hidden 필드는 존재하지 않기에 vue 에서 플래그 데이터(is_hidden)를 추가해주는 작업을 할 것이다.

 

App.vue

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


// mounted 수정
mounted() {
    // DOM 객체 생성 후 drf server 에서 데이터를 가져와 todoList 저장
    axios({
        method: "GET",
        url: url,
    })
        .then((response) => {
            // 추가되는 부분
            for (var index in response.data) {
                response.data[index].is_hidden = false; // 백에서 받은 데이터에 is_hidden=false 추가
            }
            this.userList = response.data;
            console.log("Success", response);
        })
        .catch((error) => {
            console.log("Failed to get userList", error.response);
        });
},


// methods 수정
methods: {
        // CRUD 로직이 들어갈 부분
        getUserList: function() {
            axios({
                method: "GET",
                url: url,
            })
                .then((response) => {
                    // 추가하는 부분
                    for (var index in response.data) {
                        response.data[index].is_hidden = false; // 백에서 받은 데이터에 is_hidden=false 추가
                    }
                    this.userList = response.data;
                    console.log("Success", response);
                })
                .catch((error) => {
                    console.log("Failed to get userList", error.response);
                });
        },
        updateuserList: function() {},
    },

App.vue 파일의 mounted, methods 부분에 is_hidden 이라는 플래그 데이터를 추가하였다. 또한 template 부분에 이벤트를 할당해 주었다. 이 작업을 통하여 content.vue에서 is_hidden 이라는 플래그 데이터를 활용할 수 있게 되었다.

 

Content.vue

// components/Content.vue 파일 수정

<template>
    <div>
        <v-container fluid>
            <v-layout column>
                <v-flex xs12>
                    <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.username"
                                :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>
                    <!-- 수정하는 부분 start-->
                    <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 fluid>
                        <v-list-item v-for="(data, index) in propsdata" v-bind:key="index">
                            <v-list-item-content v-show="!data.is_hidden">
                                <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-form v-show="data.is_hidden">
                                <!-- is_hidden=true 가 되면 수정하는 form 등장 -->
                                <v-container>
                                    <v-row>
                                        <v-col cols="12" md="4">
                                            <v-text-field
                                                v-model="data.username"
                                                :counter="15"
                                                label="Username"
                                                required
                                            >
                                            </v-text-field>
                                        </v-col>
                                        <v-col cols="12" md="4">
                                            <v-text-field v-model="data.age" label="Age" disabled>
                                            </v-text-field>
                                        </v-col>
                                        <v-col cols="12" md="4">
                                            <v-text-field v-model="data.city" label="City" required>
                                            </v-text-field>
                                        </v-col>
                                        <v-col cols="12" md="4">
                                            <!-- Save 버튼은 Update 버튼을 클릭하면 볼 수 있고, Save 버튼 클릭 시 is_hidden=false 를 전달함 -->
                                            <v-btn
                                                class="ma-2"
                                                @click="
                                                    data.is_hidden = !data.is_hidden;
                                                    updateUser(data);
                                                "
                                                v-show="data.is_hidden"
                                                color="#4CAF50"
                                                >Save</v-btn
                                            >
                                            <!-- Delete 버튼은 Update 버튼을 클릭하면 볼 수 있고, Delete 버튼 클릭 시 선택 된 객체를 삭제함 -->
                                            <v-btn
                                                class="ma-2"
                                                @click="deleteUser(data.id)"
                                                color="#F44336"
                                                >Delete
                                            </v-btn>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-form>
                            <!-- Update 버튼 클릭 시 하나의 객체만 띄울 수 있는 메소드로 데이터 전달 -->
                            <v-btn
                                class="ma-2"
                                @click="
                                    data.is_hidden = !data.is_hidden;
                                    onlyUserListCard(data, propsdata);
                                "
                                v-show="!data.is_hidden"
                                color="#F9A825"
                                >Update</v-btn
                            >
                            <!-- 수정하는 부분 end-->
                            <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>

<script>
import axios from "axios";
let url = "http://192.168.20.135:801/user/";

export default {
    data: () => {
        return {
            data: {
                username: "",
                age: "",
                city: "",
            },
        };
    },
    props: ["propsdata"],
    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);
                });
        },
        // 추가되는 부분
        updateUser: function(data) {
            // 입력한 데이터를 PATCH로 업데이트 함
            axios({
                method: "PATCH",
                url: url + data.id + "/",
                data: data,
            })
                .then((response) => {
                    this.$emit("patched"); // 상위 컴포넌트에 patched 이벤트를 전송함
                    console.log("Success", response);
                })
                .catch((error) => {
                    console.log("Failed to patched userList", error.response);
                });
        },
        // 추가되는 부분
        onlyUserListCard: function(data, propsdata) {
            // 한개의 리스트만 보이도록 하는 함수
            for (var index in propsdata) {
                data.id != propsdata[index].id ? (propsdata[index].is_hidden = false) : "";
            }
        },
    },
};
</script>

<style>
.subject {
    color: blue;
    font-style: oblique;
    padding: 30px;
    text-align: center;
}
.userList {
    margin: 30px 0px 30px 0px;
}
</style>

is_hidden 플래그를 이용해서 값이 true가 될때만 수정하는 폼을 출력하도록 코드를 추가하고 수정하였다. 또한 데이터를 수정하고 난 후 Save 버튼을 누르면 실제로 patch 요청을 보내 UPDATE 되도록 하는 함수 역시 새로 작성하였다. 

위의 수정과정을 모두 거치고나면 정상적으로 UPDATE 기능이 작동하는 것을 확인할 수 있다.

 

완성된 CRUD 기능

완성된 CRUD 기능

 

지금까지 Vue와 Django를 활용하여 CRUD 기능을 만들어 보았다. 아주 간단한 기능을 하는 프로그램에 불과하지만 지금과 같은 방식을 통해 여러 가지 기능 추가를 한다면 조금 더 완성도 있는 페이지를 만들 수 있을 것이다.

 

Django + Vue CRDU 기능 구현을 완료해 보았다. 추후에 조금 더 완성도 있는 페이지를 만들어 보려고 한다.