본문 바로가기
spring boot

theyeleaf 사용

by improve 2024. 4. 1.

 

 

 

package 형식은 이렇게 만들었습니다.

 

 

maven 의존성 추가를 해준다.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

 

 

 

 

main/main

MainController

-> main.html >>common.html (head,nav)

/layout/common:: head(‘main’)





MemberController

/main/member

->member.html >>common.html (head,nav)



TodoController

/main/todo

->todo.html >>common.html (head,nav)

 

흐름의 형식은 이렇게 됩니다.

 

 

•main.MainController

package com.mh.restapi05.main;


import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

/*
@RestController   -> UserEntity JSON {"key": "value"}
@Controller -> layout/common
    template/layout/common.html
 */
@Controller
@RequestMapping("/main")
public class Maincontroller {

    @GetMapping("/main")
    public String main(Model model) {
        model.addAttribute("name","홍길동");

        return "main";
    }
}

 

 

Model 이라는 스프링부트 메서드를 추가해준다.

 

add 로 인해 model에 추가해준다.

 

 

 

html 형식은 이렇다.

 

th : fragment -> 공통분모 선언

th : repace -> 공통분모대체

th : text  -> 출력..

th : each  -> 반복

 

 

・templates.main.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/common :: head('main')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<nav th:fragment="nav(menu)" id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link" href="/main/main">main</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/main/member">member</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/main/todo">todo</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" aria-disabled="true">join</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" aria-disabled="true">SignIn1</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
                <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
            </ul>
        </li>
    </ul>
</nav>

<div>
    <h1 th:text="${name}"></h1>
</div>

</body>
</html>

 

 

부트스트랩을 이용을 한다. nav bar를 사용해 상단에 목록을 만들어 준다.

item으로 항목을 더해준다.

 

 

 

・main.member.MainMemberController

package com.mh.restapi05.main.member;


import com.mh.restapi05.member.Member;
import com.mh.restapi05.member.MemberRepository;
import lombok.RequiredArgsConstructor;
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 java.util.ArrayList;
import java.util.Arrays;
import java.util.List;


@Controller
@RequestMapping("/main")
@RequiredArgsConstructor
public class MainMemberController {

    private final MemberRepository memberRepository;

    @GetMapping("/member")
    public String member(Model model){
        List<Member> memberList = memberRepository.findAll();
        model.addAttribute("list",memberList);

        List<String> list = Arrays.asList("111","222","333");
        model.addAttribute("Stringlist",list);
        return "member/member";
    }
}

 

똑같이 Model을 이용해서 스프링부트 메서드를 추가하고,

add 로 model에 추가해준다.

model.addAttribute("list",memberList);

list 라는 메서드를 추가한다.

 

 

 

・templates.member.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/common :: head('member')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<nav th:replace="layout/common :: nav('')"></nav>
<div class="container">
    <h1>Member</h1>
    <table>
        <thead>
        <tr>
            <th>아이디</th>
            <th>유저네임</th>
            <th>패스워드</th>
            <th>권한</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="member:${list}">
            <td th:text="${member.id}">1</td>
            <td th:text="${member.username}">2</td>
            <td th:text="${member.password}">3</td>
            <td th:text="${member.role}">4</td>
        </tr>
        </tbody>
    </table>
    <P th:each="member:${list}">
        <span th:text="${member.id}"></span>
        <span th:text="${member.username}"></span>
        <span th:text="${member.role}"></span>
    </P>
    <P th:each="string:${Stringlist}">
        <span th:text="${string}"></span>
    </P>
</div>
</body>
</html>

 

<tr th:each="member:${list}">

이걸로 추가해준 list를 불러온다.

 

 

이렇게 theyeleaf 사용하면 백엔드와 프론트를 같이 실행할 수 있다.

 

theyeleaf 는 title이 아니라 content 만을 변경할 수 있다.

 

 

'spring boot' 카테고리의 다른 글

카카오 로그인 api 사용해보기  (1) 2024.04.15
thymeleaf 의 기본 문법 // Controller  (1) 2024.04.03
Spring boot 복습  (0) 2024.03.18
Spring boot 유효성 검사 //해당하는 내역 보여주기. / Jasypt 암호화  (0) 2024.03.14
Spring boot @handleMethodArgumentNotValid / delete/@Transactional  (0) 2024.03.12

관련글

티스토리툴바