Spring boot - 웹 MVC 제작

목차

1. 프로젝트 생성하기
2. View 환경설정
3. 스프링 웹 개발 기초
4. 회원 관리 예제
5. 스프링 빈과 의존 관계
6. 웹 MVC 제작
7. DB 제작(1)
8. DB 제작(2)
9. AOP

1. 회원 웹 기능

홈 화면 추가

@Controller
public class HomeController {
    @GetMapping("/")	// localhost:8080
    public String home(){
        return "home";
    }
}
// HomeController.java

• ("/")는 index.html대신 localhost:8080에서 기본 동작
  • spring 순서: 스프링 컨테이너(컨트롤러) -> static 순
    즉 index.html보다 "/"이 먼저 동작하게 됨

등록 폼 추가

	...
@GetMapping("/members/new")	// /members/new를 받음
public String createForm() {
    return "members/createForm";	//members/createFrom.html 이동
}

@PostMapping(value = "/members/new")	// members/new를 받음
public String create(MemberForm form) {
    Member member = new Member();
    member.setName(form.getName());
    memberService.join(member);	//회원 가입
    return "redirect:/";	// 홈화면으로 이동
}
	...
    
//MemberController.java 추가

• 이름을 summit하게 되면 리포지토리로 값 전달 후 홈 화면 이동
• memberService와 연결된 컨트롤러인 memberController안에서 동작할 수 밖에 없음

<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>
//createForm.html

• summit하게되면 리포지토리에 저장(save()함수 실행)
  • join() 제작 시 추가한 중복 값 예외 코드때문에 동일한 값 저장X
• action="/members/new"로 전송하기 때문에 @postMapping을 "/members/new"로 받게 됨
  • action="hi"이면 @postMapping("/members/hi")로 전달 가능
  • createForm.html이 members안의 파일임으로 action="hi"는 /members/hi로 전송하게 됨

조회 기능 추가

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

• member의 전체 리스트를 조회 후 List에 저장
• "members"이름으로 model에 members 리스트를 담은 후 memberList.html로 전송

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

• each를 통해 ${members}로 받은 members리스트를 반복
  • 반복되는 각 member의 id와 name을 출력