질문 등록 처리 및 유효성검사

728x90

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://beanvalidation.org/

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>

728x90

'BACKEND > SpringBoot' 카테고리의 다른 글

에러 창 , 네브바 모듈화 (2)	2023.11.09
답변(Answer) 유효성 검사 추가 (0)	2023.11.09
부분 모듈화 ( th:fragment / th:replace ) (0)	2023.11.09
질문 목록/상세보기 - 부트스트랩 적용 (0)	2023.11.09
스태틱 디렉터리와 스타일시트 (0)	2023.11.09

유효성검사

'BACKEND > SpringBoot' 카테고리의 다른 글

티스토리툴바