29. 회원 가입

29. 회원 가입

6. 회원가입 연동

• axios 설치

npm install axios --save

axios 설치

• 회원 가입 페이지 라우터 추가

1. join 파일 생성

join 파일 생성

 

2. 라우터 추가

2-1. index.js

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

import Home from '@/components/Home'

import Join from '@/components/Join'

const routes = [

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

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

]

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

   

    <hr />

    <router-view />

  </div>

</template>

<script>

</script>

<style>

</style>

3. 화면 확인

join 페이지 확인

• 회원 가입 구현

if 문을 이용해 성공 유무 알림 표시와 성공 시 home으로 이동하도록 한다.

<template>

    <div>

        <h3>회원 가입</h3>

        아이디 <input type="text" v-model="userid" placeholder="아이디 입력"/><br />

        비밀번호 <input type="password" v-model="userpw" placeholder="비밀번호 입력"/><br />

        이름 <input type="text" v-model="username" placeholder="이름 입력"/><br />

        <input type="button" @click="handleJoin" value="회원가입" />

    </div>

</template>

<script>

    import axios from 'axios'

    export default {

        methods:{

            async handleJoin(){

                // 유효성 검사

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

                    return alert('아이디를 입력하세요.');

                }

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

                    return alert('비밀번호를 입력하세요.');

                }

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

                    return alert('이름을 입력하세요.');

                }

                const url = "/REST/member/join";

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

                const body = {

                    userid : this.userid,

                    userpw : this.userpw,

                    username : this.username

                }

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

                console.log(response);

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

                    alert("회원 가입 되었습니다.");

                    this.$router.push({name:'Home'}); //성공 시 home으로 이동

                }

                else{

                    alert("회원 가입 실패했습니다.");

                }

            }

        },

        data(){

            return{

                userid : '',

                userpw : '',

                username : ''

            }

        }

    }

</script>

<style scoped>

</style>

 

• 회원 가입

1. 유효성 검사

유효성 검사

2. 회원 가입

회원 가입

3. db 확인

가입 성공