뷰/2020--/하이파/ 스포츠플젝 Login.vue

main.js

 

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import router from './router'
import {store} from './store'
import vuex from 'vuex'
import axios from 'axios'
 
Vue.config.productionTip = false
Vue.prototype.$http = axios
Vue.use(vuex)
 
new Vue({
  vuetify,
  router,
  vuex,
  store,
  axios,
  render: h => h(App)
}).$mount('#app')
 

 

App.vue

<template>
  <v-app>
    <v-content>
      <Home/>
    </v-content>
  </v-app>
</template>
 
<script>
import Home from './components/Home';
 
export default {
  name: 'App',
  components: {
    Home,
  },
 
};
</script>

Layout.vue

 

<template>
    <div id="wrapper">
        <header>
            <slot name="header"
                  :title="title"
                  :login="login"
                  :join="join"
            :mypage="mypage" :logout="logout"></slot>
        </header>
        <aside id="sidebar">
            <slot name="sidebar"></slot>
        </aside>
        <section id="content">
            <slot name="content">
 
            </slot>
        </section>
        <footer>
            <slot name="footer" :footer="footer"></slot>
        </footer>
    </div>
</template>
 
<script>
export default {
    name: "Layout",
    data(){
        return {
            title : '축구정보 시스템',
            login : '로그인',
            join : '회원가입',
            footer : '(사)축구선수협회',
            logout : '로그아웃',
            mypage : '마이페이지'
        }
    },
    methods: {
 
    }
}
</script>
 
<style scoped>
    /* 전체 구조 */
    #wrapper {
        padding: 5px;
        width: 960px;
        margin: 20px auto;
    }
    header {
        height: 100px;
        padding: 0 15px;
    }
    #content {
        width: 696px;
        float: left;
        padding: 5px 15px;
        min-height: 300px;
    }
    #sidebar {
        width: 200px;
        padding: 5px 15px;
        float: left;
    }
    footer {
        clear: both;
        padding: 0 15px;
    }
    /* 가로폭 980보다 작을 때 사용할 @media query */
    @media screen and (max-width: 980px) {
        #pagewrap {
            width: 94%;
        }
        #content {
            clear: both;
            padding: 1% 4%;
            width: auto;
            float: none;
        }
        #sidebar {
            clear: both;
            padding: 1% 4%;
            width: auto;
            float: none;
        }
        header, footer {
            padding: 1% 4%;
        }
    }
    /* 공통 */
    #content {
        background: #f8f8f8;
    }
    #sidebar {
        background: #f0efef;
    }
    header, #content, #middle, #sidebar {
        margin-bottom: 5px;
    }
    #pagewrap, header, #content, #middle, #sidebar, footer {
        border: solid 1px #ccc;
    }
 
</style>

Home.vue

 

<template>
    <div id="app">
        <div v-if=auth>
            <Layout>
                <template #header="self">
                    <router-link to="/"><h1 class="title">{{self.title}}</h1></router-link>
                    <router-link to="/mypage"><span class="join">{{self.mypage}}</span></router-link>
                    <span @click="logout" class="login">{{self.logout}}</span>
                </template>
                <template #sidebar>
                    <ul class="menu">
                        <li v-for="i of sidebars" :key="i.menu">
                            <router-link :to="i.link">{{i.menu}}</router-link>
                            <!--<a @click="menu(i.menu)">{{i.menu}}</a>-->
                        </li>
                    </ul>
                </template>
                <template #content>
                    <router-view/>
                </template>
                <template #footer="self" >
                    <h3 id="footer">{{self.footer}}</h3>
                </template>
            </Layout>
        </div> <!-- v-if END -->
            <!--로그인 성공화면-->
        <div v-else>
            <Layout>
            <template #header="self">
                <router-link to="/"><h1 class="title">{{self.title}}</h1></router-link>
                <router-link to="/join"><span class="join">{{self.join}}</span></router-link>
                <router-link to="/login"><span class="login">{{self.login}}</span></router-link>
            </template>
            <template #sidebar>
                <h3>광고판</h3>
            </template>
            <template #content>
                <router-view/>
            </template>
        </Layout>
        </div>
    </div>
</template>
 
<script>
import Layout from "../components/common/Layout.vue"
import {mapState} from "vuex";
export default {
    components : {Layout},
    computed : {
        ...mapState(
            {
                auth : state => state.player.auth
            }
 
        )
    },
    data(){
 
        return {
            sidebars: [
                {menu: '등록', link:'/register'},
                {menu: '목록', link:'/list'},
                {menu: '검색', link:'/search'},
                {menu: '수정', link:'/update'},
                {menu: '삭제', link:'/delete'},
                {menu: '회원수', link:'/vuexCounter'}
            ]
 
        }
 
    },
 
    created () {
        //can use Data(this.title, this.titleComputed ...), events(vm.$on, vm.$once, vm.$off, vm.$emit)
        //don't use $el
    },
    methods:{
        logout(){
            this.$store.dispatch('player/logout')
        },
        menu(i){
            switch (i) {
                case '쓰기':
                    alert('0')
                    break;
                case '목록':
                    alert('1')
                    break;
                case '검색':
                    alert('2')
                    break;
                case '수정':
                    alert('3')
                    break;
                case '회원수':
                    alert('4')
                    break;
                case '삭제':
                    alert('5')
                    break;
            }
        }
    }
}
</script>
<style scoped>
    ul.menu{
        position: relative;
        padding: 5px;
        list-style: none;
        font-style: italic;
    }
    .title{width: 300px;margin: 0 auto}
    .login{margin-right: 50px; float: right}
    .join{margin-right: 50px; float: right}
    .footer{width: 300px; margin: 0 auto}
</style>
 

 

router / index.js

import Vue from 'vue'
import Router from 'vue-router'
import Join from '../components/member/Join'
import Login from '../components/member/Login'
import Register from '../components/member/Register'
import List from '../components/member/List'
import Search from '../components/member/Search'
import Update from '../components/member/Update'
import Delete from '../components/member/Delete'
import Calculator from '../components/common/Calculator'
import Counter from '../components/common/Counter'
import VuexCounter from '../components/common/VuexCounter'
import MyPage from "../components/member/MyPage";
Vue.use(Router)
export default new Router({
    mode: 'history',
    routes : [
       /* {path: '/', component: Home}, 없애야 중복이 발생하지 않음*/
        {path: '/join', component: Join},
        {path: '/login', component: Login},
        {path: '/calculator', component: Calculator},
        {path: '/counter', component: Counter},
        {path: '/vuexCounter', component: VuexCounter},
        {path: '/register', component: Register},
        {path: '/list', component: List},
        {path: '/search', component: Search},
        {path: '/update', component: Update},
        {path: '/delete', component: Delete},
        {path: '/mypage', component: MyPage},
    ]
})

store / index.js

import Vue from 'vue'
import Vuex from 'vuex'
import counter from './counter'
import player from './player'
Vue.use(Vuex)
 
 
export const store = new Vuex.Store({
    modules : {
        player, counter
    }
})
 

 

Login.vue

<template>
    <div>
    <h2>Login Form</h2>
 
 
        <div class="imgcontainer">
            <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="avatar">
        </div>
 
        <div class="container">
            <label ></label>
            <input type="text"  @keyup.enter="moveToPasswd"  v-model="userid" placeholder="Enter Username" required>
            <h3>입력한 아이디 : {{userid}}</h3>
            <label ><b>Password</b></label>
            <input type="password" @keyup.enter="login"   v-model="passwd" placeholder="Enter Password" id="passwd" required>
            <h3>입력한 비번 : {{passwd}}</h3>
            <button @click="login"  type="submit">Login</button>
            <label>
                <input type="checkbox" checked="checked" name="remember"> Remember me
            </label>
        </div>
 
        <div class="container" style="background-color:#f1f1f1">
            <button type="button" class="cancelbtn">Cancel</button>
            <span class="psw">Forgot <a href="#">password?</a></span>
        </div>
 
    </div>
</template>
 
<script>
import {mapState} from 'vuex'
export default {
        computed : {
          ...mapState(
              {fail: state => state.player.fail,
                  auth : state => state.player.auth
              }
 
          )
        },
    data(){
        return {
            userid : '',
            passwd : ''
        }
    },
    methods: {
        login(){
            alert(this.userid)
            this.$store.dispatch('player/login',{playerId: '2000003', backNo: '40'})
        },
        moveToPasswd(){
            document.getElementById('passwd').focus()
        }
    }
 
 
}
</script>
 
<style scoped>
    form {border: 3px solid #f1f1f1;}
 
    input[type=text], input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
 
    button {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: pointer;
        width: 100%;
    }
 
    button:hover {
        opacity: 0.8;
    }
 
    .cancelbtn {
        width: auto;
        padding: 10px 18px;
        background-color: #f44336;
    }
 
    .imgcontainer {
        text-align: center;
        margin: 24px 0 12px 0;
    }
 
    img.avatar {
        width: 40%;
        border-radius: 50%;
    }
 
    .container {
        padding: 16px;
    }
 
    span.psw {
        float: right;
        padding-top: 16px;
    }
 
    /* Change styles for span and cancel button on extra small screens */
    @media screen and (max-width: 300px) {
        span.psw {
            display: block;
            float: none;
        }
        .cancelbtn {
            width: 100%;
        }
    }
</style>

player.js

import axios from 'axios'
import router from '../router'
const state = {
    context: 'http://localhost:3000/',
    player : {},
    fail : false,
    auth : false
}
const actions = {
    async login({commit}, payload){
        const url = state.context + `players/${payload.playerId}/access`
        const headers = {
            authorization: 'JWT fefege..',
            Accept : 'application/json',
            'Content-Type': 'application/json'
        }
        axios.post(url, payload, headers)
            .then(({data})=>{
                if(data.result){
                    commit('LOGIN_COMMIT', data)
                }else{
                    commit('FAIL_COMMIT')
                }
 
            })
            .catch(()=>{
                alert('서버 전송 실패')
                state.fail = true
            })
    },
    async logout({commit}){
        commit('LOGOUT_COMMIT')
    }
}
const mutations = {
    LOGIN_COMMIT(state, data){
        state.auth = true
        state.player = data.player
        localStorage.setItem('token', data.token)
        localStorage.setItem('playerId', data.player.playerId)
        if(data.player.teamId !== 'K01'){
            alert('일반 사용자')
           router.push('/')
        }else{
            alert('관리자')
            /* 관리자 */
        }
 
    },
    FAIL_COMMIT(state){
        state.fail = true
    },
    LOGOUT_COMMIT(state){
        localStorage.clear()
        state.auth = false
        state.player = {}
 
    }
}
const getters = {
 
}
 
export default {
    name: 'player',
    namespaced : true,
    state,
    actions,
    mutations,
    getters
}