이 글은 인프런에서 김영한님의 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술"을 수강 후 개인적으로 공부한 내용을 정리한 게시글입니다. 잘못된 점이나 부족한 부분이 있다면 언제든 지적 부탁드립니다
- 회원 웹 기능 - 홈 화면 추가
- 회원 웹 기능 - 등록
- 회원 웹 기능 - 조회
1. 회원 웹 기능 - 홈 화면 추가
> Controller에 HomeController 추가
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";
}
}@GetMapping을 사용하여 "/"와 같은 url을 입력 시 templates 폴더에서 "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"으로 홈 화면 접속 시 static의 index.html을 띄웠지만, 이번에는 홈 화면을 띄우는 컨트롤러를 만들어 직접 작성한 홈 화면이 나타났다. ->컨트롤러가 정적 파일(/static/.html)보다 우선순위가 높기 때문!
2. 회원 웹 기능 - 등록
# 회원 등록 폼 개발
> Controller 아래 MemberController 생성
: localhost:8080/members/new 에 들어오면 Spring이 자동으로 src/main/resouces의 templates에서 members/createMemberForm라는 이름의 View를 찾아서 반환해준다.
> resources/templates/members/아래에 회원 등록 폼 Html 생성 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> 태그 : 값을 입력받을 수 있는 html 태그
🐻 지금까지 작성한 코드를 실행 해 홈 화면에서 회원가입 버튼을 누르면 @GetMapping을 통해 "/members/new"로 이동하고, 리턴된 "/members/createMemberForm" view를 볼 수 있다.
# 회원 등록 컨트롤러
> 웹 등록 화면에서 데이터를 전달 받을 폼 객체
: Controller 아래 MemberFrom 클래스 생성
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}: alt + ins 단축키로 getter setter 이용
: 스프링은 createMemberForm.html의 "name"을 보고 MemberForm 클래스의 setName()을 호출해 멤버변수 name에 우리가 입력한 데이터를 넣어준다.
> 회원 컨트롤러에서 회원을 실제 등록하는 기능
: Controller 아래MemberController.java에 코드 추가
: MemberControll에 @PostMapping을 사용한 메서드를 추가해 입력한 데이터를 등록하는 기능을 구현해보았다.
: 홈 화면에서 회원가입 버튼을 누르면 members/new로 이동하게 된다. 여기서 "스프링"을 입력하고 등록 버튼을 누르면 매개변수인 MemberForm 객체 form의 name이 우리가 입력한 값으로 저장되어 전달된다. Member 객체 member에 "스프링"값을 저장해주고 회원 서비스의 join() 메서드로 회원가입을 진행한다. 그리고 redirect:/를 리턴하는데 그러면 홈화면으로 돌아가게 된다.
✔️🐶
@GetMapping : 저장된 데이터를 조회
@PostMapping : 데이터를 form에 넣어 전달(등록)
3. 회원 웹 기능 - 조회
> MemberController에 @GetMapping으로 조회 기능 추가
: memberService의 findMembers() 메서드를 사용해 등록된 모든 회원들을 리스트 형태로 저장한다. 모델에 이를 저장해 "members/memberList"를 리턴하면서 모델을 넘겨준다.
> 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>
지금까지 우리는 데이터를 메모리 리포지토리에 저장하였기 때문에 서버를 끄면 데이터가 다 날라간다. 따라서 파일이나 데이터 베이스에 데이터를 저장해야하는데 다음 시간부터 공부해보겠다.
출처
인프런 김영한님 스프링 입문 - 회원관리 예제 웹 MVC 개발
'Server > Spring boot' 카테고리의 다른 글
| 인텔리제이로 스프링 부트 시작하기 (0) | 2022.08.29 |
|---|---|
| [Spring boot] Error : cannot deserialize from Object value (0) | 2022.05.18 |
| [스프링] 인프런 스프링 입문 #스프링 빈과 의존관계 (0) | 2022.01.30 |
| [스프링] 인프런 스프링 입문 #회원 관리 예제 - 백엔드 개발 #2 (0) | 2022.01.19 |
| [스프링] 인프런 스프링 입문 #회원 관리 예제 - 백엔드 개발 #1 (0) | 2022.01.18 |
