질문 등록 처리 및 유효성검사
question_list 에 질문 등록하기 버튼 만들기
테이블 아래에 추가하기
QuestionController
//질문 등록하기
@GetMapping("/create")
public String questionCreate() {
return "question_form";
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout::head"></head>
<body>
<div class="container my-3">
<h5 class="border-bottom pb-2">질문등록</h5>
<form th:action="@{/question/create}" method="post">
<div class="mb-3">
<label for="subject" class="form-label">제목</label>
<input type="text" name="subject" id="subject" class="form-control" />
</div>
<div class="mb-3">
<label for="content" class="form-label">내용</label>
<textarea
name="content"
id="content"
class="form-control"
rows="10"
></textarea>
</div>
<input type="submit" value="저장하기" class="btn btn-primary my-2" />
</form>
</div>
</body>
</html>
name=conetnet, subject로 넘어감
QuestionController
//질문 등록 처리하기
@PostMapping("/create")
public String questionCreate(@RequestParam String subject, @RequestParam String content) {
return "redirect:/question/list"; //질문 저장 후 질문목록으로 이동
}
파라미터 잘 넘어오는지 테스트하기
@RequestParam String subject 은 @RequestParam(" subject ") String subject 로도 사용이 가능한데
이름이 같으면 생략가능하다.
QuestionService
//질문 등록 처리
public void create(String subject , String content) {
Question q = new Question();
q.setSubject(subject);
q.setContent(content);
q.setCreateDate(LocalDateTime.now());
this.qRepo.save(q);
}
QuestionController 에 서비스 연결
//질문 등록 처리하기
@PostMapping("/create")
public String questionCreate(@RequestParam String subject,
@RequestParam String content) {
qService.create(subject, content);
return "redirect:/question/list"; //질문 저장 후 질문목록으로 이동
}
테스트하기
유효성검사
현재는 공백으로 넣으면 그대로 작성이 완료된다 그래서 유효성 검사를 추가할 것
https://blog.naver.com/drv982/222921130167
질문 등록하기, 유효성 검사
질문 등록을 하려면 먼저 "질문 등록하기" 버튼을 만들어야 한다. 다음처럼 질문 목록 하단에 버...
blog.naver.com
QuestionForm 생성
package com.mysite.sbb.question;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.Size;
import lombok.Getter;
import lombok.Setter;
@Getter
@Setter
public class QuestionForm {
@NotBlank(message = "제목은 필수 사항입니다.")
@Size(max = 200, message = "제목은 200자 이하입니다.")
private String subject;
@NotBlank(message = "내용은 필수 항목입니다.")
@Size(min = 10, message = "내용은 10자 이상입니다.")
private String content;
}
QuestionController 유효성 검사 추가
//질문 등록 처리하기
@PostMapping("/create")
public String questionCreate(@Valid QuestionForm questionForm, BindingResult result) {
if(result.hasErrors()) {
return"question_form"; //유효성 검사 에러
}
qService.create(questionForm.getSubject(), questionForm.getContent());
return "redirect:/question/list"; //질문 저장 후 질문목록으로 이동
}
requestParam을 만들어 놓은 queestionForm 객체로 변경함
question_form.html 에러메세지 출력하도록 form 수정
<form
th:action="@{/question/create}"
th:object="${questionForm}"
method="post"
>
<div
class="alert alert-danger"
role="alert"
th:if="${#fields.hasAnyErrors()}"
>
<div th:each="err : ${#fields.allErrors()}" th:text="${err}" />
</div>
검증에 실패할 경우 오류메시지를 출력할 수 있도록 수정했다.
#fields.hasAnyErrors가 true인 경우는 QuestionForm 검증이 실패한 경우이다. QuestionForm에서 검증에 실패한 오류 메시지는 #fields.allErrors()로 구할 수 있다. 부트스트랩의 alert alert-danger 클래스를 사용하여 오류는 붉은 색으로 표시되도록 했다. 그리고 이렇게 오류를 표시하기 위해서는 타임리프의 th:object 속성이 반드시 필요하다. th:object를 사용하여 폼의 속성들이 QuestionForm의 속성들로 구성된다는 점을 타임리프 엔진에 알려줘야 하기 때문이다.
그리고 템플릿을 위와 같이 수정할 경우 QuestionController의 GetMapping으로 매핑한 메서드도 다음과 같이 변경해야 한다. 왜냐하면 question_form.html 템플릿은 "질문 등록하기" 버튼을 통해 GET 방식으로 요청되더라도 th:object에 의해 QuestionForm 객체가 필요하기 때문이다.
https://blog.naver.com/drv982/222921130167
//질문 등록하기
@GetMapping("/create")
public String questionCreate(QuestionForm questionForm) {
return "question_form";
}
테스트하기
현재 상황에서는
만약 제목이나 내용 중 하나만 입력하고 저장하기를 눌렀을 때
유효성 검사가 되면서 입력했던 내용이 사라지는 현상이 일어난다.
그래서 그 내용을 유지할 수 있게 input 태그를 수정할 것
<input type="text" th:field="*{subject}" class="form-control" />
<textarea th:field="*{content}" class="form-control" rows="10"></textarea>
