- [회원 웹 기능 - 홈 화면 추가]
- [회원 웹 기능 - 등록]
- [회원 웹 기능 - 조회]
MemberController를 통해서 회원을 등록하고 조회하는 기능을 만들어 보겠다.
회원 웹 기능 - 홈 화면 추가
// 홈 컨트롤러 추가
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("/") : Localhost8080을 들어오면 밑의 코드가 호출이 된다. 즉 home을 return하니까 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>→ 컨트롤러가 정적 파일보다 우선순위가 높기 때문에 index.html이 아닌 home.html이 나타남
이해가 안된다면 아래 그림을 참고해라
- 동작 순서가 컨테이너 안에 ①관련 컨트롤러가 없으면 ②static(정적) 파일을 찾게끔 되어있다.
- 위의 코드에는 관련 컨트롤러(HomeController)에 매핑된게 있으니까 이 컨트롤러를 호출하는 것이다.
- [회원 웹 기능 - 홈 화면 추가]
- [회원 웹 기능 - 등록]
- [회원 웹 기능 - 조회]
회원 웹 기능 - 등록
MemberController
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
//페이지 이동
@GetMapping(value = "/members/new") //home.html을 보면 /members/new 라는 URL로 이동하기 때문
public String createForm() {
return "members/createMemberForm"; //templates/members패키지 생성 /그 안에 createMemberForm.html 생성
}
}→ MemberController에 추가
회원 등록 폼 HTML - 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>
회원 등록 컨트롤러
웹 등록 화면에서 데이터를 전달 받을 폼 객체
- 이게 없으면 http에서 이름을 입력해도 오류가 난다. 즉 껍데기만 있는 상황인 것이다.
package hello.hellospring.controller;
public class MemberForm {
private String name; //이 name과 createMemberForm.html의 name이 매칭이 된다
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
MemberController - 회원 컨트롤러에서 회원을 실제 등록하는 기능을 추가
@PostMapping(value = "/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
동작원리 설명
1. localhost:8080 창을 들어가면 이렇게 구성되어 있다.
2. 회원 가입에 들어가면 /members/new로 들어가게된다.
이런식으로 URL을 치고 들어오는 것을 Get방식이라 한다.
3. 이 코드로 들어오게 되고 이 코드가 매핑이 되는데 이것은 별 다른 기능을 하는 것 없이 member/createMemberForm으로 이동하게 된다.
- 4. 뷰리졸버를 통해서 이 html이 선택이 되고 http에 이 html이 뿌려진다.
- <form>은 값을 입력하는 html 태그이다.
- name = "name" 의 "name"은 서버로 넘어갈 때 키가 된다.
- 아까 http창에서 이름을 spring이라고 입력하고 등록 버튼을 누르면
- <form action="/members/new" method="post"> 에서 /members/new 이 URL로 post방식으로 입력한 spring이 넘어온다.
- 어디로 넘어오냐면 밑의 코드로 넘어온다.
5. create메서드를 호출하는데 옆에 보면 MemberFrom이 있다.
6. 즉 member/createMemberForm에 있는 name은 위의 @PostMapping을 통해 MemberForm으로 들어와서 이곳의 name에 아까 입력한 spring이라는 값이 들어오는 것이다.
더 정확히는 setName을 통해서 값이 들어가는 것이다.(private이기 때문)
7. 그럼 getName을 통해서 값을 꺼내는 것이다.
그리고 memberService.join을 통해서 member가 가입이 되는 것이다.
- redirect란 'URL을 다시 가리킨다' 라는 뜻을 가지며, 클라이언트는 해당 URL로 다시 요청하게 된다. 여기서 말하는 클라이언트는 보통 웹브라우저를 뜻한다. 웹브라우저는 서버에서 redirect하라고 오게 되면, redirect를 해야되는 URL로 다시 요청을 보내는 역할을 한다.
@GetMapping 과 @PostMapping
- @GetMapping : 쉽게말해 기본적으로 URL창에다가 딱 엔터치는건 GetMapping이다. 주로 조회할 때 사용
- @PostMapping : 데이터를 form같은 곳에다가 넣어서 전달을 할 때 사용한다. 주로 데이터를 등록할 때 사용
- URL은 똑같지만 Get이냐 Post냐에 따라서 다르게 매핑할 수 있다
- [회원 웹 기능 - 홈 화면 추가]
- [회원 웹 기능 - 등록]
- [회원 웹 기능 - 조회]
회원 웹 기능 - 조회
- http창의 회원 목록 기능을 만들어 보겠다.
- members로 가게끔 설정
MemberController - 회원 컨트롤러에서 조회 기능 추가
@GetMapping(value = "/members")
public String list(Model model) {
List<Member> members = memberService.findMembers(); //모든 멤머 가져오기
model.addAttribute("members", members); //가져온 모든 멤버의 리스트를 model에 담기
return "members/memberList"; //뷰템플릿에 넘길거임 / members/memberList.html생성
}
memberList.html 생성 - 회원 리스트 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}"> //MemberController에서 model안에 있는 값을 꺼냄
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>
</tbody>
</table>
</div>
</div> <!-- /container -->
</body>
</html>- ${members} : model에 있는 members값을 가져오는 것이다.
- th:each : Thymeleaf에서 특정 요소를 for문처럼 반복하는 방법으로 th:each가 있다. <tr> 요소가 리스트{members] 사이즈만큼 반복된다.
- 회원가입을 누르고 spring1, spring2를 가입시킨다.
- 회원 목록을 누르면 왼쪽과 같은 화면이 나온다.
- 페이지에서 소스코드 보기를 누르면 다음과 같은 코드가 나온다.
- 2명의 회원을 입력하였으니 th:each를 통해 루프를 돌면서 로직을 실행하여 객체 2개가 출력되는 것이다.
- 서버를 내렸다가 다시 키게 되면 데이터는 다 지워진다. 데이터는 메모리 안에 있었기 때문이다. 그래서 데이터는 데이터베이스에 저장을 해야한다. 이 과정은 다음 피드에서 설명하겠다.
출처 : 인프런 - 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 김영한
'SPRING > 스프링 입문 (김영한 강사님)' 카테고리의 다른 글
| AOP (2) | 2023.05.10 |
|---|---|
| 스프링 DB 접근 기술 (0) | 2023.05.10 |
| 스프링 빈과 의존관계 (1) | 2023.05.03 |
| 회원 관리 예제 - 백엔드 개발 (1) | 2023.05.03 |
| 스프링 웹 개발 기초 (0) | 2023.05.02 |
