[SpringBoot][Thymeleaf]회원관리-웹 MVC개발

🍃 Spring/🍃 Spring Boot

[SpringBoot][Thymeleaf]회원관리-웹 MVC개발

뉴이 NUEY 2025. 1. 7. 16:32

MemberController 코드

package hello.hellospring.controller;

import java.util.List;

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 hello.hellospring.domain.Member;
import hello.hellospring.service.MemberService;

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

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

}

createMemberForm.html 코드

<!DOCTYPE html>
<html lang="ko">
<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>

meberList.html 코드

<!DOCTYPE html>
<html lang="ko" xmlns="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>

홈 화면

controller패키지에 HomeController클래스를 만든다.
컨트롤러 안에 @GetMapping("/") 어노테이션을 "home"화면으로 가는 메서드에 붙여준다.
resources-templates 폴더 안에 home.html을 만든다.
html 코드를 만든다.

💡 index.html이 있어도 위의 코드가 실행되는 이유는 스프링 컨테이너가 컨트롤러를 먼저 확인하기 때문이다.

회원 가입

<a href="/members/new">회원 가입</a>
→ controller에 ' /members/new'를 받을 메서드를 만들어줘야 한다.
controller에 MemberController 패키지를 만든다.
메서드를 만들었다.
return "members/createMemberForm"; → members폴더의 createMemberForm로 연결.
resources-templates-members 폴더 안에 createMemberForm.html을 만든다.
createMemberForm.html
- <form action="/members/new" method="post">
  → post방식으로 '/members/new' 로 전송한다.
  - 💡 전송 기본 방식은 get이다. get은 주로 조회에 사용된다.
    전달하는 곳은 같아도 get이냐 post냐에 따라서 나눌 수 있다.
    (post를 받는 방식은 아래에)
- <input type="text" id="name" name="name" placeholder="이름을 입력하세요" />
  → form이 전달될 때 이름은 name="name" 으로 전달된다.
- <button type="submit">등록</button>
  → submit을 누르면 form태그가 작동해서 action에 적힌 경로로 이동한다.
- form태그가 궁금하시다면
  2024.12.22 - [✨ UI/💗 HTML] - [HTML]데이터 전달 과 그 안의 요소들(input, select...)
MemberController에 form태그를 받을 메서드를 만들었다.
1. @PostMapping("/members/new")
  → 포스트 방식으로 전달된 "/members/new" 주소를 받는다.
2. public String create(MemberForm form) {
  → MemberForm 클래스타입으로 전달된 name을 받는다.
3. MemberForm 클래스
  String name의 getter/setter만 있다.
4. Member회원가입하는 코드이다.
5. return "redirect:/";
  → 리디렉션(다른 url로 이동)을 해서 / 홈 화면으로 이동한다.

회원 목록

MemberController에 /member로 가는 메서드를 만들어 회원을 모두 찾아 members폴더의 memberList로 보낸다.
members폴더에 memberList.html을 만든다.
memberList.heml
- <html lang="ko" xmlns="http://www.thymeleaf.org">
  → 타임리프를 html에 연결한다.
- <tr th:each="member : ${members}">
  → 타임리프의 each를 사용한다. (java의 forEach문과 동일하다.)
  List형태로 전달받은 members에서 member라는 이름으로 하나씩 꺼내 사용한다.
- <td th:text="${member.id}"></td>
  <td th:text= "${member.name}" ></td>
  → member의 id와 name을 꺼내 테이블에 출력한다.
- 테이블에 대한 html코드가 궁금하다면
  2024.12.22 - [✨ UI/💗 HTML] - [HTML]테이블 만들기 & 셀 병합
회원 목록 화면에 타임리프를 사용해 가입한 여러명의 회원이 보이는 것이 확인된다.

※ 참조 : https://www.inflearn.com/roadmaps/373

저작자표시 비영리 변경금지

'🍃 Spring > 🍃 Spring Boot' 카테고리의 다른 글

[SpringBoot]스프링 통합테스트 (0)	2025.01.08
[SpringBoot][Gradle]DB접근기술-순수JDBC (0)	2025.01.08
[SpringBoot]스프링 빈 등록:2.자바코드 (0)	2025.01.06
[SpringBoot]스프링 빈 등록:1.컴포넌트 스캔과 자동 의존관계 설정 (0)	2025.01.06
[SpringBoot][JUnit]회원관리-서비스와 테스트 (2)	2025.01.05

현재글[SpringBoot][Thymeleaf]회원관리-웹 MVC개발

분류 전체보기 (470)

🍃 Spring (29)

☕ JAVA (114)

🐍 Python (41)

✨ UI (33)

😼 Git (3)

☁ Network (10)

💬 프로그래밍 표현식 (2)

🕸 Algorithm (84)

📜 CleanCode (24)

🛠 도구 (53)

💾 Data Base (1)

[ERROR] (5)

📑 개발 사전 (35)

🏙 취직 & 업무 (5)

♥ Life (20)

❔ (1)

Nuey.log

[SpringBoot][Thymeleaf]회원관리-웹 MVC개발

'🍃 Spring > 🍃 Spring Boot' 카테고리의 다른 글

'🍃 Spring/🍃 Spring Boot'의 다른글

티스토리툴바

[SpringBoot][Thymeleaf]회원관리-웹 MVC개발

'🍃 Spring > 🍃 Spring Boot' 카테고리의 다른 글

'🍃 Spring/🍃 Spring Boot'의 다른글

관련글

티스토리툴바