개인 자료 정리 홈페이지 입니다.

Note > thymeleaf

Note > thymeleaf너무 복잡한거 아닌가?

By a3040, Published on Invalid Date

익숙하지 않아서 그럴거라고 생각합니다. 하지만

<td class="border-2 mt-2 p-2" th:text="${question.title}" th:onclick="_load([[ @{/admin/questions/{topicId}/{id}(id=${question.id}, topicId=${topicId})} ]] )"></td>

<td class="border-2 mt-2 p-2" th:text="${#temporals.format(question.createdAt, 'yyyy.MM.dd')}"></td>


const list_url = /*[[@{/admin/questions/list/{topicId}(topicId=${topicId}) }]]*/'';

이런 형태를 쓰다보면 현타가 오는군요.

하지만 Thymeleaf는 서버 측에서 동적으로 HTML을 생성하는데 사용되는 템플릿 엔진입니다..

HTML과 Thymeleaf 태그를 혼합해서 사용하면 웹 페이지를 동적으로 생성할 수 있습니다.

Thymeleaf에서 지원하는 유연하고 강력한 기능들 중 하나가 자바 코드를 HTML 코드로 직접 작성할 수 있는 것입니다.

이는 자바 개발자들이 HTML 태그와 자바 코드를 섞어서 작업할 수 있어서 생산성을 높일 수 있는 장점이 있습니다.



const topicId = /*[[${topicId}]]*/'';
const loc_list = /*[[@{/admin/questions/list }]]*/'';


_list('/admin/topic/list', 'topic');

/*
if (mode == "list") {
//    const init_loc_list = `${loc_list}/[[${topicId}]]`;  //이해를 못해서 javascript와 인라인표현식 동시사용
    const init_loc_list = `${loc_list}/${topicId}`; //아 위에서 javascript 변수 topicId가 됐었지..
    _list(init_loc_list, 'adminBody');
}  
*/


if (mode == "list") {
    go_list(topicId); //...
}

function go_list(topicId) {
    const go_loc_list = `${loc_list}/${topicId}`;
    _list(go_loc_list)
}
 



----장점이 느껴질때까지 한번 써봐야군요.

Note > thymeleafth:each

By a3040, Published on Invalid Date

내가 가장 먼저 찾아본 속성인것 같습니다.


th:each는 Thymeleaf에서 반복문을 처리하는 데 사용되는 속성입니다.

th:each 속성은 리스트나 배열과 같은 컬렉션을 순회하면서 템플릿 내부에 반복적으로 값을 표시하거나 조작할 수 있도록 해줍니다.


예를 들어, 다음과 같은 리스트가 있다고 가정해봅시다.


List<String> fruits = Arrays.asList("apple", "banana", "cherry", "date");

model.addAttribute("fruits", fruits);



이렇게 추가후에


이 리스트를 Thymeleaf를 사용하여 템플릿에 표시하려면, 다음과 같은 코드를 사용할 수 있습니다.


<ul>
  <li th:each="fruit : ${fruits}" th:text="${fruit}"></li>
</ul>


위의 코드에서 th:each 속성은 fruits 리스트를 순회하며, 각 아이템을 fruit 변수에 할당합니다. 그리고 th:text 속성을 사용하여 각 li 요소의 내용을 fruit 변수로 설정합니다. 결과적으로 아래와 같은 HTML 코드를 생성합니다.


<ul>
  <li>apple</li>
  <li>banana</li>
  <li>cherry</li>
  <li>date</li>
</ul>




//Controller에서

String[] importances = CommonOptions.getImportance();
model.addAttribute("importances", importances);


//template에서
<select name="importance">
    <option th:each="important : ${importances}" th:value="${important}"
        th:selected="${'중' == important}" th:text="${important}"></option> 
</select>



https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#using-theach

Note > thymeleaf템플릿에 변수 전달하기 th:with="onevar=${value1},twovar=${value2}

By a3040, Published on Invalid Date

<div th:replace="~{::frag}" th:with="onevar=${value1},twovar=${value2}">
<div th:replace="~{::frag (onevar=${value1},twovar=${value2})}">


Tutorial: Using Thymeleaf


공통 템플릿 페이징을 만들 경우

list에서는 members 라는 페이징이 들어간 변수를 사용하게 되고, paging 템플릿에서는 page라는 변수를 사용하게 된는 경우가 있습니다.

이렇게 변수명을 변경해서 전달할 경우나 변수추가가 필요한 경우 사용됩니다.


contorller

    @GetMapping(value={"/aman/member/list", "/aman/member"})
    public String getMembers(HttpServletRequest request, Model model, @RequestParam(defaultValue = "1") int page) {
        Page<Member> members = memberService.getAllMembers(page);
        model.addAttribute("members", members); //페이징 정보가 들어가 멤버들
        return "aman/member/list";
    }


타임리프 aman/member/list에서

<body  class="container mx-auto">
    <div th:replace="~{fragments/header :: header}"></div> 
    <div th:replace="~{member/list :: list}"></div> 
    <div th:replace="~{common/paging :: nav(page=${members},twovar=${value2})}"></div> 
    <div th:replace="~{fragments/footer :: footer}"></div>
</body>


paging 템플릿 에서

<nav th:if="${page.totalPages > 1}">
    <info th:text="${#ctx.springRequestContext.requestUri}"></info>
    <ul class="pagination">
        <li class="page-item" th:classappend="${page.first ? 'disabled' : ''}">
            <a class="page-link" th:href="@{${url}(page=1)}">First</a>
        </li>
        <li class="page-item" th:classappend="${page.first ? 'disabled' : ''}">
            <a class="page-link" th:href="@{${url}(page=${page.number - 1})}">Previous</a>
        </li>
        <li class="page-item" th:each="i : ${#numbers.sequence(1, page.totalPages)}"
            th:classappend="${page.number+1 == i ? 'active' : ''}">
            <a class="page-link" th:href="@{${url}(page=${i})}" th:text="${i}"></a>
        </li>
        <li class="page-item" th:classappend="${page.last ? 'disabled' : ''}">
            <a class="page-link" th:href="@{${url}(page=${page.number + 1})}">Next</a>
        </li>
        <li class="page-item" th:classappend="${page.last ? 'disabled' : ''}">
            <a class="page-link" th:href="@{${url}(page=${page.totalPages})}">Last</a>
        </li>
    </ul>
</nav>