시작이 반

[Spring] 9.회원 관리 예제 - 웹 MVC 개발 본문

Programming/Spring

[Spring] 9.회원 관리 예제 - 웹 MVC 개발

G_Gi 2021. 1. 21. 00:23
SMALL

강의 참고 : www.inflearn.com/roadmaps/373

 

[초급~중급] 우아한형제들 개발팀장 김영한의 스프링 완전 정복 | 더 나은 학습을 위한 가이드

대세를 따르세요! 자바 스프링 베스트셀러 우형 개발팀장에게 배우는 스프링 완전 정복 🚩 오픈 3개월 만에 수강생 7000+명의 극찬 릴레이 ✨원리와 실무를 한방에, 김영한의 스프링 학습 1O1! 입

www.inflearn.com

 

회원 웹 기능 - 홈 화면 추가

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 Controller 를 추가한다.

@GetMapping에 "/" 가 들어오면 localhttp://localhost:8080 의 첫화면이다

 

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

home.html 추가 

링크타서 회원 가입, 회원 목록볼 수있게

 

그런데 이전에 welcom page는 static에 index.html로 간다고 하였다.

하지만 우선순위가 스프링 컨테이너안에 있는 컨트롤러부터 찾고 static 파일을 찾도록 되어있다.!

 

이전 예시

컨테이너의 컨트롤러부터 찾는다.

 

회원 웹 기능 - 등록

 

회원 등록 폼 컨트롤러

package hello.hellospring.controller;

import hello.hellospring.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller //컨테이너에 객체가 만들어져서 관리됨
public class MemberController {

    private final MemberService memberService;

    @Autowired //스프링 컨테이너에있는 멤버 서비스를 연결시켜줌
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

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

 

회원 등록 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>

 

웹 등록 화면에서 데이터를 전달 받을 폼 객체

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

 

MemberController에 create 메소드 추가

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

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

        memberService.join(member);

        return "redirect:/"; //홈화면으로 가게함
    }
}

 

동작 과정

home화면 -> 회원가입 클릭 -> /members/new 로 들어가짐 -> members/createMembersForm.html 반환 -> html이 화면에 뿌려짐

"name"이 서버로 넘어올때 key가 된다.

input에 "Spring" 을 넣고 등록을 누르게되면

<form action="/members/new" method="post">  ->  /members/new 로 post방식으로 넘어가게된다.

 

그러면 

@PostMapping이된 create메소드로 넘어오게된다.

 

*데이터를 조회할떄는 GetMapping 을 주로 사용 데이터를 넘길때는 PostMapping을 사용

 

input에 있던 name="name"을 보고 MemberForm의 name에 값이 들어온다.

Spring이 알아서 해주나보다..

 

회원 웹 기능 - 조회

MemberController에 list() 메소드 추가

package hello.hellospring.controller;


@Controller //컨테이너에 객체가 만들어져서 관리됨
public class MemberController {

    private final MemberService memberService;

    @Autowired //스프링 컨테이너에있는 멤버 서비스를 연결시켜줌
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

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

    @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";

    }
}

 

회원 정보를 보여줄 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>

위에 조회(list()) 메소드의

List<Member> members = memberService.findMembers(); 
model.addAttribute("members", members);

를 사용하여 html에 ${members}에 List인 members변수를 넘겨준다.

 

 

th:each="member : ${members}"  -> 타임리프의 loop 문법

<tr th:each="member : ${members}">
	<td th:text="${member.id}"></td>
    <td th:text="${member.name}"></td>
</tr>

이부분의 로직이 반복된다.

 

List로된 members를 돌면서 하나씩 element를 꺼내어 member변수에 넣는다.

 

 

------> 아직은 메모리에 데이터가 저장되어있기 때문에 실행시킬때마다 메모리가 초기화된다. DB를 달아야함

 

 

LIST

'Programming > Spring' 카테고리의 다른 글

[Spring] 11. AOP  (0) 2021.01.22
[Spring] 10. 스프링 DB접근 기술 - H2 DB 설치, JDBC Template, JPA, 스프링 데이터 JPA  (0) 2021.01.21
[Spring] 8.스프링 빈과 의존관계  (0) 2021.01.20
[Spring] 7. 회원 관리 예제(회원 서비스 개발, 테스트 케이스)  (0) 2021.01.19
[Spring] 6. 회원 관리 예제(회원 도메인, 리포지토리 만들기, 테스트케이스)  (0) 2021.01.19
'Programming/Spring' Related Articles more