eajni IT μ΄ˆλ³΄μ‚¬μ „ πŸ’¦πŸ’¦

[SpringBoot] Springboot board project 02


Thymleaf 문법

ν‘œν˜„ μ„€λͺ…
th:each μ»¬λ ‰μ…˜μ˜ 각 μš”μ†Œ μˆœνšŒν•˜μ—¬ 좜λ ₯
th:text ν‘œν˜„μ‹ 값을 ν…μŠ€νŠΈλ‘œ 좜λ ₯
th:if 쑰건이 참일 λ•Œ ν•΄λ‹Ή μš”μ†Œ λ Œλ”λ§
th:href URL 링크λ₯Ό λ™μ μœΌλ‘œ 생성
th:object 폼 바인딩
@{ … } URL 링크 ν‘œν˜„μ‹
| … | λ¦¬ν„°λŸ΄ λŒ€μ²΄
${ … } λ³€μˆ˜
*{ … } 선택 λ³€μˆ˜
#{ … } λ©”μ‹œμ§€. properties 같은 μ™ΈλΆ€ μžμ›μ—μ„œ μ½”λ“œμ— ν•΄λ‹Ήν•˜λŠ” λ¬Έμžμ—΄ get.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Example</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
</head>
<body>
    <h1 th:text="'Hi ' + ${user.name} + '!'">Hi User!</h1>
    
    <p th:if="${data != null}" th:text="${data}">Placeholder for data</p>

    <table>
        <thead>
            <tr>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="item: ${items}">
                <td th:text="${item.price}">100</td>
            </tr>
        </tbody>
    </table>

    <div th:if="${data != null}">
        <a th:href="@{/article/list(id=${data})}">View Articles</a>
    </div>

    <div>
        <a th:href="@{/{itemId}/edit(itemId=${item.id})}" th:each="item: ${items}">Edit Item</a>
    </div>

    <table>
        <thead>
            <tr>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr th:object="${items}">
                <td th:text="*{price}">100</td>
            </tr>
        </tbody>
    </table>

    <p th:text="#{member.register}">Register Member</p>
</body>
</html>


@Controller
public class ExampleController {

    @GetMapping("/example")
    public String example(Model model) {
        List<Item> items = Arrays.asList(
            new Item(1, "Item 1", 100),
            new Item(2, "Item 2", 200)
        );

        model.addAttribute("items", items);
        model.addAttribute("user", new User("John Doe"));
        model.addAttribute("data", "Example Data");

        return "example";
    }
}

νŽ˜μ΄μ§•

  • μŠ€ν”„λ§μ—μ„œλŠ” νŽ˜μ΄μ§•μ„ μ²˜λ¦¬ν•˜κΈ° μœ„ν•œ λ³„λ„μ˜ λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μ—†μ–΄ JPA의 객체 μ‚¬μš©
    • Page
    • Pageable
    • PageRequest
  1. QuestionRepository.java 에 findAll λ©”μ†Œλ“œ μ„ μ–Έ
Page<Question> findAll(Pageable pageable);
  1. QuestionService.java에 getListλ©”μ†Œλ“œ λ³€κ²½
public Page<Question> getList(int page) {
Pageable pageable = PageRequest.of(page, 10);
//page=μ‘°νšŒν•  νŽ˜μ΄μ§€ 번호
//κ²Œμ‹œλ¬Ό 10κ°œμ”© 좜λ ₯
return this.questionRepository.findAll(pageable);
}
  1. QuestionController.java 에 listλ©”μ†Œλ“œ λ³€κ²½
@GetMapping("/list")
public String list(Model model, 
			@RequestParam(value="page", defaultValue="0") int page) {
   <!--νŽ˜μ΄μ§€ νŒŒλΌλ―Έν„°κ°€ μ „λ‹¬λ˜μ§€ μ•Šμ€ 경우 λ””ν΄νŠΈ κ°’ 0-->
			Page<Question> paging = this.questionService.getList(page);
	model.addAttribute("paging", paging);
	return "question_list";
}
ν•­λͺ© μ„€λͺ…
paging.isEmpty νŽ˜μ΄μ§€ 쑴재 μ—¬λΆ€ (κ²Œμ‹œλ¬Όμ΄ 있으면 false, μ—†μœΌλ©΄ true)
paging.totalElements 전체 κ²Œμ‹œλ¬Ό 개수
paging.totalPages 전체 νŽ˜μ΄μ§€ 개수
paging.size νŽ˜μ΄μ§€λ‹Ή 보여쀄 κ²Œμ‹œλ¬Ό 개수
paging.number ν˜„μž¬ νŽ˜μ΄μ§€ 번호
paging.hasPrevious 이전 νŽ˜μ΄μ§€ 쑴재 μ—¬λΆ€
paging.hasNext λ‹€μŒ νŽ˜μ΄μ§€ 쑴재 μ—¬λΆ€
  1. question_list.html 에 루프 λ²”μœ„ λ³€κ²½
<tr th:each="question, loop : ${paging}">

νŽ˜μ΄μ§€ 이동 리슀트

  1. question_list.html 에 νŽ˜μ΄μ§• 리슀트 μ½”λ“œ μΆ”κ°€
<div th:if="${!paging.isEmpty()}">
<ul class="pagination justify-content-center">
	<li class="page-item" th:classappend="${!paging.hasPrevious} ? 'disabled'">
		<!-- 이전 νŽ˜μ΄μ§€κ°€ μ—†μœΌλ©΄ λΉ„ν™œμ„±ν™” -->
		<a class="page-link"
		th:href="@{|?page=${paging.number-1}|}">
			<!-- 이전 νŽ˜μ΄μ§€ 링크-->
			<span>이전</span>
		</a>
	</li>
	<!-- 0~(total-1)νŽ˜μ΄μ§€κΉŒμ§€ 루프-->
	<li th:each="page: ${#numbers.sequence(0, paging.totalPages-1)}" 
	th:if="${page >= paging.number-5 and page <= paging.number+5}"
	th:classappend="${page == paging.number} ? 'active'" class="page-item">
		<!--ν˜„μž¬νŽ˜μ΄μ§€μ΄λ©΄ ν™œμ„±ν™”-->
		<a th:text="${page}" class="page-link" th:href="@{|?page=${page}|}"></a>
	</li>
	<li class="page-item" th:classappend="${!paging.hasNext} ? 'disabled'">
		<!-- λ‹€μŒ νŽ˜μ΄μ§€κ°€ μ—†μœΌλ©΄ λΉ„ν™œμ„±ν™” -->
		<a class="page-link" th:href="@{|?page=${paging.number+1}|}">
		<!-- λ‹€μŒ νŽ˜μ΄μ§€ 링크-->
			<span>λ‹€μŒ</span>
		</a>
	</li>
</ul>
</div>


Comments

Content