12. list.html
[파일위치 : src/main/resources/templates/list.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/main.css}">
</head>
<body>
<h2>상품목록</h2>
<form method="post">
상품명: <input type="text" name="productName" th:value="${productName}">
<input type="submit" value="조회">
</form>
<br>
<button type="button" onclick="location.href='write'">상품등록</button>
<hr>
등록된 상품개수: [[${#lists.size(list)}]]
<div style="display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;">
<div th:each="row:${list}" style="margin:5px;">
<img th:if="${row.filename != '-' }" th:src="@{/images/}+${row.filename}" width="100px" height="100px">
<span th:if="${row.filename == '-' }">[상품 이미지 미등록]<br></span>
<a th:href="@{/detail/}+${row.productCode}">
<br>
상품명: [[${row.productName}]]<br>
가격: [[${#numbers.formatInteger(row.price, 0, 'COMMA')}]]원</a>
</div>
</div>
</body>
</html>
[해설]
<link rel="stylesheet" th:href="@{/css/main.css}">
타임리프는 html 파일을 템플릿으로 사용합니다.
템플릿 html을 변환하여 실제 화면에 출력되는 html 을 만들게 됩니다.
th:href="@{/css/main.css}"
th:속성 th는 thymeleaf의 약자입니다.
<link rel="stylesheet" th:href="@{/css/main.css}">
th:href는 타임리프 엔진에서 처리되는 부분입니다.
@{} 요소는 정적인 컨텐츠입니다. 정적인 컨텐츠란 이미지, css, javascript 소스 등 바뀌지 않고 고정적인 컨텐츠를 의미합니다.
스프링 부트에서는 src/main/resources 하위에 static 디렉토리가 있습니다.
등록된 상품개수: [[${#lists.size(list)}]]
타임리프에서 [[ 변수 ]] 는 변수의 내용을 출력하는 코드입니다.
변수는 ${변수} 와 같이 표현합니다.
집합변수의 사이즈(배열의 크기)를 계산할 때는 #lists.size(집합변수) 함수를 사용합니다.
<div style="display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;">
상품목록을 한 줄에 5개씩 표현하기 위하여 fr(fraction)을 사용했습니다.
grid-template-rows: 1fr;
한 줄에 하나의 row를 사용합니다.
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
한 줄에 5개의 컬럼을 사용합니다. 5개의 컬럼의 비율은 모두 같습니다.
<div th:each="row:${list}" style="margin:5px;"></div>
th:each는 반복문입니다.
th:each="개별변수 : 집합변수" 입니다.
개별변수는 row로 하고 ${list}가 컨트롤러에서 전달된 집합변수입니다.
<img th:if="${row.filename != '-' }" th:src="@{/images/}+${row.filename}" width="100px" height="100px">
th:if 는 조건을 검사하는 기능입니다.
th:if="조건식" 조건이 true이면 태그 내용을 출력하고 조건이 false이면 출력하지 않습니다.
th:src="@{/images/}+${row.filename}"
정적인 리소스를 출력할 때는 @ 를 사용해야 합니다.
src/main/resources/static/images 디렉토리에 저장된 이미지파일이 화면에 출력됩니다.
<span th:if="${row.filename == '-' }">[상품 이미지 미등록]<br></span>
첨부파일이 없는 경우 [상품 이미지 미등록] 텍스트가 출력됩니다.
<a th:href="@{/detail/}+${row.productCode}">
<br>
상품 상세 화면을 보여주는 링크입니다.
상품코드가 1번이라면 http://localhost/detail/1 로 넘어가게 됩니다.
가격: [[${#numbers.formatInteger(row.price, 0, 'COMMA')}]]원</a>
#numbers.formatInteger() 함수를 이용하여 천단위 마다 컴머를 출력했습니다.
| 번호 | 제목 | 작성자 | 작성일 | 추천 | 조회 |
| 19 |
상품 삭제
vita
|
2023.11.15
|
추천 0
|
조회 132
|
vita | 2023.11.15 | 0 | 132 |
| 18 |
상품 수정
vita
|
2023.11.15
|
추천 0
|
조회 112
|
vita | 2023.11.15 | 0 | 112 |
| 17 |
상품 상세
vita
|
2023.11.15
|
추천 0
|
조회 125
|
vita | 2023.11.15 | 0 | 125 |
| 16 |
상품 등록
vita
|
2023.11.15
|
추천 0
|
조회 105
|
vita | 2023.11.15 | 0 | 105 |
| 15 |
상품 목록
vita
|
2023.11.15
|
추천 0
|
조회 147
|
vita | 2023.11.15 | 0 | 147 |
| 14 |
14. detail.html
vita
|
2023.11.15
|
추천 0
|
조회 119
|
vita | 2023.11.15 | 0 | 119 |
| 13 |
13. write.html
vita
|
2023.11.15
|
추천 0
|
조회 135
|
vita | 2023.11.15 | 0 | 135 |
| 12 |
12. list.html
vita
|
2023.11.15
|
추천 0
|
조회 131
|
vita | 2023.11.15 | 0 | 131 |
| 11 |
11. error.html
vita
|
2023.11.15
|
추천 0
|
조회 123
|
vita | 2023.11.15 | 0 | 123 |
| 10 |
10. main.css
vita
|
2023.11.15
|
추천 0
|
조회 119
|
vita | 2023.11.15 | 0 | 119 |