회원 관리 예제 - 웹 MVC 개발

김슬기·2022년 9월 30일

홈 화면 추가

HomeController추가로 홈화면 관리 컨트롤러 생성
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에 연결해줄 매핑코드

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(){
        return "home";
    }
}

index.html보다 우선순위가 높다
- 스프링컨테이너에서 먼저 찾은다음없으면 index.html호출

회원가입 만들기

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

/template/members/createMemberForm.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>

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

controller/MemberForm

package hello.hellospring.controller;

public class MemberForm {
    private String name;

    public String getName() {
        return name;
    }

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

memberController

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

Post로 정보 보내기

GetMapping으로 html매핑해오고 거기서 만들어서 action url로 post한다. 그럼 포스트매핑으로 그 정보를 통해 멤버 저장
이 루트는 장고의 view와 굉장히 유사한 구조를 보이므로 장고의 동작방식으로 생각하면 조금 쉬운것같다.

조회

templates/members/memberList.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<div class ="container">
    <div>
        <table>
            <thead>![](https://velog.velcdn.com/images/jun_0y/post/c738f570-91f5-40d1-91a8-3ec1fd97df48/image.png)

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

memberController

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

템플릿 언어가 랜더링해줌
- 이부분을 반복해서 띄워준다.
- $으로 값을 가져온다.
- th:each 이것이 템플릿언어의 반복문
하지만 메모리에 있으므로 서버를 껏다키면 리셋
이러면 이제 DB에 저장해야할 필요가 있다.

김슬기

낭만그리고김슬기

이전 포스트

스프링 빈과 의존관계

다음 포스트

회원 관리 예제 - 웹 MVC 개발

홈 화면 추가

조회

스프링 빈과 의존관계

스프링 DB접근기술

0개의 댓글