2018. 2. 16. 00:30ㆍWeb/Spring
Spring(스프링) 회원가입
1. 개발환경
1.eclipse
2.tomcat 8.0
3.spring 4.3.7
4.oracle
2. 프로젝트 파일구조
3. 관련 라이브러리 추가.
위에서 aop weaver 같은 경우는 pointcut에 걸렸을 때, advice 메소드를 호출해 실행하는 것이 weaver 라고 합니다. 그 기능을 하기 위해 weaver 라이브러리를 등록합니다.
parser 같은 경우는 repository가 있는 경로에 한글이 낄 경우 이상한 에러(log어쩌고 저쩌고)가 뜨게 됩니다.(ex:C:\Users\윤여성\.m2\repository....)
그래서 한글 인코딩을 하기위한 라이브러리라고 생각하면 됩니다.
4.web.xml
처음에 있는 context-param의 경우는 서블릿이 컨트롤러를 호출하게 될때, 그 컨트롤러 코드에 있는 비즈니스단의 클래스의 빈생성(UserService)을 위해 미리 preload(ContextLoaderListner이용)하는 경우입니다. 그리고 그 다음은 presentation-layer.xml 파일을 로딩하여 해석한 servlet을 생성하는 코드입니다. 마지막으로 filter는 post방식으로 넘어오는 데이터의 한글 인코딩을 위한 코드입니다.
5. presentation-layer.xml
처음의 컴포넌트 스캔은 컨트롤러에 있는 어노테이션들을 인식해 빈 생성을 하기위한 코드이고, 그 다음의 리졸버는 컨트롤러에서 리턴하는 경로의 앞과 뒤에 붙여줄 문자를 설정하는 코드입니다.
6. applicationContext.xml
mybatis를 사용하기 위한 sql세션팩토리빈 생성과 세션템플릿 설정입니다. 그 다음은 트랜잭션 매니저를 빈등록하여 txAdvice를 등록해 밑의 pointcut에 걸려있는 메소들중 에러가 날 경우 자동으로 rollback을 하여 디비에 잘못된 칼럼이 등록되는 것을 방지하는 트랜잭션 매니저입니다. 여기서 advisor가 행위를 하기 위해 아까 라이브러리에 weaver라는 라이브러리를 등록한 것 입니다.
7. sql-map-config.xml , user-mapping.xml , database.properties
sql-map-config.xml 의 첫번째 alias는 user-mapper.xml에서 파라미터타입이나 리절트타입에 사용하기 위한 설정입니다. 그러면 user-mapper.xml 에서의 코드가 훨씬 간결해지는 것을 볼 수 있습니다.
8. UserDTO, UserDAO ,UserService , UserServiceImpl 구현
인스턴스 변수를 선언해주고 각각의 getter, setter 메소드를 선언해주면 됩니다. alt+shift+s 를 통해 겟터,셋터메소드 및 toString() 메소드를 쉽게 생성할 수 있습니다.
@Repository 어노테이션을 통해 applicationContext.xml 에 있는 context:component-scan 설정에 걸려 UserDAO 빈 생성을 하게합니다. 그리고 @Autowired 를 통해 applicationContext.xml 에 있는 sqlSessionTemplate 객체의 의존주입을 컨테이너에게 맡기게 됩니다. 그리고 각 메소드에 있는 mybatis.~은 모두 user-mapper.xml에 정의 해놓은 sql 구문들을 사용하는 sqlSessionTemplate의 메소드입니다.
UserService 클래스입니다. 보시면 UserDAO에 있는 메소드들이 추상메소드로 들어간 것이 보이시죠? 즉, UserService 객체의 다형성을 이용하기 위해 인터페이스 타입으로 클래스를 생성한 것입니다.(컨트롤러에서 직접 DAO에 접근하는 것이 아니라 Service 구현 클래스를 통해 DAO에 접근한다.) 하나 팁을 주자면 UserDAO에서 alt+shift+t 를하면 extract interface라는 기능이 있습니다. 그러면 UserDAO에 들어가있는 메소드를 모두 추상메소드 타입으로 갖고 있는 인터페이스를 쉽게 생성할 수 있습니다.(UserDAO에 생기게 되는 implements UserService는 꼭 지워줄것!)
UserService 인터페이스를 상속받아 구현한 클래스입니다.
9. UserController 구현
위에 @Autowired에 UserService 인터페이스 타입으로 의존주입을 받는 이유는 유지보수 이유때문입니다. 객체지향의 다형성을 이용하게 된다면 UserServiceImpl가 변경되어도 의존주입을 하게 되는 UserService와는 상속관계가 지속되기에 별도의 컨트롤러의 코드의 변경이 없어도 되게됩니다. 그리고 login.do 와 insertUser.do 매핑 메소드에 RequestMethod를 GET과 POST 두개를 나눈 이유는 index페이지에서 로그인 혹은 회원가입 버튼을 누르게 된다면 get방식으로 요청(진짜 로그인과 회원가입 같은 경우는 post 방식으로 데이터를 서버측으로 보내게 됩니다.)이 가서 각 페이지로 이동하게 됨으로 페이지 이동을 위한 메소드는 별도의 url매핑을 만들필요 없이 같은 url매핑으로 메소드 방식만 두개로 정해주면 됩니다.
10. insertUser.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script> <style> body { background: #f8f8f8; padding: 60px 0; } #login-form > div { margin: 15px 0; } </style> <title>회원가입</title> </head> <body> <div class="container"> <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-success"> <div class="panel-heading"> <div class="panel-title">환영합니다!</div> </div> <div class="panel-body"> <form action="insertUser.do" id="login-form" method="post"> <div> <input type="email" class="form-control id" name="id" placeholder="Email" oninput="checkId()" id="checkaa" autofocus> </div> <div> <input type="password" class="form-control pass" name="pw" placeholder="Password" oninput="checkPwd()"> </div> <div> <input type="password" class="form-control pass" name="pwConfirm" placeholder="Confirm Password" id="repwd" oninput="checkPwd()"> </div> <div> <input type="text" class="form-control nickname" name="nickName" id="nickname" placeholder="Your Nickname" oninput="checkNick()" autofocus> </div> <div> <button type="submit" class="form-control btn btn-primary signupbtn" disabled="disabled">회원가입</button> </div> </form> </div> </div> </div> </div> <script> //아이디와 비밀번호가 맞지 않을 경우 가입버튼 비활성화를 위한 변수설정 var idCheck = 0; var nickCheck = 0; var pwdCheck = 0; //아이디 체크하여 가입버튼 비활성화, 중복확인. function checkId() { var inputed = $('.id').val(); console.log(inputed); $.ajax({ data : { id : inputed }, url : "checkId.do", success : function(data) { if(inputed=="" && data=='0') { $(".signupbtn").prop("disabled", true); $(".signupbtn").css("background-color", "#aaaaaa"); $("#checkaa").css("background-color", "#FFCECE"); idCheck = 0; } else if (data == '0') { $("#checkaa").css("background-color", "#B0F6AC"); idCheck = 1; if(idCheck==1 && pwdCheck == 1) { $(".signupbtn").prop("disabled", false); $(".signupbtn").css("background-color", "#4CAF50"); } } else if (data == '1') { $(".signupbtn").prop("disabled", true); $(".signupbtn").css("background-color", "#aaaaaa"); $("#checkaa").css("background-color", "#FFCECE"); idCheck = 0; } } }); } //재입력 비밀번호 체크하여 가입버튼 비활성화 또는 맞지않음을 알림. function checkPwd() { var inputed = $('.pass').val(); var reinputed = $('#repwd').val(); console.log(inputed); console.log(reinputed); if(reinputed=="" && (inputed != reinputed || inputed == reinputed)){ $(".signupbtn").prop("disabled", true); $(".signupbtn").css("background-color", "#aaaaaa"); $("#repwd").css("background-color", "#FFCECE"); } else if (inputed == reinputed) { $("#repwd").css("background-color", "#B0F6AC"); pwdCheck = 1; if(idCheck==1 && pwdCheck == 1) { $(".signupbtn").prop("disabled", false); $(".signupbtn").css("background-color", "#4CAF50"); } } else if (inputed != reinputed) { pwdCheck = 0; $(".signupbtn").prop("disabled", true); $(".signupbtn").css("background-color", "#aaaaaa"); $("#repwd").css("background-color", "#FFCECE"); } } //닉네임과 이메일 입력하지 않았을 경우 가입버튼 비활성화 function checkNick() { var nickname = $("#nickname").val(); console.log(nickname); $.ajax({ data : { nickName : nickname }, url : "checkNickName.do", success : function(data) { if(nickname=="" && data=='0') { $(".signupbtn").prop("disabled", true); $(".signupbtn").css("background-color", "#aaaaaa"); $("#nickname").css("background-color", "#FFCECE"); nickCheck = 0; } else if (data == '0') { $("#nickname").css("background-color", "#B0F6AC"); nickCheck = 1; if(idCheck==1 && pwdCheck == 1) { $(".signupbtn").prop("disabled", false); $(".signupbtn").css("background-color", "#4CAF50"); } } else if (data == '1') { $(".signupbtn").prop("disabled", true); $(".signupbtn").css("background-color", "#aaaaaa"); $("#nickname").css("background-color", "#FFCECE"); nickCheck = 0; } } }); } </script> </body> </html> | cs |
11. 마치며..
insertUser.jsp 와 UserController에 있는 코드 중 ajax를 이용한 실시간 아이디 중복체크 및 비밀번호 확인, 닉네임 체크 코드가 들어가있습니다. 그것은 별도로 따로 설명을 올리겠습니다.. 두서 없이 한 설명을 들어주셔서 감사합니다. 코드를 원하시는 분은 댓글로 남겨주시면 보내드리겠습니다.
'Web > Spring' 카테고리의 다른 글
| Spring - Jsoup을 이용한 웹크롤링 (0) | 2018.05.07 |
|---|---|
| Spring AOP를 이용한 XSS 공격 방지 (1) | 2018.05.06 |
| Spring(스프링) + WebSocket(웹소켓)을 이용한 실시간 채팅 (36) | 2018.04.22 |
| Spring(스프링) 어노테이션 DI방법 (0) | 2018.03.13 |
| Spring(스프링) Transaction(트랜잭션) 범위설정 (0) | 2018.03.07 |