상품목록페이지 구현 (Thymeleaf)

서버에서 데이터나 데이터베이스에서 데이터를 가져오는 html을 만들 때는 templates라는 폴더안에 만들어야한다

상품목록을 보여주는 list.html을 만들어주고

 

또 이번엔 관련된 컨트롤러들만 모아놓는 편이 편하니

new 자바 클래스로 새로 itemController 생성

@Controller
public class itemController {

    @GetMapping("/list")
    String list(Model model) {
        
        return "list.html";
    }
}

 

전에 만들어놓았던 컨트롤러와 똑같다

여기서 이제 타임리프를 의존성에 추가해줘야하는데

찾아보면 build.gradle 파일이 있다

들어가보면 의존성을 추가하는 공간이 있는데

 

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

 

추가

 

추가했다면

 

이런 버튼이 나올텐데 클릭 없다면 위에 검색에서 검색해서 load

라이브러리 새로 추가시 실행중인 서버를 종료하고 다시 시작해줘야한다

 

@Controller
public class itemController {

    @GetMapping("/list")
    String list(Model model) {
        model.addAttribute("name", "홍길동");
        return "list.html";
    }
}

이제 api 함수에 파라미터로 Model model 을 넣고

메서드 안에 model.addAttribute("작명", "전송할 데이터");

로 보내줄 수 있다 원래는 데이터베이스에 있는 데이터나 서버에 있는 데이터를 전송하는데

아직 모르니 하드코딩으로 홍길동이라는 값을 가진 name을 전송

 

사용 방법은 간단하다

<h4 th:text="${name}">바지</h4>

 

html 파일안에

나타낼 태그안에

<태그 th:text="${작명한 데이터 이름}">

이러면 바지에 방금 만들어준 홍길동이 나타나게 된다