마이페이지

• myPage.mustache

{{#userName}}
{{>layouts/header}}
{{/userName}}

{{#user}}

    이름: {{name}} <br>
    <input type="hidden" id="phoneNum" value="{{phoneNum}}">전화번호: {{phoneNum}}
{{/user}} <br><br>

주문 내역 ----- <br>
{{#order}}

        주문 번호: {{id}} <br>
        주문 일시: {{orderDate}} <br>
        {{#orderP}}
        주문 상품: {{product.name}} <br>
        가격: {{total}} <br>

        <button class="btn btn-outline-danger" id="order-cancel" orderProductId="{{id}}" orderId="{{order.id}}">주문 취소</button>
        {{/orderP}}
{{/order}}

{{^order}}
    주문한 내역이 없음.
{{/order}}

<script>
    const orderCancel = document.querySelector("#order-cancel");

    orderCancel.addEventListener("click", () => {
        const orderProductId = orderCancel.getAttribute("orderProductId");
        const orderId = orderCancel.getAttribute("orderId");
        console.log(`삭제 번허: ${orderProductId}`);
        console.log(`주문 번호: ${orderId}`);

        const url = `/api/orders/${orderId}`
        fetch(url, {
            method: "DELETE"
        }).then(response => {
            const msg = (response.ok) ? "주문 삭제 완료" : "주문 삭제 실패";
            alert(msg);

            window.location.reload();
        })
    })
</script>




<!-- JSON으로 받아온 데이터 화면에 출력하는 방법 -->
<!--<script>-->
<!--    const phoneNum = document.querySelector("#phoneNum").value;-->

<!--    console.log(phoneNum);-->

<!--    const url = `/api/orders/${phoneNum}`-->

<!--    fetch(url).then(res => res.json())-->
<!--                .then(res => {-->
<!--                    const id = document.createElement("div");-->
<!--                    const Date = document.createElement("div");-->
<!--                    id.textContent = res.map((order) => order.id);-->
<!--                    Date.textContent = res.map((order) => order.orderDate);-->
<!--                    const orderId = document.getElementById("orderId");-->
<!--                    const orderDate = document.getElementById("orderDate");-->
<!--                    orderId.appendChild(id);-->
<!--                    orderDate.appendChild(Date);-->
<!--                });-->
<!--</script>-->

 

• MainController

    //마이 페이지
    @GetMapping("/myPage")
    public String myPage(@LoginUser SessionUser user, Model model) throws Exception{
        if (user != null) {
            model.addAttribute("user", user);
            model.addAttribute("userName", user.getName());
        }

        List<Order> orderProducts = orderService.findByPhoneNum(user.getPhoneNum());
        model.addAttribute("order", orderProducts);

        List<OrderProduct> orderProducts2 = orderProductService.listByOrderId(user.getId());
        model.addAttribute("orderP", orderProducts2);


        return "coffeeShop/myPage";
    }

 

• OrderProduct에 주문 번호로 조회 추가
• OrderProductRepository

public interface OrderProductRepository extends JpaRepository<OrderProduct, Long> {

    @Query(value = "SELECT * FROM Order_Product WHERE Order_Id = " +
            "(SELECT id FROM orders WHERE user_id = :userId)", nativeQuery = true)

    List<OrderProduct> listByOrderId(@Param("userId")Long userId);

}

 

• OrderProduct

@AllArgsConstructor
@NoArgsConstructor
@ToString
@Getter
@Entity
@Table (name = "OrderProduct")
public class OrderProduct {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @ManyToOne
    @OnDelete(action = OnDeleteAction.CASCADE) //cascade 옵션 -> OnDelete 옵션은 cascade = CascadeTYPE의 모든 조건을 충족!
    @JoinColumn(name = "order_id")
    @JsonIgnore //양방향 매핑이라 조회 떄 문제생김 -> 임시방편
    private Order order;

    @ManyToOne
    @JoinColumn(name = "product_id")
    private Product product;

    @Column
    private int Total;

    public static OrderProduct createOrderProduct(OrderProductDto dto, Order order, Product product) {
        return new OrderProduct(
                dto.getId(),
                order,
                product,
                product.getPrice()
        );
    }
}

 

• OrderProductService

		
        .
        .
        
  	public List<OrderProduct> listByOrderId(Long userId) {
        return orderProductRepository.listByOrderId(userId);
    }
    
    	.
        .
        .

 

• OrderProductAPIController

		
        .
        .
        
    @GetMapping("/api/orderproducts/{userId}")
    public List<OrderProduct> listByOrderId(@PathVariable Long userId){
        return orderProductService.listByOrderId(userId);
    }
    
    
    	.
        .
        .

 

 

 

• git: https://github.com/Pearlmoon997/CoffeeShop

GitHub - Pearlmoon997/CoffeeShop: CoffeeShop