2024.10.07 Blog 프로젝트 만들기(JPA) 사용자 관리 기본 코드 추가 및 설정

blog_v1을 복사해 blog_v2를 만든 후

 

 

blog_v2를 인텔리제이로 프로젝트를 연다.

 

 

UserController.java

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;
import org.springframework.web.bind.annotation.PostMapping;

@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/login-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/update-form/mustache
    }
    
}

 

Spring에서 템플릿 엔진을 사용할 때 데이터를 뷰로 전달하는 방식

HttpServletRequest 객체 사용

• HttpServletRequest는 기본 서블릿 개념에서 사용됩니다.
• 모든 HTTP 요청에 대한 데이터를 관리할 수 있으며, 세션이나 쿠키 같은 정보도 함께 처리할 수 있습니다.
• 서블릿 API와 연관되어 있어 구조가 약간 복잡할 수 있습니다.

Model 객체 사용

• Model은 Spring MVC에서 데이터 전달 전용으로 만들어졌습니다.
• 컨트롤러에서 뷰로 데이터를 간편하게 전달할 수 있습니다.
• 코드가 간결하며, Spring 프레임워크와 깊이 연관되어 있어 유지보수나 코드 가독성

핵심 정리

• Model
  간단하고 Spring MVC에서 자주 사용되는 방식입니다.
  일반적인 데이터 전달에 적합합니다.
  
  
• HttpServletRequest
  복잡한 요청 처리, 세션 관리가 필요한 경우 적합합니다.
  서블릿 기반 작업에 적합합니다.

 

HttpServletRequest 클래스 사용 (예시)

package com.tenco.blog_jpa_step1.user;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import lombok.extern.slf4j.Slf4j;
import jakarta.servlet.http.HttpServletRequest;

@Slf4j
@Controller
public class UserController {

    /**
     * 회원가입 페이지로 이동
     * 주소설계: http://localhost:8080/join-form
     */
    @GetMapping("/join-form")
    public String joinForm(HttpServletRequest request) {
        log.info("회원가입 페이지 이동");
        request.setAttribute("name", "회원가입 페이지");
        return "user/join-form"; // Mustache 템플릿 경로: user/join-form.mustache
    }

    /**
     * 로그인 페이지로 이동
     * 주소설계: http://localhost:8080/login-form
     */
    @GetMapping("/login-form")
    public String loginForm(HttpServletRequest request) {
        log.info("로그인 페이지 이동");
        request.setAttribute("name", "로그인 페이지");
        return "user/login-form"; // Mustache 템플릿 경로: user/login-form.mustache
    }

    /**
     * 회원 수정 페이지로 이동
     * 주소설계: http://localhost:8080/user/update-form
     */
    @GetMapping("/user/update-form")
    public String updateForm(HttpServletRequest request) {
        log.info("회원 수정 페이지 이동");
        request.setAttribute("name", "회원 수정 페이지");
        return "user/update-form"; // Mustache 템플릿 경로: user/update-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="/login" method="post" enctype="application/x-www-form-urlencoded">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="enter your name" name="username">
                </div>

                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="enter your password" name="password">
                </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}}