21. 스프링 회원가입 만들기 / 회원탈퇴 비밀번호 체크

안녕하세요? MelonPeach입니다.

원래 회원 가입 중복에 대해서 쓰려고 했지만 다음 포스팅에 쓰도록 할게요.

회원탈퇴를 ajax를 사용하여 만드는것이 좋아보여서

오늘은 ajax를 사용하여 비밀번호가 맞으면 탈퇴가되고 맞지 않으면 탈퇴가 되지 않도록 구현하겠습니다.

1. pom.xml 작성

ajax의 데이터를 컨트롤러에서 사용할수 있도록 pom.xml에서

<dependencies></dependencies>사이에 3가지를 추가해줍니다.

<dependency>
       <groupId>org.codehaus.jackson</groupId>
       <artifactId>jackson-mapper-asl</artifactId>
       <version>1.9.13</version>
</dependency>
<dependency>
        <groupId>org.codehaus.jackson</groupId>
        <artifactId>jackson-core-asl</artifactId>
        <version>1.9.13</version>
</dependency>

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.10.0</version>
</dependency>

2. memberMapper.xml 작성

USERID와 USERPASS를 조건으로 걸고 조건에 맞는 결과가 몇개인지 카운트합니다.

<!-- 패스워드 체크 -->
<select id="passChk" resultType="int">
	SELECT COUNT(*) FROM MP_MEMBER
	WHERE USERID = #{userId}
	  AND USERPASS = #{userPass}
</select>

3. MemberDAO 작성

쿼리에서 조회한 값과 파라미터를 보내주는 값이 숫자이기때문에 타입은 int형으로 선언해주고

MemberService에서 전달받은 파라미터를 memberMapper.xml에 보내줍니다.

// 패스워드 체크
public int passChk(MemberVO vo) throws Exception;

// 패스워드 체크
@Override
public int passChk(MemberVO vo) throws Exception {
	int result = sql.selectOne("memberMapper.passChk", vo);
	return result;
}

4. MemberService 작성

스프링 회원가입 만들기 / 비밀번호체크 MemberService.java

MemberController에서 보내주는 파라미터를 MemberService로 받습니다.

public int passChk(MemberVO vo) throws Exception;


// 패스워드 체크
@Override
public int passChk(MemberVO vo) throws Exception {
	int result = dao.passChk(vo);
	return result;
}

5. MemberController 작성

스프링 회원가입 만들기 / 비밀번호체크 MemberController.java

USERID와 USERPASS가 일치하면 result에는 1이 들어가겠지요.

	// 패스워드 체크
	@ResponseBody
	@RequestMapping(value="/passChk", method = RequestMethod.POST)
	public int passChk(MemberVO vo) throws Exception {
		int result = service.passChk(vo);
		return result;
	}

6. memberDeleteView 작성

스프링 회원가입 만들기 / 비밀번호체크 memberDeleteVeiw.jsp

회원탈퇴 버튼을 눌렀을때 ajax는 Controller에서 /member/passChk로 요청합니다.

요청을 하면서 $("#delForm").serializeArray()의 값들을 보내줍니다. (Form에 있는 데이터 userId, userPass, userName)

데이터가 보내지고 성공했으면 Controller에서 return한 값 즉 1이 반환이됩니다.

반환한 값은 fucntion의 파라미터 data로 들어가게되며 data가 0이면 패스워드가 틀리고 0이 아니면 회원탈퇴하시겠습니까? 라는 알러트문이 뜨게 됩니다.

memberDeleteView.jsp는 약간의 수정사항이 있으니 이전 포스팅에서 작성한것과 비교하여 진행해주세요.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
	<head>
		<!-- 합쳐지고 최소화된 최신 CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<!-- 부가적인 테마 -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
	 	
	 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<title>회원탈퇴</title>
	</head>
	<script type="text/javascript">
		$(document).ready(function(){
			// 취소
			$(".cencle").on("click", function(){
				
				location.href = "/";
						    
			})
		
			$("#submit").on("click", function(){
				if($("#userPass").val()==""){
					alert("비밀번호를 입력해주세요.");
					$("#userPass").focus();
					return false;
				}
				$.ajax({
					url : "/member/passChk",
					type : "POST",
					dataType : "json",
					data : $("#delForm").serializeArray(),
					success: function(data){
						
						if(data==0){
							alert("패스워드가 틀렸습니다.");
							return;
						}else{
							if(confirm("회원탈퇴하시겠습니까?")){
								$("#delForm").submit();
							}
							
						}
					}
				})
				
			});
			
				
			
		})
	</script>
	<body>
		<section id="container">
			<form action="/member/memberDelete" method="post" id="delForm">
				<div class="form-group has-feedback">
					<label class="control-label" for="userId">아이디</label>
					<input class="form-control" type="text" id="userId" name="userId" value="${member.userId}" readonly="readonly"/>
				</div>
				<div class="form-group has-feedback">
					<label class="control-label" for="userPass">패스워드</label>
					<input class="form-control" type="password" id="userPass" name="userPass" />
				</div>
				<div class="form-group has-feedback">
					<label class="control-label" for="userName">성명</label>
					<input class="form-control" type="text" id="userName" name="userName" value="${member.userName}" readonly="readonly"/>
				</div>
			</form>
			<div class="form-group has-feedback">
				<button class="btn btn-success" type="button" id="submit">회원탈퇴</button>
				<button class="cencle btn btn-danger" type="button">취소</button>
			</div>
			<div>
				<c:if test="${msg == false}">
					비밀번호가 맞지 않습니다.
				</c:if>
			</div>
		</section>
		
	</body>
	
</html>

7. 실행 테스트