2023.11.29 - [백엔드(Back-End)/Spring Boot] - [sts4-Spring Boot] 05. Business Layout 서비스 영역 처리
[sts4-Spring Boot] 05. Layout (Business Layer - 서비스 영역 처리)
2023.11.28 - [백엔드(Back-End)/Spring Boot] - [sts4-Spring Boot] 04. CRUD Test 작성 [sts4-Spring Boot] 04. CRUD Test 작성 이전 글에서 연결시킨 CRUD가 2023.11.28 - [백엔드(Back-End)/Spring Boot] - [sts4-Spring Boot] 04. CRUD Test 작성
silvow94.tistory.com
각 기능을 구현했으니, 언제(사용자가 어떤 요청을 할 때) 각 기능이 실행될지를 만들어야 한다.
사용자의 요청이나 응답을 처리하는 것이 컨트롤러다.
이번 글에선 컨트롤러를 만들어 보자 ~!
만들어 놓은 src/메인/자바>com.프로젝트명>controller 패키지에 컨트롤러 클래스를 만든다.
컨트롤러 클래스이므로 @Controller 어노테이션을 사용한다.
사용자의 요청에 따라 비즈니스 로직을 실행할 것이므로 Service 빈을 주입한다.
package com.board.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DataAccessException;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import com.board.domain.BoardDTO;
import com.board.service.BoardService;
@Controller
public class BoardController {
@Autowired
private BoardService boardService;Service에서 게시글을 등록하는 로직을 짰고,
게시글을 작성하는 폼을 localhost:8080/board/write.do 웹에 보여준다. => @GetMapping("/write.do")
@GetMapping은 Get방식을 이용하여 value 속성에 URL값을 매핑한다.
Get방식
데이터 전달 시 URL 끝에 ?key=value로 전달하는 방식
예 ) https://example.com/search?idx=3&name=안녕
@GetMapping 은 @RequestMapping을 이용하여 value, method 속성을 지정했으나,
스프링 4.3부터는 요청 메서드의 타입별로 매핑을 처리
파라미터 : Model 인터페이스는 데이터를 뷰로 전달한다.
return : 예전에는 ModelAndView를 사용했으나, 현재는 String을 주로 사용
접미사는 .html로, 자동 연결되기 때문에 생략
@GetMapping(value = "/write.do")
public String openBoardWrite(Model model) {
// 게시글 작성 폼을 제공하는 HTML 페이지를 반환
String title = "제목1";
String content = "내용1";
String writer = "작성자1";
model.addAttribute("t", title);
model.addAttribute("c", content);
model.addAttribute("w", writer);
return "board/write"; // board/write.html을 렌더링
}
사용자가 localhost:8080/board/write.do 로 요청을 보내면 openBoardWrite() 메서드가 실행되어,
게시글 작성 폼 board/write.html을 보여준다.
코드 추가 설명
Model은 SpringMVC에서 Controller와 View 사이의 데이터를 전달한다.
여기에서는 title, content, writer에 각각 제목1, 내용1, 작성자1의 값을 Model에 추가했다.
이제 write.html 을 만들어보자.
이는 자바 관련 파일이 아니므로 src/main/resources 에 templates패키지>board 폴더 추가
write.html을 만든다.
눈치 챘겠지만 이 부분은 프론트엔드 부분이다.
<!DOCTYPE html ang="ko" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<meta charset="UTF-8">
<title>The page is a write page</title>
</head>
<body>
<h2>Welcome Spring Boot!!</h2>
<span th:text="${t}">여기는 제목입니다.</span>
<span th:text="${c}">여기는 내용입니다.</span>
<span th:text="${w}">여기는 작성자입니다.</span>
</body>
</html>
뷰 템플릿은 Thymeleaf 템플릿 엔진을 사용하고 th:text는 타임리프의 속성으로, 해당 태그의 내용을 지정된 값으로 치환할 때 사용한다.
Thymeleaf
Java용 템플릿 엔진으로서, HTML 파일 내에서 동적으로 데이터 표시, 처리에 사용
자바 프로젝트에서 HTMl 템플릿과 연동하여 서버 측 데이터를 쉽게 렌더링
t 값(컨트롤러에선 "제목1" 값)을 가져와서 해당 <span>요소의 텍스트 내용으로 출력한다.
Model에 추가되지 않았으면 기본값 (예시"여기는 작성자입니다.") 가 출력된다.
즉, Controller에서 Model에 추가한 값들이 각각 ${ }로 뷰 템플릿에 전달된다.
이제 write.do를 실행시켜 잘 작동되는지 테스트해보자!
스프링 부트 애플리케이션을 실행하고 http://localhost:8080/board/write.do 을 웹으로 들어가보자.
이런 식으로 잘 나올 것이다.
url 값을 잘못 입력하면 404에러가 출력된다.
여기서부터는 Bootstrap을 적용하는 부분이다.
Bootstrap
웹 페이지/ 웹 애플리케이션을 빠르고 쉽게 개발하도록 도와주는
HTML, CSS, JavaScript 프레임워크 중 하나
버튼, 폼, 카드, 네비게이션 바, 그리드 시스템 등과 같은 UI 요소들을 사전에 디자인된 형태로 제공
-> 개발자가 디자인 작업에 소요되는 시간 줄여줌
해당 폴더를 압축해제 해서 리소스의 static(정적파일)에 넣자.
그리고 build.gradle의 dependencies에 외부 라이브러리들을 선언하자.
했으면 Gradle Refresh를 실행한다.
리소스 폴더의 templates.board 폴더에 fragments 패키지를 생성하여 header.html과 body.html을 생성하자
보통 fragments 폴더에는 웹 페이지의 작은 부분을 담는 파일이 들어간다.
header(웹 페이지 상단), footer(웹 페이지 하단), sidebar(웹 페이지 측면), modal(모달 창, 팝업 창)
header.html 파일 코드
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="main-head">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<th:block layout:fragment="title"></th:block>
<link rel="stylesheet" th:href="@{/css/style.css}" />
<link rel="stylesheet" th:href="@{/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css}" />
<th:block layout:fragment="add-css"></th:block>
</head>
<body>
</body>
</html>
body.html 파일 코드
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body th:fragment="main-body">
<div class="fixed-navbar">
<div class="pull-left">
<h1 class="page-title">Board</h1>
</div>
</div>
<div id="wrapper">
<div class="main-content">
<div class="row row-inline-block small-spacing">
<div class="col-xs-12">
<div class="box-content">
<div class="clearfix">
<h4 class="box-title pull-left"></h4>
<th:block layout:fragment="search"></th:block>
</div>
<th:block layout:fragment="content"></th:block>
<th:block layout:fragment="paging"></th:block>
</div>
<th:block layout:fragment="add-content"></th:block>
</div>
</div>
<footer class="footer">
<ul class="list-inline">
<li>Korea POLYTECHNIC</li>
</ul>
</footer>
</div>
</div>
<script th:src="@{/scripts/jquery.min.js}"></script>
<script th:src="@{/plugin/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{/scripts/main.js}"></script>
<script th:src="@{/scripts/common.js}"></script>
<th:block layout:fragment="script"></th:block>
</body>
</html>
헤더와 푸터를 적용하기 위해 레이아웃 패키지를 생성하고 basic.html을 생성하여 코드를 작성하자.
<!DOCTYPE html>
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--<head th:replace="board/fragments/header :: main-head"></head>
<body th:replace="board/fragments/body :: main-body"></body> !-->
<head th:replace="~{board/fragments/header :: main-head}"></head>
<body th:replace="~{board/fragments/body :: main-body}"></body>
</html>th:replace 속성을 사용하여 fragments/header에서 main-head 섹션을 가져와서 대체한다. (모듈화된 헤더 섹션을 가져와서 현재 페이지에 추가)
근데 주석 처리된 부분은 올드한 표현이라고 ~{ }로 바꿔야 warning이 없어진다.
이제 레이아웃을 write.html 맨 윗줄에 적용한다.
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="board/layout/basic">
<th:block layout:fragment="title">
<title>This page is a write page</title>
</th:block>
</html>xmlns:th 는 타임리프의 th 속성을 사용
xmlns:layout 타임리프의 레이아웃 기능 사용
xmlns:decorator 레이아웃으로 basic.html 지정
th:block layout:fragment 속성에 이름을 지정해서 타이틀 동적 처리
적용 결과
'백엔드(Back-End) > Spring Boot' 카테고리의 다른 글
| [sts4-Spring Boot] 07. Create - 웹에서 게시글 등록하기 구현 (1) | 2023.12.04 |
|---|---|
| [sts4-Spring Boot] 갑자기 sql database 에러날 때 (1) | 2023.12.04 |
| [sts4-Spring Boot] 05. Layout (Business Layer - 서비스 영역 처리) (0) | 2023.11.29 |
| [sts4-Spring Boot] 04. CRUD Test 작성 (0) | 2023.11.28 |
| [sts4-Spring Boot] 03. 데이터베이스 CRUD (0) | 2023.11.28 |
