스프링 ajax 회원탈퇴 구현

클라이언트가 요청하면 요청 -> Controller(VO) -> Service -> DAO -> Mapper -> JSP순으로 가기 때문에 이 순서대로 작성하였다. 데이터 베이스는 Oracle을 사용하였다.

 

구조

 

 

SecessionController.java

package com.wipia.study.controller;

import javax.inject.Inject;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.wipia.study.domain.MemberVO;
import com.wipia.study.service.SecessionService;

@Controller
public class SecessionController {
	
	@Inject
	SecessionService service;
	
	//회원탈퇴 페이지
	@RequestMapping(value="secession.do")
	public String secession() {
		return "secession";
	}
	
	//회원탈퇴
	@RequestMapping(value="secessionProc.do")
	public String secessionProc(MemberVO vo,HttpSession session) {
		
		service.secession(vo,session);
		
		return "login";
	}
	
	//패스워드 체크
	@RequestMapping(value="passCheck.do", method=RequestMethod.POST, produces = "application/text; charset=utf8")
	@ResponseBody
	public String passCheck(MemberVO vo) {
		
		int result = service.passCheck(vo);
		return Integer.toString(result);
	}
}

우선 탈퇴 페이지로 이동하기 위한 secession메소드와 실제적으로 회원탈퇴를 시킬 회원탈퇴secessionProc, 패스워드 체크 메소드를 만들어 준다.

 

SecessionService.java

package com.wipia.study.service;


import javax.servlet.http.HttpSession;

import com.wipia.study.domain.MemberVO;

public interface SecessionService {
	
	//패스워드 체크
	public int passCheck(MemberVO vo);
	
	//회원 탈퇴
	public void secession(MemberVO vo,HttpSession session);
}

SecessionServiceImpl.java

package com.wipia.study.service.impl;

import javax.inject.Inject;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Service;

import com.wipia.study.dao.SecessionDAO;
import com.wipia.study.domain.MemberVO;
import com.wipia.study.service.SecessionService;

@Service
public class SecessionServiceImpl implements SecessionService {

	@Inject
	SecessionDAO dao;
	
	@Override
	public int passCheck(MemberVO vo) {
		int result = dao.passCheck(vo);
		return result;
	}

	@Override
	public void secession(MemberVO vo,HttpSession session) {
		dao.secession(vo,session);
	}
	
}

service의 내용을 상속받아 내용을 작성한다.

passCheck에서는 Dao에 아이디와 패스워드를 보내 패스워드가 맞는지 체크하여 결과값을 가져온다.

secession은 세션정보와 vo정보를 보낸다. 세션정보는 회원탈퇴후 로그아웃을 시키기 위해서다.

로그아웃을 시키지 않으면 회원에 대한 정보는 없지만 세션은 남아있어 로그인 되어있기 때문에 세션을 종료시켜주어야 된다.

 

SecessionDAO.java

package com.wipia.study.dao;

import javax.inject.Inject;
import javax.servlet.http.HttpSession;

import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;

import com.wipia.study.domain.MemberVO;

@Repository
public class SecessionDAO {
	
	@Inject
	SqlSession sqlsessoin;
	
	//패스워드 체크
	public int passCheck(MemberVO vo) {
		int result=sqlsessoin.selectOne("memberMapper.loginCheck",vo);

		return result;
	}
	
	//회원탈퇴
	public void secession(MemberVO vo,HttpSession session) {
		
		sqlsessoin.delete("memberMapper.secession",vo);
		//세션 삭제
		session.invalidate();
	}

	
}

다오에서 패스워드 체크같은 경우 login을 구현했을 때, 사용했던 loginCheck를 이용하여 아이디와 비밀번호가 맞는지 확인을 해준다.

secession은 vo정보와 session정보를 념겨받아 회원 정보를 삭제시킨 후, 세션을 종료시킨다.

 

memberMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="memberMapper">

	<select id="loginCheck" resultType="int">
		<![CDATA[
			SELECT count(*) FROM member
			WHERE user_id = #{userId} AND passwd = #{passwd}
		]]>
	</select>
	
	<select id="idCheck" resultType="int">
		<![CDATA[
			SELECT count(*) FROM member
			WHERE user_id = #{userId}
		]]>
	</select>
	
	<select id="signUp">
		<![CDATA[
			insert into member(user_id,passwd)
			values (#{userId},#{passwd})
		]]>
	</select>
	
	<delete id="secession">
		<![CDATA[
			DELETE member
			WHERE user_id=#{userId} and passwd=#{passwd}
		]]>
	</delete>
	
</mapper>

이전에 만들어 두었던 memberMaper에 delet를 추가하여 준다.

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>로그인</title>
	<script src="resources/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
	<h1>로그인 페이지</h1>
	<hr />
		<c:choose>
			<c:when test="${empty sessionScope.userId}">
			<!-- 로그인이 안되어 있으면 -->
				<form id="loginFrm" name="loginFrm" action="loginCheck.do" method="post">
					<table>
						<tr>
							<td>아이디</td>
							<td><input type="text" name="userId" id="userId" placeholder="10글자" maxlength="10"></td>
						</tr>
						<tr>
							<td>패스워드</td>
							<td><input type="password" name="passwd" id="passwd" maxlength="20"></td>
						</tr>
						<c:if test="${msg == '실패'}">
							<tr>
								<td colspan=2>
									아이디 또는 패스워드가 틀렸습니다.
								</td>
							</tr>
						</c:if>
						<tr>
							<td>
								<input type="button" id="login" value="로그인" />
							</td>
							<td>
								<input type="button" id="signUp" value="회원가입" />
							</td>
						</tr>
					</table>
				</form>
			</c:when>
			<c:otherwise>
				<h3>${sessionScope.userId}님 환영합니다.</h3>
				<a href="logout.do">로그아웃</a>
				<a href="secession.do">회원탈퇴</a>
			</c:otherwise>
		</c:choose>
		<hr />
		<a href="/study">메인</a>
</body>
<script type="text/javascript">
	$(document).ready(function(e){
		$('#login').click(function(){

			// 입력 값 체크
			if($.trim($('#userId').val()) == ''){
				alert("아이디를 입력해 주세요.");
				$('#userId').focus();
				return;
			}else if($.trim($('#passwd').val()) == ''){
				alert("패스워드를 입력해 주세요.");
				$('#passwd').focus();
				return;
			}
			
			//전송
			$('#loginFrm').submit();
		});
		
		//회원가입 버튼
		$('#signUp').click(function() {
			location.href="signUpPage.do";
		});
		
	});
</script>
</html>

이전에 만들었던 login.jsp에 로그인이 되어있을경우 회원탈퇴 페이지로 이동할 수 있도록 만들어 준다.

 

secession.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>회원탈퇴</title>
	<script src="resources/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
	<h1>회원탈퇴</h1>
	<hr />
	<form action="secessionProc.do" name="delFrm" id="delFrm" method="post">
		<input type="hidden" name="userId" value="${sessionScope.userId}">
		<table border=1>
			<tr>
				<td>패스워드</td>
				<td><input type="password" name="passwd" id="passwd"></td>
			</tr>
			<tr>
				<td>패스워드 확인</td>
				<td><input type="password" name="passwdCheck" id="passwdCheck"></td>
			</tr>
			<tr>
				<td colspan=2 align="center"><a href="#" id="secession">탈퇴하기</a></td>
			</tr>
		</table>
	</form>
	<hr>
	<a href="/study">메인</a>
</body>

<script type="text/javascript">
	$(document).ready(function(e){
		$('#secession').click(function(){
			
			//패스워드 입력 확인
			if($('#passwd').val() == ''){
				alert("패스워드를 입력해 주세요.");
				$('#passwd').focus();
				return;
			}else if($('#passwdCheck').val() == ''){
				alert("패스워드를 입력해 주세요.");
				$('#passwdCheck').focus();
				return;
			}
			
			//입력한 패스워드가 같인지 체크
			if($('#passwdCheck').val() != $('#passwd').val()){
				alert("패스워드가 일치하지 않습니다.");
				$('#passwdCheck').focus();
				return;
			}
			
			//패스워드 맞는지 확인
			$.ajax({
				url: "${pageContext.request.contextPath}/passCheck.do",
				type: "POST",
				data: $('#delFrm').serializeArray(),
				success: function(data){
					if(data==0){
						alert("패스워드가 틀렸습니다.");
						return;
					}else{
						//탈퇴
						var result = confirm('정말 탈퇴 하시겠습니까?');
						if(result){
							$('#delFrm').submit();
						}
					}
				},
				error: function(){
					alert("서버 에러.");
				}
			});
		});
	});
</script>
</html>

회원탈퇴 페이지를 만들어 준다. 패스워드만 입력받아 입력한 패스워드가 일치한다면 ajax를 이용하여 패스워드를 맞게 입력했는지 체크하여 맞다면 conrirm창을 띄어 확인을 누르게 되면 아이디와 패스워드를 secessionProc.do로 보내 탈퇴처리를 한다.

 

소스코드는 https://github.com/ming9mon/spring/tree/master/Study 에서 다운받을 수 있다.