Spring IntellIJ (Thymeleaf)

HI_DO·2024년 10월 16일

먼저 Controller 파일을 하나 만들어준다.
첫번째 줄에 package라는 것은 꼭 있어야한다!
저 package라는 것이 없으면 import 사용이 불가능하기 때문!!
그리고 저기 class 앞에 public이 없으면 같은 폴더(패키지) 안에서만 사용가능하다!

'상품페이지'를 만들기 위해 static에 list.html파일을 만들어 준다.

list.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <img>
        <h4>바지</h4>
        <p>7만</p>
    </div>
<div>
    <img>
    <h4>셔츠</h4>
    <p>8만</p>
</div>

이제 'ItemController'를 마저 작성해보자

ItemController.java

package com.apple.shop;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ItemController {
    @GetMapping("/list")
    String list(){
        return "list.html";
    }
}

이렇게하면 결과가

잘 나온다!

이제 템플릿엔진 중 'Thymeleaf'를 사용해보자!

build.gradle
dependencies {
   implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
여기서

이것을 클릭하면 라이브러리가 다운된다.
(완료됬으면 서버 껐다가 다시 실행해야한다.)

html에 서버데이터를 넣으려면 우선 templates 폴더에 .html 파일을 넣어둬야한다.

html에 서버 데이터를 넣으려면
1. 파라미터에 Model model을 넣고

package com.apple.shop;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ItemController {
    @GetMapping("/list")
    String list(Model model){
        return "list.html";
    }
}

model.addAttribute(작명,데이터)를 넣고

package com.apple.shop;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ItemController {
    @GetMapping("/list")
    String list(Model model){
        model.addAttribute("name","홍길동");
        return "list.html";
    }
}

html 파일에서는 th:text="${작명}"
list.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <img>
        <h4 th:text="${name}">바지</h4>
        <p>7만</p>
    </div>
<div>
    <img>
    <h4>셔츠</h4>
    <p>8만</p>
</div>
</body>
</html>

('th:text="${작명}"'은 Thymeleaf문법이다)

결과가 이렇게 나온다.

HI_DO

하이도의 BackEnd 입문

이전 포스트

Spring IntelliJ (Controller)

다음 포스트

Spring IntellIJ (Thymeleaf)

Spring IntelliJ (Controller)

Spring IntellIJ (MySQL)

0개의 댓글