Thymeleafを使用して画面を構成する

26296 ワード
ElectionPJT テキストリンク

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>

スクリーン出力


ES 6 classクラスおよび継承
Vscodeガイド.入力グループ