참고: Hierarchical-style layouts

> 예제에서는 뷰 템플릿을 최대한 간단하게 설명하려고, header , footer 같은 템플릿 파일을 반복해서 포 함한다. 

다음 링크의 Hierarchical-style layouts을 참고하면 이런 부분도 중복을 제거할 수 있다.

> https://www.thymeleaf.org/doc/articles/layouts.html

 

home.html 코드

<!--include--> 
<head th:replace="fragments/header :: header">

<div th:replace="fragments/bodyHeader :: bodyHeader" />

<div th:replace="fragments/footer :: footer" />

Hierarchical-style layouts을 참고하여 처리하면 이 코드들을 html마다 삽입해야 하는 중복을 제거할 수 있다

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<!--include-->
<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">
    <!--include-->
    <div th:replace="fragments/bodyHeader :: bodyHeader" />
    <div class="jumbotron">
        <h1>HELLO SHOP</h1>
        <p class="lead">회원 기능</p>
        <p>
            <a class="btn btn-lg btn-secondary" href="/members/new">회원 가입</a>
            <a class="btn btn-lg btn-secondary" href="/members">회원 목록</a>
        </p>
        <p class="lead">상품 기능</p>
        <p>
            <a class="btn btn-lg btn-dark" href="/items/new">상품 등록</a>
            <a class="btn btn-lg btn-dark" href="/items">상품 목록</a>
        </p>
        <p class="lead">주문 기능</p>
        <p>
            <a class="btn btn-lg btn-info" href="/order">상품 주문</a>
            <a class="btn btn-lg btn-info" href="/orders">주문 내역</a>
        </p>
    </div>
    <!--include-->
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

 

강의 영상 대로 따라가면 css가 안먹음

header에 css link 아래 걸로 교체

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

 

 

그외 참조 아이들
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

 

 

==========================================================================

웹 계층 개발

validation 사용

build.gradle에 추가

// validation
implementation 'org.springframework.boot:spring-boot-starter-validation'

 

저작자표시 비영리 변경금지

'프로그래밍 > SpringBoot & JPA Use1' 카테고리의 다른 글

상품 수정 - 변경 감지와 병합 ★★★★★  (0) 2022.06.20
회원 등록, 조회 & 폼 객체 vs 엔티티 직접 사용  (0) 2022.06.20
구현(회원, 상품, 주문 도메인 개발) - 도메인 모델 패턴  (0) 2022.06.19
애플리케이션 구현 준비  (0) 2022.06.19
연관관계 (편의) 메서드  (0) 2022.06.19

+ Recent posts

티스토리툴바