본격적으로 컨트롤러와 뷰 템플릿을 개발해보았다.

 

package hello.itemservice.web.basic;

import hello.itemservice.domain.item.Item;
import hello.itemservice.domain.item.ItemRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.annotation.PostConstruct;
import java.util.List;

@Controller
@RequestMapping("/basic/items")
@RequiredArgsConstructor
public class BasicItemController {

    private final ItemRepository itemRepository;

    @GetMapping
    public String items(Model model){
        List<Item> items = itemRepository.findAll();
        model.addAttribute("items",items);
        return "basic/items";
    }

    //테스트 용 데이터
    @PostConstruct
    public void init(){
        itemRepository.save(new Item("itemA",10000,10));
        itemRepository.save(new Item("itemB",20000,20));

    }

}

컨트롤러 로직은 itemRepository에서 모든 상품을 조회한 다음에 모델에 담는다. 그리고 뷰 템플릿을 호출한다.

@RequiredArgsConstructor는 final이 붙은 멤버변수를 사용해서 생성자를 자동으로 만들어준다. 생성자가

하나뿐이라면 스프링이 의존관계를 주입해준다. 

 

테스트용 데이터를 추가 하지않으면 정상 동작하는지 확인하기 어렵다.

@PostConstruct : 해당 빈의 의존관계가 모두 주입되고 나면 초기화 용도로 호출된다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}"
            href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container" style="max-width: 600px">
    <div class="py-5 text-center">
      <h2>상품 목록</h2>
</div>

    <div class="row">
        <div class="col">
            <button class="btn btn-primary float-end"
                    onclick="location.href='addForm.html'"
                    th:onclick="|location.href='@{/basic/items/add}'|"
                    type="button">상품 등록</button>
        </div>
    </div>
    <hr class="my-4"> <div>
        <table class="table">
            <thead>
            <tr>
                <th>ID</th> <th>상품명</th> <th>가격</th> <th>수량</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item : ${items}">
                <td><a href="item.html"th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
                <td><a href="item.html"th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.itemName}">상품명</a></td>
                <td th:text="${item.price}">10000</td>
                <td th:text="${item.quantity}">10</td>
            </tr>
            </tbody>
        </table>
    </div>
</div> <!-- /container -->
</body>
</html>

기존에 있던 Html파일을 복사하여 templates하위에 붙여넣고 수정해주었다.(타임리프 문법 사용)

타임리프 선언

<html xmlns:th="http://www.thymeleaf.org">

 

속성 변경 

th:href="@{/css/bootstrap.min.css}"

href="value1"을 th:href="value2"의 값으로 변경한다.

타임리프 뷰 템플릿을 거치게 되면 원래 값을 th:xxx 값으로 변경한다. 만약 값이 없다면 새로 생성한다.

HTML을 그대로 볼 때는 href속성이 사용되고, 뷰 템플릿을 거치게 되면 th:href의 값이 href로 대체 되며 동적으로 변경가능하다.

 

타임리프 핵심

핵심은 th:xxx가 붙은 부분은 서버사이드에서 랜더링 되고 기존 것을 대체한다. th태그가 없으면 기존 속성이 그대로 사용된다.

HTML을 파일로 직접 열었을때, th:xxx가 있어도 웹 브라우저는 th: 속성을 알지 못하므로 무시한다.

따라서 HTML을 파일 보기를 유지하면서 템플릿 기능도 할 수 있다.

 

URL 링크 표현식 - @{}

th:href="@{/css/bootstrap.min.css}"

@{} : 타임리프는 URL 링크를 사용하는 경우 @{}를 사용한다. 이것을 URL 링크 표현식이라 한다.

URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다.

 

상품 등록 폼으로 이동

속성 변경 - th:onclick

onclick="location.href='addForm.html'"

th:onclick="|location.href='@{/basic/items/add}'|"

 

리터럴 대체 =|...|

타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서 사용해야 한다.

<span th:text="'Hello, '+${user.name} + '!'">

리터럴 대체 문법을 사용하면?

<span th:text="|Hello,${user.name}!|">

 

결과를 다음과 같이 만들어야한다고 가정하면

location.href='/basic/items/add'

그냥 사용할땐?

th:onclick=" 'location.href='+'\' '+ @{/basic/items/add} + '\' '"

리터럴 대체 문법 사용하면

th:onclick="|location.href='@{/basic/items/add}'|"

 

반복 출력 - th:each

<tr th:each="item : ${items}">

반복은 th:each를 사용한다. 이렇게 하면 모델에 포함된 items 컬렉션 데이터가 item변수에 하나씩 포함되고,

반복문 안에서 item 변수를 사용할 수 있다.

컬렉션의 수 만큼<tr>..</tr>이 하위 테크를 포함해서 생성된다.

 

변수 표현식 - ${...}
<td th:text="${item.price}">10000</td>
모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
프로퍼티 접근법을 사용한다.

 

내용 변경 - th:text
<td th:text="${item.price}">10000</td>

내용의 값을 th:text 의 값으로 변경한다.
여기서는 10000을 ${item.price} 의 값으로 변경한다.

 

URL 링크 표현식2 - @{...}
th:href="@{/basic/items/{itemId}(itemId=${item.id})}"
상품 ID를 선택하는 링크를 확인해보았다.
URL 링크 표현식을 사용하면 경로를 템플릿처럼 편리하게 사용할 수 있다.
경로 변수뿐만 아니라 쿼리 파라미터도 생성한다.

 

타임리프는 순수 HTML을 파일을 웹 브라우저에서 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을거치면 동적으로 변경된 결과를 확인할 수 있다. JSP는 웹 브라우저에서 그냥 열면 코드들이 섞여서 정상적인 확인이 불가능하다.
오직 서버를 통해서 JSP를 열어야 한다.
이렇게 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 내추럴 템플릿이라 한다.

'웹프로그래밍 > 스프링 MVC' 카테고리의 다른 글

57. 상품 등록 폼  (0) 2022.04.18
56. 상품 상세  (0) 2022.04.18
54. 상품 서비스 HTML  (0) 2022.04.15
53. 상품 도메인 개발  (0) 2022.04.15
52. 요구사항 분석  (0) 2022.04.14

+ Recent posts

티스토리툴바