본문 바로가기

WINK-(Web & App)/Spring Boot 스터디

[2025 1학기 스프링 부트 스터디] 정다은 #5주차

반응형

이번 글은 5주차..

섹션 6.회원 관리 예제 - 웹 MVC 개발 입니다........

 

슬픈 소식 1

노트북이 고장났어요

 

오늘 회원 웹 기능

1. 홈 화면 추가

2. 등록

3. 조회

이렇게 세가지 해보겠습니다

 

 

1. 홈 화면 추가

package wink.spring_boot_study.controller;

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

@Controller
public class HomeController {

  @GetMapping("/")
  public String home() {
    return "home";
  }
}
<!DOCTYPE html>
<html xmlns="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>

 

2. 등록

  @GetMapping("/members/new")
  public String createForm() {
    return "members/createMemberForm";
  }

 

MemberController.java

<!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> 
</body>
</html>

createMemberForm.html

package wink.spring_boot_study.controller;

public class MemberForm {
  private String name;

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

MemberForm.java

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

    memberService.join(member);

    return "redirect:/";
  } 

MemberController.java

 

controller에 MemberController클래스를 만들고 "/members/new"의 경로를 PostMapping

createMemberForm.html을 templates에 만들고 MemberForm이라는 클래스를 controller에 생성해서 데이터를 전달 받을 객체를 생성

 

  • GetMapping 은 url에 데이터를 포함하여 전송, 서버 상태의 변화 X -> 보통 데이터 조회에 사용
  • PostMapping 은 데이터를 body(요청 본문)에 포함하여 전송, 서버 상태의 변화 가능. ->데이터 생성 및 수정에 사용

 

 

 

3. 조회

회원 가입을 통해 이름을 입력->해당 정보를 홈화면의 회원 목록을 클릭 했을 때 등록 정보를 표시

 

MemberController클래스에 /members를 맵핑해주기 +  list 메서드 만들기

해당 메서드에서 memberService.findMembers()를 통해 회원 목록을 조회

model에 담아 뷰로 전달

 

memberList.html :  members목록을 반복해서 돌며  name을 표시해주는 방식이다.

 

  @GetMapping("/members")
  public String list(Model model) {
    List<Member> members = memberService.findMembers();
    model.addAttribute("members", members);
    return "members/memberList";
  }
<!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>
```

 

 

 

반응형