[Spring] 입문4
Java & Spring

[Spring] 입문4

회원관리 예제 - 웹 MVC 개발

이번 부분은 타임리프라는 템플릿엔진으로 간단하게 화면들을 추가하는 부분이다. 어렵지 않아서 금방금방 습득할 수 있었다.

 

개발 완료 후 파일 구조

회원 웹 기능 - 홈 화면 추가

1. HomeController.java 추가

package hello.hellospring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    // localhost:8080/ 로 들어오면 가장 기본적으로 호출될 부분
    @GetMapping("/")
    public String home() {
        // resources/templates/home.html을 호출
        return "home";
    }
}

2. home.html 추가

<!-- 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>

결과 화면

회원 웹 기능 - 등록

 

1. memberController.java에 GET members/new 추가

// MemberController.java

    ...

    @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:/";
    }

2. GET members/new로 들어왔을 때 띄워질 members/createMemberForm.html 파일 추가

<!-- resources/templates/members/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 type="submit">등록</button> </form>
</div> <!-- /container -->
</body>
</html>

3. memberController.java에 form에서 등록 버튼 누르면 호출될 POST /members/new 함수 추가

// MemberController.java

    ...

    @PostMapping("members/new")
    public String create(MemberForm form) {
        Member member = new Member();
        member.setName(form.getName());

        memberService.join(member);

        return "redirect:/";
    }

4. POST members/new 에서 form 데이터가 넘어왔을 때 형식을 저장할 MemberForm.java 파일 추가

// controller/MemberForm.java

package hello.hellospring.controller;

import org.springframework.stereotype.Controller;

@Controller
public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

회원 웹 기능 - 조회

1. MemberController.java에 GET members를 위한 함수를 추가

// MemberController.java
 
    ...

    @GetMapping("members")
    public String list(Model model) {
        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);
        return "members/memberList";
    }

2. 화면을 띄우기 위한 members/memberList.html 파일 추가

  • 아래에서 ${} 표시는 model 안에 있는 데이터를 꺼내준다는 의미 (Thymeleaf)
// resources/templates/members/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>

멤버 등록 후 조회 화면

 

728x90
반응형

'Java & Spring' 카테고리의 다른 글

[Spring] 입문6 (끝!)  (0) 2021.11.03
[Spring] 입문5  (0) 2021.11.01
[Spring] 입문3  (0) 2021.10.09
[Spring] 입문2  (0) 2021.08.16
[Spring] 입문1(feat. 인프런 김영한님 강의)  (0) 2021.08.14

    티스토리툴바