본문 바로가기
백엔드 공부/스프링 입문

회원 관리 예제 - 웹 MVC 개발

by CSEGR 2024. 3. 6.
728x90

(인프런) 김영한 님의 스프링입문 - 코드로 배우는 스프링부트,웹 MVC, DB접근기술  강의를 보고 리뷰한 글입니다. 

회원 웹 기능 - 홈 화면 추가 

목표 : MemberController를 통해서 회원을 등록하고 조회하는 기능을 구현해보자 ! 

 

 정적 컨텐츠를 띄워주는 로직과 같이 요청이 오면 스프링 컨테이너안에 있는 관련 컨트롤러가 있는지 먼저 찾음. 

(컨트롤러가 없으면 static 찾음)

//controller/HomeController.java

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

이 경우, 첫 번째 도메인 localhost:8080 요청이 오면 홈화면에 매핑된 URL이 존재하므로 controller를 호출함. 

따라서 정적 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>
</body>
</html>

 

domain의 기본 화면

 

<회원가입 html 연결시키기>

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/createMemberForm";
    }
}
//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>
</body>
</html>

회원가입을 누를 시

회원가입 버튼을 누르면 localhost:8080/members/new로 들어오면서 createMemberForm.html이 렌더링된다. 

이름에 "spring"을 치고 등록을 누르게 되면,name이라는 이름의 키와 value는 spring 이라는게 서버로 넘어가게 됨.(아직 서버 구현 x)

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

 

 

  1.  @PostMapping : HTTP Post Method에 해당하는 단축 표현, 서버에 리소스를 등록(저장)할 때 사용 
  2.  @GetMapping : HTTP Get Method에 해당하는 단축 표현, 서버의 리소스를 조회할 때 사용

 

//데이터를 from에 넣어서 데이터를 전달받는 상황이므로 PostMapping을 이용함. 

//MemberController.java에 추가 

@PostMapping("/members/new")
    public String create(MemberForm form){
        Member member = new Member();
        member.setName(form.getName());
        //join 메소드 : 회원가입
        memberService.join(member);
        //회원가입 끝난 후 home으로 보냄. 
        return "redirect:/";
    }

1. 새로운 Member 객체 member 생성 

2. html from으로 부터 getName()을 하여 member setName(이름 설정)

3. memberService 클래스의 join 메소드를 사용하여 member 추가 

4. domain 처음 화면으로 redirect 

 

 

회원 웹 기능 - 조회 

 

//MemberController.java에 추가 

@GetMapping("/members")
    public String list(Model model ){
        //멤버들의 목록을 받기 위한 리스트 선언
        List<Member> members = memberService.findMembers();
        //members 리스트 자체를 model에 담아서 화면에 넘김
        model.addAttribute("members",members);
        return "members/memberList";
    }
//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>
</body>
</html>

회원 목록 누르는 경우

현재 member가 등록되어 있지 않기 때문에 회원이 뜨지 않는 걸 확인할 수 있다.  

회원 가입 버튼을 눌러서 member를 등록하고 나면, 회원 목록 버튼을 눌렀을 때 회원 list를 확인할 수 있다.  

"스프링1"과 "스프링2"를 등록한 경우, source code를 보면

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

 

위의 코드가 밑의 코드로 바뀌어 회원 가입한 회원들의 정보로 렌더링 된 것을 알 수 있다. 

 

<tr>
	<td>1</td>
    <td>스프링1</td>
</tr>
<tr>
	<td>2</td>
    <td>스프링2</td>
</tr>

 

 

 

자바 실행을 멈추고 다시 실행을 시키면, 회원 목록이 초기화된 것을 알 수 있다. 

그 이유는 실행한 자바의 메모리 안에 데이터를 저장해놓기 때문에 자바 실행을 멈추면 데이터가 사라진다. 

따라서 데이터들을 파일이나 데이터베이스(db)에 저장해야한다.

 

 

다음 포스팅에선 데이터들을 저장하는 것에 대해 적어보겠읍니다. !!! 

728x90

'백엔드 공부 > 스프링 입문' 카테고리의 다른 글

스프링 DB 접근 기술  (0) 2024.03.08
스프링 빈과 의존관계  (1) 2024.03.06
스프링 웹 개발 기초  (0) 2024.03.05
스프링 입문 : 프로젝트 환경 설정  (0) 2024.03.05

관련글

티스토리툴바