33. 팀, 에이전트 등록

33. 팀, 에이전트 등록

9. 팀, 에이전트 등록 연동

• 등록 페이지 라우터 추가

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'

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

]

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 to="/Join">Join</router-link>|

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

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

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

    <hr />

    <router-view />

  </div>

</template>

<script>

</script>

<style>

</style>

• 화면 확인

화면 확인

• 팀, 에이전트 등록 구현

<template>

    <div>

        <h3>팀 등록</h3>

        팀 명 <input type="text" v-model="teamname" placeholder="팀 명 입력"/> <br />

        <input type="button" @click="handelTeam" value="팀 등록" />

        <hr />

        <h3>에이전트 등록</h3>

        에이전트 명 <input type="text" v-model="agentname" placeholder="에이전트 명 입력"/> <br />

        <input type="button" @click="handelAgent" value="에이전트 등록" />

        <hr />

    </div>

</template>

<script>

    import axios from 'axios';

    export default {

        methods:{

            async handelTeam(){

                //유효성 검사

                if(this.teamname.length === 0){

                    alert("팀 명을 입력하세요.");

                }

                const url = "/REST/admin/teaminsert";

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

                    token : this.token}

                const body = [{teamname :this.teamname}]

                if(this.token != null){

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

                    console.log(response);

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

                        alert("팀 등록에 성공했습니다.");

                    }

                }

                else{

                    alert("관리자 id로 로그인 후 등록 가능합니다.")

                }

            },

            async handelAgent(){

                //유효성 검사

                if(this.agentname.length === 0){

                    alert("에이전트 명을 입력하세요.");

                }

                const url = "/REST/admin/agentinsert";

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

                    token : this.token}

                const body = [{agentname :this.agentname}]

                if(this.token != null){

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

                    console.log(response);

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

                        alert("에이전트 등록에 성공했습니다.");

                    }

                }

                else{

                    alert("관리자 id로 로그인 후 등록 가능합니다.")

                }

            },

        },

        data(){

            return{

                //세션 스토리지에서 토큰 읽기

                token : sessionStorage.getItem("TOKEN"),

                teamname : '',

                agentname : '',

            }

        }

    }

</script>

<style scoped>

</style>

 

• 팀, 에이전트 등록하기

팀, 에이전트 등록은 admin 계정만 가능하다. (9. 팀, 에이전트 등록 참조)

1. admin 계정으로 로그인

admin 계정으로 로그인

2.  팀, 에이전트 등록하기

2-1. 팀 등록

팀 등록

2-2. 에이전트 등록

에이전트 등록

3. 등록 확인

팀 등록 확인

에이전트 등록 확인