활용
신규 URL 값을 생성하고, 해당 URL로 접속 시 return 값으로 정의된 html 파일을 반환한다.
html 파일에 변수 값을 설정하면, 메소드에 등록된 모델과 맵핑되어 변수값이 html 파일이 호출될때 함께 표시 된다.
뷰 템플릿은 하나의 화면에서 변수값만 변경하여 화면에 뿌려주는 역할을 한다.
Spring 프로젝트를 생성 시 Mustache 라이브러리를 추가하였는데, 이 라이브러리가
해당 기능을 수행한다.
MVC 패턴
View : 화면
Controller : 처리
Model : 데이터 관리
Mustache 플러그인 설치
인텔리j 상단메뉴 help > find Action > plugins > 플러그인 화면에서 설치 (핸들바스/머스태치)
템플릿 파일 생성
뷰 템플릿 파일은 src > main > resource > templates 폴더안에 생성한다.
파일명을 greetings.mustache로 생성한다.
doc > tab 버튼을 누르면 기본 html 코드를 자동으로 생성한다.
컨트롤러 생성
뷰 템플릿을 보기위해서는 컨트롤러가 필요하다.
컨트롤러를 생성하여 맵핑을 시킨다.
자바 기본패키지 폴더에 controller라는 이름으로 패키지를 생성한다.
controller 패키지 안에 java class 파일을 FirstController 라는 이름으로 생성한다.
컨트롤러코드 설명
package com.example.firstproject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class FirstController {
@GetMapping("/hi") //접속 가능한 url을 명시
public String niceToMeetYou() {
return "greetings"; // templates/greetings.mustache -> 브라우저로 전송!
}
}hi라는 url을 호출 시 리턴값으로 greeting.mustache를 반환해준다.
컨트롤러를 만들때 먼저 컨트롤러를 선언하고 리턴 값으로 보여줄 페이지의 이름을 이름만 적어준다.
그다음에 GetMapping이라는 연결고리 url을 연결시켜주면 된다.
localhost:8080/hi 라는 주소로 접속하면 아래와 같은 페이지로 이동한다.
Mustache 문법을 활용한 동적으로 변하는 텍스트 구현
모델 반영 소스코드
greetings.mustache
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>짱구의 게시판 페이지 입니다.</title>
</head>
<body>
<h1>{{username}}의, 게시판 만들기 테스트 페이지 입니다.</h1>
</body>
</html>FirstController.java
package com.example.firstproject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class FirstController {
@GetMapping("/hi") //접속 가능한 url을 명시
public String niceToMeetYou(Model model) {
model.addAttribute("username", "짱구"); //모델은 짱구라는 이름을 username에 맵핑시켜서 보내주는 역할을 한다.
return "greetings"; // templates/greetings.mustache -> 브라우저로 전송!
}
}컨트롤러를 만들고 페이지를 리턴 하는데 탬플릿 변수를 활용하기 위해서 모델을 파라미터로 넣었다 정도로 이해하면 될거 같다.
변수의 값의 따라서 화면에 보여지는 게시물의 값이 변한것을 확인 할 수 있다.
'⭐ SpringBoot > 𝄜 게시판 with SpringBoot' 카테고리의 다른 글
| 6. 폼데이터 주고받기 (0) | 2022.03.31 |
|---|---|
| 5. 뷰 템플릿과 레이아웃 (0) | 2022.03.30 |
| 4. 모델, 뷰, 컨트롤러의 역할 (0) | 2022.03.30 |
| 2. 웹서비스 동작 원리 (0) | 2022.03.30 |
| 1. 스프링부트 개발환경 세팅 (2) | 2022.03.30 |
