SpringFramework를 이용한 웹사이트 만들기(8)--회원가입의 아이디, 이메일 중복체크를 해보자(Ajax를 사용)

아이디와 이메일은 각각 유일해야 하기때문에 중복이 되어서는 안됩니다. 

그래서 이번시간에는 회원가입에서 아이디와 이메일의 중복체크를 할 수 있도록 해보겠습니다.

 

먼저 Ajax를 사용하기 위하여 pom.xml에서 라이브러리를 등록해줍니다.

 

pom.xml에 등록해주고 메이븐 업데이트를 해주세요.

		<!-- Ajax라이브러리 2개 -->
		<!-- jackson-databind -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.13.0</version>
		</dependency>
		<!-- jackson-mapper-asl -->
		<dependency>
			<groupId>org.codehaus.jackson</groupId>
			<artifactId>jackson-mapper-asl</artifactId>
			<version>1.9.13</version>
		</dependency>

 

 

ajax를 사용하려 했는데 slim이 들어간 jquery는 작동이 안된다하여 주석처리를 하고 회원가입 부분에만 따로 bootstrap 적용을 해주었습니다.

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

ajax를 사용하는 jsp에는 이 코드를 사용해주세요.

 

 

설정이 완료되었다면 join.jsp에서 아이디중복 버튼을 만들어 줍니다.

 

onclick은 한번 클릭했을때 idCheck()으로 이동시켜주는 코드?입니다.

 

 js에서 function idCheck()를 만들어 주고 저 버튼을 클릭시 js가 실행이 됩니다.

 

클릭을 하게되면 정규식으로 아이디를 알맞게 입력했는지 검사를 해주고,

아이디가 제가 설정한값에 다르게 입력했다면, alert로 알림을주고 return을 하여 다시 아이디를 입력하게 해줬습니다.

만약 아이디가 알맞게 입력되었다면 ajax를 이용하여 아이디값을 컨트롤러에 넘겨주고, 컨트롤러에서 데이터베이스에 아이디 값이 맞는지 비교를 해줍니다.

아이디가 같은게 없다면 사용 가능한 아이디라고 알림을 보내주고 idCheck를 완료했다는 값을 입력해줍니다.

만약 아이디가 같은게 있다면 다시 입력하도록 해줍니다.

 

 

컨트롤러에서 아이디를 받아, 데이터 베이스와 비교를 해서 가져옵니다.

controller - service- serviceimpl - dao - mapper 순서입니다.

 

service 부분입니다

 

 

컨트롤을 누른상태로 마우스를 가져가시면 저렇게 뜹니다!

 

 

받아온값을 다시 dao에 보내주시고

 

 

dao에서 mapper로 최종으로 값을 보내줍니다. 

 

 

mapper에서 받아온값과 데이터베이스에 들어있는 값을 비교해줍니다.

 

 

이렇게 중복체크를 해주시면 밑 처럼 나오게됩니다.

 

 

 

이메일도 같은 방식으로 해주시면 됩니다!