close
프로필 배경
프로필 로고

KingBini_Note

강의/스프링부트 JPA활용 1 · 2022. 6. 17. fullscreen 넓게보기

스프링부트 JPA활용 2 - 웹 계층 개발(7)

목차

  • 📌홈 화면
    • 👀 회원 기능
    • 👀 회원 등록
    • 👀 회원 조회
  • 📌상품 기능
    • 👀 상품 등록
    • 👀 상품 수정
    • 👀 상품 조회
  • 📌주문 기능
    • 👀 상품 주문
    • 👀 주문 내역 조회
    • 👀 주문 취소



📌홈 화면

홈 컨트롤러

package jpabook.jpashop.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@Slf4j
public class HomeController {

    @RequestMapping("/")
    public String home(){
        log.trace("트레이스 로깅");
        log.warn("경고 로깅");
        log.info("정보 로깅");
        log.debug("디버깅용 로그");
        log.error("에러로그");
        log.info("HomeController, 테스트 보이나");
        return "home";
    }
}

@Slf4j

@Slf4j를 이용해서 위 와같이 로그를 확인해 볼수 있다.



home.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header">
 <title>Hello</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="container">
 <div th:replace="fragments/bodyHeader :: bodyHeader" />
 <div class="jumbotron">
 <h1>HELLO SHOP</h1>
 <p class="lead">회원 기능</p>
 <p>
 <a class="btn btn-lg btn-secondary" href="/members/new">회원 가입</a>
 <a class="btn btn-lg btn-secondary" href="/members">회원 목록</a>
 </p>
 <p class="lead">상품 기능</p>
 <p>
 <a class="btn btn-lg btn-dark" href="/items/new">상품 등록</a>
 <a class="btn btn-lg btn-dark" href="/items">상품 목록</a>
 </p>
 <p class="lead">주문 기능</p>
 <p>
 <a class="btn btn-lg btn-info" href="/order">상품 주문</a>
 <a class="btn btn-lg btn-info" href="/orders">주문 내역</a>
 </p>
 </div>
 <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>


fragments/header

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrinkto-fit=no">
 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
 <!-- Custom styles for this template -->
 <link href="/css/jumbotron-narrow.css" rel="stylesheet">
 <title>Hello, world!</title>
</head>


fragments/bodyHeader

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="header" th:fragment="bodyHeader">
 <ul class="nav nav-pills pull-right">
 <li><a href="/">Home</a></li>
 </ul>
 <a href="/"><h3 class="text-muted">HELLO SHOP</h3></a>
</div>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="footer" th:fragment="footer">
 <p>&copy; Hello Shop V2</p>
</div>


뷰 리소스 등록

jumbotron-narrow.css 파일

/* Space out content a bit */
body {
 padding-top: 20px;
 padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
 padding-left: 15px;
 padding-right: 15px;
}
/* Custom page header */
.header {
 border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
 margin-top: 0;
 margin-bottom: 0;
 line-height: 40px;
 padding-bottom: 19px;
}
/* Custom page footer */
.footer {
 padding-top: 19px;
 color: #777;
 border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
 .container {
 max-width: 730px;
 }
}
.container-narrow > hr {
 margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
 text-align: center;
 border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
 font-size: 21px;
 padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
 margin: 40px 0;
}
.marketing p + h4 {
 margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
 /* Remove the padding we set earlier */
 .header,
 .marketing,
 .footer {
 padding-left: 0;
 padding-right: 0;
 }
 /* Space out the masthead */
 .header {
 margin-bottom: 30px;
 }
 /* Remove the bottom border on the jumbotron for visual effect */
 .jumbotron {
 border-bottom: 0;
 }
}

결과 화면

헬로숍 홈

👀 회원 기능

👀 회원 등록

회원 등록 폼 객체

package jpabook.jpashop.controller;

import lombok.Getter;
import lombok.Setter;

import javax.validation.constraints.NotEmpty;

@Getter
@Setter

public class MemberForm {

    @NotEmpty(message = "회원 이름을 기입해 주세요")
    //스프링부트 2.3부터는 implementation 'org.springframework.boot:spring-boot-starter-validation' 의존성을 추가해야 사용가능하다.
    private String name;

    @NotEmpty(message = "도시명을 기입해 주세요")
    private String city;

    @NotEmpty(message = "거리명을 기입해 주세요")
    private String street;

    @NotEmpty(message = "우편번호를 기입해 주세요")
    private String zipcode;


}

✏ @NotEmpty

  • Bean validation이 제공하는 어노테이션이다.
  • javax.validation.constraints.NotEmpty 를 사용해서 데이터가 비어어있을 경우를 허용하지 않는다.
  • 스프링부트 2.3부터는 implementation 'org.springframework.boot:spring-boot-starter-validation' 의존성을 추가해야 사용가능하다.


회원 등록 컨트롤러

package jpabook.jpashop.controller;

import jpabook.jpashop.domain.Address;
import jpabook.jpashop.domain.Member;
import jpabook.jpashop.service.MemberService;
import lombok.RequiredArgsConstructor;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.validation.Valid;


@Controller
@RequiredArgsConstructor
public class MemberController {


    private  final MemberService memberService;

    @GetMapping(value = "/members/new")
    public String createForm(Model model) {
        model.addAttribute("memberForm", new MemberForm());
        return "members/createMemberForm";
    }

    @PostMapping("/members/new")
    public String create(@Valid MemberForm form, BindingResult result){

        if(result.hasErrors()){
            return "members/createMemberForm";
        }

        Address address = new Address(form.getCity(), form.getStreet(), form.getZipcode());
        Member member = new Member();
        member.setName(form.getName());
        member.setAddress(address);

        memberService.join(member);

        return "redirect:/";
    }
}

✏ 멤버 폼을 따로 만들어서 사용하는 이유.

  • model.addAttribute("memberForm", new MemberForm());
  • Member 객체대신 MemberForm을 파라미터로 받는 이유는
    엔티티 소스가 @NotEmpty같은 어노테이션을 추가하면서 지저분해질수
    있다.
  • 화면에서의 폼 데이터와 엔티티 데이터와 맞지않아서 차라리 화면에 딱
    맞는 폼데이터를 만들어서 데이터를 받는게 낫기때문이다.
  • 실무에서는 간단한 폼 데이터를 갖는경우는 거의 없기 떄문에 폼데이터를
    따로 만들어서 관리한다.

    ✏Model 이란?

  • import org.springframework.ui.Model;
  • Model은 HashMap 형태를 갖고 있으며, Key,Value값을 가지고 있다.
  • addAttribute() 와 같은 기능을 통해 모델에 원하는 속성과 그것에대한 값을 주어 뷰에 데이터를 전달할 수 있다.
  • Spring에서 Controller의 메서드를 작성할 때 Model을 타입의 파라미터로 지정이 가능하다.
  • Model 객체는 컨트롤러에서 생성된 데이터를 담아서 프론트에 전달해 준다.

👀 회원 조회

회원 목록 컨트롤러 추가

  • 기존 MemberController 아래의 코드만 추가 했다.

    ...

  //회원 목록 컨트롤러
  @GetMapping("members")
  public String create(Model model){
      List<Member> members = memberService.findMember();
      model.addAttribute("members", members);
      return "members/memberList";
  }


회원 목록 뷰( templates/members/memberList.html)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader" />
    <div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>#</th>
                <th>이름</th>
                <th>도시</th>
                <th>주소</th>
                <th>우편번호</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="member : ${members}">
                <td th:text="${member.id}"></td>
                <td th:text="${member.name}"></td>
                <td th:text="${member.address?.city}"></td>
                <td th:text="${member.address?.street}"></td>
                <td th:text="${member.address?.zipcode}"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

✏ th:each="member : ${members}" 의 의미

  • 자바의 for(member : members)의 의미이며 리스트를 members의 길이만큼 member담아서 뿌려준다.

✏ 타임리프문법"?"

  • 타임리프에서 ? 사용하면 null을 무시한다.

✏ 참고: 폼 객체 vs 엔티티 직접 사용

  • 요구사항이 정말 단순할 때는 폼 객체( MemberForm ) 없이 엔티티( Member )를 직접 등록과 수정 화면
    에서 사용해도 된다.
  • 하지만 화면 요구사항이 복잡해지기 시작하면, 엔티티에 화면을 처리하기 위한 기능이
    점점 증가한다.
  • 결과적으로 엔티티는 점점 화면에 종속적으로 변하고, 이렇게 화면 기능 때문에 지저분해진
    엔티티는 결국 유지보수하기 어려워진다.
  • 실무에서 엔티티는 핵심 비즈니스 로직만 가지고 있고, 화면을 위한 로직은 없어야 한다.
  • 화면이나 API에 맞는 폼 객체나 DTO를 사용하자.
  • 그래서 화면이나 API 요구사항을 이것들로 처리하고, 엔티티는 최대한 순수
    하게 유지하자



📌상품 기능

👀 상품 등록

BookForm

  • 멤버폼과 같은이유로 주문생성화면에서 필요한 데이터만 갖고있는 폼을 따로 만들어 서버와 데이터를 주고받을 수 있게 만들었다.
package jpabook.jpashop.controller;

import lombok.Getter;
import lombok.Setter;

@Getter@Setter
public class BookForm {

    //상품 수정시 id 필요
    private Long id;
    //이름
    private String name;

    //가격
    private int price;

    //재고
    private int stockQuantity;

    //작가
    private String author;

    //isbn
    private String isbn;
}



아이템 컨트롤러

package jpabook.jpashop.controller;

import jpabook.jpashop.domain.item.Book;
import jpabook.jpashop.domain.item.Item;
import jpabook.jpashop.service.ItemService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;


import java.util.List;


@Controller
@RequiredArgsConstructor
public class ItemController {

    private final ItemService itemService;

    //1.상품 등록페이지 리턴
    @GetMapping("/items/new")
    public String createItems(Model model) {

        model.addAttribute("form",new BookForm());

        return "items/createItemForm";
    }

    //2.상품등록 데이터 저장
    @PostMapping("items/new")
    public String create(BookForm form){

        Book book = new Book();
        book.setName(form.getName());
        book.setPrice(form.getPrice());
        book.setStockQuantity(form.getStockQuantity());
        book.setAuthor(form.getAuthor());
        book.setIsbn(form.getIsbn());

        itemService.saveItem(book);

        return "redirect:/";

    }

    //3.상품 목록 뿌리기
    @GetMapping(value = "/items")
    public String  itemList(Model model) {

        List<Item> items = itemService.finItem();
        model.addAttribute("items",items);

        return "items/itemlist";
    }

}

✏ 1.상품 등록페이지 리턴

  • model.addAttribute()을 이용해서 키와 값으로 북폼객체를 담아서 상품등록페이지 리턴

✏ 2.상품 등록페이지 리턴

  • 상품 등록폼에서 데이터를 받아 Submit버튼 클릭시 포스트 방식으로 컨트롤러에 전달후 전달받은 데이터를 근거로 상품 저장 후 return "redirect:/" 상품 목록화면으로 리다이렉트

✏ 3.상품 목록 뿌리기

  • itemService.finItem() 로직으로 찾은 상품을 리스트 타입으로 저장후 model.addAttribute() 를 이용해서 상품이 담긴 객체를 return "items/itemlist" 로 응답해준다.

상품 등록 뷰

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
 <div th:replace="fragments/bodyHeader :: bodyHeader"/>
 <form th:action="@{/items/new}" th:object="${form}" method="post">
 <div class="form-group">
 <label th:for="name">상품명</label>
 <input type="text" th:field="*{name}" class="form-control"
placeholder="이름을 입력하세요">
 </div>
 <div class="form-group">
 <label th:for="price">가격</label>
 <input type="number" th:field="*{price}" class="form-control"
placeholder="가격을 입력하세요">
 </div>
 <div class="form-group">
 <label th:for="stockQuantity">수량</label>
 <input type="number" th:field="*{stockQuantity}" class="formcontrol" placeholder="수량을 입력하세요">
 </div>
 <div class="form-group">
 <label th:for="author">저자</label>
 <input type="text" th:field="*{author}" class="form-control"
placeholder="저자를 입력하세요">
 </div>
 <div class="form-group">
 <label th:for="isbn">ISBN</label>
 <input type="text" th:field="*{isbn}" class="form-control"
placeholder="ISBN을 입력하세요">
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
 </form>
 <br/>
 <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

상품 목록 뷰

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
 <div th:replace="fragments/bodyHeader :: bodyHeader"/>
 <div>
 <table class="table table-striped">
 <thead>
 <tr>
 <th>#</th>
 <th>상품명</th>
 <th>가격</th>
 <th>재고수량</th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 <tr th:each="item : ${items}">
 <td th:text="${item.id}"></td>
 <td th:text="${item.name}"></td>
 <td th:text="${item.price}"></td>
 <td th:text="${item.stockQuantity}"></td>
 <td>
 <a href="#" th:href="@{/items/{id}/edit (id=${item.id})}"
class="btn btn-primary" role="button">수정</a>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <div th:replace="fragments/footer :: footer"/>
</div> <!-- /container -->
</body>
</html>

👀 상품 수정

상품수정 컨트롤러 코드

package jpabook.jpashop.controller;

import jpabook.jpashop.domain.item.Book;
import jpabook.jpashop.domain.item.Item;
import jpabook.jpashop.service.ItemService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;


import java.util.List;


@Controller
@RequiredArgsConstructor
public class ItemController {

    //상품 수정 폼이동
    @GetMapping("items/{itemId}/edit")
    public String updateItemForm(@PathVariable("itemId") Long itemId, Model model) {
        Book item = (Book) itemService.findOne(itemId);

        BookForm form = new BookForm();
        form.setId(item.getId());
        form.setName(item.getName());
        form.setPrice(item.getPrice());
        form.setStockQuantity(item.getStockQuantity());
        form.setAuthor(item.getAuthor());
        form.setIsbn(item.getIsbn());

        model.addAttribute("form", form);

        return "items/updateItemForm";
    }

    //상품 수정
    @PostMapping("items/{itemId}/edit")
    public String updateItem(@ModelAttribute("form") BookForm form) {

        Book book = new Book();
        book.setId(form.getId());
        book.setName(form.getName());
        book.setPrice(form.getPrice());
        book.setStockQuantity(form.getStockQuantity());
        book.setAuthor(form.getAuthor());
        book.setIsbn(form.getIsbn());

        itemService.saveItem(book);

        return "redirect:/items";
    }
}


상품 수정 폼 화면( items/updateItemForm )

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
 <div th:replace="fragments/bodyHeader :: bodyHeader"/>
 <form th:object="${form}" method="post">
 <!-- id -->
 <input type="hidden" th:field="*{id}" />
 <div class="form-group">
 <label th:for="name">상품명</label>
 <input type="text" th:field="*{name}" class="form-control"
placeholder="이름을 입력하세요" />
 </div>
 <div class="form-group">
 <label th:for="price">가격</label>
 <input type="number" th:field="*{price}" class="form-control"
placeholder="가격을 입력하세요" />
 </div>
 <div class="form-group">
 <label th:for="stockQuantity">수량</label>
 <input type="number" th:field="*{stockQuantity}" class="form-
control" placeholder="수량을 입력하세요" />
 </div>
 <div class="form-group">
 <label th:for="author">저자</label>
 <input type="text" th:field="*{author}" class="form-control" 
placeholder="저자를 입력하세요" />
 </div>
 <div class="form-group">
 <label th:for="isbn">ISBN</label>
 <input type="text" th:field="*{isbn}" class="form-control" 
placeholder="ISBN을 입력하세요" />
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
 </form>
 <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

✏ 상품 수정 폼 이동

  1. 상품 목록폼에서 수정 버튼 클릭시 ->/items/{itemId}/edit URL을 GET 방식으로 요청
  2. 아이템 컨트롤러의 updateItemForm() 실행 ->itemService.findOne(itemId);호출하고 수정할 아이템 조회
  3. model.addAttribute("form", form); = 조회 결과과를 모델 객체에 담아서 -> items/updateItemForm 전달

    ✏ 상품 수정 실행

  4. 상품 수정폼에서 정보수정 후 Submit 클릭
  5. /items/{itemId}/edit URL을 POST 방식으로 요청하고 updateItem() 메서드를 실행
  6. 그리고 컨트롤러 파라미터로 넘어온 itme 엔티티 인스턴스는 준영속성 상태다. 따라서 수정을 해도 변경 감지 기능은 동작하지 않는다.




📌변경 감지와 병합(marge) "중요"

준영속성 엔티티란?

  • JPA(영속성컨텍스트)가 더 이상 관리하지 않는 엔티티
  • DB에 한번 저장 되어서 ID(식별자가)있는 엔티티


준영속성 엔티티의 데이터를 수정하는 2가지 방법

  1. 변경 감지 기능 사용 (Dirty Checking)
    • 영속성 컨텍스트에서 엔티티를 다시 조회한 후 데이터를 수정하는 방법이다.
  2. 병합 사용 (merge)
    • 병합은 준영속 상태의 엔티티를 영속 상태로 변경할 때 사용하는 기능이다.


변경 감지 기능 사용(dirty checking)

@Transactional
void update(Item itemParam) { //itemParam: 파리미터로 넘어온 준영속 상태의 엔티티
 Item findItem = em.find(Item.class, itemParam.getId()); //같은 엔티티를 조회한
다.
 findItem.setPrice(itemParam.getPrice()); //데이터를 수정한다.
}
  • 영속성 컨텍스트에서 엔티티를 다시 조회한 후 데이터를 수정하는 방법이다.
  • 변경할 엔티티를 파라미터로 받고 ->트렌잭션 안에서 다시 엔티티를 조회, 변경할 값 선택 -> 트랜잭션 커밋 시점에 더티체킹을하여 데이터베이스에 업데이트 쿼리를 날린다.


병합 사용(merge)

@Transactional
void update(Item itemParam) { //itemParam: 파리미터로 넘어온 준영속 상태의 엔티티
 Item mergeItem = em.merge(item);
}

병합 동작방식 요약 정리

  1. 준영속 엔티티의 식별자 값으로 영속 엔티티를 조회한다.
  2. 영속 엔티티의 값을 준영속 엔티티의 값으로 모두 교체한다.(병합한다.)
  3. 트랜잭션 커밋 시점에 변경 감지 기능이 동작해서 데이터베이스에 UPDATE SQL이 실행

병합사용 주의 점

  • merge를 사용시 모든데이터(속성)이 변경되어, 변경시 값이 없을 경우 Null값으로 업데이트가 되어 실무에서 위험하다.(병합은 모든 필드를 교체)

👍 merge vs dirty Checking 차이

  • 변경감지(dirtyChecking)을 사용하면 원하는 데이터(속성만) 선택해서 데이터를 업데이트 할 수 있다.
  • 병합은 모든 데이터가 비어있으면 null로 업데이트하면서 모든 필드를 교체한다.

    👍 그냥 엔티티를 변경할 때는 항상 변경감지를 사용하자!





📌주문 기능

👀 상품 주문

상품주문 컨트롤러

package jpabook.jpashop.controller;

import jpabook.jpashop.domain.Member;
import jpabook.jpashop.domain.item.Item;
import jpabook.jpashop.service.ItemService;
import jpabook.jpashop.service.MemberService;
import jpabook.jpashop.service.OrderService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.List;

@Controller
@RequiredArgsConstructor
public class OrderController {

    private final OrderService orderService;
    private final MemberService memberService;
    private final ItemService itemService;

    //주문폼 이동
    @GetMapping("/order")
    public String createForm(Model model) {

        List<Member> members = memberService.findMember();
        List<Item> items = itemService.finItem();

        model.addAttribute("members", members);
        model.addAttribute("items", items);

        return "order/orderForm";
    }

    //주문 데이터 받기
    @PostMapping(value = "/order")
    public String createOrder(@RequestParam("memberId") Long memberId,
                              @RequestParam("itemId") Long itemId,
                              @RequestParam("count") int count
                              ) {
        orderService.order(memberId, itemId, count);
        return "redirect:/order";
    }
}

주문 폼 이동

  • 메인화면에서 상품주문 클릭시 @GetMapping("/order") 호출
  • createForm()실행
  • model.addAttribute("members", members);
      model.addAttribute("items", items); 를 담아서 보내준다.


주문 실행

  • 주문할 회원과 상품, 수량 선택 후 Submit버튼 클릭시
    @PostMapping(value = "/order") 호출 받음
    • memberId , itemId,count 데이터를 파라미터로 받고
    • orderService.order(memberId, itemId, count); 오더 서비스의 오더()를 실행한다.
    • 주문 끝나면 상품 주문 내역이 있는"/order"로 리다이렉트 한다.

상품 주문 폼 (order/orderForm.html)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
 <div th:replace="fragments/bodyHeader :: bodyHeader"/>
 <form role="form" action="/order" method="post">
 <div class="form-group">
 <label for="member">주문회원</label>
 <select name="memberId" id="member" class="form-control">
 <option value="">회원선택</option>
 <option th:each="member : ${members}"
 th:value="${member.id}"
 th:text="${member.name}" />
 </select>
 </div>
 <div class="form-group">
 <label for="item">상품명</label>
 <select name="itemId" id="item" class="form-control">
 <option value="">상품선택</option>
 <option th:each="item : ${items}"
 th:value="${item.id}"
 th:text="${item.name}" />
 </select>
 </div>
 <div class="form-group">
 <label for="count">주문수량</label>
 <input type="number" name="count" class="form-control" id="count"
placeholder="주문 수량을 입력하세요">
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
 </form>
 <br/>
 <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>



👀 주문 내역 조회

 //주문내역//

    @GetMapping("/orde rs")
    public String orderList(@ModelAttribute("orderSearch") OrderSearch orderSearch, Model model) {
        List<Order> orders = orderService.findOrders(orderSearch);
        model.addAttribute("orders" , orders);

        return "order/orderList";
    }
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header"/>
<body>
<div class="container">
 <div th:replace="fragments/bodyHeader :: bodyHeader"/>
 <div>
 <div>
 <form th:object="${orderSearch}" class="form-inline">
 <div class="form-group mb-2">
 <input type="text" th:field="*{memberName}" class="formcontrol" placeholder="회원명"/>
 </div>
 <div class="form-group mx-sm-1 mb-2">
 <select th:field="*{orderStatus}" class="form-control">
 <option value="">주문상태</option>
 <option th:each=
 "status : ${T(jpabook.jpashop.domain.OrderStatus).values()}"
 th:value="${status}"
 th:text="${status}">option
 </option>
 </select>
 </div>
 <button type="submit" class="btn btn-primary mb-2">검색</button>
 </form>
 </div>
 <table class="table table-striped">
 <thead>
 <tr>
 <th>#</th>
 <th>회원명</th>
 <th>대표상품 이름</th>
 <th>대표상품 주문가격</th>
 <th>대표상품 주문수량</th>
 <th>상태</th>
 <th>일시</th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 <tr th:each="item : ${orders}">
 <td th:text="${item.id}"></td>
 <td th:text="${item.member.name}"></td>
 <td th:text="${item.orderItems[0].item.name}"></td>
 <td th:text="${item.orderItems[0].orderPrice}"></td>
 <td th:text="${item.orderItems[0].count}"></td>
 <td th:text="${item.status}"></td>
 <td th:text="${item.orderDate}"></td>
 <td>
 <a th:if="${item.status.name() == 'ORDER'}" href="#"
th:href="'javascript:cancel('+${item.id}+')'"
 class="btn btn-danger">CANCEL</a>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <div th:replace="fragments/footer :: footer"/>
</div> <!-- /container -->
</body>
<script>
 function cancel(id) {
 var form = document.createElement("form");
 form.setAttribute("method", "post");
 form.setAttribute("action", "/orders/" + id + "/cancel");
 document.body.appendChild(form);
 form.submit();
 }
</script>
</html>

👀 주문 취소

    //주문 취소
    @PostMapping("/order/{orderId}/cancel")
    public String cancelOrder(@PathVariable("orderId") Long orderId){
        orderService.cancelOrder(orderId);
        return "redirect/orders";
    }




REF

'강의 > 스프링부트 JPA활용 1' 카테고리의 다른 글

스프링부트 JPA활용 1 - 주문 도메인 개발(6)  (0) 2022.06.10
스프링부트 JPA활용 1 - 상품 도메인 개발(5)  (0) 2022.06.10
스프링부트 JPA활용 1 - 회원 도메인 개발(4)  (0) 2022.06.10
스프링부트 JPA활용 1 - 애플리케이션 구현 준비(3)  (0) 2022.06.10
스프링부트 JPA활용 1 - 도메인 분석 설계(2)  (0) 2022.06.10
강의/스프링부트 JPA활용 1 관련 글
더 보기

티스토리툴바