개발 수업/Spring Boot
[SpringBoot] Thymeleaf(타임리프) 사용(유효성검사, 네비게이션바)
오늘 하루s
2023. 8. 28. 23:32
728x90
더보기
Day83. 230828
Thymeleaf(타임리프) 사용
유효성 검사
question_from.html>
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container">
<h5 class="my-3 border-bottom pb-2">질문등록</h5>
<form id="questionForm" th:object="${questionForm}" th:action="@{/question/add}" method="post">
<!--유효성검사시 에러메세지 출력영역-->
<div th:replace="~{form_errors::formErrorsFragment}"></div>
<div class="mb-3">
<label for="subject" class="form-label">제목</label>
<input type="text" th:field="*{subject}" class="form-control"/>
</div>
<div class="mb-3">
<label for="content" class="form-label">내용</label>
<textarea th:field="*{content}" id="content" class="form-control" rows="8"></textarea>
</div>
<input type="submit" value="질문등록(처리)" class="btn btn-primary my-2"/>
</form>
</div>
</html>
question_detail.html>
<html layout:decorate="~{layout}">
<div layout:fragment="content" class="container my-3">
<!--질문-->
<h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
<div class="card my-3">
<div class="card-body">
<div class="card-text" style="white-space:pre-line;" th:text="${question.content}"></div>
<div class="d-flax justify-content-end">
<div class="badge bg-light text-dark p-2 text-start" th:text="${#temporals.format(question.createDate,'yyyy-MM-dd HH:mm')}"></div>
</div>
</div>
</div>
<!-- 답변갯수 출력 -->
<h5 th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
<!-- 반복:답변목록시작 -->
<div>
<ul>
<li th:each="answer:${question.answerList}" th:text="${answer.content}"></li>
</ul>
</div>
<!-- 반복:답변목록끝 -->
<!-- 답변등록폼 -->
<!--<form id="answerForm" class="my-3" th:action="@{|/answer/add/${question.id}|}" method="post" >-->
<form id="answerForm" class="my-3" th:object="${answerForm}" th:action="@{|/answer/add/${question.id}|}" method="post" >
<!--유효성검사시 에러메세지 출력영역-->
<div th:replace="~{form_errors::formErrorsFragment}"></div>
<textarea th:field="*{content}" rows="8" class="form control"></textarea>
<!--<textarea name="content" rows="8" class="form control"></textarea>-->
<input type="submit" value="답변등록" class="btn btn-primary my-2"/>
</form>
</div>
-> 타임리프를 사용해 코드를 간단하게 바꿔주었다.
form_erros.html>
<div class="alert alert-danger" role="alert"
th:fragment="formErrorsFragment" th:if="${#fields.hasAnyErrors()}">
<div th:each="err:${#fields.allErrors()}" th:text="${err}"></div>
</div>
똑같이 유효성 검사가 된다.
네비게이션 바
navbar.html>
<nav th:fragment="navbarFragment" class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="/" th:href="@{/}">HOME</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">로그인(링크x)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">회원가입(링크x)</a>
</li>
</ul>
</div>
</div>
</nav>
layout.html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>APP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css"
href="/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" />
</head>
<body>
<!--navigation부분-->
<nav th:replace="~{navbar::navbarFragment}"></nav>
<!--baseTemplate안에 포함될 내용 시작-->
<th:block layout:fragment="content"></th:block>
<!--baseTemplate안에 포함될 내용 끝-->
<script src="/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
</body>
</html>
타임리프를 사용해 조각을 네비게이션 조각을 넣어준다.
글 목록에 위쪽에 네비게이션 바가 들어가 적용되었다.
728x90