1. 홈화면 추가
컨트롤러가 정적 리소스보다 우선순위가 높다.
홈 경로(/)에 매핑한 컨트롤러가 존재한다면 index.html(resources/static/index.html)이 아닌 이것이 먼저 동작하여 홈화면으로 동작하게 된다.
🔸 src/main/java/프로젝트명/controller/HomeController.java
package hello.hello_spring.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomeController {
@GetMapping("/")
public String home(){
return "home";
}
}
🔸 src/main/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>
2. 회원등록
🍃 회원등록폼 컨트롤러
🔸src/main/java/프로젝트명/controller/MemberContoller.java
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
....
@GetMapping("/members/new")
public String createForm(){
return "members/createMemberForm";
}
....
}
🔸src/main/resources/templates/members/createMemberForm.HTML
회원등록폼 HTML
form태그는 값을 입력받을 수 있는 HTML태그이다. action 속성을 통해 처리할 API를 명시할 수 있고, method를 통해 HTTP 통신방식을 지정할 수 있다. 내부의 input태그의 name값 = 입력값 형태의 데이터들이 전송된다.
<!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>
🍃 회원등록 컨트롤러
🔸src/main/java/프로젝트명/controller/폼이름.java
웹 등록 화면에서 데이터를 전달 받을 폼 객체, domain과는 별도로 만들어서 이용한다.
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
🔸src/main/java/프로젝트명/controller/MemberContoller.java
GET방식은 주로 조회에, POST방식은 데이터 전송작업에서 사용한다.
폼과 객체간 데이터 바인딩(data binding) : 스프링 MVC에서 폼 데이터를 자동으로 객체에 매핑하는 기능, 폼태그를 통해 전달된 데이터가 컨트롤러 메서드의 파라미터 객체에 자동으로 매핑된다.
- 매핑하려는 input 태그의 name 속성값과 객체의 필드 이름이 일치해야한다.
- Getter/Setter: 객체의 필드에 값이 주입되려면, 해당 필드에 대한 Setter가 존재해야한다.
컨트롤러에서는 폼객체에 바인딩된 입력 값을 도메인객체에 저장해준뒤에 서비스로 등록작업을 진행한다.
모든 작처리가 이루어진뒤 클라이언트에게 홈화면의 경로를 반환한다.
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
....
@PostMapping("/members/new")
public String create(MemberForm memberForm){
Member member = new Member();
member.setName(memberForm.getName());
memberService.join(member);
return "redirect:/";
}
....
}
3. 회원조회
🔸src/main/java/프로젝트명/controller/MemberContoller.java
컨트롤러와 모델(model) 간의 데이터 바인딩(data binding) : 컨트롤러에서 요청 데이터를 받아와 이를 모델 객체에 할당하는 과정, 사용자가 입력한 데이터나 외부에서 받아온 데이터를 컨트롤러에서 모델 객체에 할당하여 전달할 수 있다.
@Controller
public class MemberController {
private final MemberService memberService;
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
....
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
....
}
🔸 src/main/resources/templates/members/memberList.html
템플릿언어의 랜더링 기능이 동작한다.
model에 담아서 넘겨준 데이터들을 루프(th:each)를 통해 순차적으로 랜더링한다.
<!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>'web programming' 카테고리의 다른 글
| [ 스프링 입문 ] 스프링 DB접근 기술 (2) | 2024.09.08 |
|---|---|
| [ 스프링 입문 ] 스프링 빈과 의존관계 (0) | 2024.09.02 |
| [ 스프링 입문 ] 회원관리 예제 (1) | 2024.09.02 |
| [ 스프링 입문 ] 프로젝트 환경설정, 스프링 웹개발 기초 (1) | 2024.08.24 |
| JPA(Java Persistence API) 기본개념 (0) | 2024.03.10 |