해당 글은 DEPth IT 연합 프로젝트 동아리 활동의 일환인 서버 스터디에 관련되어 있습니다.🐧
홈 화면 추가
week3,4에서 구현한 코드들을 가지고 실제로 간단한 웹사이트를 작성합니다. 이에 따른 간단한 웹 메인 화면을 만듭니다.
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";
}
}
home.html을 찾아서 "/"에 해당하는 주소에 올라갈 수 있도록 합니다. 이때 1주차에 이미 정적인 index.html을 만들어서 메인 페이지가 있습니다. 하지만 우선 순위가 해당 주소에 맞는 controller가 있다면 index보다 먼저 메인 페이지가 되고 index는 무시됩니다. 만약 위 코드가 사라진다면 다시 index.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>
thymeleaf를 이용해서 랜더링을 거친 후에 화면이 나오게 됩니다.
간단한 문구와 회원 가입, 회원 목록으로의 이동이 가능한 화면이 출력됩니다.
회원 가입 화면 및 기능
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.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
@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";
}
@PostMapping("/members/new")
public String create(MemberForm form){
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}
}
html을 조회하는 경우에는 get방식을 써서 해당 html이 화면에 나타날 수 있게 해줍니다. 화면에 나타난 html에서 입력을 받거나 하여서 데이터를 받아오는 방식은 post 방식을 사용합니다. 이때 받아온 값을 member에 저장하여서 join함수를 이용해 저장하게 합니다.
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
name의 값을 받아 오는 MemberForm 클래스입니다. 해당 클래스를 이용해서 회원 가입이 가능하게 합니다.
회원 목록
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
위의 코드에서 추가적으로 members에 대해서 mapping을 합니다. 이때는 model에 회원 목록을 넘깁니다. 이때 넘겨진 회원 목록을 반복을 돌며 회원을 출력하게 템플릿엔진이 만들어주게 됩니다. 따라서 HTML파일에는 회원 목록이 일일히 적혀있지 않지만 실제로 구현된 화면을 보면 랜더링 되어서 HTML 파일로 넘어온 것을 볼 수 있습니다.
