[Spring] inflearn 스프링 입문 - 회원 관리 예제 - 웹 MVC 개발

회원 웹 기능 - 홈 화면 추가

 

memberController를 통해 회원 등록, 조회

 

홈 컨트롤러 추가

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

아무것도 없으면 static/index.html로 감(welcome page)

그러나 우선순위 있음

웹 브라우저에서 요청이 오면 먼저 스프링 컨테이너 안에 관련 컨트롤러가 있는지 먼저 찾고

없으면 static 파일을 찾음.

그래서 localhost:8080 접속 시 HomeController에서 맵핑된 홈 화면 url이 있으므로 HomeController 호출로 끝남. resources/templates/home.html 화면을 띄워줌.

이전에 만든 정적 리소스에 있는 resources/static/index.html 파일은 무시됨.

 

 

회원 웹 기능 - 등록

MemberController에 맵핑 추가

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 MemberService memberService;

    @Autowired
    public MemberController(MemberService memberService) {
        this.memberService = memberService;
    }

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

resources/templates/members/createMemberForm.html 추가

 

회원 등록 컨트롤러

src/main/java/hello/hellospring/controller/MemberForm.java

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

MemberForm 에 있는 name과

createMemberForm.html에 있는 name이 매칭 되며 값이 들어옴.

<input type="text" id="name" name="name" placeholder="이름을 입력하세요">

 

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

 

동작 방식

 

http://localhost:8080/members/new 에 get방식으로 들어옴

MemberController의 createForm 에 맵핑됨. createForm은 members/createMemberForm으로 이동

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

templates에서 members/createMemberForm.html 이 viewResolver에 의해 선택되고 thymeleaf 템플릿 엔진이  createMemberForm을 렌더링 함. html이 뿌려짐

input의 name 은 서버로 넘어갈 때 key가 됨

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

등록 버튼 누르면 action url localhost:8080/members/new 로 post방식으로 넘어옴

 

get이냐 post냐에 따라 같은 url을 다르게 맵핑 할 수 있다.

method가 post 이므로 MemberController에 @PostMapping이 선택되고 create 메소드 호출됨

input의 name을 보고 MemberForm의 name에 input에서 입력한 값(spring)이 들어오게 된다.

(= MemberForm에 있는 setName을 통해 값이 들어가게 된다. 스프링이 setter(setName)를 통해 값을 넣어줌)

우리는 form.getName()으로 꺼냄

 

MemberController

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

        memberService.join(member);

        return "redirect:/";
    }

MemberForm

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

 

 

 

참고

 

Get: 조회

Post : 데이터를 form에 넣어서 전달할 때 

 

GetMapping : url 창에서 요청

 

회원 웹 기능 - 조회

MemberController에 회원 목록 url로 맵핑되어 호출되는 list 함수 추가

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

resources/templates/members/memberList.html 추가

 

spring1, spring2 회원가입 등록 후 localhost:8080/members

템플릿언어가 렌더링

템플릿언어에서 members를 읽어 들임. ${members}는 model안에 있는 값을 꺼내는 것

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

model에 addAttribute로 members를 추가한다. key 가 members이고 members에는 member list가 담겨있다.

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

th:each loop를 돌면서 로직 실행

첫 번째 객체를 꺼내 member에 담고 id와 name을 출력한다.

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

 

member의 id, name도 private이므로 java property 접근방식(getter setter 접근방식)으로 getId, getName에 접근해서 값을 가져와 출력해준다.

Member class

package hello.hellospring.domain;

public class Member {
	private Long id;
	private String name;

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

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

 

최종 렌더링 결과

 

데이터가 메모리에 있기 때문에 서버를 내렸다가 다시 켜면 데이터가 지워진다.

 

데이터를 파일이나 데이터베이스에 저장해야 한다.