exam_front

0. 프론트 프로젝트 생성

CMD> vue create exam_front
==> (default) vue3 선택

CMD> cd exam_front

-- router 사용
CMD> npm install vue-router@next --save

-- store 사용
CMD> npm install vuex@next --save

-- axios 사용
CMD> npm install axios --save

-- element-plus ui 사용
CMD> npm install element-plus@1.2.0-beta.6 --save

// vue.config.js 생성

module.exports = {
    devServer:{
        proxy : {
            '/member' : {
                target:'http://localhost:3000',
                changeOrigin :true,
                logLevel : 'debug'
            },
        },
    }
}

-- 서버구동
CMD> npm run serve

---

1. vue.config.js

• proxy 설정

module.exports = {
    devServer:{
        proxy : {
            '/member' : {
                target:'http://localhost:3000',
                changeOrigin :true,
                logLevel : 'debug'
            },
        },
    }
}

---

2. routes.js

• router 설정

import { createRouter, createWebHashHistory  } from 'vue-router' 

import Home from '@/components/HomeView';
import Login from '@/components/LoginView';
import Logout from '@/components/LogoutView';
import Join from '@/components/JoinView';
import Mypage from '@/components/MypageView';

const routes =[
    { path : '/', redirect:'/home'},
    { path : '/home', name:'Home', component:Home },
    { path : '/login', name:'Login', component:Login },
    { path : '/logout', name:'Logout', component:Logout },
    { path : '/join', name:'Join', component:Join },
    { path : '/mypage', name:'Mypage', component:Mypage },    
];

const router = createRouter({ 
    history : createWebHashHistory(), 
    routes  : routes
});

export default router;

---

3. main.js

• 라이브러리 사용 설정

import { createApp } from 'vue'
import App from './App.vue'

import routes from './routes';

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// index만 땡겨오면 됨, 모듈은 안땡겨도 됨
import stores from './stores/index';

const app = createApp(App);
// 컴포넌트에서 사용가능하도록 설정
app.use(routes);
app.use(ElementPlus);
app.use(stores);

app.mount('#app');

---

4. App.vue

• store를 사용해서 로그인상태 설정

<template>
    <div>        
        <router-link style="text-decoration:none" :to="{ path: '/' }" ><el-button>홈</el-button></router-link>
        <router-link v-if="!state.logged" style="text-decoration:none" :to="{ path: '/login' }"><el-button>로그인</el-button></router-link>
        <router-link v-if="!state.logged" style="text-decoration:none" :to="{ path: '/join' }"><el-button>회원가입</el-button></router-link>
        <router-link v-if="state.logged" style="text-decoration:none" :to="{ path: '/mypage' }"><el-button>마이페이지</el-button></router-link>
        <router-link v-if="state.logged" style="text-decoration:none" :to="{ path: '/logout' }"><el-button>로그아웃</el-button></router-link>
        <hr>
        <router-view></router-view>
        <hr>
        {{state.logged}}
        <h4 class="center">footer</h4>
    </div>
</template>

<script>
import { computed, onMounted, reactive } from '@vue/runtime-core';
import { useStore } from 'vuex'

export default {
    setup () {
        const store = useStore();

        const state = reactive({
            logged : computed( () => store.getters['moduleA/getLogged']),
            token : sessionStorage.getItem("TOKEN")
        })
        // console.log(state.logged);

        onMounted( () => {
            if(state.token === null){
                store.commit('moduleA/setLogged', false);
            }
            else {
                store.commit('moduleA/setLogged', true);
            }
        })        

        return {
            state,
        }
    }
}
</script>

<style lang="css" scoped>
.center {
    text-align: center;
}
</style>

---

5. component/HomeView.vue

• store의 module을 이용해서 다른 함수 실행

<template>
    <div>
        <h3 class="center">홈화면</h3>
        <el-button @click="handleInc">1증가</el-button>
        {{state.num}}
    </div>
</template>

<script>
import { reactive } from '@vue/reactivity';
import { useStore } from 'vuex'
import { computed } from '@vue/runtime-core';
export default {
    setup () {
        const store = useStore();

        const state = reactive({
            num : computed(() => store.getters['moduleB/getNum']),
        })
        
        const handleInc =() => {
            store.commit('moduleB/setNum', state.num+1);
        }

        return {
            state,
            handleInc
        }
    }
}
</script>

---

6. stores

6-1. store/index.js

• module을 import만 하는 용도

import {createStore} from 'vuex';
import { moduleA } from './module/moduleA';
import { moduleB } from './module/moduleB';

export default createStore({
    modules : {moduleA, moduleB}
})

6-2. store/module/moduleA.js

• logged 상태 확인용

export const moduleA = {
    
    namespaced : true,

    state : {
        logged : false,
    },
    getters : {
        getLogged(state) {
            return state.logged;
        }
    },
    mutations : {
        setLogged(state, value) {
            state.logged = value;
        }
    },
    actions : {

    }

}

6-3. store/module/moduleB.js

• 홈화면 테스트용

export const moduleB = {
    
    namespaced : true,

    state : {
        num : 10,
    },
    getters : {
        getNum(state) {
            return state.num;
        }
    },
    mutations : {
        setNum(state, value) {
            state.num = value;
        }
    },
    actions : {
        
    }

}

---

7. 기타 View

• component/JoinView.vue
• component/LoginView.vue
• component/LogoutView.vue
• component/MypageView.vue
• component/mypage/Mypage1View.vue
• component/mypage/Mypage2View.vue