50. 팀 목록 조회

50. 팀 목록 조회

• 팀 목록 페이지 라우터 추가

1. 팀 목록 파일 생성

팀 목록 파일 생성

2. 라우터 추가

2-1. index.js

import { createWebHistory, createRouter } from "vue-router";

import Home from '@/components/Home'

import Join from '@/components/Join'

import Login from '@/components/Login'

import Logout from '@/components/Logout'

import Registration from '@/components/Registration'

import PlayerList from '@/components/PlayerList'

import Player_One from '@/components/Player_One'

import ScoutList from '@/components/ScoutList'

import Scout_One from '@/components/Scout_One'

import TeamList from '@/components/TeamList'

const routes = [

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

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

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

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

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

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

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

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

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

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

]

const router = createRouter({

    history: createWebHistory(),

    routes,

});

export default router;

 

2-2. App.vue

<template>

  <div id="nav">

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

    <router-link v-if="!logged" to="/Join">Join</router-link>|

    <router-link v-if="!logged" to="/Login">Login</router-link>|

    <router-link v-if="logged" to="/Logout">Logout</router-link>|

    <router-link v-if="adminLogged" to="/Registration">Registration</router-link>|

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

    <router-link v-if="!adminLogged & logged" to="/ScoutList">ScoutList</router-link>|

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

    <hr />

    <el-menu

      :default-active="activeIndex" class="el-menu-demo" mode="horizontal"

      @select="handleSelect">

    <el-menu-item v-if="logged" index="1">Processing Center</el-menu-item>

    </el-menu>

    <router-view />

  </div>

</template>

 

3. 화면 확인

화면 확인

• 팀 목록 구현

1. 사이드 네비게이션 바에 db에 저장된 팀 목록을 가져온다.

2. 목록 불러오기는 42. 선수 등록의 팀, 에이전트 목록 가져오기를 참조해서 구현한다.

 

<template>

    <div>

        <el-row class="tac">

            <el-col :span="5">

            <h5 class="mb-2">TeamList</h5>

                <el-menu default-active="2" class="el-menu-vertical-demo" v-model="team" @open="handleOpen" @close="handleClose">

                    <el-menu-item index="2" v-for="(team,index) in teams" v-bind:key="index" >

                        <el-icon><icon-menu /></el-icon>

                            <span>{{team.teamname}}</span>

                    </el-menu-item>

                </el-menu>

            </el-col>

        </el-row>

               

    </div>

</template>

<script>

    import axios from 'axios';

    export default {

            async created(){    

                //팀 목록 조회

                const url = "/REST/teamall";

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

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

                console.log(response);

                this.teams = response.data.team;

        },

        data(){

            return{

                teams : []

            }

        }

       

    }

</script>

3. 화면 확인

팀 목록 불러오기