회원 웹 기능 - 홈 화면 추가
1. 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";
}
2. 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>
</body>
</html>
localhost:8080에서 위와 같은 웹 페이지가 만들어 진다
회원 웹 기능 - 등록
1. MemberController에 GetMapping 설정
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
members/new 라는 url에 접근 → GET 방식!
GetMapping이 매핑되면서, members/createMemberForm으로 이동 → html이 렌더링된다
2. createMemberForm 생성
templates → members 에 해당 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>
</body>
</html>그럼, 다음과 같은 html이 만들어지고 이름을 입력받을 수 있다
name이 서버로 넘어올 때의 key 역할!
등록 버튼을 누르면?
action 태그를 보면 method가 post → PostMapping!데이터 등록할 때 POST
데이터 조회할 때 GET
3. MemberForm 생성
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
private name 값에 입력한 이름이 들어가게 된다
private라서 직접 접근하지는 못하고, setName을 통해서 값이 들어감!
4. MemberController에 PostMapping 설정
@PostMapping("/members/new")
public String create(MemberForm form) {
Member member = new Member();
member.setName(form.getName());
System.out.println("member = " + member.getName());
memberService.join(member);
return "redirect:/";
}
등록 버튼을 누르면 post 요청이 되므로,
GetMapping과 url은 같지만 PostMapping을 실행하게 된다
MemberForm의 form에서 getName으로 이름값을 꺼낸다
join을 통해 가입 성공!
회원 웹 기능 - 조회
1. MemberController에 GetMapping 설정
@GetMapping("/members")
public String list(Model model) {
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
키가 members이고, 모든 members의 값을 리스트 형식으로 담아둔 상태
2. 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>
</body>
</html>th:each 에서 루프를 돌면서, 로직 실행 (thymeleaf 문법)
각각 getId, getName으로 접근해서 값을 가져오고, 출력한다
메모리 안에 있는 데이터이므로, 다시 실행시키면 데이터가 날아간다!
💡 이 데이터를 파일이나 데이터베이스 안에 저장하자!
@참고자료
[인프런] 김영한 - 스프링 입문 강의 (무료)
'개발일지 > Spring' 카테고리의 다른 글
| [Spring] 스프링 입문 - JPA (0) | 2023.10.01 |
|---|---|
| [Spring] 스프링 입문 - 스프링 통합 테스트, 스프링 JDBC Template (1) | 2023.10.01 |
| [Spring] 스프링 입문 - 스프링 빈과 의존 관계 (1) | 2023.09.28 |
| [Server] TCP와 UDP (0) | 2023.09.26 |
| [Spring] 스프링 입문 - 회원 서비스 테스트 (0) | 2023.09.18 |
