💡학습 목표
프로젝트 진행을 위한 기본 코드를 작성할 수 있다.
HttpServletRequest 와 Model 를 구분해서 사용할 수 있다.
package com.tenco.blog_v1.user;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
@Slf4j
@Controller
public class UserController {
/**
* 회원가입 페이지 요청
* 주소설계 : http://localhost:8080/join-form
*
* @param model
* @return 문자열
* 반환되는 문자열을 뷰 리졸버가 처리하며
* 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
*/
public String joinForm(Model model) {
log.info("회원가입 페이지");
model.addAttribute("name", "회원가입 페이지");
return "user/join-form"; // 템플릿 경로 : user/join-form.mustache
}
/**
* 로그인 페이지 요청
* 주소설계 : http://localhost:8080/login-form
*
* @param model
* @return 문자열
* 반환되는 문자열을 뷰 리졸버가 처리하며
* 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
*/
public String loginForm(Model model) {
log.info("로그인 페이지");
model.addAttribute("name", "로그인 페이지");
return "user/login-form"; // 템플릿 경로 : user/join-form.mustache
}
/**
* 회원 정보 수정 페이지 요청
* 주소설계 : http://localhost:8080/user/update-form
*
* @param model
* @return 문자열
* 반환되는 문자열을 뷰 리졸버가 처리하며
* 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
*/
public String updateForm(Model model) {
log.info("회원 수정 페이지");
model.addAttribute("name", "회원 수정 페이지");
return "user/update-form"; // 템플릿 경로 : user/join-form.mustache
}
}
Spring에서 템플릿 엔진을 사용할 때 데이터를 뷰로 전달하는 방식
HttpServletRequest 객체 사용
HttpServletRequest는 기본 서블릿 개념에서 사용됩니다.
모든 HTTP 요청에 대한 데이터를 관리할 수 있으며, 세션이나 쿠키 같은 정보도 함께 처리할 수 있습니다.
서블릿 API와 연관되어 있어 구조가 약간 복잡할 수 있습니다.
Model 객체 사용
Model은 Spring MVC에서 데이터 전달 전용으로 만들어졌습니다.
컨트롤러에서 뷰로 데이터를 간편하게 전달할 수 있습니다.
코드가 간결하며, Spring 프레임워크와 깊이 연관되어 있어 유지보수나 코드 가독성
핵심 정리
Model: 간단하고 Spring MVC에서 자주 사용되는 방식입니다. 일반적인 데이터 전달에 적합합니다. HttpServletRequest: 복잡한 요청 처리, 세션 관리가 필요한 경우 적합합니다. 서블릿 기반 작업에 적합합니다.
HttpServletRequest 클래스 사용
package com.tenco.blog_v1.user;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Slf4j
@Controller
public class UserController {
/**
* 회원가입 페이지 요청
* 주소설계 : <http://localhost:8080/join-form>
*
* @param model
* @return 문자열
* 반환되는 문자열을 뷰 리졸버가 처리하며
* 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
*/
@GetMapping("/join-form")
public String joinForm(Model model) {
log.info("회원가입 페이지");
model.addAttribute("name", "회원가입 페이지");
return "user/join-form"; // 템플릿 경로 : user/join-form.mustache
}
/**
* 로그인 페이지 요청
* 주소설계 : <http://localhost:8080/login-form>
*
* @param model
* @return 문자열
* 반환되는 문자열을 뷰 리졸버가 처리하며
* 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
*/
@GetMapping("/login-form")
public String loginForm(Model model) {
log.info("로그인 페이지");
model.addAttribute("name", "로그인 페이지");
return "user/login-form"; // 템플릿 경로 : user/join-form.mustache
}
/**
* 회원 정보 수정 페이지 요청
* 주소설계 : <http://localhost:8080/user/update-form>
*
* @param model
* @return 문자열
* 반환되는 문자열을 뷰 리졸버가 처리하며
* 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
*/
@GetMapping("/user/update-form")
public String updateForm(Model model) {
log.info("회원 수정 페이지");
model.addAttribute("name", "회원 수정 페이지");
return "user/update-form"; // 템플릿 경로 : user/join-form.mustache
}
}
join-form.mustache
{{> layout/header}}
<main class="container p-5 content">
<div class="card">
<div class="card-header"><b>{{name}}</b></div>
<div class="card-body">
<form action="/join" method="post" enctype="application/x-www-form-urlencoded">
<div class="mb-3">
<input type="text" class="form-control" placeholder="enter username" name="username">
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="enter password" name="password">
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="enter email" name="email">
</div>
<button type="submit" class="btn btn-primary form-control">회원가입</button>
</form>
</div>
</div>
</main>
{{> layout/footer}}
login-form.mustache
{{> layout/header}}
<main class="container p-5 content">
<div class="card">
<div class="card-header"><b>{{name}}</b></div>
<div class="card-body">
<form action="/join" method="post" enctype="application/x-www-form-urlencoded">
<div class="mb-3">
<input type="text" class="form-control" placeholder="enter username" name="username">
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="enter password" name="password">
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="enter email" name="email">
</div>
<button type="submit" class="btn btn-primary form-control">회원가입</button>
</form>
</div>
</div>
</main>
{{> layout/footer}}
udpate-form.mustache
{{> layout/header}}
<main class="container p-5 content">
<div class="card">
<div class="card-header"><b>{{name}}</b></div>
<div class="card-body">
<form action="/user/update" method="post" enctype="application/x-www-form-urlencoded">
<div class="mb-3">
<input type="text" class="form-control" placeholder="enter username" name="username" disabled>
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="enter password" name="password">
</div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="enter email" name="email">
</div>
<button type="submit" class="btn btn-primary form-control">회원정보수정</button>
</form>
</div>
</div>
</main>
{{> layout/footer}}'Spring boot' 카테고리의 다른 글
| 게시글 상세보기 (Post Details View) (0) | 2024.10.07 |
|---|---|
| 연관 관계 매핑: `User`와 `Board` 엔티티 (0) | 2024.10.07 |
| 익명 게시판 만들기 (0) | 2024.10.07 |
| 프로젝트 생성 (0) | 2024.10.07 |
| 글 수정 API 만들기 - 7 (2) | 2024.10.04 |
