스프링데이터 + JPA/웹 애플리케이션 개발

20. 웹 계층 개발

sdafdq 2023. 11. 9. 08:24

여기선 일단 SSR인 타임리프를 쓸 것이다.

 

웹계층

홈 화면, 레이아웃

회원 등록

회훤 조회

상품등록

상품 목록

상품 수정

변경 감지와 병합(merge)

상품 주문

주문 목록 검색, 취소

 

변경 감지와 병합은. 어떻게 데이터를 수정하는 것이 올바른 방법인가.

 

이제 컨트롤러와 문서이다.

 

 먼저 화면을 그냥 가져왔다.

 

스프링 위주로 배울거기 때문에 그냥 화면은 가져왔다. 

thymeleaf 템플릿이며, fragment로 공통적인 부분들은 따로 빼서 그걸 가져오는 형식으로 템플릿을 구성했다.

 

화면 꾸미는 건 그냥 bootstrap 써서 기본적인걸로..

 

static에 접근할 때는 그냥 /css/css파일 

이렇게 루트로 접근하면 되는 듯.

 

일단 홈화면만 만들어 놨음.

 

 

컨트롤러

@Slf4j
@Controller
public class HomeController {

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

루트로 찾아오면

그냥 템플릿 중 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>

 

'스프링데이터 + JPA > 웹 애플리케이션 개발' 카테고리의 다른 글

22. 회원 목록 조회  (0) 2023.11.10
21. 회원 등록  (0) 2023.11.09
19. 주문 검색 기능 개발  (0) 2023.11.09
18. 주문 기능 테스트  (0) 2023.11.08
17. 주문 리포지토리, 서비스  (0) 2023.11.07