[spring] 클론코딩04 User - 중복확인

중복확인이 필요한 필드는 이메일과 아이디.

중복확인을 하는 방법에는 여러가지가 있다. 제일 크게는 중복확인을 눌러서 확인하는 방법과 실시간으로 확인하는 방법이 있다. 나는 실시간 비동기로 확인하는 방법을 사용해서 중복확인을 했다.

mapper에서 갯수를 반환하는 sql을 작성하였다. 가입이 되어있는 회원이라면 1을 반환, 가입이 되어있지 않으면 0을 반환한다. 

 

 

Controller

---

UsersController

//이메일 중복확인 체크 요청
@PostMapping("/emailCheck")
public Map<String, Object> confirmEmail(@RequestBody String userEmail) throws Exception {
	//클라이언트에 비동기 통신으로 받아줘야하니까 @ReqeustBody를 사용한다.
	
	//값확인
	System.out.println("중복 확인 요청된 이메일 : " + userEmail);
	
	Map<String, Object> data = new HashMap<>();
	
	//서비스 측에 요청
	int result = usersService.isDuplicateEmail(userEmail);
	
	if(result == 0) {
		System.out.println("이메일 사용 가능!");
		data.put("confirm", "OK");
	} else {
		System.out.println("이메일 중복! 사용 불가!");
		data.put("confirm", "NO");
	}
	
	return data;
}

//아이디 중복확인 체크 요청
@PostMapping("/idCheck")
public Map<String, Object> confirmId(@RequestBody String userId) throws Exception {
	//클라이언트에 비동기 통신으로 받아줘야하니까 @ReqeustBody를 사용한다.
	
	//값확인
	System.out.println("중복 확인 요청된 아이디 : " + userId);
	
	Map<String, Object> data = new HashMap<>();
	
	//서비스 측에 요청
	int result = usersService.isDuplicateEmail(userId);
	
	if(result == 0) {
		System.out.println("아이디 사용 가능!");
		data.put("confirm", "OK");
	} else {
		System.out.println("아이디 중복! 사용 불가!");
		data.put("confirm", "NO");
	}
	
	return data;
}

요청 URI는 각각 emailCheck, idCheck

비동기 통신 json으로 보내려면 map이나 객체로 보내야한다. 클라이언트에서 데이터 하나를 받는데 비동기 통신으로 받아야하니까 @RequestBody를 사용해서 가져온다.

서비스 측에 요청해서 result가 0이면 사용가능 1이면 사용불가

 

 

Service

---

UsersService

//이메일 중복확인 처리
@Override
public int isDuplicateEmail(String email) throws Exception {
	return usersDAO.isDuplicateEmail(email);
}
//아이디 중복확인 처리
@Override
	public int isDuplicateId(String id) throws Exception {
	return usersDAO.isDuplicateId(id);
}

controller와 dao 연결하는 service단 작성

 

 

View

---

join.jsp

//이메일 입력값 검증
$('#user_email').on('keyup', function(){
	console.log($(this).val());
	
	//공백확인
	if($('#user_email').val() === ""){
		$('#email_msg').html('<i style="color: red" class="far fa-times-circle"></i>');
		chk1 = false;
	
	//이메일 유효성 검증
	} else if(!getMailCheck.test($('#user_email').val())){
		
		$('#email_msg').html('<i style="color: red" class="far fa-times-circle"></i>');
		chk1 = false;
		
	//이메일 중복확인 비동기 처리
	} else {
		const email = $('#user_email').val();
		$.ajax({
			type: "POST",
			url: "/myapp/user/emailCheck",
			headers: {
                "Content-Type": "application/json",
                "X-HTTP-Method-Override": "POST"
            },
            data: email,
            datatype: "json",
            success: function(data){
            	console.log(data);
            	if(data.confirm === "OK"){
            		$('#email_msg').html('<i style="color: #262626;" class="far fa-check-circle"></i>');
            		chk1 = true;
            	} else {
            		$('#email_msg').html('<i style="color: red" class="far fa-times-circle"></i>');
            		chk1 = false;
            	}
            },
            error: function(error){
            	console.log("error : " + error);
            }
		});
	}
});

ajax로 중복확인 요청을 보낼건데  해당 input태그에 이벤트를 걸어놓는다.

keyup -> 한글자 쓸때마다 함수가 호출된다. console.log($(this).val()); 로 콘솔에서 값이 잘 찍히는지 확인

데이터 타입에 돌아오는게 map이니까 JSON으로 작성해준다. data.confirm에서 확인 후 결과에 따라 이메일의 사용 가능 여부를 볼 수 있도록 처리 해준다.

아이디도 마찬가지로 작성 해 주었다.