순서도
1. 첫 화면, coupon.html로 이동 ("/" URL 입력)
package Goat.CouponCheck.controller;
import Goat.CouponCheck.domain.Coupon;
import Goat.CouponCheck.domain.Member;
import Goat.CouponCheck.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping("/")
public String check(Model model) {
Coupon coupon = new Coupon();
model.addAttribute("data", coupon.getNum());
return "coupon";
}
@GetMapping("/new")
public String createForm(){
return "newMembers";
}
@PostMapping("/new")
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return"redirect:/";
}
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members",members);
return "memberList";
}
}-
GetMapping
getmapping 방식이란, url로 들어온 정보를 get으로 catch 해서 정보를 조회할 때 유용하게 사용. -
PostMapping
postmapping 방식이란 해당 url을 통해 서버로 전송한 정보를 다룰 때 사용
이때 GetMapping의 설명은 Spring 1편에서 비슷하게 말했다.
설명할 것은 PostMapping이다.
다음은 coupon.html 코드이다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coupon Check</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="title">Give Me Coupon</div>
<div>
<a href="/new">회원가입하기</a>
<a href="/members">회원 조회하기</a></div>
<div id="divbutton" th:text = "|현재 ${data} 개가 남았습니다!|" >현재 0개 남았습니다 !</div>
</div>
</body>
</html>해당 html에서 a태그로 회원가입과 회원조회를 할 수 있게 했다. 마찬가지로, Controller측에서 Mapping이 가능하도록, a태그의 하이퍼링크를 Controller와 맞출 필요가 있다.
2. 회원 가입하기를 누르면? ("/new" 의 Get)
coupon.html에서 회원가입하기를 누르면 "/new"로 이동하고, 이는 Controller에서 get방식으로, newMembers.html을 반환한다. 그러면 templates에서 newMembers.html을 찾아서 렌더링 해줄 것이다.
다음은 해당 html이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coupon Check</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<form action="/new" method="post">
<div class="form-group">
<label for="name">이름</label>
<input type="text" id="name" name="name" placeholder="이름을 입력하세요">
</div>
<button type="submit">등록</button>
</form>
</div>
</body>
</html>3. "등록"을 누르면? ("/new" 로 post 전송)
해당 html이 post방식으로 "/new" URL에 전송하는데, 이를 Controller에서 PostMapping방식으로 처리를 해준다.
건네준 인자는 name="name"으로써, 해당 name이 결국 Controller쪽 form.getName으로 넘어간다.
다음은 MemberForm 클래스이다.
package Goat.CouponCheck.controller;
public class MemberForm { //form 태그와 연동 "name"과 일치하게 됨.
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}이는 Controller에 추가한 MemberForm 클래스로, 해당 패키지내 클래스를 통해서 name인자를 받고, 해당 클래스의 호출로 MemberClass에서 회원가입을 가능케 한다.
4. 회원정보 조회하기
coupon.html에서 회원조회하기를 누르면 "members"로 이동하는데,
Controller에서 해당 URL을 get으로 받아, 회원정보 조회를 위해 memberService 클래스에서 모든 회원 정보들을 list로 반환하고, 해당 list를 model에 실어서 "memberList.html"을 반환한다.
다음은 "memberList.html"이다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coupon Check</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div>
<table>
<thead>
<tr>
<th>#</th>
<th>이름</th>
</tr>
</thead>
<tbody>
<tr th:each="member : ${members}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>여기서, ${members}는 Controller에서 건너온 model의 key로써,
해당 key에 속한 value값으로 치환된다.
타임리프만의 루프를 돌면서, 렌더링을 해준다.
이와 같은 정보들은 서버를 끄고 키면, 다 사라지게 되어있다.
Memory에 등록한 것이기 때문!
