안녕하세요
이번 시간에는 인텔리제이를 활용하여
스프링 부트 뷰 템플릿 페이지를 만들어 보겠습니다.
(1) Mustache 플러그인 추가하기
상단 Help 탭 > Find Action 클릭
검색 결과로 나온 Plugins 클릭
핸들바/머스타치 인스톨 클릭
templates 우클릭 New > File > 파일명.mustache 엔터
doc 입력 후 컨트롤 스페이스를 누르고 doc을 선택하면 자동완성이 된다.
sample.mustache
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>안녕하세요. 홍길동님!</h1>
</body>
</html>
h1 태그 문구를 추가한다.
(2) 컨트롤러 만들기
src > main > java > com.XXXXX.XXXXXX 에 controller 패키지를 추가한다.
controller 패키지에 XXXXXController로 자바 클래스를 생성한다.
컨트롤러를 만들고
제일 먼저 해줘야할 것이 있다.
먼저, public class 위에 컨트롤러 어노테이션을 추가해줘야 한다.
@Controller
그리고 url에서 요청받은 페이지로 이동하기 위해
메서드를 매핑해줘야한다.
@GetMapping("/연결할 URL ")
메소드는 요청받은 url에 맞는 화면을 return 해줘야 한다.
SampleController.java
package com.example.fisrtProject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class SampleController {
@GetMapping("/sample")
public String sampleFirst() {
return "sample"; // templates/sample.mustache -> 브라우저로 전송!
}
}
만약에 @GetMapping에 연결할 url을 적지 않으면 404 (Not found) 에러가 출력된다.
그런데, template인데 이름이 고정되어있다.
그러면 mustache에서 변수를 받을 수 있는 형태로 바꿔보도록 하자
sample.mustache
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>안녕하세요. {{name}}님!</h1>
</body>
</html>
이제 이대로 프로그램을 돌리면 에러가 난다
왜냐?
name의 변수에 값을 받지 않았기 때문이다.
Controller로 가서 Model을 사용해야 값을 받아올 수 있다.
SampleController.java
package com.example.fisrtProject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class SampleController {
@GetMapping("/sample")
public String sampleFirst(Model model) {
model.addAttribute("name", "동길홍");
return "sample"; // templates/sample.mustache -> 브라우저로 전송!
}
}
sampleFirst 메서드에 파라미터로 Model을 넣어준다.
Model을 import해서 사용할 수 있도록 하고,
model.addAtribute를 사용하여 화면으로 전달할 객체명과 객체 값을 넣어준다.
그러고 난 다음,
서버를 재기동하면
정상적으로 출력되는 것을 확인할 수 있다.
(3) 다른 페이지로 이동하기
resource > templates에 sampleTwo.mustache를 다음과 같이 만든다.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>{{name}}님 다음에 또 봬요!</h1>
</body>
</html>
SampleController에 sampleTwo 매핑을 추가한다.
package com.example.fisrtProject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class SampleController {
@GetMapping("/sample")
public String sampleFirst(Model model) {
model.addAttribute("name", "동길홍");
return "sample"; // templates/sample.mustache -> 브라우저로 전송!
}
@GetMapping("/sampleTwo")
public String sampleSecond(Model model) {
model.addAttribute("name", "짱구");
return "sampleTwo";
}
}
이제 url 주소에
localhost:8080/sampleTwo 를 입력하면 화면이 이동한다.
'자바 > 스프링 부트' 카테고리의 다른 글
| [Spring boot] 06. 스프링 부트 H2 Database 트랜잭션 확인하기 (0) | 2021.06.02 |
|---|---|
| [Spring boot] 05. 스프링 부트 JPA(Java Persistance API)로 데이터 생성하기 (0) | 2021.06.02 |
| [Spring boot] 04.스프링 부트 폼 입력 데이터 주고 받기 (0) | 2021.06.01 |
| [Spring boot] 03.스프링 부트 mustache 뷰 레이아웃(부트스트랩) 적용하기 (0) | 2021.06.01 |
| [Spring boot] 01. 스프링 부트 개발환경 만들기(JDK 설치부터, IDE(IntelliJ) 설치, 프로젝트 생성 후 실행하기 까지) (0) | 2021.06.01 |
댓글