본 포스팅은 인프런 - 스프링 입문을 강의를 바탕으로 공부하고 정리한 글입니다.
회원 웹 기능
홈 화면 추가
👉🏻 홈 컨트롤러 추가
📁 controller/HomeController
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home"; // home.html 호출
}
}👉🏻 회원 관리용 홈 뷰
📁 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>👉🏻 실행 (localhost:8080)
- 웹 브라우저로 부터 온 요청을 톰캣 서버가 받아 스프링에게 전달하면, 스프링은 정적 파일보다 컨트롤러에서 우선적으로 찾는다.
- 따라서 "localhost:8080/" 도메인으로 연결되었을 때 Welcom Page로 만들어뒀던 index.html을 무시하고 home.html을 띄운다.
회원 등록
👉🏻 회원 등록 폼 컨트롤러 추가
📁 controller/MemberController
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping("/members/new") // 회원가입
public String createForm() {
return "members/createMemberForm"; // templates에서 member/createMemberForm을 찾는다.
}
}👉🏻 회원 등록 폼 뷰
📁 templates/members/creatMemberForm
<!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>
👉🏻 웹 등록 화면에서 데이터를 전달 받을 폼 객체
📁 controller/MemberForm
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}👉🏻 회원 컨트롤러에서 회원을 실제 등록하는 기능 추가
📁 controller/MemberController
@Controller
public class MemberController {
....
@PostMapping("/members/new")
public String creat(MemberForm form) {
Member member = new Member();
member.setName(form.getName()); // 입력받은 이름을 가져와 name에 저장
System.out.println("member = " + member.getName());
memberService.join(member); // join을 통해 회원 가입 진행
return "redirect:/"; // 홈 화면(/)으로 이동
}
}- 데이터 조회시 : @GetMapping
- 데이터 등록시 : @PostMapping
- 뷰에서 이름을 입력하고 등록버튼을 누르면 Post 방식으로 넘어와 @PostMapping으로 매핑이 된다.
회원 조회
👉🏻 회원 컨트롤러에서 회원을 조회하는 기능 추가
📁 controller/MemberController
@Controller
public class MemberController {
....
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers(); // 전체 회원 조회
model.addAttribute("members", members); // 모델에 전체 회원 리스트를 담음
return "members/memberList";
}
}👉🏻 회원 목록 뷰
📁 templates/members/memberList
<!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>
- ${members}를 통해 model 안에 저장된 전체 회원을 하나씩 꺼내온다.
이때 회원 데이터는 메모리 안에 있기 때문에 서버를 끄면 모두 지워진다. 따라서 회원 데이터들을 파일이나 데이터베이스에 저장해야 한다.
다음 시간에 회원 데이터를 데이터베이스에 저장하는 방법을 알아보도록 하자!
'🌱 Spring > Core' 카테고리의 다른 글
| [기본] #2 회원, 주문, 할인 도메인 개발 및 테스트 (0) | 2022.02.21 |
|---|---|
| [기본] #1 객체 지향 설계와 스프링 (0) | 2022.02.18 |
| [입문] #7 AOP (0) | 2022.02.17 |
| [입문] #6 DB 접근기술(JDBC, JdbcTemplate, JPA, SpringJPA) (0) | 2022.02.16 |
| [입문] #4 스프링 빈과 의존관계 (0) | 2022.02.15 |
| [입문] #3 회원관리 예제 만들기 (0) | 2022.02.15 |
| [입문] #2 정적웹, MVC, API (0) | 2022.02.14 |
| [입문] #1 스프링 프로젝트 환경설정 (0) | 2022.02.14 |
