Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

bright jazz music

guestbook : 02. 기본 화면 레이아웃 구성 본문

Framework/Spring

guestbook : 02. 기본 화면 레이아웃 구성

bright jazz music 2022. 6. 28. 22:18

이전글: 2022.06.26 - [JAVA/Spring] - guestbook : 01. 프로젝트 생성, gradle설정, DB연결, 구동 확인

 

 

 

이 글은 구멍가게코딩단의 "코드로 배우는 스프링 부트 웹 프로젝트" 챕터 3의 내용을 다룬다.
챕터 4를 진행하려면 챕터 3가 선행되어야 하는 부분이 있기 때문이다.
난 그걸 모른 채로 챕터 4부터 시작했다. 따라서 이 포스팅에서 중간에 챕터 3의 내용을 끼워 둔다.

 

- Request는 Controller 객체로 처리

- Controller에 Service를 주입. 주입된 서비스를 이용하여 작업처리(ServiceImpl이 처리)

- ServiceImple에 Repository를 주입. Repository는 Spring Data JPA를 이용해서 구성.

 

- Request는 Controller에서 DTO형태로 처리

- Repository는 Entity 타입을 사용하기 때문에 Service계층에서는 DTO를 Entity로 변환하는 작업이 필요.

 

JPA를 이용하는 경우 Entity 객체는 항상 JPA가 관리하는 context에 속해 있기 때문에 가능하면 JPA 영역을 벗어나지 않도록 작성하는 것을 권장.

 

 

//GuestbookController.java
package com.example.guestbook.controller;

import lombok.extern.log4j.Log4j2;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/guestbook")
@Log4j2
public class GuestbookController {

    @GetMapping({"/", "/list"})
    public String list(){

        log.info("list....................");

        return "/guestbook/list";
    }
}
<!-- basic.html -->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="setContent(content)">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Simple Sidebar - Start Bootstrap Template</title>
    <!-- Favicon-->
    <link rel="icon" type="image/x-icon" th:href="@{/dist/assets/favicon.ico}" />
    <!-- Core theme CSS (includes Bootstrap)-->
<!--    <link href="css/styles.css" rel="stylesheet" />-->
    <link th:href="@{/dist/css/styles.css}" rel="stylesheet" />
</head>
<body>
<div class="d-flex" id="wrapper">
    <!-- Sidebar-->
    <div class="border-end bg-white" id="sidebar-wrapper">
        <div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div>
        <div class="list-group list-group-flush">
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Dashboard</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Shortcuts</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Overview</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Events</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>
            <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Status</a>
        </div>
    </div>
    <!-- Page content wrapper-->
    <div id="page-content-wrapper">
        <!-- Top navigation-->
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<!--            <div class="container-fluid"> 실제로 전달되는 부분 -->
            <div class="container-fluid">

                <button class="btn btn-primary" id="sidebarToggle">Toggle Menu</button>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
                        <li class="nav-item active"><a class="nav-link" href="#!">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="#!">Link</a></li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#!">Action</a>
                                <a class="dropdown-item" href="#!">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#!">Something else here</a>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
        </nav>
        <!-- Page content-->
        <div class="container-fluid">
            <th:block th:replace="${content}"></th:block>
<!--            <h1 class="mt-4">Simple Sidebar</h1>-->
<!--            <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>-->
<!--            <p>-->
<!--                Make sure to keep all page content within the-->
<!--                <code>#page-content-wrapper</code>-->
<!--                . The top navbar is optional, and just for demonstration. Just create an element with the-->
<!--                <code>#sidebarToggle</code>-->
<!--                ID which will toggle the menu when clicked.-->
<!--            </p>-->
        </div>
    </div>
</div>
<!-- Bootstrap core JS-->
<script th:src="@{https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js}"></script>
<!-- Core theme JS-->
<script th:src="@{js/scripts.js}"></script>
</body>
</th:block>
</html>
<!-- list.html -->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<th:block th:replace="~{/layout/basic :: setContent(~{this::content})}">

    <th:block th:fragment="content">
        <h1>GuestBook List Page!!!!</h1>
    </th:block>

</th:block>

 

'Framework > Spring' 카테고리의 다른 글

guestbook : 03. 자동 일자/시간 처리(등록/수정 등) +Querydsl (2)  (0) 2022.06.30
guestbook : 03. 자동 일자/시간 처리(등록/수정 등) +Querydsl (1)  (0) 2022.06.29
Thymeleaf 타임리프 기본 + Simple Sidebar  (0) 2022.06.28
JpaRepository + @Query, nativeQuery = true  (0) 2022.06.23
JpaRepository + 페이징, 쿼리메소드  (0) 2022.06.23
'Framework/Spring' Related Articles more
Comments