스프링 입문5 (코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술)(feat.김영한 강사님)

권영태·2023년 5월 2일
0

스프링

목록 보기
4/18

Project : Gradle-Groovy Project
JDK : JAVA 17
Spring Boot Version : 3.0.6
Dependencies : Spring Web, Thymeleaf, H2database
IDEA : IntelliJ IDEA

  • 이번 시간은 웹 MVC 개발을 진행한다.

🌈 웹 MVC

회원 웹 기능 - 홈 화면 추가

// 홈 컨트롤러
@Controller
public class HomeController {
 @GetMapping("/")
 public String home(){
 	return "home";
 }
}
// 회원 관리용 홈
<!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> <!-- /container -->
</body>
</html>
  • 컨트롤러가 정적 파일보다 우선순위가 높아 컨트롤러를 먼저 사용한다.

회원 웹 기능 - 등록

// 회원 등록 폼 컨트롤러
@Controller
public class MemberController {
 	private final MemberService memberService;
 
 	@Autowired		// 빈 등록
 	public MemberController(MemberService memberService) {
 		this.memberService = memberService;
 	}
    
 	@GetMapping(value = "/members/new")
 	public String createForm() {
 		return "members/createMemberForm";
 	}
    
    /* 회원을 실제 등록하는 기능 */
    @PostMapping(value = "/members/new")
	public String create(MemberForm form) {
 		Member member = new Member();
 		member.setName(form.getName());
 		memberService.join(member);
 		return "redirect:/";
	}
}
// 회원 등록 폼 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> <!-- /container -->
</body>
</html>
// 웹 등록 화면에서 데이터를 전달 받을 폼 객체
public class MemberForm {
 private String name;
 
 public String getName() {
 	return name;
 }
 
 public void setName(String name) {
 	this.name = name;
 }
}

회원 웹 기능 - 조회

// 회원 등록 폼 컨트롤러
@Controller
public class MemberController {
 	private final MemberService memberService;
 
 	@Autowired		// 빈 등록
 	public MemberController(MemberService memberService) {
 		this.memberService = memberService;
 	}
    
 	@GetMapping(value = "/members/new")
 	public String createForm() {
 		return "members/createMemberForm";
 	}
    
    /* 회원을 실제 등록하는 기능 */
    @PostMapping(value = "/members/new")
	public String create(MemberForm form) {
 		Member member = new Member();
 		member.setName(form.getName());
 		memberService.join(member);
 		return "redirect:/";
	}
    
    /* 회원 조회 */
    @GetMapping(value = "/members")
	public String list(Model model) {
 		List<Member> members = memberService.findMembers();
 		model.addAttribute("members", members);
 		return "members/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>
profile
GitHub : https://github.com/dudxo

0개의 댓글