728x90
TEMPLATE ENGINES - Mustache
머스테치란?
머스테치는 수많은 언어를 지원하는 가장 심플한 템플릿 엔진입니다.
루비, 자바스크립트, 파이썬, PHP, 자바, 펄, Go, ASP 등 현존하는 대부분 언어를 지원하고 있습니다. 그러다 보니 자바에서 사용될 때는 서버 템플릿 엔진으로, 자바스크립트에서 사용될 때는 클라이언트 템플릿 엔진으로 모두 사용할 수 있습니다.
자바 진영에는 JSP, Velocity, Freemarker, Thymeleaf 등 다양한 서버 템플릿 엔진이 존재합니다.
머스테치의 장점
- 문법이 다른 템플릿 엔진보다 심플
- 로직 코드를 사용할 수 없어 View와 서버의 역할을 명확하게 분리됨
- Mustache.js와 Mustache.java 2가지가 다 있어, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능
설명원본 : https://github.com/Conatuseus/TIL/blob/master/Spring/%EC%84%9C%EB%B2%84%20%ED%85%9C%ED%94%8C%EB%A6%BF%20%EC%97%94%EC%A7%84%EA%B3%BC%20%EB%A8%B8%EC%8A%A4%ED%85%8C%EC%B9%98%20%EC%86%8C%EA%B0%9C.md
사용할 Dependencies를 모두 추가한 후 GENERATE
plugins {
id 'org.springframework.boot' version '2.6.8'
id 'io.spring.dependency-management' version '1.0.14.RELEASE'
id 'java'
}
//머스타치는 버전 2.6.8로 낮춰야함. 최신버전은 한글이안됨
group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'
configurations {
compileOnly {
extendsFrom annotationProcessor
}
}
repositories {
mavenCentral()
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
implementation 'org.springframework.boot:spring-boot-starter-mustache'
implementation 'org.springframework.boot:spring-boot-starter-web'
compileOnly 'org.projectlombok:lombok'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
runtimeOnly 'com.h2database:h2'
annotationProcessor 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
tasks.named('test') {
useJUnitPlatform()
}id 'org.springframework.boot' version '2.6.8' 로 수정
Mustache는 버전을 2.6.8로 낮춰야 한글이 출력된다. 최신버전은 한글이안됨
mustache플러그인을 설치해주어야 한다.
입력 값을 받아 출력하기
SampleController.java
@RequestMapping(value="/02loginInput", method = RequestMethod.GET)
public String loginIputReqGet(){
return "02loginInput";
}
//@RequestMapping(value="/03loginOutput", method = RequestMethod.POST) 동일기능
@PostMapping("/03loginOutput")
public String loginOutPost(@RequestParam(value="name", required = false)String name
,@RequestParam String password
,Model model){
//require=false는 값이 없어도된다, true는 무조건있어야한다.
System.out.println(name);
System.out.println(password);
model.addAttribute("name", name);
model.addAttribute("password", password);
return "03loginOutput";
}02loginInput.mustache
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
사용자입력 로그인창<br>
<form action="/03loginOutput" method="post">
이름 : <input type="text" name="name"><br>
비밀번호 : <input type="text" name="password"><br>
<input type="submit" value="전송">
</form>
</body>
</html>03loginOuput.mustache
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>output</h3>
이름: {{name}} <br>
비밀번호 :{{password}}
</body>
</html>mustache는 변수 사용 시
{{, }} 사이에 변수명을 입력한다.
- 문자열은 자동 HTML 이스케이프된다.
- 이스케이프란? 특정문자를 HTML로 변환하는 행위
- 이스케이프 되지않은 문자열을 출력하려면 {{,}}을 사용한다.
입력 값을 객체로 받아 전달하는 방법
LoginDto.java
package com.example.demo.model;
public class LoginDto {
private String name;
private String password;
public LoginDto(){}
public LoginDto(String name, String password) {
this.name = name;
this.password = password;
}
@Override
public String toString() {
return "LoginDto{" +
"name='" + name + '\'' +
", password='" + password + '\'' +
'}';
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}SampleController.java
@GetMapping("04loginInput")
public String loginDtoInput(){
return "/04loginInput";
}
@PostMapping("/05loginOutput")
public String loginDtoOutput(LoginDto dto, Model model){
System.out.println(dto);
model.addAttribute("dto", dto);
return "/05loginOutput";
}04loginInput.mustache
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>DTO를 이용한 사용자 입력 로그인창</h3>
<form action="/05loginOutput" method="post">
이름 : <input type="text" name="name"><br>
비밀번호 : <input type="text" name="password"><br>
<input type="submit" value="전송">
</form>
</body>
</html>05loginOutput.mustache
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>Object output</h3>
{{#dto}}
이름: {{name}} <br>
비밀번호 :{{password}}
{{/dto}}
</body>
</html>
ArrayList에 값을 담아 출력하기
SampleController.java
//arrayList로 출력하기
@GetMapping("/06arrayList")
public ModelAndView arrayList(){
ArrayList<LoginDto> dtos = new ArrayList<>();
dtos.add(new LoginDto("1", "1"));
dtos.add(new LoginDto("2", "2"));
dtos.add(new LoginDto("3", "3"));
ModelAndView model = new ModelAndView();
model.addObject("dtos", dtos);
model.setViewName("06Output");
return model;
}06Output.mustache
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>ArrayList Output</h3>
{{#dtos}}
이름: {{name}}
비밀번호 :{{password}} <br>
{{/dtos}}
</body>
</html>
mustache는 반복문 출력 시
{{#name}} {{/name}} 사용
Mustache Layout 설정
SampleController.java
@GetMapping("/07main")
public String getMain(){
return "07main";
}
templates 에 common 폴더를 생성해주고 footer.mustache와 header.mustache를 만들어준다.
header.mustache
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>A website created by me.</p>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
07main.mustache
{{>common/header}}
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
{{>common/footer}}
footer.mustache
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>mustache layout 구성시
{{>layout/header}} 사용
728x90
