1. 등록 처리와 화면 개발
등록 처리 시에는 @Valid를 이용해서 서버에서도 검증한 후에 등록하는 방식을 적용
@Valid를 위해서 bulid.gradle에 validation 관련 라이브러리를 추가
implementation 'org.springframework.boot:spring-boot-starter-validation'
BoardDTO에는 제목이나 내용, 작성자 등이 비어 있지 않도록 어노테이션들을 처리
public class BoardDTO {
private Long bno;
@NotEmpty
@Size(min = 3, max = 100)
private String title;
@NotEmpty
private String content;
@NotEmpty
private String writer;
private LocalDateTime regDate;
private LocalDateTime modDate;
}1) BoardController 처리
🚀 등록 처리는 GET 방식으로 화면을 보고 POST 방식으로 처리
🚀 @Valid에서 문제가 발생했을 때 모든 에러를 errors라는 이름으로 RedirectAttributes에 추가해서 전송
@GetMapping("/register")
public void registerGet() {}
@PostMapping("/register")
public String registerPost(@Valid BoardDTO boardDTO,
BindingResult bindingResult,
RedirectAttributes redirectAttributes) {
log.info("board POST register...");
if (bindingResult.hasErrors()) {
log.info("has errors...");
redirectAttributes.addFlashAttribute("errors", bindingResult.getAllErrors());
return "redirect:/board/register";
}
log.info(boardDTO);
Long bno = boardService.register(boardDTO);
redirectAttributes.addFlashAttribute("result", bno);
return "redirect:/board/list";
}💡 addFlashAttribute()
- Spring Framework에서 제공하는 메소드로, 주로 리다이렉트 시 데이터를 일시적으로 저장하는 데 사용
- Flash 속성은 리다이렉트 이후에만 유효하며, 한 번 읽히면 소멸하는 특성이 있음
- 이를 통해 사용자는 브라우저를 새로고침하거나 직접 URL을 입력해도 해당 데이터가 유지되지 않도록 할 수 있음
2) register.html 처리
🚀 templates/board 폴더에 register.html을 추가
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/basic.html}">
<head>
<meta charset="UTF-8">
<title>Board Register</title>
</head>
<div layout:fragment="content">
<div class="row mt-3">
<div class="col">
<div class="card">
<div class="card-header">
Board Register
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
<script layout:fragment="script" th:inline="javascript">
</script>
🚀 <div class="card-body"> 부분에는 <form> 태그를 이용해서 입력할 수 있는 부분을 추가
🚀 게시물 등록에는 제목 title, 내용 content, 작성자 writer가 추가
<div class="card-body">
<form action="/board/register" method="post">
<div class="input-group mb-3">
<span class="input-group-text">Title</span>
<input type="text" name="title" class="form-control" placeholder="Title">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Content</span>
<textarea class="form-control col-sm-5" rows="5" name="content"></textarea>
</div>
<div class="input-group mb-3">
<span class="input-group-text">Writer</span>
<input type="text" name="writer" class="form-control" placeholder="Writer">
</div>
<div class="my-4">
<div class="float-end">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-secondary">Reset</button>
</div>
</div>
</form>
</div><!-- end card body -->
3) @Valid의 에러 메서드 처리
🚀 등록은 @Valid를 통해서 검증하므로 검증에 실패하면 다시 앞의 화면으로 이동
🚀 이때 addFlashAttribute()를 통해서 'errors' 라는 이름으로 에러 메시지들이 전송됨
<script layout:fragment="script" th:inline="javascript">
const errors = [[${errors}]];
console.log(errors);
let errorMsg = '';
if(errors) {
for (let i = 0; i < errors.length; i++) {
errorMsg += `${errors[i].field}은(는) ${errors[i].code} \n`;
}
alert(errorMsg);
}
</script>
💡 Thymeleaf의 인라인 기능을 이용하면 'errors'를 자바 스크립트의 배열로 처리할 수 있기 때문에 이를 이용해서 앞의 메시지를 작성할 수 있음
💡 브라우저를 통해서 아무것도 입력하지 않은 상태에서 submit이 실행되면 경고창이 보임
💡 콘솔창에는 배열로 만들어진 에러 메시지를 출력
4) 정상적인 처리와 모달창
🚀 등록 화면에서 필요한 내용들이 추가되면 정상적으로 '/board/list'로 이동하는 것을 확인
🚀 목록 화면으로 이동했을 때 BoardController에서 RedirectAttributes의 addFlashAttribute()를 이용해서 'result'라는 데이터를 추가적으로 전달. addFlashAttribute()로 전달된 데이터는 쿼리 스트링으로 처리되지 않기 때문에 브라우저의 경로에는 보이지 않음
🚀 list.html에서는 이렇게 전달된 result 변수를 이용해서 모달창으로 처리
list.html의 <script> 태그의 마지막 부분에 코드 추가
// show modal
const result = [[${result}]];
if(result) {
modal.show();
}
경고창이 동작한 것을 확인후에 모달창을 추가
- 모달창의 코드는 부트스트랩의 Componets 메뉴를 통해서 확인
✓ list.html에 모달창 코드를 추가
✓ 자바스크립트에서는 부트스트랩의 함수를 이용해서 모달창이 보이도록 처리
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>// show modal
const result = [[${result}]];
const modal = new bootstrap.Modal(document.querySelector(".modal"));
if(result) {
modal.show();
}
✓ 변경된 코드가 적용되면 등록 후에는 모달창이 보이게 되고, 직접 '/borad/list'로 접근할 때는 모달창이 보이지 않게 됨
✓ 이를 이용해서 사용자에게 어떠한 처리가 완료 되었는지에 대한 결과를 알려줄 수 있음
[ 내용 참고 : IT 학원 강의 ]
'Spring & Spring Boot' 카테고리의 다른 글
| [Spring Boot] 수정/삭제 처리 (0) | 2024.05.25 |
|---|---|
| [Spring Boot] 조회 처리 (0) | 2024.05.25 |
| [Spring Boot] 컨트롤러와 화면 처리 · 목록 화면 출력 (0) | 2024.05.25 |
| [Spring Boot] 서비스 계층과 DTO의 구현 (0) | 2024.05.25 |
| [Spring Boot] Spring Data JPA (2) Querydsl (0) | 2024.05.25 |
