2022. 3. 12. 17:03ㆍ[SpringBoot]_/[Spring-boot]_인프런 강의
환경을 구성하고나서 controller 부분 -> bean에 등록된 부분이 없을 경우 static 부분의 html이 첫 화면으로 호출되게 됩니다.
GetMapping을 통해서 시작주소 localhost:8080/ 이 호출될때 나타날 페이지를 만들어보겠습니다.
해당 controller를 만들고 시작주소의 요청을 받을 때 돌려주는 위치는 template 디렉토리 아래의 home.html이 되겠습니다.
home.html 은 다음과 같습니다.
회원가입 a 태그를 클릭시 members/new 라는 url이 호출되고,
회원 목록 a 태그 클릭시 members 라는 url이 호출하게 됩니다.
1] 각각url을 mapping 하는 controller를 생성합니다.
package hello.hellospring.controller;
import hello.hellospring.domain.Member;
import hello.hellospring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import java.util.List;
@Controller
public class MemberController {
private final MemberService memberService;
//스프링 컨테이너에 등록을 하고 사용한다.
//alt + insert
//spring 컨테이너에서 멤버서비스에 연결을 해준다.
// 지금은 MemberService는 순수한 자바 코드이다. 그래서안된다
@Autowired
public MemberController(MemberService memberService) {
this.memberService = memberService;
}
@GetMapping("/members/new")
public String createFrom(){
return "members/createMemberForm";
}
@PostMapping("/members/new")
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName());
System.out.println("member.getName() = " + member.getName());
memberService.join(member);
return "redirect:/";
}
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members",members);
return "members/memberList";
}
}
GetMapping 어노테이션을 통해서 해당 url 주소를 스프링 컨테이너가 전달 받을 때 해당 메소드를 실행시키게 됩니다.
2-1] 회원 가입
members/new 를 전달받을 때는 template 아래의 members 디렉토리 아래의 createMemberForm 이라는 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 class="btn" type="submit">등록</button>
</form>
</div>
</body>
</html>
</script>
form 태그 안에 input형식의 html 태그가 있습니다.
form 태그의 경우 해당 안의 내용을 전달할 수 있는 기능이 있습니다.
action 으로 url을 전달하고 그 메소드 형식을 post로 지정할 수 있습니다.
참고로 url 주소로 전달될 경우는 get 방식이라고 합니다.
전달 될 내용은 input 태그 안에 name="name" 이부분을 통해 해당 정보가 넘어가게 됩니다.
전달될 내용을 담을 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;
}
}
위의 코드에서는 getter setter가 정의되어 있고 name 이라는 private 변수가 있습니다.
위의 input 태그안의 name = private로 선언된 변수값과 동일해야 합니다.
@PostMapping 부분을 다시 보겠습니다.
@PostMapping("/members/new")
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName());
System.out.println("member.getName() = " + member.getName());
memberService.join(member);
return "redirect:/";
}해당 코드에서는 Post 메소드 형식의 members/new라는 url 요청을 받을시 실행되게 됩니다.
이전 강의에서 나온 Member => getter와 setter 가 설정되어 있는 파일
을 생성자로 생성하고 그 안에 setName을 통해 form 태그로 전달받은 값을 MemberForm안의 getName 메소드를 이용해서 집어넣고 그 값을 다시 할당하게 됩니다.
그리고 그값을 service 단의 Join 함수에 넣게 되면 정상적으로 repository에 저장이 되게 됩니다.
Service부분은 전 강의 참고
그리고 redirect를 이용해서 첫 화면으로 돌아가게 됩니다.
정상적으로 출력되는 모습입니다.
2-1 ] 회원목록 기능
위에서의 member url이 요청될때의 기능 구현입니다.
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members",members);
return "members/memberList";
}해당 url 요청시 controller 부분에서는 spring 에서 제공하는 Model 인터페이스를 이용한다.
해당 인터페이스는 jsp 에서 request.setAttribute() 와 비슷하다.
Model model 을 사용시 model을 따로 지정하지 않아도 addAttribute를 사용할 수 있다.
repository에 저장된 값들을 Service에 구현한 findMembers 함수 (= 전부 다 찾아서 return) 를 이용해서 list 형식으로 members 에 저장한다.
members 라고 지정된 곳에 해당 list를 전달하게 되고
마지막으로 members 디렉토리 아래의 memberList.html을 보여준다.
memberList.html
<!DOCTYPE HTML>
<html xmlns: th="http://www.thymeleaf.org">
<body>
<div class="container">
<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>
</body>
</html>
여기에서 thymeleaf의 문법이 사용되었다.
테이블에서는 th:each를 통해 값이 있을 반복해서 생성해주게 되며,
${} 안의 members를 기준으로 addAttribute로 전달된 값 리스트들이 마지막이 될때까지 반복해서 생성된다.
id의 경우 이전에 작성한 count 개념이라 자동으로 숫자가 늘어난다.
동작화면]
감사합니다.
[무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의
스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., - 강의 소개 | 인프런...
www.inflearn.com
'[SpringBoot]_ > [Spring-boot]_인프런 강의' 카테고리의 다른 글
| Springboot 에 H2 데이터베이스 연결하기 (0) | 2022.03.22 |
|---|---|
| [Spring-boot]_7차 H2 데이터베이스 설치(feat.window) (0) | 2022.03.12 |
| [Spring-boot]_5차 Service(feat.메모리 저장) (0) | 2022.03.05 |
| [Spring-boot]_4차 MemoryRepository(feat.JUnit) (0) | 2022.03.05 |
| [Spring-boot]_3차 Spring boot (@Requestbody) (0) | 2022.02.20 |