* 인프런 김영한 강사님의 스프링 입문 강의 정리
이번 강의에서는 홈화면을 추가하고
회원을 등록하고 등록된 회원 목록을 조회하는 기능까지 구현해보았다.
1. 홈 화면 추가
위의 폴더 목록에 HomeController를 생성하고
templates에 home.html을 생성하였다.
[HomeController]
package myStudyspring.myStudyspring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/") ///도메인
public String home(){
return "home";
}
}- GetMapping 어노테이션으로 맵핑할 url을 써준다.
- return으로 html 파일명을 써준다.
[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>
실행하면 다음과 같이 홈화면이 만들어진다.
지난 시간에 static 하위에 index.html을 작성하였는데
컨트롤러가 정적(static) 파일보다 우선순위가 높기 때문에
실행하면 위의 파일이 홈화면으로 뜨게 된다.
회원 가입과 회원 목록을 a태그로 하여 이동할 수 있게 걸어주었고
이제 등록과 목록 컨트롤러와 화면을 구현한다.
2. 회원 등록
회원 등록은 form을 써야 하므로
MemberForm을 별도로 생성하였다.
[MemberController]
@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:/";
}- get과 post 두 가지 방식을 사용한다. get은 조회, post는 form 등을 전달할 때 주로 쓰이므로 같은 url을 다르게 맵핑할 수 있다.
- GetMapping으로 createMemberForm.html을 조회한다.
- html의 form에서 보낸 정보를 PostMapping으로 전달받아 처리한 후 홈 화면으로 redirect 한다.
[MemberForm]
package myStudyspring.myStudyspring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}- 등록 화면에서 데이터를 전달 받을 form 객체이다.
[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 태그의 action url로 데이터를 보낸다.
홈화면에서 등록하면 메모리에 데이터가 저장된다.
(메모리 저장소이므로 서버를 종료하면 데이터도 사라진다.)
등록 버튼을 누르면 데이터가 메모리에 저장되고 홈 화면으로 리다이렉트 된다.
이제 등록된 회원 리스트를 확인할 수 있는 조회 컨트롤러와 화면을 구현한다.
3. 회원 조회
[MemberController]
@GetMapping("/members")
public String List(Model model){
List<member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}- memberService의 findMembers() 메서드를 통해 회원 전체 목록을 List로 받아온다.
- Model에 담아 memberList.html 로 보낸다.
[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>- 타임리프 문법을 사용한다.
- $member는 controller에서 model에 담았던 변수명을 의미한다. model의 id랑 name을 뿌려준다.
다음과 같이 확인할 수 있다.
'컴퓨터 > Spring Boot' 카테고리의 다른 글
| [TIL] Spring Boot(intellij) - [DB-2] DB 연결과 JDBC (0) | 2023.06.02 |
|---|---|
| [TIL] Spring Boot(intellij) - [DB-1] H2 데이터베이스 설치 (0) | 2023.06.01 |
| [TIL] Spring Boot(intellij) - 스프링 빈과 의존 관계 (0) | 2023.05.27 |
| [TIL] Spring Boot(intellij) - 회원 관리 개발(2) - 테스트 구현 (0) | 2023.05.25 |
| [TIL] Spring Boot(intellij) - 회원 관리 개발(1) (0) | 2023.05.25 |
