스프링 ajax 회원가입 구현

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

 

프로젝트 구조

데이터 베이스

create table member(
user_id varchar2(10) primary key,
passwd varchar2(20) not null
);

테이블은 예제이기 때문에 간단하게 만들었다.

SignUpController.java

package com.wipia.study.controller;



import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
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 org.springframework.web.servlet.ModelAndView;

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

@Controller
public class SignUpController {

	@Autowired
	SignUpService service;
	
	@RequestMapping(value ="/signUpPage.do")
	public String signUpPage(){
		
		return "signUp";
	}
	
	@RequestMapping(value = "/signUp.do")
	public String signUp(MemberVO vo) {
		
		service.signUp(vo);
		
		return "login";
	}
	
	//produces는 ajax가 데이터 넘겨받을때 깨짐 방지
	@RequestMapping(value = "/idCheck.do",method = RequestMethod.GET, produces = "application/text; charset=utf8")
	@ResponseBody
	public String idCheck(HttpServletRequest request) {
		
		String userId = request.getParameter("userId");
		int result=service.idCheck(userId);
		return Integer.toString(result);
	}
	
}

jsp페이지에서 id 중복체크하는 idCheck와 실제 회원가입처리를 해줄 signUp, 회원가입 페이지로 이동시켜줄 signUpPage를 만들어 주었다.

idCheck는 id만 중복되는지 확인하면 되기 때문에 String값만 받아와서 서비스로 보내준다.

 

SignUpService.java

package com.wipia.study.service;

import com.wipia.study.domain.MemberVO;

public interface SignUpService {
	
	//아이디 중복 체크
	public int idCheck(String userId);
	
	//회원 가입
	public void signUp(MemberVO vo);
	
}

SignUpServiceImpl.java

package com.wipia.study.service.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.servlet.ModelAndView;

import com.wipia.study.dao.SignUpDAO;
import com.wipia.study.domain.MemberVO;
import com.wipia.study.service.SignUpService;

@Service
public class SignUpServiceImpl implements SignUpService {

	@Autowired
	SignUpDAO dao;
	
	@Override
	public int idCheck(String userId) {
		
		int result = dao.idCheck(userId);
		return result;
	}

	@Override
	public void signUp(MemberVO vo) {
		dao.signUp(vo);
	}

}

서비스를 상속받아 내용을 작성해 준다. idCheck를 하여 result값을 반환해 준다. 

signUp은 dao에서 가입만 시켜주기 때문에 반환값이 없도록 만들었다.

 

SignUpDAO.java

package com.wipia.study.dao;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.wipia.study.domain.MemberVO;

@Repository
public class SignUpDAO {
	
	@Autowired
	SqlSession sqlsession;
	
	//아이디 체크
	public int idCheck(String userId) {
		System.out.println("===> Mybatis로 idCheck");
		int result = sqlsession.selectOne("memberMapper.idCheck",userId);
		return result;
	}
	
	//회원가입
	public void signUp(MemberVO vo) {
		System.out.println("===> Mybatis로 회원가입(signUp)");
		sqlsession.insert("memberMapper.signUp",vo);
	}
	
}

아이디 체크에서 검색이 된다면 1 검색이 되지 않는다면 0을 리턴 받는다.

회원가입은 form에서 받아온 정보를 디비에 입력시킨다.

 

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>
	
	
</mapper>

처리할 db쿼리문을 입력해 주고, 리턴값이 있는것은 resultType을 적어준다.

 

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>
			</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>

회원가입 버튼을 만들어 클릭할 경우 회원가입 페이지로 이동하도록 만들어 준다.

 

signUp.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="resources/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
	<h1>회원가입</h1>
	<hr>
	<form id="signFrm" name="signFrm" action="signUp.do">
		<table>
			<tbody>
				<tr>
					<td>아이디</td>
					<td><input type="text" id="userId" name="userId" ></td>
					<td><input type="button" id="check" value="중복체크"></td>
				</tr>
				<tr>
					<td colspan=3 id="idCheck"></td>
				</tr>
				<tr>
					<td>패스워드</td>
					<td colspan="2"><input id="passwd" name="passwd" type="password"></td>
				</tr>
				<tr>
					<td>패스워드 확인</td>
					<td colspan="2"><input id="passwdCheck" name="passwdCheck" type="password"></td>
				</tr>
				
				<tr>
					<td colspan="3"><input type="button" id="signUp" value="회원가입"></td>
				</tr>
			</tbody>
		</table>
	</form>
</body>

<script type="text/javascript">
	$(document).ready(function(e){
		
		var idx = false;
		
		$('#signUp').click(function(){
			if($.trim($('#userId').val()) == ''){
				alert("아이디 입력.");
				$('#userId').focus();
				return;
			}else if($.trim($('#passwd').val()) == ''){
				alert("패스워드 입력.");
				$('#passwd').focus();
				return;
			}
			//패스워드 확인
			else if($('#passwd').val() != $('#passwdCheck').val()){
				alert('패스워드가 다릅니다.');
				$('#passwd').focus();
				return;
			}
			
			if(idx==false){
				alert("아이디 중복체크를 해주세요.");
				return;
			}else{
				$('#signFrm').submit();
			}
		});
		
		$('#check').click(function(){
			$.ajax({
				url: "${pageContext.request.contextPath}/idCheck.do",
				type: "GET",
				data:{
					"userId":$('#userId').val()
				},
				success: function(data){
					if(data == 0 && $.trim($('#userId').val()) != '' ){
						idx=true;
						$('#userId').attr("readonly",true);
						var html="<tr><td colspan='3' style='color: green'>사용가능</td></tr>";
						$('#idCheck').empty();
						$('#idCheck').append(html);
					}else{

						var html="<tr><td colspan='3' style='color: red'>사용불가능한 아이디 입니다.</td></tr>";
						$('#idCheck').empty();
						$('#idCheck').append(html);
					}
				},
				error: function(){
					alert("서버에러");
				}
			});
			

		});
		
	});
</script>
</html>

jQuery를 이용하여 기본적인 form체크를 하였고, 중복체크를 하여야만 회원가입이 진행되도록 만들었다.

중복체크 버튼을 눌렀을 경우에 ajax통신을 하여 중복된 아이디가 있는지 확인을 한다. 중복된다면  

위와 같이 "사용불가능한 아이디 입니다." 라고 뜨고, 중복되지 않다면 아래와 같이 사용가능이라는 말이 뜬다. 

중복되지 않을 경우 idx값이 true로 바뀌어 회원가입을 진행할 수 있게 되며, 아이디 입력창은 readonly속성이 부여된다.

 

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