Recent Posts
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
관리 메뉴

너와 나의 스토리

[Spring] Thymeleaf 적용해보기 - Step 1. 네비게이션 바, 입력 파라미터 설정 본문

개발/Spring Boot

[Spring] Thymeleaf 적용해보기 - Step 1. 네비게이션 바, 입력 파라미터 설정

노는게제일좋아! 2021. 3. 15. 13:56
반응형

Thymeleaf란?

  • Thymeleaf는 web 및 독립 실행형 환경 모두를 위한 서버 측 Java 템플릿 엔진으로 HTML, XML, JavaScript, CSS 및 일반 텍스트를 처리할 수 있다.

 

 

Step 1. 네비게이션 바, 입력 파라미터 설정

  • 여기(Github)에 코드가 작성되어 있다. 

 

1. build.gradle에 dependency

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
  • spring-boot-devtools는 캐시를 비활성화하고 hot swapping을 활성화하여 개발자가 항상 마지막 변경 사항을 볼 수 있도록 도와준다.

 

2. 페이지 띄우기

  • 먼저 welcome.html부터 보자.
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
        </ul>
        <form class="navbar-form navbar-left" action="/action_page.php">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</nav>

<main role="main" class="container">

    <div class="starter-template">
        <h1>Spring Boot Web Thymeleaf Example</h1>
        <h2>
            <span th:text="'Hello, ' + ${message}"></span>
        </h2>
    </div>

    <ol>
        <li th:each="task : ${tasks}" th:text="${task}"></li>
    </ol>

</main>

</body>
</html>
  • 네비게이션(상단 메뉴바) 설정하기
    • Navigation bar: "navbar" class
    • 다음 중 하나를 이용해 bar의 크기를 지정해줄 수 있다.
      • navbar-expand-xl > navbar-expand-lg > navbar-expand-sm > navbar-expand-sm
      • 오른쪽으로 갈 수록 작은 사이즈입니다.
    • navbar-inversee: 반전 표시. 검은색 글자에 흰색 바가 표시된다.
    • 프로젝트를 run하면 다음과 같이 출력된다.

  • controller는 다음과 같다.
@Controller
public class WelcomeController {

    @Value("${welcome.message}")
    private String message;

    private List<String> tasks = Arrays.asList("a", "b", "c", "d", "e", "f", "g");

    @GetMapping("/")
    public String main(Model model) {
        model.addAttribute("message", message);
        model.addAttribute("tasks", tasks);

        return "welcome"; //view
    }


    @GetMapping("/hello")
    public String mainWithParam(
            @RequestParam(name = "name", required = false, defaultValue = "")
                    String name, Model model) {

        model.addAttribute("message", name);

        return "welcome"; //view
    }
}
  • mainWithParam()을 보면 name을 입력으로 받고 있다.
  • 이 name은 welcome.html의 다음 부분에 입력으로 들어간다.
<main role="main" class="container">

    <div class="starter-template">
        <h1>Spring Boot Web Thymeleaf Example</h1>
        <h2>
            <span th:text="'Hello, ' + ${message}"></span>
        </h2>
    </div>

    <ol>
        <li th:each="task : ${tasks}" th:text="${task}"></li>
    </ol>

</main>
  • 예를 들어, [ http://localhost:8888/hello?name=inputName ]를 입력하면 다음과 같은 화면을 볼 수 있다.

 

 

 

 

출처:

- www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

- www.thymeleaf.org/documentation.html

- www.w3schools.com/bootstrap/bootstrap_navbar.asp 

- mkyong.com/spring-boot/spring-boot-hello-world-example-thymeleaf/

 

 

반응형

'개발 > Spring Boot' 카테고리의 다른 글

[Gradle] Multi Project 설정하기 (build.gradle 분리하기)  (0) 2021.04.01
[Spring] Thymeleaf 적용해보기 - Step 2. HTML-controller 데이터 전송  (0) 2021.03.16
[Spring/java] junit 5에서 static method mocking하기  (0) 2021.03.14
[Spring] Json 데이터 객체로 받기, Github Webhook 파싱하기  (0) 2021.03.14
[Spring] spring test - "Error creating bean with name 'jobLauncherTestUtils': Unsatisfied dependency expressed through method 'setJob' parameter 0" 에러 해결  (0) 2021.01.20
'개발/Spring Boot' Related Articles more
Comments