● 회원 웹 기능 - 홈 화면 추가
컨트롤러 추가
package hello.hellospring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}Home 화면 추가
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<div>
<h1>Hello Spring</h1>
<p>회원 기능</p>
<p>
<a href="/members/new">회원 가입</a>
<a href="/members">회원 목록</a>
</p>
</div>
</div> <!-- /container -->
</body>
</html>최초 localhost:8080 을 입력하여 웹서버를 동작할때 원래 static 의 index.html 을 찾게 스프링은 동작하지만
위 처럼 Controller 에 "/" 을 Mapping 해주면 해당 메소드로 오게되면서 return 된 html 을 찾아 보여주게 된다.
● 회원 웹 기능 - 등록
MemberController 에 회원 등록 메소드 등록
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping(value = "/members/new")
public String createForm() {
return "members/createMemberForm";
}
}회원 등록할 페이지 생성 templates/members/createMemberForm.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<form action="/members/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>
<!-- /container -->
</body>
</html>
위와 같이 생성이 되었으면 회원가입을 위해 이름을 입력 후 등록 버튼을 누를 것이다.
등록을 위한 메서드를 만들어 보자
회원 Form 클래스 생성 ( MemberForm.java )
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}MemberController.java 에 아래와 같이 create 메서드 추가
//data 를 form 에 담아 보낼때 post 를 사용하고 get은 조회할때 주로 사용.
@PostMapping(value= "members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
mapping url 은 아까 등록한 createForm 메서드와 같지만 get 방식과 post 방식에서의 차이가 존재한다.
get 의 경우 간단히 페이지 이동 및 조회할 때 주로 사용을 하고 post 의 경우 form 을 통해 데이터를 전달할때 주로 사용된다. Spring 에선 get/ post 방식에 따라 따로 Mapping 을 구현할 수 있다.
MemberForm.java 을 만든 이유 및 스프링 동작 원리에 대해 설명해 보자면 현재는 이름밖에 없지만 사용자의 여러 값을 간편히 담아주는 틀을 생성한 것이라고 생각하면 될 것 같다. 회원 등록 화면에서 이름이 name 이란 input 박스 안에 사용자 이름이 담겼을 것이고 등록 버튼을 통해 submit 을 하게되면 name 이 컨트롤러로 전달이 되어 매개변수의 MemberForm 을 확인하게 될 것이고 그 클래스 안의 name 변수와 아까 input의 이름인 name이 매칭되어 setter 메서드를 통해 name 변수에 값을 담아 다시 반환해 주는 원리이다.
그렇게 가져온 name 을 Member 객체에 담아 저장해주면 회원가입 끝!
● 회원 웹 기능 - 조회
MemberController.java 에 전체 회원목록을 불러오는 메서드 list 작성
@GetMapping(value = "/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}회원 목록을 보여줄 html 작성
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<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>
<!-- /container -->
</body>
</html>thymeleaf 의 th:each="변수 : ${컨트롤러 model에서 지정해준 key 값}" 을 통해 반복하여 아래와 같이 등록된 모든 회원을 뽑아줄 수 있다.
'SPRING' 카테고리의 다른 글
| 스프링 공부 - 6 (0) | 2022.09.14 |
|---|---|
| 스프링 공부 - 4 (0) | 2022.09.01 |
| 스프링 공부 - 3 (1) | 2022.08.27 |
| 스프링 공부 - 2 (0) | 2022.08.27 |
| 스프링 공부 - 1 (0) | 2022.08.24 |
