[Spring][Project: 쇼핑몰 웹사이트][2.1] 회원가입 - 아이디 중복 체크

이전 POST

[Spring][Project: 쇼핑몰 웹사이트][2.0] 프로젝트 흐름 / MVC 흐름 잡고가기

---

 

목차

1. span 태그 추가

2. ajax 추가

3. css 추가

4. controller 작성

5. mapper 작성

6. service 작성

7. 테스트

---

 

1. span 태그 추가

아이디가 있는지 없는지를 나타내는 문구를 추가해보자.

<span class="id_input_can">사용 가능한 아이디입니다.</span>
<span class="id_input_cannot">아이디가 이미 존재합니다.</span>

2. ajax 추가

아이디를 입력할때마다 실행되는 코드를 작성한다.

//아이디 중복검사
$('.id_input').on("propertychange change keyup paste input", function(){

    var memberIdVar = $('.id_input').val();			// .id_input에 입력되는 값
    var dataVar = {memberId : memberIdVar}			// '컨트롤에 넘길 데이터 이름' : '데이터(.id_input에 입력되는 값)'

    $.ajax({
        type : "post",
        url : "/member/memberIdChk",
        data : dataVar,
        success : function(result){
            if(result != 'fail'){
                $('.id_input_can').css("display","inline-block");
                $('.id_input_cannot').css("display", "none");				
            } else {
                $('.id_input_cannot').css("display","inline-block");
                $('.id_input_can').css("display", "none");				
            }
        }// success 종료 
    }); // ajax 종료	

});// function 종료

ㄴ> 이때 "propertychange change keyup paste input" 은 실시간으로 변화를 감지해서 db로 접근해서 확인하는 유효성검사를 하는 기능이다.

3. css 추가

위에서 추가한 <span> 태그 문구에 대한 css를 'join.css' 맨아래에 추가한다.

/* 중복아이디 존재하지 않는경우 */
.id_input_can{
	color : green;
	display : none;
}

/* 중복아이디 존재하는 경우 */
.id_input_cannot{
	color : red;
	display : none;
}

4. Controller 작성

아이디 중복검사를 하는 메서드를 작성한다.

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

    logger.info("memberIdChk() 진입");

    int result = memberservice.idCheck(memberId);

    logger.info("memberIdChk 결과값 = " + result);

    if(result != 0) {

        return "fail";	// 중복 아이디가 존재

    } else {

        return "success";	// 중복 아이디 x

    }	

}

에러 : idCheck 메서드가 아직 없어서 생기는 에러임. 곧 만들 예정! 돈워리~

5. mapper 작성

5-1. MemberMapper.xml

<!-- Id DoubleCheck -->
<select id="idCheck" resultType="int">
    select count(*) from book_member where memberId = #{memberId}	
</select>

 

ㄴ> xml 파일에서 중요한 것은 namespace  id  resultType 이다.

• namespace : Mapper의 전체 경로
• id : mapper인터페이스와 xml파일을 매칭시키기 위한 id. 이때 인터페이스의 메소드명과 xml 파일의 id를 동일하게 작성해줘야함
• resultType : SQL문을 실행하고 결과값을 어떤 형식으로 반환할지 지정해주는 부분 (예 : int, String, *Dto,,, 등등)

 

5-2. MemberMapper.java

//Id DoubleCheck
public int idCheck(String memberId);

6. service 작성

6-1. MemberService.java

//Id DoubleCheck
public int idCheck(String memberId) throws Exception;

6-2. MemberServicdImpl.java

@Override
public int idCheck(String memberId) throws Exception {
    return membermapper.idCheck(memberId);
}

7. 테스트

'리스트에 있는 아이디'와 '아닌 아이디'를 잘 구별해내는 모습을 볼 수 있다.

---

다음 POST에서 킵꼬잉~

[Spring][Project: 쇼핑몰 웹사이트][2.2] 회원가입 - 주소 찾기

 

안뇽~~~ :)