5.3.1 회원 웹 기능 - 등록 화면 작성
앞선 MemberController 에 다음과 같은 코드를 추가로 작성한다.
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
@GetMapping("/members")
- http://localhost:8080/members 로 url에 직접 작성하면 get 방식으로 mapping
List<Member> members = memberService.findMembers()
- findMembers() 를 사용하여, 멤버를 모두 가져온다
- member를 List에 담는다.
model.addAttribute("members", members)
- member 전체를 model에 담아서 화면에 넘겨준다.
return "members/memberList"
- template 폴더의 memberList.html 로 연결된다.
다음으로, html 코드를 작성해보자.
src > main > resources > template > 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>
</body>
</html>
th : each
- thymeleaf 템플릿 엔진 문법으로, 루프를 돌면서 로직을 실행
- 템플릿 엔진이 model 로 넘겨받은 members 를 읽고, 소스코드를 새롭게 랜더링함
${members} / ${member.id} / ${member.name}
- ${ } 를 사용하면, 앞서 model 안에 넣은 값을 꺼낼 수 있음.
- 첫번째 객체를 members 에서 꺼낸 후, id 와 name 출력.
계속 루프를 돌면서 로직을 반복 수행
MemberController.java 의 전체 코드는 다음과 같다.
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("/members/new")
public String createForm(){
return "members/createMemberForm";
}
@PostMapping("/members/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 "members/memberList";
}
}
+ 추가 )
위의 코드에서, 회원가입 시 저장된 정보는 메모리 안에 있으므로,
서버를 내렸다가 다시 켜면 데이터가 모두 지워짐
데이터를 파일이나 데이터베이스에 저장하는 방법이 필요!
김영한 '스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술' 강의를 기반으로 작성하였습니다.
'SPRING 입문 [ 코드로 배우는 스프링 부트 ]' 카테고리의 다른 글
| [스프링 입문] 섹션 6.2 스프링 DB 접근 기술 (순수 JDBC) (0) | 2023.01.17 |
|---|---|
| [스프링 입문] 섹션 6.1 스프링 DB 접근 기술 (H2 데이터베이스 설치) (0) | 2023.01.17 |
| [스프링 입문] 섹션 5.2 웹 MVC 개발 (회원 웹 기능 - 등록) (0) | 2023.01.10 |
| [스프링 입문] 섹션 5.1 웹 MVC 개발 (회원 웹 기능 - 홈 화면 추가) (0) | 2023.01.10 |
| [스프링 입문] 섹션 4.2 스프링 빈과 의존관계 (자바 코드로 직접 스프링 빈 등록하기) (0) | 2023.01.10 |