728x90
게시판에서 글을 작성, 수정, 삭제할 시 확인 메시지를 띄워주면
잘 수행되었는지 쉽게 확인할 수 있다.
확인 메시지를 띄우기 위해서 타임리프 기법을 활용했다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://wwww.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--컨트롤러에서 받아온 변수 적용하기/ inline 사용-->
<script th:inline="javascript">
/*<![CDATA[*/
var message = [[${message}]]
alert(message);
location.replace([[${searchUrl}]]); <!--페이지 이동 + 이동 경로-->
/*]]>*/
</script>
<body>
</body>
</html>
message.html 파일을 만들고 위의 코드를 작성했다.
script 태그를 살펴보면 타임리프 기능인 자바스크립트 인라인을 활용했다.
자바스크립트 인라인은 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 기능을 제공하는데
객체들을 자동으로 객체화한다.
그 이후 자바스크립트에서 Model 데이터를 확인하기 위해 CDATA를 사용했다.
CDATA를 사용하기 위해서 /*<!CDATA[*/ ... /*]]>*/ 문법을 사용한다.
혹시나 모르는 분들을 위해 설명하자면
${...} => 변수를 표현하는 방식이고,
[[...]] => 텍스트를 출력하는 문법이다.
[[...]] = th:text
replace는 말그대로 페이지를 이동한다.
즉, searchUrl 경로로 페이지가 이동한다.
@PostMapping("/board/writepro")
public String boardwritePro(Board board, Model model) {
boardService.write(board);
/*모델에 담겨서 이동*/
model.addAttribute("message", "글 작성이 완료되었습니다.");
model.addAttribute("searchUrl", "/board/list");
return "message";
}
html 파일 작성을 완료한 후, 컨트롤러로 이동하여
message 변수와 출력할 메시지 내용,
searchUrl 변수와 이동할 경로를 작성하고
메시지를 띄우기 위한 페이지인 message 페이지로 리턴값을 주면 된다.
위의 예시는 글을 작성하였을 때의 예이고
수정, 삭제 또한 똑같이 반복하면 된다.
유튜브 <한코딩>님의 영상을 보고 진행했습니다.
728x90
'✏️공부 > 💡SpringBoot' 카테고리의 다른 글
| ✏️싱글톤(Singleton) 컨테이너 (0) | 2024.01.24 |
|---|---|
| ✏️스프링 컨테이너와 스프링 빈 (0) | 2024.01.18 |
| [spring] thymeleaf 활용 (0) | 2023.09.06 |
| ✏️어노테이션 활용 (2) | 2023.09.05 |
| ✏️spring과 MySQL 연동 (1) | 2023.09.02 |