스프링 부트 강의를 들으면서 수업 내 다루는 예제들을 따라해 보는 중이다. 지난 블로그에서 작성했던 스프링 빈 등록까지 마친 후 회원 관리 기능을 웹 페이지로도 보여주는 MVC 개발 단계이다.
먼저 홈 컨트롤러를 추가해준다.
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";
}
}하는 역할은 localhost:8080/ 이 주소로 요청이 들어왔을 때 home.html 이라는 파일을 띄워주는 역할이다.
그리고 home.html 파일을 templates 폴더 아래에 생성해주고 다음 코드를 넣어 작성해준다.
<!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>
완성된 홈화면은 다음과 같다.
이제 members/new 의 회원 가입 페이지와 /members 의 회원 목록 페이지를 각각 생성해주면 된다. 참고로 이 예제에서 이전에 정적 컨텐츠와 MVC와 템플릿 엔진, API를 비교하는 간단한 예제를 하면서 localhost:8080/ 기본 url에 hello.html을 연결해준 적이 있다. 하지만 스프링에서는 컨테이너 안에 존재하는 컨트롤러를 먼저 방문한 뒤에 해당 요청에 대한 별 다른 정보가 없으면 정적 컨텐츠로 이동하기 때문에, 여기서는 컨트롤러가 작동했다.
1. members/new 의 회원 가입 페이지 만들기
이 기능은 member과 관련한 기능이니, MemberController 파일에서 작업한다. 다음과 같이 우선 회원가입 창을 리턴해줄 수 있는 url을 설정해준다.
package hello.hellospring.controller;
...
@Controller
public class MemberController {
...
@GetMapping("/members/new")
public String createForm() {
return "members/createMemberForm";
}
}그리고 templates 폴더 하에 members 라는 폴더를 생성해 준 후에 members 폴더 아래에 createMemberForm.html 을 생성해준다.
그리고 해당 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>그리고 나서 서버를 재시작하여 기본 화면에서 회원 가입을 클릭하면, form 이 생성된 화면을 확인할 수 있다.
이 다음은 폼을 제출했을 때 (위 사진에서 등록 버튼을 눌렀을 때) post 요청이 오면서 데이터를 우리의 DB(현재는 메모리)에 등록하는 과정이다. 먼저 웹 등록 화면에서 데이터를 전달받을 폼 객체를 생성해준다.
package hello.hellospring.controller;
public class MemberForm {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}다음 코드를 MemberController의 메소드로 추가해주면 된다.
@PostMapping("/members/new")
public String createMember(MemberForm form) { //Memberform의 name 속성과 input 태그의 이름이 name인 것을 찾고 setName을 이용해서 매칭해줌.
Member member = new Member();
member.setName(form.getName());
memberService.join(member);
return "redirect:/";
}createMember에 param으로 받는 MemberForm은 스프링에서 알아서 input 태그의 이름이 name 인 것을 찾아 연결해 준다. (장고에서는 이걸 직접 해줬어야 했어서 좀 신기한 기능이긴 하다) 그리고 나서 Member 객체에 새로 저장을 하고, 전에 만들었던 회원 가입 기능 join을 이용해서 memberService에 등록해준다. 그리고 나서 "redirect:/" 해주면 폼으로부터 post 요청을 처리한 후 홈 화면으로 다시 이동한다.
2. 회원 전체 조회 페이지 만들기
memberController에 회원 전체 조회 페이지 요청이 들어왔을 때를 생성해줘야 한다. 아래 코드를 추가해준다.
@GetMapping("/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}memberService에서 만들어뒀던 findMembers()를 이용하면 쉽게 전체 회원을 조회할 수 있다. 조회된 리스트 객체를 addAttribute를 통해 "members"라는 이름으로 화면에 넘겨준다. 그리고 templates/members/memberList.html을 반환해준다.
아래는 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> <!-- /container -->
</body>
</html>템플릿 문법을 사용해서 각 멤버의 아이디와 이름이 각각 들어가 있다. each="member : ${members}" 같은 부분은 thymeleaf에서 제공하는 템플릿 문법을 사용한 것으로 자바나 다른 언어의 for each 문과 같은 역할을 한다. ${member.id}를 보면 Member 객체의 id 속성은 private이라 여기서 접근할 수 없는데? 하는 의문이 들 수 있다. 이것도 thymeleaf에서 제공되는 문법으로 member.id 를 치면 member.getId 가 실행되어 가져올 수 있다고 한다. 마찬가지로 member.name도 가져왔다.
이렇게 구성한 프로젝트를 실행시켜보면
이런 결과를 얻을 수 있다! 다만, 지금 현재는 DB가 아닌 컴퓨터의 메모리 구현체를 사용하고 있기 때문에 서버를 껐다가 키면 내가 입력한 모든 회원 정보가 리셋된다.. 아마 이 다음 블로그가 DB를 메모리가 아닌 진짜 DB를 사용하는 것과 관련한 내용이 아닐까 싶다!
'TIL > Java | Spring Boot' 카테고리의 다른 글
| [Spring Boot] JdbcTemplate, JPA, 스프링 데이터 JPA (0) | 2022.01.20 |
|---|---|
| [Spring Boot] 스프링 DB 접근 기술 (0) | 2022.01.14 |
| [Spring Boot] 스프링 빈과 의존관계 (0) | 2022.01.09 |
| [Spring Boot] 간단한 예제 - 회원 관리 예제 2 (0) | 2022.01.07 |
| [Spring Boot] 간단한 예제 - 회원 관리 예제 1 (0) | 2022.01.07 |
댓글