반응형
- MVC의 역할
1)컨트롤러
서버에서 요청은 컨트롤러가 받는다.
@GetMapping 어노테이션을 통해
package com.example.first.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class FirstController {
@GetMapping("/hi")
public String niceToMeetYou(Model model){
model.addAttribute("username","kimjiwon");
return "greetings";
// templates/greeting.mustache -> 브라우저로 전송!
}
@GetMapping("bye")
public String seeYouNexT(Model model){
model.addAttribute("nickname","flykimjiwon");
return "goodbye";
}
}
2)model
컨트롤러 내부의 model객체를 통해 data를 전달한다.
3)view
view template에서 보여준다.
각각 컨트롤러에서 hi, bye를 구분해서 페이지가 나눠지는 모습이다.
슬슬 개념이 잡혀가고 있다. 기회가 생겨서 공부하고 있는데 지식이 넓어지고 있는게 느껴진다.
- Spring Boot CRUD제작을 위한 템플릿 제작하기
-Layout
<header>
<content>
<footer>
1)Bootstrap을 이용해준다.
https://getbootstrap.com/docs/5.3/components/navbar/#nav
Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
getbootstrap.com
2)header, footer를 만들어준다.
header.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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>footer.mustache
<!-- site info -->
<div class="mb-5 container-fluid">
<hr>
<p>flykimjiwon - <a hred="#">site</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</body>
</html>3) {{ >}} 를이용해 삽입 해 준다.
greetings.mustache
{{>layouts/header}}
<!-- content -->
<div class="bg-dark text-white p-5" >
<h1>{{username}}, Hello!</h1>
</div>
{{>layouts/footer}}goodbye.mustache
{{>layouts/header}}
<div class="bg-dark text-white p-5" >
<h1>{{nickname}} see you next!</h1>
</div>
{{>layouts/footer}}4)결과
이제 본격적으로 CRUD를 제작해보자
지금까진 MVC패턴에 대한 감을 잡았고 대략적은 SpringBoot 디렉토리, 파일등의 개념을 본것같다.
SpringBoot로 CRUD까지는 제작 해봐야 더 큰 개념을 알 수 있을거같다.
그래도... 협업만 해봤지 직접해보니까 다른세계가 보이는거같아 뿌듯하다.
반응형
'JAVA, Spring' 카테고리의 다른 글
| Spring Boot CRUD만들어보기 (데이터생성 JPA, DB로저장) (0) | 2023.04.03 |
|---|---|
| Spring Boot CRUD만들어보기 (form, dto, controller 설정) (0) | 2023.04.03 |
| JAVA 객체지향 프로그래밍에 대한 이해 (0) | 2023.04.03 |
| Spring Boot 뷰 템플릿과 MVC패턴 (0) | 2023.04.02 |
| 스프링 부트 첫 프로젝트 만들어보기 (0) | 2023.04.02 |
