Node, Vue 일지 #2 (20210907) 회원가입

2. 회원가입 구현

-vue 화면 생성(프론트엔드)

 *component폴더에 파일 생성(Home, Join, Login, Mypage)

component에 파일 생성

 *각 파일 코드 입력(Home, Join, Login, Mypage)

 **처음은 화면 구현을 위해 간단하게 코드 입력 후 나중에 코드 수정

 *ex) Home.vue

<template>

    <div>

        home

    </div>

</template>

 

<script>

    export default {

        

    }

</script>

 

<style scoped>

 

</style>

 

 *화면 구현 (App.vue)

 *changeMenu를 이용해 상단 메뉴 구성

<template>

  <div>

    <a href="#" @click="changeMenu(0)">Home</a> |

    <a href="#" @click="changeMenu(1)">Login</a> |

    <a href="#" @click="changeMenu(2)">Join</a> |

    <a href="#" @click="changeMenu(3)">Mypage</a>

    <hr />

  <component @changeMenu="changeMenu" v-bind:is="currentView"> </component>

   

  </div>

</template>

 

<script>

import Home from '@/components/Home.vue';

import Login from '@/components/Login.vue';

import Join from '@/components/Join.vue';

import Mypage from '@/components/Mypage.vue';

 

  export default {

    components : {

      'home' : Home,

      'login' : Login, 

      'join' : Join, 

      'mypage' : Mypage 

    },

 

    data(){

      return {

        currentView : 'home', //처음 시작시 메뉴

        menus : ['home', 'login', 'join', 'mypage' ] , //0 1 2 3

      }

    },

    methods : {

      changeMenu(val) {

        this.currentView =this.menus[val];

      }

    }

  }

</script>

 

<style scoped>

 

</style>

 

 *화면 확인(http://127.0.0.1:8080/#)

화면 확인

-회원 가입 구현

 *회원 가입 회면 구성하기(Join.vue)

<template>

    <div>

        <h3>회원 가입</h3>

        <hr />

        아이디 : <input type="text" v-model="userid"  /> 

        중복확인 : <div style="display:inline-block" v-text="checkid"></div> <br />

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

        비밀번호 확인 : <input type="password" v-model="userpw1"  /> <br />

        이름 : <input type="text" v-model="username"  /> <br />

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

    </div>

</template>

 

<script>

import axios from 'axios';

    export default {

        data() {

            return {

                userid : '',

                userpw : '',

                userpw1 : '',

                username : '',

                checkid : '',

            }

        },

    }

</script>

 

<style scoped>

 

</style>

 **화면 확인(http://127.0.0.1:8080/#)

join.vue

 -회원 가입 구현

 *회원 가입 버튼을 눌렀을 때 실행 될 코드 입력(Join.vue)

     methods:{

            async handleJoin() {

                //유효성 검사

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

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

                }

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

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

                }

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

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

                }

                 if(this.userpw1 !== this.userpw){

                    return alert('비밀번호가 틀립니다.');

                }

                const url = "/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.ret === 1){

                    alert(response.data.data);

                    //컴포넌트 emit를 이용해서 changeMenu를 호출

                    //한 페이지 안에 있기 때문에 $router를 쓸 수 없다.

                    this.$emit('changeMenu', 0);

                }

                else{

                    alert('회원가입 실패');

                }

            }

 

        },

 *버튼 클릭 시 유효성 검사를 통해 항목들 확인

  ex) 아이디 입력하지 않았을 경우 알림창 출력

아이디 유효성 검사

-node join 생성(백엔드)

 *회원 가입 버튼을 클릭하면 백엔드에서 데이터를 받아  mongodb에 저장한다.

 *member.js에 join 구현(post 사용)

//127.0.0.1:3000/member/join

router.post('/join', async function(req, res, next){

    try{

        //암호를 hash

        const hash = crypto.createHmac('sha256', req.body.userid).update(req.body.userpw).digest('hex');

        const body = {

            _id : req.body.userid,

            password : hash,

            name : req.body.username,

            regdate : new Date()

        }

 

        //db연결

        const dbconn = await mongoclient.connect(mongourl);

        const coll = dbconn.db(mongodb).collection(mongocoll);

 

        const result = await coll.insertOne(body);

        console.log(body);

 

        if(result.insertedId === body._id) {

            return res.send({ret:1, data: '회원가입 되었습니다.'});

        }

        return res.send({ret:1, data: '회원가입 실패 했습니다..'});

    }

    catch(error){

 

    }

});

 

-회원 가입 버튼 클릭 후(node, vue) 

*회원 가입 성공 실패를 알릴 코드(vue - member.js)

if(result.insertedId === body._id) {

            return res.send({ret:1, data: '회원가입 되었습니다.'});

        }

        return res.send({ret:1, data: '회원가입 실패 했습니다..'});

    }

*회원 가입 버튼 클릭 시 크롬의 console 창에서 확인 가능하다.(크롬)

console 확인

 

 *알림 출력 코드, 가입 완료 후 menu 이동(Join.vue)

 **백엔드의 return res.send({ret:1, data: '회원가입 되었습니다.'});  -> 크롬의 콘솔창 -> vue에서 code로 구현 => alert(response.data.data);

    if(response.data.ret === 1){

                    alert(response.data.data);

                    //컴포넌트 emit를 이용해서 changeMenu를 호출

                    //한 페이지 안에 있기 때문에 $router를 쓸 수 없다.

                    this.$emit('changeMenu', 0);

                }

                else{

                    alert('회원가입 실패');

                }

알림창 확인

 

 *가입 완료 후 home 화면으로 이동

//컴포넌트 emit를 이용해서 changeMenu를 호출

                    //한 페이지 안에 있기 때문에 $router를 쓸 수 없다.

                    this.$emit('changeMenu', 0);

 

완료 후 home으로 이동

*console.log(body); 를 입력해 db에 저장되는 값을 cmd 창에서 확인한다. (node -cmd)

body 값 확인

 *db 확인

id 123 등록 확인