꼬물꼬물

회원 관리 예제 - 웹 MVC 개발 본문

스터디/스프링 입문

회원 관리 예제 - 웹 MVC 개발

멩주 2022. 8. 29. 01:20

홈화면 추가

페이지는 우선순위가 있다. welcome page가 나오지 않는 이유는 먼저 controller에게 해당 주소를 문의하고 없다면 static 파일을 찾는다. 이미 GetMapping("/")을 연결해두어 home.html이 나온다. 

 

등록/ 조회

controller/HomeController.class

@Controller
public class HomeController {

    private MemberService memberService;

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

    @GetMapping("/") // 8080으로 들어가자마자 나오는 페이지
    public String home(){
        return "home";
    }

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

    @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); // members라는 이름으로 반환
        return "members/memberList";
    }
}

templates/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="이름을
입력하세요"> <!-- 서버에 넘어오는 것은 name, MemberForm의 name과 동일한 이름을 갖는다. -->
        </div>
        <button type="submit">등록</button>
    </form>
</div> <!-- /container -->
</body>
</html>

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

 

 

 

 

 

'스터디 > 스프링 입문' 카테고리의 다른 글

AOP  (0) 2022.08.30
스프링 DB 접근 기술  (0) 2022.08.29
스프링 빈과 의존관계  (0) 2022.08.28
회원 관리 예제  (0) 2022.08.28
스프링 웹 개발 기초  (0) 2022.08.27
'스터디/스프링 입문' Related Articles more