통합구현 2022/03/14(vue 새프로젝트)

프로젝트 생성(node_modules가 자동으로 생성)

CMD> vue create vue_20220314
(default) vue3 선택

프로젝트를 실행하기 위한 폴더 이동 (package.json, package-lock.json파일이 있는 폴더)
CMD> cd vue_20220314

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

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

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

-- socket.io 사용
CMD> npm install socket.io-client@4.4.1 --save

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

-- 서버구동
CMD> npm run serve

---

파일명 : vue.config.js 생성하기

// CORS => 같은 서버가 아니면 연동이 안됨.
// proxy를 설정하면 해결됨. 단, android등은 CORS를 반드시 설정해야 함
module.exports = {
    devServer:{
        proxy : {
            '/member' : {
                target:'http://localhost:3000',
                changeOrigin :true,
                logLevel : 'debug'
            },
        },
    }
}

---

파일명 index.js

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

import Home from '@/components/HomeView';
import Login from '@/components/LoginView';
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 : '/join', name : 'Join', component:Join},
    {path : '/mypage', name : 'Mypage', component:Mypage},
]

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

export default router;

---

파일명 main.js

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

import routes from './routes/index';

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

createApp(App)
    .use(routes)
    .use(ElementPlus)
    .mount('#app')

---

파일명 App.js

<template>
  <div style="padding: 20px;">
    <button @click="handleMenu('home')">home</button>
    <button @click="handleMenu('login')">login</button>
    <button @click="handleMenu('join')">join</button>
    <button @click="handleMenu('mypage')">mypage</button>
    <hr />

    <router-view></router-view>
  </div>
</template>

<script>
import {useRouter } from 'vue-router';

export default {
  setup () {
    const router = useRouter();

    const handleMenu = (menu) =>{
      console.log("App.vue ====>",menu);
      router.push(menu);
    }   

    return {handleMenu}
  }
}
</script>

<style lang="scss" scoped>

</style>

---

파일명 JoinView.vue

<template>
    <div style="padding: 20px;">
        <h3>Join.vue</h3>

        <hr />
        {{state}}
        <hr />

        <label style="width:80px; height: 30px; display:inline-block;">아이디 </label>
        <input type="text" @keyup="handleIdCheck" v-model="state.userid" placeholder="아이디" />
        <label>{{state.idcheck}}</label> <br />

        <label style="width:80px; height: 30px; display:inline-block;">암호 </label>
        <input type="password" v-model="state.userpw" placeholder="암호" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;">암호확인 </label>
        <input type="password" v-model="state.userpw1" placeholder="암호확인" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;">이름 </label>
        <input type="text" v-model="state.username" placeholder="이름" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;">이메일 </label>
        <input type="text" v-model="state.useremail" placeholder="이메일" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;">나이 </label>
        <input type="text" v-model="state.userage" placeholder="나이" /> <br />

        <label style="width:80px; height: 30px; display:inline-block;"> </label>
        <el-button type="primary" @click="handleJoin" size="small">회원가입</el-button>

        <hr />

    </div>
</template>

<script>
import { reactive } from 'vue';
import axios from 'axios';
import {useRouter } from 'vue-router';

export default {
    setup () {
        const router = useRouter();

        const state = reactive({
            idcheck   : '중복확인',
            userid    : '',
            userpw    : '',
            userpw1   : '',
            username  : '',
            useremail : '',
            userage   : 0,
        });

        const handleJoin = async() => {
            if(state.userid.length <= 0){
                alert('아이디를 입력하세요')
                return false;
            }
            if(state.userpw.length <= 0){
                alert('암호를 입력하세요')
                return false;
            }
            if(state.userpw1.length <= 0){
                alert('암호확인을 입력하세요')
                return false;
            }
            if(state.userpw != state.userpw1){
                alert('암호와 암호확인이 같지 않습니다.')
                return false;
            }
            if(state.username.length <= 0){
                alert('이름을 입력하세요')
                return false;
            }
            if(state.useremail.length <= 0){
                alert('이메일을 입력하세요')
                return false;
            }
            if(state.userage.length <= 0){
                alert('나이를 입력하세요')
                return false;
            }

            const url = `/member/insert`;
            const headers = {"Content-Type":"application/json"};
            const body = {
                id    : state.userid,
                pw    : state.userpw,
                name  : state.username,
                email : state.useremail,
                age   : state.userage
            }
            const response = await axios.post(url, body, {headers});
            console.log(response.data);
            if(response.data.status === 200){
                alert('회원가입 되었습니다.');
                router.push({name:'Home'});
            }
        }
        
        const  handleIdCheck = async() =>{
            if(state.userid.length > 0){
                const url = `/member/idcheck?id=${state.userid}`;
                const headers = {"Content-Type":"application/json"};
                const response = await axios.get(url, {headers});
                console.log(response.data);
                if(response.data.status === 200){
                    if(response.data.result === 1){
                        state.idcheck = '사용불가';
                    }
                    else if(response.data.result === 0){
                        state.idcheck = '사용가능';
                    }
                }
            }
            else{
                state.idcheck = '중복확인';
            }
        }
        return {state, handleIdCheck, handleJoin}
    }
}
</script>

<style lang="scss" scoped>

</style>