Hansel

스프링부트 기초 / 웹 계층 개발2 본문

Spring/기초

스프링부트 기초 / 웹 계층 개발2

핑슬 2022. 2. 21. 18:04

 

앞선 글과 같이 상품에 대해서도 Controller를 작성한다.

laptopForm은 등록 아이템에 따라 다른 폼을 보낼 수 있도록 동적으로 해보는 도전이 필요해 보인다.

 

조회를 위한 html도 함께 작성한다.

 

결과

 

 

정상적으로 DB에 등록되는지 확인해야 한다.

 

OrderController

폼을 받고 보내는 것은 이전에 봤던 방식과 똑같다.

@RequestParam만 잘 이해하면 된다.

 

@RequestParam

  • 간단한 파라미터 요청 방식이다. 넘어오는 매개변수의 name 값을 적어서 거기에 필요한 값을 value로 받는다. URL 과 같이 보면 이해가 쉽다.
  • @RequestParam은 required 옵션을 같이 쓰는데 기본값은 true다. 따라서 false가 아닐 때 받아온 data가 없다면 400 에러를 발생시킨다.

이전에 사용했던 @RequestParam은 get 요청으로 쓰였지만 이번엔 post 요청으로 쓰였다.

 

 

주문의 조회와 취소

주문 목록 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>
    <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.orderItemList[0].item.name}"></td>
        <td th:text="${item.orderItemList[0].orderPrice}"></td>
        <td th:text="${item.orderItemList[0].count}"></td>
        <td th:text="${item.status}"></td>
        <td th:text="${item.OrderTime}"></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>

 

스프링 기초 관련 게시글은 강의를 들으면서 타이핑 한 것을 게시글로 옮긴 것인데 글 자체는 정돈이 되어 있지 않다.

 

토이프로젝트를 하면서 새로 배우는 것들을 추가하고 잘못된 것을 수정할 계획이다.