회원 웹 기능 - 홈 화면 추가
홈 컨트롤러 추가 (java/hello/hellospring/controller/HomeController.java)
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";
}
}
회원 관리용 홈 (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>위 두 가지 파일을 생성하고 웹브라우저로 접속해 보자.
그럼 이렇게 회원 가입, 회원 목록이 화면에 추가된 것을 확인할 수 있다.
회원 가입을 눌러보면, home.html에서 추가한 대로 members/new로 이동한다.
마찬가지로 회원 목록을 누르면 members로 이동한다.
이렇게 화면이 정상적으로 전환되면 성공이다.
컨트롤러가 정적 파일보다 우선순위가 높다.
회원 웹 기능 - 등록
회원 등록 폼 컨트롤러 (MemberController.java)
@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";
}
}
회원 등록 폼 HTML (resources/templates/members/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>
웹 등록 화면에서 데이터를 전달받을 폼 객체 (java/hello/hellospring/controller/MemberForm.java)
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
회원 컨트롤러에서 회원을 실제로 등록하는 기능 (MemberController.java)
@PostMapping(value = "/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/"; // 리다이렉션
}
파일 생성 후 스프링을 다시 실행하고 웹브라우저에서 확인해 보자.
회원 가입 창으로 들어가서 이름에 spring을 입력하고 등록을 눌렀을 때 Whitelabel Error Page가 나오면 성공이다.
(주로) 조회할 때: GET Mapping 사용
데이터를 폼에 연결할 때: POST Mapping 사용
회원 웹 기능 - 조회
회원 컨트롤러에 조회 기능 추가 (MemberController.java)
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
회원 리스트 HTML (resources/templates/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> <!-- /container -->
</body>
</html>
스프링을 재시작하고 브라우저에서 확인해 보자.
회원 추가에서 spring1, spring2를 먼저 등록해 준다.
다음으로 회원 목록을 확인해 보자.
방금 추가한 spring1, spring2가 정상적으로 보인다!
소스를 보면 위와 같이 렌더링 되어 있는 것을 확인할 수 있다.
자바의 getter(getId, getName)를 이용해 값을 가져온 것이다.
스프링을 껐다가 다시 실행해 보자.
아까 입력해 놓은 값들이 전부 사라져 있다.
이런 현상을 방지하기 위해 (당연히) 데이터베이스를 사용해야 한다.
'Spring > Study' 카테고리의 다른 글
| [스프링 입문] 4. 스프링 빈과 의존관계 (0) | 2023.01.24 |
|---|---|
| [스프링 입문] 3. 회원 관리 예제 - 백엔드 개발 (0) | 2023.01.22 |
| [스프링 입문] 2. 스프링 웹 개발 기초 (1) | 2023.01.15 |
| [스프링 입문] 1-1~3. 라이브러리 살펴보기, View 환경설정, 빌드하고 실행하기 (1) | 2023.01.13 |
| [스프링 입문] 1-0. 스프링 부트 프로젝트 생성 (1) | 2023.01.13 |