[Thymeleaf] Tags

SEOP·2024년 6월 14일
Thymeleaf
0
post-thumbnail

DTO
데이터를 주고 받을 때는 Entity 클래스 자체를 반환하면 안 되고 데이터 전달용 객체 즉, DTO를 생성해서 사용해야 한다.

Why?

데이터베이스의 설계를 외부에 노출할 필요도 없으며, 요청과 응답 객체가 항상 엔티티와 같지 않기 때문이다.

1. th.text

controller

    @RequestMapping(value = "/ex02")
    public String thymeleafExample02(Model model){

        ItemDto itemDto = new ItemDto();
        itemDto.setItemDetail("상품 상세 설명");
        itemDto.setItemNm("테스트 상품1");
        itemDto.setPrice(10000);
        itemDto.setRegTime(LocalDateTime.now());

        model.addAttribute("itemDto",itemDto);
        return "thymeleafEx/thymeleafEx02";                //templages 폴더를 기준으로 뷰의 위치,이름 반환
    }

View

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">        <!--thymeleaf 문법을 사용하기 위해 추가 -->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>상품 데이터 출력 예제</h1>
    <div>
        상품명 : <span th:text="${itemDto.itemNm}"></span>
    </div>
    <div>
        상품상세설명 : <span th:text="${itemDto.itemDetail}"></span>
    </div>
    <div>
        상품등록일 : <span th:text="${itemDto.regTime}"></span>
    </div>
    <div>
        상품가격 : <span th:text="${itemDto.price}"></span>
    </div>

</body>
</html>

2. th:each

controller

    @GetMapping(value = "/ex03")
    public String thymeleafExample03(Model model){

        List<ItemDto> itemDtoList = new ArrayList<>();
        for(int i = 1 ; i <=10 ; i++ ) {
            ItemDto itemDto = new ItemDto();
            itemDto.setItemDetail("상품 상세 설명" + i);
            itemDto.setItemNm("테스트 상품1" + i);
            itemDto.setPrice(10000 * i);
            itemDto.setRegTime(LocalDateTime.now());

            itemDtoList.add(itemDto);
        }
        model.addAttribute("itemDtoList", itemDtoList);  //key,value 넣어주기
        return "thymeleafEx/thymeleafEx03";              //templages 폴더를 기준으로 뷰의 위치,이름 반환
    }

View

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <h1>상품 리스트 출력 예제</h1>

  <table border="1">
      <thead>
      <tr>
          <td>순번</td>
          <td>상품명</td>
          <td>상품설명</td>
          <td>가격</td>
          <td>상품등록일</td>
      </tr>
      </thead>
      <tbody>
      <tr th:each="itemDto, status: ${itemDtoList}">  <!-- th:each를 이용하면 자바의 for문처럼 반복문 사용 가능
                                                           전달받은 itemDtoList에 있는 데이터를 하나씩 꺼내와서 itemDto에 담아준다.
                                                           status는 현재 반복에 대한 상태 데이터가 존재 변수명은 status 대신
                                                           다른 것 사용 가능 -->
          <td th:text="${status.index}"></td>         <!--현재 순회하고 있는 데이터의 인덱스 출력-->
          <td th:text="${itemDto.itemNm}"></td>
          <td th:text="${itemDto.itemDetail}"></td>
          <td th:text="${itemDto.price}"></td>
          <td th:text="${itemDto.regTime}"></td>
      </tr>
      </tbody>
  </table>

</body>
</html>

3. th:if , th:unless

controller

    @GetMapping(value = "/ex04")
    public String thymeleafExample04(Model model){

        List<ItemDto> itemDtoList = new ArrayList<>();

        for(int i = 1; i <= 10; i++ ){
            ItemDto itemDto = new ItemDto();
            itemDto.setItemDetail("상품 상세 설명" + i);
            itemDto.setItemNm("테스트 상품1" + i);
            itemDto.setPrice(10000 * i);
            itemDto.setRegTime(LocalDateTime.now());

            itemDtoList.add(itemDto);
        }
        model.addAttribute("itemDtoList",itemDtoList);
        return "thymeleafEx/thymeleafEx04";            //templages 폴더를 기준으로 뷰의 위치,이름 반환
    }

View

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <h1>상품 리스트 출력 예제</h1>

  <table border="1">
      <thead>
      <tr>
          <td>순번</td>
          <td>상품명</td>
          <td>상품설명</td>
          <td>가격</td>
          <td>상품등록일</td>
      </tr>
      </thead>
      <tbody>
      <tr th:each="itemDto, status: ${itemDtoList}">      <!-- th:each를 이용하면 자바의 for문처럼 반복문 사용 가능
                                                               전달받은 itemDtoList에 있는 데이터를 하나씩 꺼내와서 itemDto에 담아준다.
                                                               status는 현재 반복에 대한 상태 데이터가 존재 변수명은 status 대신
                                                               다른 것 사용 가능 -->
          <td th:if="${status.even}" th:text="짝수"></td>   <!--현재 반복에 대한 정보 존재.. 인덱스가 짝수 일 경우 true라서 출력-->
          <td th:unless="${status.even}" th:text="홀수"></td> <!--현재 반복에 대한 정보 존재.. 인덱스가 홀수 일 경우 false라서 무시-->
          <td th:text="${itemDto.itemNm}"></td>
          <td th:text="${itemDto.itemDetail}"></td>
          <td th:text="${itemDto.price}"></td>
          <td th:text="${itemDto.regTime}"></td>
      </tr>
      </tbody>
  </table>

</body>
</html>

4. th:switch , th:case

controller

    @GetMapping(value = "/ex04")
    public String thymeleafExample04(Model model){

        List<ItemDto> itemDtoList = new ArrayList<>();

        for(int i = 1; i <= 10; i++ ){
            ItemDto itemDto = new ItemDto();
            itemDto.setItemDetail("상품 상세 설명" + i);
            itemDto.setItemNm("테스트 상품1" + i);
            itemDto.setPrice(10000 * i);
            itemDto.setRegTime(LocalDateTime.now());

            itemDtoList.add(itemDto);
        }
        model.addAttribute("itemDtoList",itemDtoList);
        return "thymeleafEx/thymeleafEx04";            //templages 폴더를 기준으로 뷰의 위치,이름 반환
    }

View

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <h1>상품 리스트 출력 예제</h1>

  <table border="1">
      <thead>
      <tr>
          <td>순번</td>
          <td>상품명</td>
          <td>상품설명</td>
          <td>가격</td>
          <td>상품등록일</td>
      </tr>
      </thead>
      <tbody>
      <tr th:each="itemDto, status: ${itemDtoList}">      <!-- th:each를 이용하면 자바의 for문처럼 반복문 사용 가능
                                                               전달받은 itemDtoList에 있는 데이터를 하나씩 꺼내와서 itemDto에 담아준다.
                                                               status는 현재 반복에 대한 상태 데이터가 존재 변수명은 status 대신
                                                               다른 것 사용 가능 -->
  <!--        <td th:if="${status.even}" th:text="짝수"></td>   &lt;!&ndash;현재 반복에 대한 정보 존재.. 인덱스가 짝수 일 경우 true라서 출력&ndash;&gt;-->
  <!--        <td th:unless="${status.even}" th:text="홀수"></td> &lt;!&ndash;현재 반복에 대한 정보 존재.. 인덱스가 홀수 일 경우 false라서 무시&ndash;&gt;-->
          <!--위는 th:if , th:unless 이용 // 아래는 th:switch, th:case 이용-->
          <td th:switch="${status.even}">     <!--${status.even} 값이 true면 짝수 false면 홀수-->
              <span th:case="true">짝수</span>
              <span th:case="false">홀수</span>
          </td>
          <td th:text="${itemDto.itemNm}"></td>
          <td th:text="${itemDto.itemDetail}"></td>
          <td th:text="${itemDto.price}"></td>
          <td th:text="${itemDto.regTime}"></td>
      </tr>
      </tbody>
  </table>

</body>
</html>

5. th:href

controller

    @GetMapping(value = "/ex05")
    public String thymeleafExample05(Model model){
        return "thymeleafEx/thymeleafEx05";                //templages 폴더를 기준으로 뷰의 위치,이름 반환
    }

View

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <h1>Thymeleaf 링크처리 예제 페이지</h1>
      <div>
          <a th:href="@{/thymeleaf/ex01}">예제1 페이지 이동</a>  <!--클릭 시, 이전에 작성했던 예제1 페이지 이동
                                                                 th:href="@{이동경로}" 형태
                                                                 스프링부트에서 / <- root
                                                                 따라서, /shop/thymeleaf/ex01로 찾아간다.
                                                             -->
      </div>
      <div>
          <a th:href="@{https://www.thymeleaf.org}">Thymeleaf 공식 페이지 이동</a>
      </div>

</body>
</html>

6. th:href 파라미터 이용시

View

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <h1>Thymeleaf 링크처리 예제 페이지</h1>
      <div>
          <a th:href="@{/thymeleaf/ex01}">예제1 페이지 이동</a>  <!--클릭 시, 이전에 작성했던 예제1 페이지 이동
                                                                 th:href="@{이동경로}" 형태
                                                                 스프링부트에서 / <- root
                                                                 따라서, /shop/thymeleaf/ex01로 찾아간다.
                                                             -->
      </div>
      <div>
          <a th:href="@{https://www.thymeleaf.org}">Thymeleaf 공식 페이지 이동</a>
      </div>
      <div>
          <a th:href="@{/thymeleaf/ex06(param1 = '파라미터 데이터1', param2 = '파라미터 데이터2' )}">Thymeleaf 파라미터 전달</a>
          <!--전달할 매개변수를 입력한 경로 끝에 key=value 구조로 입력-->
      </div>

</body>
</html>

controller

@GetMapping(value = "/ex06")
public String thymeleafExample06(String param1,     //전달했던 매개변수와 같은 이름와 같은 이름의 String 변수 param1,param2를
                                 String param2,     //파라미터로 설정하면 자동으로 데이터가 바인딩
                                 Model model){
    model.addAttribute("param1",param1);
    model.addAttribute("param2",param2);
    return "thymeleafEx/thymeleafEx06";                //templages 폴더를 기준으로 뷰의 위치,이름 반환
}

View

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h1>파라미터 전달 예제</h1>
    <div th:text="${param1}"></div>     <!--전달받은 매개변수 값 출력-->
    <div th:text="${param2}"></div>

</body>
</html>
profile
SEOP
응애 나 애기 개발자
이전 포스트

[백준/Java] 3003 : 킹, 퀸, 룩, 비숍, 나이트, 폰

다음 포스트

[Oracle] USER 삭제 오류

0개의 댓글