728x90
해당 강의는 Inflearn에 등록된 김영한님의 Springboot 강의입니다.
이번 장에는 홈 화면을 구성하고, 회원을 메모리에 등록, 조회를 MVC 방식으로 개발하겠다.
우리가 만들어 놓은 서비스,리포지토리를 이용하여 MemberController에서 작동하는 방식으로 개발을 한다.
1. 회원 웹 기능 - 홈 화면 추가
홈 컨트롤러 추가
@Controller
public class HomeController {
@GetMapping("/")
public String home () {
return "home";
}
}코드 설명
- home: HTTP GET 요청이 "/" 경로로 들어왔을 때 실행되는 메서드
- ★사용자는 "http://localhost:8080/" 으로 입력하므로 바로 이 콘트롤러의 메소드가 실행.
- ★★이 메서드는 뷰이름인 home을 return하고,view resolver가 "home.html"이라는 view template을 찾는다.
- ★★★★이때 템플릿엔진이 view template을 웹브라우저에 띄운다.
- 컨트롤러가 정적 파일(static)보다 우선순위가 높으므로 콘틀로러가 먼저 실행된다.
회원 관리용 홈 추가 resources/templates/에 추가
<!--회원 관리용 홈-->
<!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>2. 회원 웹 기능 - 등록
회원 등록 폼 생성 메서드를 MemberController 에 추가
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController (MemberService memberService )
{
this.memberService=memberService;
}
//Form 생성
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
}코드 설명
- home.html을 보면 회원가입을 클릭하면 a 태그를 통해
/members/new로 이동하게 되어 있다. - 위의 경로로 오면 createForm 메서드가 실행되고 바로
/members/createMemberForm로 이동한다.
회원 등록 폼 HTML ( resources/templates/members/createMemberForm )
<!--회원 등록 폼-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div class="container">
<!--action url로,post method방식을 통해 입력값이 넘어간다.(콘트롤러의 @postMapping에서 받음) -->
<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 태그에서 action url로 post method방식을 통해 입력값이 넘어간다.
(콘트롤러의 @postMapping에서 받음)
웹 등록 화면에서 데이터를 전달 받을 폼 객체
//웹 등록 화면에서 데이터를 전달 받을 폼 객체
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}이는 웹 등록 화면 에서 데이터를 전달 받을 객체이므로 getter와 setter를 설정했다.
회원 컨트롤러에서 회원을 실제 등록하는 기능
//회원 컨트롤러에서 회원을 실제 등록하는 기능
@PostMapping("/members/new") //post는 받을때, get은 조회할때 자주 쓴다.
public String create(MemberForm form) { //html form에서 값 받을 객체 선언.
Member member = new Member();
member.setName(form.getName()); //"name"이란 키값을 name이라 선언하면 스프링이 넣어준다.
System.out.println("member= " + member.getName()); //member= 입력값 출력
memberService.join(member); //join을 통해 repo에 member객체를 save를 한다.
return "redirect:/";
}코드 설명
- 멤버 객체의 값을 세팅하는데, 사용자의 입력값(form.getName())으로 setting한다.
- 해당 멤버 객체를 서비스에 만들어 놓은
join함수를 통해 리포지토리로 값이 넘어가고 리포지토리에서 저장한다. - 저장이 끝나면
"/"로 다시 화면이 넘어간다. 즉 등록 버튼을 클릭하면 submit되면서 웹 페이지는 새로고침하며 초기"/"경로 (홈 화면)로 redirect한다.
등록 결과
3. 회원 웹 기능 - 조회
회원 컨트롤러에서 조회 기능
//회원 컨트롤러에서 조회 기능
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers(); //멤버의 객체에서 모든 멤버를 찾음
model.addAttribute("members", members);
return "members/memberList";
}코드설명
- 홈화면에서 조회 버튼을 클릭하면 "/members" 경로로 넘어가고, list 메서드 실행.
- 저장한 객체들을 List로 받아서 모델에 추가
- "memberList.html"이란 view로 이동
회원 리스트 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>
<!-- th: for(member in members)를 통해 각 멤버를 찾느다.-->
<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>조회 결과
728x90
