Vue 일지 #25 (20211005) 일괄 추가

25. 일괄 추가

-일괄 추가

백엔드 : #48~#51 일괄 추가

 

 * Seller_insert.vue 생성

Seller_insert.vue

 * Seller_insert.vue 등록(App.vue)

import Seller_insert from '@/components/Seller_insert'

 

const routes = [

    {path:'/',  name:'Home', component:Home},

    {path:'/Join',  name:'Join', component:Join},

    {path:'/Login',  name:'Login', component:Login},

    {path:'/Mypage',  name:'Mypage', component:Mypage},

    {path:'/Seller_insert',  name:'Seller_insert', component:Seller_insert},

]

 

 * Seller_insert.vue 등록(App.vue)

<template>

  <div id="nav">

    <router-link to="/">Home</router-link>|

    <router-link to="/Join">Join</router-link>|

    <router-link to="/Login">Login</router-link>|

    <router-link to="/Mypage">Mypage</router-link>|

    <router-link to="/Seller_insert">Insert</router-link>|

    <hr />

    <router-view />

  </div>

</template>

 

 *화면 확인

Seller_insert 등록

 

 *Seller_insert 화면 구성(Seller_insert.vue)

 * v-for 를 이용해 count 만큼 만든다.

 * count는 scrip의 data에 3으로 등록한다.

<template>

    <div>

        <h3>게시판 목록</h3>

        <hr />

        <h3>물품등록</h3>

        <table>

            <tr v-for="num in count" v-bind:key = "num">

                <input type="text" name="name" v-model="name" placeholder="이름"/>

                <input type="text" name="content" v-model="content" placeholder="내용"/>

                <input type="text" name="price" v-model="price" placeholder="가격"/>

                <input type="text" name="quantity" v-model="quantity" placeholder="수량"/>

                <br />

            </tr>

        </table>

        <input type="button" @click="handleInsert" value="등록하기" />

    </div>

</template>

... ...

     data() {

            return {

                count : 3

            }

        }

 

 *화면 확인

물품 등록 화면

 

 *등록하기 버튼 클릭 시 이벤트 구현(Seller_insert.vue)

 *console.log(response); 를 이용해 전달값 확인

<script>

     import axios from 'axios'

    export default {

        methods:{

            async handleInsert(){

                const url = "/REST/api/seller/item_insert1";

                const headers = {"Content-Type":"application/json", token : this.token};

                const formData = [

                    {"name":this.name, "content":this.content, "price":this.price, "quantity":this.quantity},

                    {"name":"A", "content":"B", "price":21, "quantity":3},

                    {"name":"A", "content":"B", "price":31, "quantity":3}

                ];

               

                const response = await axios.post(url, formData, {headers});

                console.log(response);

            }

        },

        data() {

            return {

                count : 3,

                name : '',

                content : '',

                price : '',

                quantity : '',

                token : sessionStorage.getItem("TOKEN"),

            }

        }

    }

</script>

 

 *등록하기

console 값 확인

 

 *물품등록은 토큰이 있어야 동작 되므로 if 조건문으로 토큰 유무를 먼저 확인한다.

 *현재 formdata에 내용을 미리 입력해서 첫번째 물품 빼고는 정해진 값으로 추가된다.

 *토큰이 없다면 로그인 화면으로 이동한다. 

 *if 조건문을 이용해 성공 유무 확인과 다음 동작 입력

 *비밀번호 추가 후 home 화면으로 이동한다.

 *추가 후 h2-console 에서 확인한다.

 

<script>

     import axios from 'axios'

    export default {

        methods:{

            async handleInsert(){

                const url = "/REST/api/seller/item_insert1";

                const headers = {"Content-Type":"application/json", token : this.token};

                const formData = [

                    {"name":this.name, "content":this.content, "price":this.price, "quantity":this.quantity},

                    {"name":"A", "content":"B", "price":21, "quantity":3},

                    {"name":"A", "content":"B", "price":31, "quantity":3}

                ];

               if(this.token != null){

                    const response = await axios.post(url, formData, {headers});

                    console.log(response);

                    if(response.data.status=== 200) {

                        alert("일괄 추가 성공");

                    }

               }

                else{

                    alert("로그인이 필요합니다.");

                    this.$router.push({name: 'Login'});

                }

            }

        },

        data() {

            return {

                count : 3,

                name : '',

                content : '',

                price : '',

                quantity : '',

                token : sessionStorage.getItem("TOKEN"),

            }

        }

    }

</script>

 

 *등록하기

토큰이 없는 경우

로그인 화면 이동

추가 성공

추가 확인