Spring 화면 분할

Spring 구조 잡기 메뉴 본문 분리

jsp의 화면 분할 > template

spring > fragment (thymeleaf에서 지원하는 기능)

 

build.gradle에 dependencies 맨 첫줄에 아래 코드 넣어야 화면분할 기능(fragment)을 제공해준다.

implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

저장 후 gradle refresh 해주기!

 

기능을 실행할 컨트롤러 만들어줌

 

templates 밑에 fragment와 content 폴더 생성

fragment폴더 안에 header.html 생성 - 메뉴 부분 

user_layout.html 생성 - 유저가 보는 모든 html 열리는 layout 파일 

user_layout.html의 상단에 html xmlns:th~ 타임리프 설정한 <>닫히기 전에 엔터 치고 들여쓰기 해서 아래코드 추가

xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

th:block 만들어서 헤더 부분을 불러옴

<!-- th:replace=fragment/header : templates/fragment/header.html 파일 찾아간다는 의미 -->
<!-- ::의 의미는 경로에 이름을 부여하는 것 -->
<th:block th:replace="fragment/header::headerFragment"></th:block>

layout에서 header.html을 불러오면 안의 title, meta 등등이 겹치기 때문에

header.html 내용을 html 태그 빼고 다 지워주기.

layout.html에 대체할 화면 경로 지정한 것을 header.html에도 적어줌.

본문에 해당하는 board_list의 html에 아래 두 코드 추가

xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragment/user_layout}"

board_list.html도 layout.html과 내용 겹치지 않게 html 태그 빼고 내용 지워줌.

th:block 안에 layout:fragment="content"추가하여 내용부분임을 설정(?

layout.html에서도 content 불러오는 코드 적어줌.

run하면 한 페이지에서 다 열리는 것 확인 가능!

board_detail.html 만들고 board_list에서 a 태그 사용하여 상세보기 작성

상세보기 클릭하면 list 제외 헤더랑 레이아웃 파일 게시글 상세 페이지 다 같이 열리게 작업.

화면 사이드 관리자 메뉴 띄우기

fragment에 admin_layout.html 생성 후 아래 코드 적기

fragment에 side.html 생성 아래 코드 작성

content 폴더 밑에 admin.html 생성 아래 코드 작성

관리자 페이지로 이동하면

header와 side 메뉴 같이 나옴.