20211130 타임리프
타임리프 : 서버사이드 렌더링. jsp와 유사하다.
스프링부트에서 지향하는 엔진이 타임리프다. 기본적으로 내장하고 있다. 기본적인 셋팅을 할 필요가 없다.
타임리프를 위한 준비 :
1. 별도의 라이브러리 필요
2. 추가적인 플러그인이 설치
3. 자동재시작하여 수정된 코드를 반영
자바파일같은 경우에는 컴퓨터가 인식해서 자동적으로 재시작
html은 변경된 사항에 대해서 다시 재요청을 하는 부분이여서.?
satatic : 정적인 웹 자원들 / 바뀌지 않는 부분들. 파일만 읽어드린다. js, css , 이미지 파일을 추가.
탬플릿 : 동적인 웹 자원들 / uri 로 주소요청이 일어났을 때 타임리프로 만든 페이지가 위치하는 공간
어플리케이션 프로퍼티 : 스프링부트에 대한 설정파일. 설정파일을 읽고 실행한다.
- 확장자는 html 을 기본으로 설정
- 인코딩은 utf- 8
- mine 타입은 text/html 로 설정
- 서버 내부의 cahce 는 true 로 설정.
- true : 개발할때 수정작업후 새로고침 반영 x ~
플러그인 설치
Ecosystem - Thymeleaf
Developed and maintained by Thymeleaf users outside of the Thymeleaf Project and distributed under their own license and support terms. WUIC Dialect https://wuic.github.io/ WUIC is a Java project that helps developers manage their web statics. JS/CSS minif
www.thymeleaf.org
1. 깃허브 링크 접속
2. 인스톨 부분 링크 복사
3. 플러그인 이름과 주소를 입력
4. 추가완료된 화면. 주소만으로는 어떤 항목인지 알 수 없다. 이름으로 구분해준다.
5. 모두 선택후 실행
5.
6. install anyway
7. 재시작
A plugin for the Eclipse IDE to add content assist features for the Thymeleaf standard dialect processors and expression utility objects, using the Eclipse Web Tools Platform HTML source editor.
1. Declaring the dialect namespace and prefix in your HTML files
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">2. Applying the Thymeleaf project nature to your project
forward vs redirect
출처 : Redirect vs Forward (tistory.com)
Redirect vs Forward
이 그림 하나면 끝! Forward 클라이언트 → 서버(Resource1 → Resource2) → 클라이언트 이 때 클라이언트는 서버로 요청한게 Resource1이니깐 URL은 Resource1. 하지만 forward 처리를 했다면 클라이언트..
jjjayyy.tistory.com
1) 객체 화면에 출력
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf exm1</title>
</head>
<body>
<!-- thymeleaf 객체 바인딩 ${Model 에 담겨진 키} -->
<h1 th:text="${member}"></h1> <br><br>
<!-- getter setter 메서드를 카멜방식으로 작성해야 타임리프에서 불러올 수 있다. getmemberId 로 작성했을 경우
member.getmemberId()로 작성해야 호출이 가능하다.
thymeleaf 객체의 프로퍼티(멤버면수) 바인딩 ${Model에 담겨진 키.멤버변수명}-->
<!-- get set 사용자 정의 method 선언할 시 ${Model에 담겨진 키.메소드명()} -->
<h1>[[${member.memberId}]]</h1>
</body>
</html>
2)each 반복문
ExamController.java 생성
1.
<- exam/exam1 폴더구조.
2. @requestMapping(value="/exam") 을 통해 공통되는 경로를 묶을 수 있다.
@GetMapping("/exam2") 은 exam/exam2 경로를 찾아간다.
3.
4.
5. Member.java
package springboot.thymeleaf.domain;
public class Member {
private String memberId;
private String memberPw;
private String memberName;
private String memberAddr;
private String memberMobile;
public Member() {} //Member 를 2개 선언해줘야한다... 메서드오버로드 - 매개변수의 타입과 수과 같을 때?
public Member(String memberId, String memberPw, String memberName,
String memberAddr, String memberMobile) {
this.memberId = memberId;
this.memberPw = memberPw;
this.memberName = memberName;
this.memberAddr = memberAddr;
this.memberMobile = memberMobile;
}
public String getMemberId() {
return memberId;
}
public void setMemberId(String memberId) {
this.memberId = memberId;
}
public String getMemberPw() {
return memberPw;
}
public void setMemberPw(String memberPw) {
this.memberPw = memberPw;
}
public String getMemberName() {
return memberName;
}
public void setMemberName(String memberName) {
this.memberName = memberName;
}
public String getMemberAddr() {
return memberAddr;
}
public void setMemberAddr(String memberAddr) {
this.memberAddr = memberAddr;
}
public String getMemberMobile() {
return memberMobile;
}
public void setMemberMobile(String memberMobile) {
this.memberMobile = memberMobile;
}
@Override
public String toString() {
return "Member [memberId=" + memberId + ", memberPw=" + memberPw + ", memberName=" + memberName
+ ", memberAddr=" + memberAddr + ", memberMobile=" + memberMobile + "]";
}
}
6.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf exam2</title>
</head>
<body>
<!-- thymeleaf 반복문 each -->
<table border ="1">
<thead>
<tr>
<td>회원아이디</td>
<td>회원비밀번호</td>
<td>회원이름</td>
<td>회원주소</td>
<td>회원휴대전화</td>
</tr>
</thead>
<tbody>
<tr th:each="l : ${memberList}">
<td th:text="${l.memberId}"></td>
<td th:text="${l.memberPw}"></td>
<td th:text="${l.memberName}"></td>
<td th:text="${l.memberAddr}"></td>
<td th:text="${l.memberMobile}"></td>
</tr>
</tbody>
</table>
</body>
</html>테이블이 아래로 반복되기 위해서는 tr에 th:each 구문을 넣어줘야 한다.
th:each="{별칭} : ${{controller에서 넘어온 데이터 key}}".
변수 값을 태그의 텍스트로 표시할 때에는 th:text 속성과 ${...} 구문을 사용한다.
7. 결과 :
3) th:with 구문 .
해당 범위만 적용. table 에 썼다면 table 닫히는 곳까지.
튜토리얼: Thymeleaf 사용하기
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax
Tutorial: Using Thymeleaf
1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a
www.thymeleaf.org