Cooper's devlog

2-1. mustache 활용한 동적인HTML과 MVC 설명 본문

Programming/Spring-boot

2-1. mustache 활용한 동적인HTML과 MVC 설명

cooper_dev 2020. 7. 10. 00:34

1.강의 링크(박재성님)

https://www.youtube.com/watch?v=v3xoltxPnOI&list=PLqaSEyuwXkSppQAjwjXZgKkjWbFoUdNXC&index=9

 

2. 학습 내용

  1. 동적인 HTML 웹 페이지 개발
  2. Spring MVC의 Model, View, Controller 기반 개발

 

3. 과정

 

 

(1) mustache template 엔진에 전달을 하고 출력을 하는 단계 연습

 

1.데이터를 전달할 controller class가 필요하다.
(net.slipp.web.WelcomeController)

 

 

 

 

(2) Contorller 생성하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package net.slipp.web;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
 
@Controller   
public class WelcomeController {
    @GetMapping("/helloworld")
    public String welcome(String name, int age, Model model) {
        System.out.println("name: " + name + " age: " + age);
        model.addAttribute("name", name);
        model.addAttribute("age", age);
        return "welcome";
    }
 
}
  

원리 : url(localhost:8787/helloworld 요청시 -> @GetMapping("/helloworld") 인식 -> 해당 페이지 출력

  • @Controller : Controller 역할을 한다는 의미의 annotation
  • @GetMapping : 서버 요청을 위해 GetMapping이라는 annotation을 사용
  • Model : Model : 브라우저에 객체를 전달하기 위한 인자

 

 

(3) url을 통해 요청 (http://localhost:8787/helloworld?name=babigi&age=30)

만약 ! 404 error가 뜬다면 ? application.properties에 spring.mustache.suffix:.html 입력하기!

 

 

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>welcome</title>
</head>
<body>
{{name}},Hello World!<br/>
나이는 {{age}}!!
</body>
</html>
 cs

원리 : model 객체에 name와 age를 받아와서 Model 객체를 전달받은 html에 {{name}}, {{age}}표시를 써서 값을 출력한다.

-추가적인 mustache docs 확인
https://mustache.github.io/mustache.5.html

요청 결과

'Programming > Spring-boot' 카테고리의 다른 글

2-3. 사용자 목록 기능 구현  (0) 2020.07.10
2-2. 회원가입 기능 구현  (0) 2020.07.10
2-0. 두 번째 반복주기 학습목표 및 과정 설명  (0) 2020.07.09
1-3. local 소스 코드를 github에 올리기  (0) 2020.07.07
1-2. HTML 개발  (0) 2020.07.07
'Programming/Spring-boot' Related Articles more
Comments