자바 Spring
23-02-07) 스프링 9강 - 타일즈 뷰 템플릿, 롬복
JadeStone
2023. 2. 7. 16:15
#CSS , JS 경로설정
페이지에서 경로를 설정할 때는 무조건 절대경로로 넣는것.
${pageContext.request.contextPath } 는 베이스경로(contextPath) 를 참조하는 것.
<script src="${pageContext.request.contextPath }/resources/js/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/rollmain.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.easing.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/common.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.smooth-scroll.min.js"></script>
프로젝트 준비사항
1. 롬복
2. 타일즈 뷰 템플릿
<2. 타일즈 뷰 템플릿>
*header, body, footer, 사이드바 등의 공통적인 구조를 미리 만들어 둘 때 사용.
#tiles.xml 파일 설정
* 먼저 템플릿에 관한 내용을 설정할 파일을 WEB-INF 폴더 아래에 만든다.
* 템플릿을 거치지 않고 보여줄 화면은
위 그림에서 하단부에 직접 컨트롤러에서 넘어오는 요청에 대한 경로를 지정해주어서
화면이 템플릿을 거치지 않고 바로 나타나도록 해준다.
tiles.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
<!-- 템플릿의 모형을 정의 -->
<!-- name은 컨트롤러에서 반환되는 값 template은 파일의 위치 -->
<definition name="base" template="/WEB-INF/tiles/template.jsp">
<put-attribute name="header" value="/WEB-INF/tiles/header.jsp" />
<put-attribute name="body" value="" />
<put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp" />
<put-attribute name="left" value="/WEB-INF/tiles/left.jsp" />
</definition>
<!-- 위에 선언된 base템플릿을 상속 body부분을 동적으로 처리 -->
<definition name="*" extends="base">
<put-attribute name="body" value="/WEB-INF/views/{1}.jsp" />
</definition>
<definition name="*/*" extends="base">
<put-attribute name="body" value="/WEB-INF/views/{1}/{2}.jsp" />
</definition>
<definition name="*/*/*" extends="base">
<put-attribute name="body" value="/WEB-INF/views/{1}/{2}/{3}.jsp" />
</definition>
<!-- 템플릿을 사용하지 않을 경로 -->
<definition name="user/login" template="/WEB-INF/views/user/login.jsp"/>
</tiles-definitions>
# template 페이지를 보여줄 파일
*페이지들의 공통된 부분에 대한 js,css 링크들을 상단부에 기재한다.
* 템플릿의 구조에 맞게 해당 부분들을 불러와줍니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<!DOCTYPE html>
<html>
<head>
<title> 투어리스트인투어 </title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/swiper.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/css/common.css">
<script src="${pageContext.request.contextPath }/resources/js/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/rollmain.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.easing.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/common.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.smooth-scroll.min.js"></script>
</head>
<body>
<!-- 타일즈 뷰에서 정의한 name값이 들어갑니다 -->
<div id="wrap">
<tiles:insertAttribute name="header" />
<tiles:insertAttribute name="body" />
<tiles:insertAttribute name="footer" />
</div>
<tiles:insertAttribute name="left" />
</body>
</html>
# 템플릿의 기본 설정이 끝난 뒤
각 페이지별로 공통된 부분을 지워줍니다.
* ex )
-notice_list.jsp 파일
템플릿 화면에서 body부분에 들어갈 내용인
container 부분만 남기고 나머지는 지워줍니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div id="container">
<!-- location_area -->
<div class="location_area customer">
<div class="box_inner">
<h2 class="tit_page">TOURIST <span class="in">in</span> TOUR</h2>
<p class="location">고객센터 <span class="path">/</span> 공지사항</p>
<ul class="page_menu clear">
<li><a href="#" class="on">공지사항</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</div>
</div>
<!-- //location_area -->
<!-- bodytext_area -->
<div class="bodytext_area box_inner">
<form action="#" class="minisrch_form">
<fieldset>
<select name="###" style="height: 35px;">
<option value="#">제목</option>
<option value="#">내용</option>
<option value="#">작성자</option>
<option value="#">제목+내용</option>
</select>
<legend>검색</legend>
<input type="text" class="tbox" title="검색어를 입력해주세요" placeholder="검색어를 입력해주세요">
<a href="javascript:;" class="btn_srch">검색</a>
</fieldset>
</form>
<table class="bbsListTbl" summary="번호,제목,조회수,작성일 등을 제공하는 표">
<caption class="hdd">공지사항 목록</caption>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">제목</th>
<th scope="col">조회수</th>
<th scope="col">작성일</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="tit_notice"><a href="javascript:;">이번 여름 휴가 제주 갈까? 미션 투어 (여행경비 50만원 지원)</a> </td>
<td>123</td>
<td>2018-08-01</td>
</tr>
<tr>
<td>2</td>
<td class="tit_notice"><a href="javascript:;">박물관 미션 투어 응모 당첨자 발표</a> </td>
<td>123</td>
<td>2018-08-01</td>
</tr>
<tr>
<td>3</td>
<td class="tit_notice"><a href="javascript:;">추석 연휴 티켓/투어 배송 및 직접 수령 안내</a> </td>
<td>123</td>
<td>2018-08-01</td>
</tr>
<tr>
<td>4</td>
<td class="tit_notice"><a href="javascript:;">하롱베이 서비스 OPEN! (여행정보, 가이드북, 가이드맵)</a> </td>
<td>123</td>
<td>2018-08-01</td>
</tr>
<tr>
<td>5</td>
<td class="tit_notice"><a href="javascript:;">투어리스트인투어 서비스 점검 안내 - 투어리스트인투어에서 매월 실시하는 정기점검 안내</a> </td>
<td>123</td>
<td>2018-08-01</td>
</tr>
<tr>
<td>6</td>
<td class="tit_notice"><a href="javascript:;">이번 여름 휴가 제주 갈까? 미션 투어 (여행경비 50만원 지원)</a> </td>
<td>123</td>
<td>2018-08-01</td>
</tr>
<tr>
<td>7</td>
<td class="tit_notice"><a href="javascript:;">박물관 미션 투어 응모 당첨자 발표</a> </td>
<td>123</td>
<td>2018-08-01</td>
</tr>
<tr>
<td>8</td>
<td class="tit_notice"><a href="javascript:;">추석 연휴 티켓/투어 배송 및 직접 수령 안내</a> </td>
<td>123</td>
<td>2018-08-01</td>
</tr>
<tr>
<td>9</td>
<td class="tit_notice"><a href="javascript:;">하롱베이 서비스 OPEN! (여행정보, 가이드북, 가이드맵)</a> </td>
<td>123</td>
<td>2018-08-01</td>
</tr>
<tr>
<td>10</td>
<td class="tit_notice"><a href="javascript:;">투어리스트인투어 서비스 점검 안내</a> </td>
<td>123</td>
<td>2018-08-01</td>
</tr>
</tbody>
</table>
<!-- pagination -->
<div class="pagination">
<a href="javascript:;" class="firstpage pbtn"><img src="${pageContext.request.contextPath }/resources/img/btn_firstpage.png" alt="첫 페이지로 이동"></a>
<a href="javascript:;" class="prevpage pbtn"><img src="${pageContext.request.contextPath }/resources/img/btn_prevpage.png" alt="이전 페이지로 이동"></a>
<a href="javascript:;"><span class="pagenum currentpage">1</span></a>
<a href="javascript:;"><span class="pagenum">2</span></a>
<a href="javascript:;"><span class="pagenum">3</span></a>
<a href="javascript:;"><span class="pagenum">4</span></a>
<a href="javascript:;"><span class="pagenum">5</span></a>
<a href="javascript:;" class="nextpage pbtn"><img src="${pageContext.request.contextPath }/resources/img/btn_nextpage.png" alt="다음 페이지로 이동"></a>
<a href="javascript:;" class="lastpage pbtn"><img src="${pageContext.request.contextPath }/resources/img/btn_lastpage.png" alt="마지막 페이지로 이동"></a>
</div>
<!-- //pagination -->
</div>
<!-- //bodytext_area -->
</div>
<!-- //container -->
- notice_write.jsp
body 부분에서만 사용되는 스크립트 부분은 삭제하지 않도록 주의합시다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 데이트피커 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker_a" ).datepicker();
$( "#datepicker_a" ).datepicker( "option", "dateFormat", "yy-mm-dd");
});
</script>
<div id="container">
<!-- location_area -->
<div class="location_area customer">
<div class="box_inner">
<h2 class="tit_page">
TOURIST <span class="in">in</span> TOUR
</h2>
<p class="location">
고객센터 <span class="path">/</span> 공지사항
</p>
<ul class="page_menu clear">
<li><a href="#" class="on">공지사항</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</div>
</div>
<!-- //location_area -->
<!-- bodytext_area -->
<div class="bodytext_area box_inner">
<!-- appForm -->
<form action="#" class="appForm">
<fieldset>
<legend>상담문의 입력 양식</legend>
<p class="info_pilsoo pilsoo_item">필수입력</p>
<ul class="app_list">
<li class="clear"><label for="email_lbl"
class="tit_lbl pilsoo_item">등록일</label>
<div class="app_content email_area">
<input type="text" id="datepicker_a" placeholder="날짜를 선택하세요">
</p>
</div></li>
<li class="clear"><label for="email_lbl"
class="tit_lbl pilsoo_item">작성자</label>
<div class="app_content email_area">
<input type="hidden" /> <input type="text" placeholder="작성자" />
</div></li>
<li class="clear"><label for="name_lbl"
class="tit_lbl pilsoo_item">제목</label>
<div class="app_content">
<input type="text" class="w100p" id="name_lbl"
placeholder="제목을 입력하세요" />
</div></li>
<li class="clear"><label for="content_lbl" class="tit_lbl">문의내용</label>
<div class="app_content">
<textarea id="content_lbl" class="w100p"
placeholder="간단한 상담 요청 사항을 남겨주시면 보다 상세한 상담이 가능합니다.
전화 상담 희망시 기재 부탁드립니다."></textarea>
</div></li>
</ul>
<p class="btn_line">
<a href="javascript:;" class="btn_baseColor">글작성</a> <a
href="javascript:;" class="btn_baseColor">목록</a>
</p>
</fieldset>
</form>
<!-- //appForm -->
</div>
<!-- //bodytext_area -->
</div>
<!-- //container -->
<1. 롬복 >
Lombok은 여러가지
@어노테이션을 제공하고 이를 기반으로 반복 소스코드를 컴파일 과정에서 생성해주는 방식으로 동작하는 라이브러리이다.
즉, 코딩 과정에서 롭복과 관련된 어노테이션만 보이고 getter,setter 등의 생략되지만 실제로 컴파일된 결과물 .class 파일에는 코드가 생성되어 있다는 말이다.
*메이븐 레파지토리에서 lombok 에대한
porm.xml 들어갈 모듈을 복사 해서 porm.xml에 붙여넣기.
*lombok 사이트에서 파일 다운로드 받은 것을
course - > spring 폴더 안에 넣었음.
그리고 다운로드한 파일 실행.
( 다운로드 한 파일이 알집이면 cmd 창으로 실행하기)
-이와 같이 내 sts를 설정해줌, 최초의 한번만 해주면 됨.
# VO 만들 때 사용
//@Setter
//@Getter
//@ToString
@Data //getter, setter, toString
@NoArgsConstructor // 기본생성자
@AllArgsConstructor // 모든 멤버변수 생성자
public class TestVO {
private String name;
private int age;
private String addr;
private String xxx;
}어노테이션만 달아주면 아래와 같이 자동으로 생성됨.
<기억할것>
#서버를 킬 때
*서버를 킬 때는 한 서버당 꼭 한 프로젝트만 시동되어야함.