본문 바로가기
사이드 프로젝트/게시판

5. Controller에서 alert 띄우기, 화면 이동하기

by 나는 유찌 2020. 10. 5.

2020/09/27 - [사이드 프로젝트] - 4. Logback 설정

 

4. Logback 설정

2020/09/27 - [사이드 프로젝트] - 3. MyBatis 설정 3. MyBatis 설정 2020/09/27 - [사이드 프로젝트] - 2. Spring boot + MSSQL 2020/09/12 - [사이드 프로젝트/게시판] - 1. Spring boot 프로젝트 생성 1. Sprin..

dev-yujji.tistory.com

설정을 끝내고 먼저 회원가입을 만들어보았는데 회원가입을 처리하고 alert을 띄운후 화면을 이동하는 방법을 따로 포스팅하는게 좋을 것 같아 이거를 먼저 따로 포스팅하겠다.

 

만일 이 방법이 잘 이해가 안간다면 ajax로 alert 띄우고 'location.href'를 이용하여 화면을 넘겨주어도 괜찮다. 본인도 원래 그렇게 하다가 회사에서 어떤 프로젝트를 진행하며 배운 방법이다!

 

 

 

설명


코딩을 시작하기 전에 간단하게 어떻게 돌아가는지 이해를 해보자.

 

Controller에서 return을 해줄 때 'ModelAndView'로 리턴을 해준다.

'ModelAndView'는 화면에 뿌려줄 데이터(Model)를 설정할 수 있고 어떤 화면(View)으로 넘어갈지를 설정할 수 있다.

 

이때 화면에 뿌려주는 데이터를 객체로 보내준다. 그 객체안에 alert으로 보여줄 메시지와 어떤 화면으로 넘겨줄건지를 설정한다.(Model)

 

Model에 해당하는 값을 보내줄 화면으로는 반드시 하나의 html 화면으로 설정한다. 그 안에는 받은 Model 값에 alert으로 띄어줄 메시지가 있는지와 어디 화면으로 넘길지에 대한 값이 들어있는지 확인을 하고 존재한다면 script 코드를 이용하여 각 역할을 수행하도록 한다.(View)

 

 

 

코딩


먼저 공통으로 사용할 'Message'라는 클래스 파일을 생성한다.

@Getter
@Setter
@NoArgsConstructor
public class Message {
	String message = "";
	String href = "";
	
	public Message(String message, String href) {
		this.message = message;
		this.href = href;
	}
}

변수 이름들을 보면 대충 감이 오겠지만 'message'는 alert창에 보여줄 메시지를 넣어줄것이다.

'href'에는 이동해야할 화면을 설정해서 입력을 할것이다.

 

 

그리고 'Message'라는 html 파일을 생성해준다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:if="${#strings.length(data.message) != 0}">
		<script>
			top.alert("[[${data.message}]]");
		</script>
	</th:block>
	<th:block th:if="${#strings.length(data.href) != 0}">
		<script>
			top.location.href = '[[${data.href}]]';
		</script>
	</th:block>
</head>
</html>

* 나는 html 템플릿으로 Thymeleaf를 사용했다.

 

'data'라는 이름으로 들어온 객체의 'message'값과 'href' 값의 길이가 0이 아니라면 (값이 존재한다면)

그에 해당하는 script가 실행이 되도록 만들어준다.

 

'message' 값이 존재할 경우 alert을 띄우고, 'href' 값이 존재하면 location.href이 실행되도록 설정한다.

 

 

그럼 Controller에서 값을 return을 해보자.

@PostMapping("/jstep2")
ModelAndView jstep2(@Valid Users user, ModelAndView mav) {
	joinService.jstep2(user);
	
	mav.addObject("data", new Message("회원가입이 완료되었습니다.", "/"));
	mav.setViewName("Message");
	
	return mav;
}

이건 내가 회원가입을 만들면서 사용한 코드이다.

'data'라는 Model 값을 넣어주면서 안에 'Message' 생성자를 이용해 alert으로 띄어줄 메시지를 설정하고

회원가입 후 넘어갈 화면으로 '/'으로 설정을 해주었다.

 

 

 

테스트


 

회원가입 테스트

 

 

 

그럴싸한 설정은 정말정말 다 한 것 같으니 다음 포스팅은 회원가입을 만드는 것을 올려보겠다!

'사이드 프로젝트 > 게시판' 카테고리의 다른 글

4. Logback 설정  (0) 2020.09.27
3. MyBatis 설정  (0) 2020.09.27
2. Spring boot + MSSQL  (0) 2020.09.27
1. Spring boot 프로젝트 생성  (0) 2020.09.12