6. 카페메뉴 프론트엔드(2)

어제 공부 한 내용을 토대로

 

장비등록에 관련해서 페이지를 수정해 보았다.

아직 까지는 

프론트엔드만 이용해서 만들었다.

 

 

<template>
<div class="wrap">
    <div class="menu-title">
        <div class="header-container" >
            <h3>장비 등록하기</h3>
        </div>

        <input v-if="selectedSearchOption === 'product_date'" type="date" v-model="searchKeyword"
                @keyup.enter="dataSearch"/>
                <div class="menu" v-show="showRegistrationForm">
                    <div class="menu-content">
                        <ul>
                            <li>
                                <span>장비명</span>
                                <input type="text" placeholder="장비 이름을 입력하세요." v-model="newData.product_name">
                            </li>
                            <li>
                                <span>위도/경도</span>
                                    <div class="search-section" >
                                        <input type="number" placeholder="가격을 입력해주세요" v-model="newData.product_price">
                                        <input type="number" placeholder="가격을 입력해주세요" v-model="newData.product_price">
                                        <button @click="dataSearch()">검색</button>
                                    </div>

                            </li>

                            <li class="menu-content-category">
                                <span>장비 정보</span>
                                <label for="cctv1">
                                CCTVModel1
                                <input type="radio" name="category" id="ameriano" value="ameriano"
                                    v-model="newData.product_category">
                                </label>
                                <label for="cctv2">
                                CCTVModel2
                                <input type="radio" name="category" id="cafelatte" value="cafelatte"
                                    v-model="newData.product_category">
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>

 

이건 장비등록하기 상단부분

 

 

        <!-- 등록후 화면 -->
                <div class="list">
                    <table cellspacing="0">
                        <colgroup>
                            <col width="5%">
                            <col width="30%">
                            <col width="35%">
                            <col width="10%">
                            <col width="20%">

                    </colgroup>
                    <thead>
                    <tr>
                        <th scope="col">NO</th>
                        <th scope="col">장비명</th>
                        <th scope="col">위도/경도</th>
                        <th scope="col">장비정보</th>
                        <th scope="col"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="item" v-for="(item, index) in dataList" :key="item.id"
                        :class="{ 'selected-row': selectedRow == item.product_index }" @click="dataSelectOne(item)">
                        <td>{{ dataList.length - index }}</td>

                        <td>{{ item.product_name }}</td>
                        <td>{{ item.product_writer }}</td>
                        <td><img v-show="item.product_category === 'ameriano'" src="client/resources/img/americano_icon.png"
                                alt="Americano">
                            <img v-show="item.product_category === 'cafelatte'"
                                src="client/resources/img/cafe_latte_icon.png" alt="Cafelatte">
                         
                        </td>
                        <td><button class="button" @click.stop="dataDelete(item.product_index)">삭제</button></td>
                    </tr>
                    </tbody>
                    </table>
                   
                </div>
    </div>
                </div>
                <div class="button-container">
                    <div>
                        <button class="wide-button wide-button-1" id="addBtn1" @click="handleButtonAction()">{{ buttonLabel }}</button>
                    </div>

                    <div>
                        <button class="wide-button wide-button-2" id="addBtn2" @click="resetForm()">취소</button>
                    </div>
                </div>


</template>

 

이건 아래쪽 빨간줄 부분부터 아래쪽까지

 

 

<style scoped>



.button-container div {
    margin-bottom: 20px; /* 버튼 사이에 간격을 추가합니다. */
}
.wide-button {
    width: 80%; 
    padding: 15px; 
    font-size: 18px; 
    border-radius: 12px; 
    border: none; 
    display: block; 
    margin: 0 auto; 
}

.wide-button-1 {
    background-color: #4CAF50; 
    color: white; 
}

.wide-button-2 {
    background-color: #4CAF50; 
    color: white; 
}

</style>

이건 내가 적은 css 

 

 

 

이 부분은 백엔드와 소통하기 위한 axios 

<script>
import axios from "axios";

export default {
data() {
    return {
        // 데이터 목록
        dataList: [],

        // 빈 데이터
        emptyData: {
            product_index: null,
            product_name: null,
            product_category: null,
            product_price: null,
            product_writer: null,
            product_explan: null,
            product_temperature: 'ice',
            product_date: null
        },

        // 입력 데이터
        newData: {
            product_index: null,
            product_name: null,
            product_category: null,
            product_price: null,
            product_writer: null,
            product_explan: null,
            product_temperature: 'ice',
            product_date: null
        },

        // 선택된 데이터 Row
        selectedRow: null,

        // 데이터 편집 상태 (false = 수정, true = 등록)
        isEditMode: false,
        
        // 검색어
        searchKeyword: "",
        selectedSearchOption: 'product_name',

        showRegistrationForm: true,

    }
},
methods: {
    // 데이터 목록 조회
    dataSelectList: function () {
        const vm = this;
        axios({
            url: "/dataSelectList.json",
            method: "post",
            headers: {
                "Content-Type": "application/json; charset=UTF-8",
            },
            data: {},
        })
            .then(function (response) {
                console.log("dataList - response : ", response.data);
                vm.dataList = response.data;
            })
            .catch(function (error) {
                console.log("dataList - error : ", error);
                alert("상품 목록 조회에 오류가 발생했습니다.");
            });
    },

    // 데이터 등록
    dataInsert: function () {
        const vm = this;
        vm.newData.product_date = new Date().toISOString().slice(0, 10); // 현재 등록 시간
        axios({
            url: "/dataInsert.json",
            method: "post",
            headers: {
                "Content-Type": "application/json; charset=UTF-8",
            },
            data: vm.newData,
        })
            .then(function (response) {
                console.log("dataInsert - response : ", response.data);
                if (response.data > 0) {  // 서버 응답을 확인하여 상태를 처리합니다.
                    alert("상품을 등록했습니다.");
                    vm.dataSelectList(); // 업데이트된 데이터 목록 조회
                    vm.newData = vm.emptyData;
                }
                else {
                    alert("상품 등록에 실패했습니다.");
                }
            })
            .catch(function (error) {
                console.log("dataInsert - error : ", error);
                alert("상품 등록에 오류가 발생했습니다.");
            });
    },

    // 데이터 수정
    dataUpdate: function () {
        const vm = this;
        axios({
            url: "/dataUpdate.json",
            method: "post",
            headers: {
                "Content-Type": "application/json; charset=UTF-8",
            },
            data: vm.newData
        })
            .then(function (response) {
                console.log("dataUpdate - response : ", response.data);
                if (response.data > 0) {
                    alert("상품을 수정했습니다.");
                    vm.dataSelectList(); // 업데이트된 데이터 목록 조회
                } else {
                    alert("상품 수정에 실패했습니다.");
                }
            })
            .catch(function (error) {
                console.log("dataUpdate - error : ", error);
                alert("상품 수정에 오류가 발생했습니다.");
            });
    },
    

    // 데이터 삭제
    dataDelete: function (index) {
        if (confirm("삭제하시겠습니까?") == false) {
            return;
        }

        const vm = this;
        axios({
            url: "/dataDelete.json",
            method: "post",
            headers: {
                "Content-Type": "application/json; charset=UTF-8",
            },
            data: { product_index: index },
        })
            .then(function (response) {
                console.log("dataDelete - response : ", response.data);
                if (response.data > 0) {
                    alert("상품을 삭제했습니다.");
                    vm.dataSelectList(); // 업데이트된 데이터 목록 조회

                    // 상세조회 중인 상품과 삭제 중인 상품이 동일할 경우
                    if (index == vm.newData.product_index) {
                        vm.resetForm(); // 입력된 데이터 내용 초기화
                    }
                } else {
                    alert("상품 삭제에 실패했습니다.");
                }
            })
            .catch(function (error) {
                console.log("dataDelete - error : ", error);
                alert("상품 삭제에 오류가 발생했습니다.");
            });
    },



},

computed: {
    // 버튼 레이블을 동적으로 반환
    buttonLabel() {
        return this.isEditMode ? '수정' : '등록';
    }
},
components: {

},
mounted() {
    console.log('main mounted');
    this.dataSelectList();
}
}
</script>

 

 

이상