쇼핑몰을 만든다고 했는데
가장 중요한 '상품목록 보여주는 페이지'부터 하나 만들어봅시다.
누가 /list로 접속하면 list.html 같은 페이지를 하나 전송해주면 될 것 같군요.
그 안엔 상품들을 집어넣고요.
list.html 보내주는 기능을 만들어보자
(ItemController.java)
package com.apple.shop.item;
import org.springframework.stereotype.Controller;
@Controller
public class ItemController {
@GetMapping("/list")
String list(){
return "list.html"
}
} 그래서 파일 하나 새로 만들어서 API를 만들어봤습니다.
- 상품과 관련된 API들을 한 곳에 모아놓으려고 새로 파일 만들어봤습니다.
- 아무 클래스에 @Controller 붙이면 API들 안에 만들 수 있습니다.
- 원래 파일 상단에 package 파일경로; 라고 적어줘야 다른 파일에서도 여기 있던 코드를 사용가능합니다.
(list.html)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-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>
</body>
</html> list.html 파일도 만들어서 상품들을 채워봤습니다.
그럼 진짜로 /list 방문시 html 보이나 테스트해봅시다.
매번 다른 상품 보내줘야하는거 아님?
근데 이러면 접속할 때 마다 항상 같은 내용의 html 페이지만 보내주는거 아닙니까?
쇼핑몰은 맨날 다른 상품명이랑 가격을 보내야하는거 아님?
그러고 싶으면 템플릿 엔진이라는걸 사용합니다.
템플릿 엔진은 서버의 데이터를 html에 집어넣어주는걸 도와주는 외부 라이브러리입니다.
여러가지 템플릿 엔진들이 있는데 우리는 Thymeleaf 템플릿 엔진을 사용해보도록 합시다.
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}build.gradle 파일에 차이점만 잘 붙여넣고
load gradle changes 버튼누르면 외부 라이브러리 설치가 가능합니다.
라이브러리 설치했으면 서버 중지했다가 재시작해야 잘 적용됩니다.
이제 html 파일을 templates 폴더 안에 만들어야 Thymeleaf 문법으로 html을 만들 수 있습니다.
Thymeleaf 써도 기존 html 파일이랑 똑같이 작성하고 사용할 수 있는데
html 곳곳에 Thymeleaf 문법으로 서버데이터를 집어넣을 수 있다는게 차이점입니다.
Thymeleaf로 서버데이터 html에 박아서 보내주려면
이제 서버에서 특정 html 파일에 서버의 데이터를 집어넣을 수 있는데 어떻게 하냐면
1. 서버 API 함수의 파라미터에 Model model 넣고
2. API안에서 model.addAttribute("작명", 전송할데이터)
3. html 태그에 th:text="${작명}"
이런거 차례로 쓰면 됩니다.
@GetMapping("/list")
String list(Model model) {
model.addAttribute("name", "홍길동");
return "list.html";
} 1. 서버 API 함수의 파라미터에 Model model 넣고
2. model.addAttribute("작명", 전송할데이터) 쓰면 됩니다.
그럼 앞으로 list.html에서 name이라고 사용하면 "홍길동"이 출력됩니다.
(list.html)
<h4 th:text="${name}">바지</h4> 3. html 태그에 th:text="${작명}" 이라고 써야 서버에서 보낸 데이터 출력이 가능합니다.
그래서 위 html을 유저에게 전송할 땐 앞으로 <h4>태그에 "홍길동"이 박혀서 전송됩니다.
Thymeleaf 문법을 사용하고 싶으면 templates 폴더로 html 파일을 옮겨야 잘 동작합니다.
/list 페이지 방문해서 진짜인지 실험해봅시다.
지금은 가짜 임시 데이터들을 html에 박아서 보여주고 있는데
다음 시간부터 데이터베이스를 하나 만들어서 거기 있던 데이터를 뽑아서 보내주는 방법을 알아봅시다.
'spring Boot' 카테고리의 다른 글
| Spring Boot)웹페이지 만들기 (Controller) (2) | 2024.09.10 |
|---|---|
| spring boot) 자바 기본 문법 2 (class, constructor) (0) | 2024.09.09 |
| Spring Boot) 자바 기본 문법 1 (변수, 함수, if, for) (1) | 2024.09.09 |
| Spring Boot) 개발환경 셋팅 / Spring Boot 3 프로젝트 생성 (0) | 2024.09.09 |
| Spring Boot) Spring Boot 왜 쓰는데 (0) | 2024.09.09 |