[ElectionPJT] Thymeleaf로 화면 구성하기
25914 단어 ElectionPJTElectionPJT
1. 홈화면
Controller
@Controller
@Slf4j
@RequiredArgsConstructor
public class HomeController {
private final CityService cityService;
@GetMapping("/")
public String home(Model model) {
log.info("home controller");
List<CityResponseDto> cities = cityService.findCityList();
model.addAttribute("cities", cities);
return "home";
}
}
html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
<title>Hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
<div th:replace="fragments/bodyHeader :: bodyHeader" />
<div class="jumbotron"> <h1>Welcome</h1>
<p class="lead">도시를 선택해주세요</p>
<form role="form" action="/candidates" method="get">
<div class="form-group">
<select name="cityId" id="city" class="form-control">
<option value="">select your address</option>
<option th:each="city : ${cities}"
th:value="${city.id}"
th:text="${city.SSG_2}" />
</select>
</div>
<br>
<button type="submit" class="btn btn-secondary">submit</button>
<br>
</form>
</div>
<br>
<div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
화면 출력
2. 후보 리스트 화면
Controller
@Controller
@RequiredArgsConstructor
@Slf4j
public class CandidateController {
private final CandidateService candidateService;
@GetMapping("/candidates")
public String list(@RequestParam("cityId") Long cityId,
Model model) {
log.info("candidate listing");
List<CandidateResponseDto> candidateList = candidateService.findCandidateListByCityId(cityId);
model.addAttribute("candidates", candidateList);
return "candidate/candidateList";
}
}
html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"/>
<body>
<div class="container">
<div th:replace="fragments/bodyHeader :: bodyHeader"/>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>선거 번호</th> <th>후보명</th>
</tr>
</thead>
<tbody>
<tr th:each="candidate : ${candidates}">
<td th:text="${candidate.number}"></td>
<td th:text="${candidate.name}"></td>
<td>
<a href="#" th:href="@{/sns/{id} (id=${candidate.id})}" class="btn btn-primary" role="button">SNS</a>
</td>
<td>
<a href="#" th:href="@{/youtube/{id} (id=${candidate.id})}" class="btn btn-primary" role="button">youtube</a>
</td>
</tr>
</tbody>
</table>
</div>
<div th:replace="fragments/footer :: footer"/>
</div> <!-- /container -->
</body>
</html>
화면 출력
Author And Source
이 문제에 관하여([ElectionPJT] Thymeleaf로 화면 구성하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mincho920/ElectionPJT-Thymeleaf로-화면-구성하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)