20.아이디 중복검사하기

아이디중복검사하기

순서

1.view단 작성하기

2.controller 작성하기

3.mapper작성 및 테스트

4.service 작성

5.view단 작성하기

1.view단 작성하기

• client-board-register

	<span class="id_input_re_2">아이디가 이미 존재합니다</span>
	<span class="final_id_ck">아이디를 입력해주세요</span>

회원가입 페이지의 아이디 div 아래에 span 태그를 작성한다.

• join.css

/* 아이디 유효성 검사  */
.id_input_re_1{
	
	display: none;
	
	 color: green;
	
	
	
}

.id_input_re_2{
	
	display: none;
	
	 color: red;
	
	
	
}

중복아이디가 존재하지 않는 경우 존재하지 않는 경우 색을 다르게 하기 위해 join.css에 클래스를 부여한다.

 

• client-board-register

   // 아이디 중복검사
    
	$('.id_input').on('input propertychange paste', function(){
	 		
	    
	    	
		   var id = $('.id_input').val();
		    var data = {id : id}
												
			 $.ajax({
				type : "post",
				url : "/memberIdChk",
				data: data,
				
				success:function(result){
													    		
					if(result != 'fail'){
						$('.id_input_re_1').css("display", "inline-block");
			    		$('.id_input_re_2').css("display", "none");		
			    		idckCheck = true;
				} else {
						$('.id_input_re_2').css("display", "inline-block");
						$('.id_input_re_1').css("display", "none");		
						idckCheck = false;
				}
										  
		}
											    	
	   }); 
											    
	 });

input propertychange paste: 실시간 변화가 있을 때 실행된다.

아이디 중복 메서드에 다음 코드를 추가해준다.

 

2.Controller 작성

• memberController.java

	// 아이디 중복 체크
	@RequestMapping(value = "/memberIdChk", method = RequestMethod.POST)
	@ResponseBody
	public String memberIdChkPOST(String id) throws Exception {

		System.out.println("memberIdChk() 진입");

		int result = service.idCheck(id);

		if (result != 0) {

			return "fail";
		} else {
			return "success";
		}
	}

@ResponseBody 어노테이션을 이용하여 ajax의 메서드의 결과값이 반환 되도록한다.

service.idCheck(memberid)의 결과를 int 형 변수에 저장 한다

존재하면 1 존재하지 않으면 0으로 반환한다.

결과가 0이 아니면 fail을 반환하고 결과가 1이 아니면 success를 반환한다.

 

3.Mapper 작성 및 테스트

• MemberMapper.java

//아이디 중복 검사
	public int idCheck(String id);

 

• MemberMapper.xml

	<!-- 아이디 중복 검사 -->
	<select id="idCheck" resultType="int">
		select count(*) from member where id = #{id,jdbcType=VARCHAR}
	</select>
	

mapper를 작성하고 테스트를 진행한다.

Mapper 테스트하기

• memberTest.java

	@Test
		public void idCheck() throws Exception{
	
		String id ="test";
			String id2= "ddd";
			mapper.idCheck(id);
			mapper.idCheck(id2);
			
		}

4.Service 작성

• Memberservice.java

	//아이디중복검사
	public int idCheck(String id) throws Exception;

service 인터페이스로 작성한다.

 

• Memberserviceimpl.java

//아이디 중복체크
	@Override
	public int idCheck(String id) throws Exception {

		System.out.println("idCheck service..");

		return mapper.idCheck(id);
	}

인터페이스를 상속받게 코드를 작성한다.

 

5.view단 작성하기

success:function(result){
													    		
					if(result != 'fail'){
						$('.id_input_re_1').css("display", "inline-block");
			    		$('.id_input_re_2').css("display", "none");		
			    		idckCheck = true;
				} else {
						$('.id_input_re_2').css("display", "inline-block");
						$('.id_input_re_1').css("display", "none");		
						idckCheck = false;
				}
										  
		}
											    	
	   }); 
											    
	 });

success 메서드에 먼저 controller로 부터 데이터가 넘어오면 join.css에서 작성한 클래스가 작성되게 추가한다.