목차
0. 환경
- m1 macbook
- IntelliJ IDEA(m1) - 202102
- java 11(AdoptOpenJDK-11.0.11)
- 자바를 설치하지 않았다면 아래의 링크를 활용해주세요.
1. 홈 화면 추가
- hello/hellospring/controller/HomeController.java
- resources/templates/home.html
1.1. 홈 컨트롤러
- HomeController(hello/hellospring/controller/HomeController.java) 클래스를 생성 후 다음 소스를 입력해줍니다.
- 아래의 링크를 보면 정적 컨텐츠로 /src/main/resources/static/index.html 파일을 생성 해 두었지만 컨트롤러가 정적 파일보다 우선순위가 높으므로 컨트롤러에 지정한 경로를 viewResolver가 home.html 파일을 찾아 찾아 반환합니다.
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";
}
}1.2. 회원 관리 홈 html
- resources/templates/home.html
<!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>1.3. 실행 결과
- 웹 브라우저를 이용해 localhost:8080으로 접속하면 다음과 같은 화면이 나타나는 것을 확인할 수 있습니다.
2. 등록
- hello/hellospring/controller/MemberController.java
- templates/members/createMemberForm.html
- hello/hellospring/controller/MemberForm.java
2.1. 회원 등록 컨트롤러
- hello/hellospring/controller/MemberController.java
- @GetMapping(value = "/members/new")
- members/createMemberForm.html 파일을 연결( return "members/createMemberForm"; )해 브라우저에 출력해줍니다.
- @PostMapping(value = "/members/new")
- createMemberForm.html으로부터 데이터를 받아 회원 가입 처리( memberService.join(member); )를 합니다.
- 회원 가입 처리 후 /로 리다이렉트 합니다.( return "redirect:/"; )
package hello.hellospring.controller;
import hello.hellospring.domain.Member;
import hello.hellospring.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;
import java.util.List;
@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";
}
//회원 가입 처리
@PostMapping(value = "/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
}2.2. 회원 등록 폼 html
- templates/members/createMemberForm.html
- members 디렉터리를 추가 후 생성해줍니다.
<!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>2.3. 회원 등록 폼에서 데이터 전달받을 객체
- hello/hellospring/controller/MemberForm.java
- createMemberForm.html 에서 입력받은 데이터를 스프링이 MemberForm 객체를 이용해 자동으로 setName 호출을 통해 데이터를 객체에 넣어서 받아 줍니다.
- <input type="text" id="name" name="name" placeholder="이름을 입력하세요">
- public void setName(String name) { this.name = name; }
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}2.4. 실행 결과
1. 아직 회원 목록이 개발되지 않았으므로 회원 입력이 잘 되었는지 테스트를 위해 MemberController 컨트롤러에 출력을 추가해줍니다.
@PostMapping(value = "/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
System.out.println(member.getName());//html로 부터 입력을 잘 받는지 출력 테스트
memberService.join(member);
return "redirect:/";
}2. 회원 가입을 클릭해 회원 가입 폼으로 이동합니다.
3. 회원명을 입력하고 등록을 클릭합니다.
4. 인텔리제이를 보면 데이터를 입력을 잘 받아 출력이 잘 되는 것을 확인할 수 있습니다.
3. 조회
- hello/hellospring/controller/MemberController.java
- templates/members/memberList.html
3.1. 회원 조회 기능 컨트롤러
- hello/hellospring/controller/MemberController.java
- memberService.findMembers(); 를 이용해 회원 목록을 모두 가지고 옵니다.
- model.addAttribute("members", members); Model 클래스를 이용해 받은 회원 목록을 memberList.html 파일로 넘겨줍니다.
- 단축어(mac + 인텔리제이)
- [Command] + [e] = 최근에 본 파일 목록 창 접근
@GetMapping(value = "/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}3.2. 회원 리스트 html
- templates/members/memberList.html
- Model 클래스를 이용해 넘겨받은 회원 목록을 thymeleaf의 반복 출력 문법을 이용해 회원 목록을 출력해줍니다. (each)
- html 소스의 member.id나 member.name을 커맨드를 누루고 클릭할 경우 해당하는 객체(Member 클래스)의 getter( getId(), getName() )로 접근이 됩니다. (무료 버전일 경우 접근이 안 될 수도 있습니다.)
<!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>3.3. 실행 결과
1. 홈에서 회원 목록으로 접근합니다. (회원 가입 과정은 생략합니다.)
2. 회원 목록이 출력되는 것을 확인할 수 있습니다.
'Backend > 코드로 배우는 스프링 부트' 카테고리의 다른 글
| [코드로 배우는 스프링 부트] 9. 순수 Jdbc H2DB 연동하기 (0) | 2021.11.05 |
|---|---|
| [코드로 배우는 스프링 부트] 8. H2DB 설치 (0) | 2021.11.04 |
| [코드로 배우는 스프링 부트] 6. 스프링 빈과 의존관계 (의존성 주입 방식) (0) | 2021.11.02 |
| [코드로 배우는 스프링 부트] 5. 스프링 빈과 의존관계 (자바 코드로 직접 스프링 빈 등록하기) (0) | 2021.11.01 |
| [코드로 배우는 스프링 부트] 4. 스프링 빈과 의존관계 (컴포넌트 스캔과 자동 의존관계 설정) (0) | 2021.10.26 |
