복습할 겸 이번 주에 강의 들었던 것을 새로운 html 파일을 활용해 구현했다.
Spring에서 DB 연결하는 방법을 아직 배우지 않아서 임의대로 넘기는 방법을 택했다.
<script>
$(function(){
$("input#inputUsernameEmail").blur(function(){
if(!($(this).val().length>=4) || !($(this).val().length<=15)){ // 아이디가 4글자보다 작거나 아이다가 15글자보다 크면
alert('4글자에서 15글자 사이로 설정해 주세요');
$(this).val('');
return false;
}else if($(this).val()==null){
alert('4글자에서 15글자 사이로 설정해 주세요');
}
}); // 회원가입 로그인 체크
$("input#name").blur(function(){
if(!($(this).val().length>1) || !($(this).val().length<=5)){
alert('2~5글자까지 가능해요');
$(this).val('');
}
});
$("input#pass1").blur(function(){
if(!($(this).val().length>=10) || !($(this).val().length<=20)){
alert('10~20글자 사이로 설정해 주세요');
}
});
$("input#pass2").blur(function(){
if($(this).val()!=$("input#pass1").val()){
alert('위의 값과 동일하지 않습니다.');
$(this).val('');
}else{
$("input#pass3").val($(this).val());
}
});
$("a#btn").click(function(){
$("form").submit();
});
});//loadFunction가볍게 회원가입에 대한 제약 사항을 주었다.
form의 이동 경로는 /web/signSuccess.do로 설정했다.
가입 버튼을 누름과 함께 클라이언트가 서버에 요청을 한다.
<servlet>
<servlet-name>appServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>appServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>spring 내장 클래스인 DispatcherServlet이 요청을 확인한다.
web.xml 파일에 설정돼 있는 url-pattern에서 서블릿을 생성하고 서블릿을 매핑시킨다. .do로 설정해 두었는데 이것은 확장자 패턴으로 서버의 해당 컴포넌트를 찾아 실행한다는 뜻이다.
참고한 사이트 : https://azderica.github.io/00-java-urlpattern/
DispatcherServlet은 url에 맞는 컨트롤러가 있는 컨트롤러로 가서 url 패턴에 맞는 메서드를 실행하게 된다.
컨트롤러는 현재 작성돼 있던 곳에 추가했다.
컨트롤러의 기능
참고한 사이트 : https://netframework.tistory.com/entry/25-View-데이터의-Controller-전달-방법
- 클라이언트에게 view를 전달하는 주체
- 클라이언트에서 데이터를 전달받는 주체
@RequestMapping(value="signSuccess.do")
public ModelAndView signSuc(String id, String name, String pass) {
ModelAndView modelAndView = new ModelAndView(); // 모델앤드뷰를 생성
UserSuccess us = new UserSuccess();
//String as = us.board(id, name, pass);
modelAndView.addObject("id", id);
modelAndView.addObject("name", name);
modelAndView.addObject("pass", pass);
modelAndView.addObject("as", us.board(id, name, pass));
modelAndView.setViewName("boardEx/signupok"); // 값을 해당 루트로 루트로 보내 준다.
return modelAndView;
}@RequestMapping(value="signSuccess.do")을 통해 해당 메서드가 처리할 것임을 매핑한다. 이때 클라이언트에서 넘겨 받은 값들의 태그에서 name 값이 해당 메소드의 파라미터 값과 동일하면 값을 넣어 준다.
model도 사용할 수 있는데 modelAndView 메소드를 사용한 이유는 값을 저장할 것만이 아니라 .setViewName("")에 넣어 준 루트에 값을 뿌려 주어야 하기 때문에 사용하였다.
이때 .addObject로 넘겨 줄 값들을 키와 값 형태로 넘겨 주게 되는데, 처음에 addObject를 통해 as로 회원가입 축하 메시지를 뿌려 주려고 했는데 안 되었다. 하나씩 찾아 보니 signUser 인터페이스에서 메소드를 구현할 때 void로 구현해서였다.
public interface SignUser {
public String board(String id, String name, String pass);
}
import org.springframework.stereotype.Component;
@Component
public class UserSuccess implements SignUser{
private String id;
private String name;
private String pass;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPass() {
return pass;
}
public void setPass(String pass) {
this.pass = pass;
}
@Override
public String toString() {
return "UserSuccess [id=" + id + ", name=" + name + ", pass=" + pass + "]";
}
public UserSuccess() {
super();
}
public UserSuccess(String id, String name, String pass) {
super();
this.id = id;
this.name = name;
this.pass = pass;
}
@Override
public String board(String id, String name, String pass) {
// TODO Auto-generated method stub
return "id="+id+" name="+name+" pass="+pass+" 회원 가입을 축하합니다!";
}
}
값을 넣어 주고 Sign Up를 누르면,
해당 값이 넘어오고 메소드를 통해 값을 넘겨 준 것을 확인할 수 있다.
