Spring/SpringBoot

#6 SpringBoot View- (ThymeLeaf, BootStrap 설정)

SK_MOUSE 2022. 4. 10. 13:42
반응형

연결한 페이지의 모습

 

HomeController로 http://localhost:8080/ 에연결하기

controller 패키지에 홈컨트롤러를 추가.

 

@Controller
@Slf4j
public class HomeController {

    @RequestMapping("/")
    public String home(){
        log.info("home controller 로그");
        return "home";
    }
}

Controller

 

View 와 부트스트랩 연동

1. 부트스트랩 홈페이지에 접속한다.

https://getbootstrap.com/

부트스트랩 연결

2. 위 파일을 넣어주어야 타임리프에 적용이 된다.

위 두 폴더를 static 폴더에 넣어줌

3. home.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <div class="jumbotron">
        <h1>HELLO SHOP</h1>
        <p class="lead">회원 기능</p>
        <p>
            <a class="btn btn-lg btn-secondary" href="/members/new">회원 가입</a>
            <a class="btn btn-lg btn-secondary" href="/members">회원 목록</a>
        </p>
        <p class="lead">상품 기능</p>
        <p>
            <a class="btn btn-lg btn-dark" href="/items/new">상품 등록</a>
            <a class="btn btn-lg btn-dark" href="/items">상품 목록</a>
        </p>
        <p class="lead">주문 기능</p>
        <p>
            <a class="btn btn-lg btn-info" href="/order">상품 주문</a>
            <a class="btn btn-lg btn-info" href="/orders">주문 내역</a>
        </p>
    </div>
    <div th:replace="fragments/footer :: footer"/>
</div> <!-- /container --></body>
</html>

 

반응형