Vue 일지 #25 (20211005) 목록

26. 목록

-목록

백엔드 : #54 조회

 

 * Seller_list.vue 생성

Seller_list.vue 생성

 * Seller_list.vue 등록(index.js)

 

import Seller_list from '@/components/Seller_list'

 

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},

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

]

 

 * Seller_list.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>|

    <router-link to="/Seller_list">List</router-link>|

    <hr />

    <router-view />

  </div>

</template>

 

 *화면 확인

Seller_list.vue 등록

 

* Seller_update 화면 구성(Seller_update.vue)

 

<template>

    <div>

         <h3>목록</h3>

        <table border="1">

            <tr>

                <td>번호</td>

                <td>이름</td>

                <td>내용</td>

                <td>가격</td>

                <td>수량</td>

            </tr>

            <tr v-for="item in items" v-bind:key="item">

                <td>{{item.no}}</td>

                <td>{{item.name}}</td>

                <td>{{item.content}}</td>

                <td>{{item.price}}</td>

                <td>{{item.quantity}}</td>

            </tr>

        </table>

    </div>

</template>

 

 *목록 가져오기1

 * async created()에 method:{} 를 쓰지 않고 가져온다.

 * console 값을 확인하여 백엔드에서 정보가 넘어 오는지 확인한다.

 

<script>

    import axios from 'axios';

    export default {

        async created(){

                const url =`/REST/api/seller/item_select_list?name=`;

            const headers = {"Content-Type":"application/json"};

            const response = await axios.get(url, headers);

            console.log(response);

          

        },

        data(){

            return{

                items : [],

            }

        }

    }

</script>

 

 *console 값 확인

console 값 확인

 

 *목록 가져오기2

 

... ...

async created(){

                const url =`/REST/api/seller/item_select_list?name=`;

            const headers = {"Content-Type":"application/json"};

            const response = await axios.get(url, headers);

            //console.log(response);

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

                this.items = response.data.item

            }

        },

... ...

 

 *화면 확인

목록 구현