오늘은 주문 상태를 데이터베이스에서 관리하고, 업데이트하는 기능을 구현합니다. 이를 통해 FastAPI 서버에서 주문 상태를 변경하고, 클라이언트에서 이를 확인할 수 있도록 기능을 확장합니다.
1. 데이터베이스 모델 수정 (이미 설정된 경우 생략 가능)
Order 모델에 상태 필드가 이미 정의되어 있다면 생략 가능합니다. 상태 필드는 주문의 상태(예: “대기 중”, “승인됨”, “완료됨”)를 관리합니다.
class Order(Base):
__tablename__ = "orders"
id = Column(Integer, primary_key=True, index=True)
name = Column(String, nullable=False)
item = Column(String, nullable=False)
quantity = Column(Integer, nullable=False)
notes = Column(Text, nullable=True)
status = Column(String, default="대기 중") # 기본값 "대기 중"
2. 주문 상태 업데이트 API 엔드포인트 추가
main.py에 주문 상태를 업데이트할 수 있는 PUT 엔드포인트를 추가합니다.
main.py 수정
from fastapi import FastAPI, Depends, HTTPException
from sqlalchemy.orm import Session
from database import SessionLocal, Order
app = FastAPI()
# 데이터베이스 세션 종속성 설정
def get_db():
db = SessionLocal()
try:
yield db
finally:
db.close()
# 주문 상태 업데이트 엔드포인트
@app.put("/order/{order_id}/status")
def update_order_status(order_id: int, status: str, db: Session = Depends(get_db)):
# 주문 조회
order = db.query(Order).filter(Order.id == order_id).first()
if not order:
raise HTTPException(status_code=404, detail="Order not found")
# 상태 업데이트
order.status = status
db.commit()
db.refresh(order)
return {"message": "Order status updated", "order": order}
3. 테스트
FastAPI 서버를 실행하고, 상태 업데이트 API를 테스트합니다.
uvicorn main:app --reload
테스트 시나리오
1. POST 요청으로 주문 생성: /order 엔드포인트를 사용하여 새로운 주문을 생성합니다.
2. 상태 업데이트: /order/{order_id}/status 엔드포인트를 사용해 주문 상태를 “승인됨” 또는 “완료됨”으로 변경합니다.
• 예: PUT /order/1/status로 status를 "승인됨"으로 변경.
3. 주문 목록 조회: /orders 엔드포인트를 통해 변경된 상태를 확인합니다.
4. 클라이언트와 연동
OrderList.vue 수정
클라이언트에서 주문 상태를 업데이트할 수 있도록 버튼을 추가합니다.
<template>
<div class="container mt-5">
<h2 class="text-center mb-4">주문 목록</h2>
<ul class="list-group">
<li
v-for="(order, index) in orders"
:key="index"
class="list-group-item d-flex justify-content-between align-items-center"
>
<div>
<strong>{{ order.name }}</strong> - {{ order.item }} ({{ order.quantity }})
<p class="mb-0 text-muted">상태: {{ order.status }}</p>
</div>
<div>
<button
@click="updateStatus(order.id, '승인됨')"
class="btn btn-success btn-sm me-2"
>
승인
</button>
<button
@click="updateStatus(order.id, '완료됨')"
class="btn btn-secondary btn-sm"
>
완료
</button>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "OrderList",
data() {
return {
orders: [],
};
},
async created() {
try {
const response = await fetch("http://127.0.0.1:8000/orders");
const data = await response.json();
this.orders = data.orders;
} catch (error) {
console.error("주문 목록을 불러오는 중 오류가 발생했습니다:", error);
}
},
methods: {
async updateStatus(orderId, newStatus) {
try {
const response = await fetch(`http://127.0.0.1:8000/order/${orderId}/status`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ status: newStatus }),
});
if (!response.ok) {
throw new Error("상태 업데이트 중 오류가 발생했습니다.");
}
const updatedOrder = await response.json();
this.orders = this.orders.map((order) =>
order.id === orderId ? updatedOrder.order : order
);
} catch (error) {
console.error("주문 상태 업데이트 중 오류가 발생했습니다:", error);
}
},
},
};
</script>
5. 테스트 및 검증
1. Vue 클라이언트에서 승인 또는 완료 버튼을 클릭하여 주문 상태를 변경합니다.
2. 상태가 업데이트된 주문 항목이 목록에 즉시 반영되는지 확인합니다.
3. FastAPI의 /orders 엔드포인트를 통해 데이터베이스 상태가 업데이트되었는지 확인합니다.
오늘의 마무리
오늘은 데이터베이스에서 주문 상태를 업데이트하는 기능을 구현했습니다. 이제 가게 주인은 주문 상태를 효과적으로 관리할 수 있으며, 클라이언트와 서버 간 데이터가 동기화됩니다.
내일은 주문 기록을 클라이언트에서 확인하는 기능을 구현하여 과거 데이터를 관리하는 방법을 배우겠습니다. 🚀