210511 (회원가입) 아이디 중복 체크

1. join.html

<form action="/user/join_success" id="login_frm" method="POST" enctype="multipart/form-data">
    <table>
        <tr>
            <td>아이디</td> <!-- 중복 체크 Ajax-->
            <td><input type="text" id="userid" name="userid">
                <p id="userid_msg"></p>
            </td>
        </tr>
        ...
    </table>

    <input type="button" id="login_submit" value="회원가입">
</form>

 

join.html 의 script 부분에 라이브러리를 연결해준다.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script type="text/javascript">
    const btn = document.querySelector('#login_submit');
    const login_frm = document.querySelector('#login_frm');
    const userid_msg = document.querySelector('#userid_msg');
    const userid = document.querySelector('#userid');

    async function userid_check() {
        let data = await axios.get(`http://localhost:3000/user/userid_check?userid=${userid.value}`);
        //AJAX id 값 가져와서 중복 아니면 true, 중복이면 false
        
        console.log(data);
        
        login_flag = data.data.login;
        if(login_flag){
            userid_msg.innerHTML = '사용 가능한 아이디 입니다.';
            userid_msg.style.color = 'green';
        }else{
            userid_msg.innerHTML = '중복된 아이디 입니다.';
            userid_msg.style.color = 'red';
        }
    }

    userid.addEventListener('focusout',userid_check);   // 커서가 밖으로 갔을 때 저 함수를 실행시켜라

</script>

 

AJAX로 연결하려고 한다.

let data = await axios.get(`http://localhost"3000/user/userid_check?userid=${userid.value}`); 
// Promise 객체로 반환된다.

우리가 적은 userid 값을 쿼리로 보낸다 이걸 db에 조회한다.

여기서 true false 값을 받아서 받은 값을 login_flag 에 넣어준다.

 

여기서 이 data는 localhost:3000 에서 개발자 도구에서 콘솔로그를 찍어서 확인할 수 있다. 

 

 

http://localhost:3000/user/userid_check?userid=web7722

이렇게 확인해보기

- json으로 넘어오는지 확인한것

 

 

 

 2. user/index.js

router.post('/login_check',controller.login_check);

 

 

3. user.controller.js

가져온 값을 db에 있는 값과 비교해보기

let userid_check = async (req,res)=>{
    let userid = req.query.userid;
    let flag = false;
    let result = await User.findOne({
        where:{ userid }
    })

    if(result == undefined){
        //생성 가능
        flag = true;
    }else{
        //생성 불가능
        // flag 자체가 false로 선언되어있어서 else 부분은 사실 필요 없는 부분임
        flag = false;
    }
    res.json({
        login : flag,
        userid,
    })
}


module.exports = {
    ..
    userid_check
}

    let result = await User.findOne({

        where:{ userid }

    })

값이 있으면 값이 들어오고

값이 없으면 undefined 가 뜬다 - 이 아이디는 생성이 가능하다는 뜻

 

result = undefined 생성 가능

result = 객체가 존재하면 생성 불가능