나만의쇼핑몰 기능추가

기능

1. 주문하기(POST): 정보 입력 후 '주문하기' 버튼클릭 시 주문목록에 추가
2. 주문내역보기(GET): 페이지 로딩 후 하단 주문 목록이 자동으로 보이기

• 1.클라이언트와 서버 연결 확인하기
  2.서버부터 만들기
  3.클라이언트 만들기
  4.완성 확인하기

POST (주문내역 저장하기)

app.py

# 주문하기(POST) API
@app.route('/order', methods=['POST'])
# 주문을 저장하기 위해 서버가 전달받아야하는 정보 이름, 수량, 주소, 전화번호
def save_order():
    name_receive = request.form['name_give']
    count_receive = request.form['count_give']
    address_receive = request.form['address_give']
    phone_receive = request.form['phone_give']

    # 데이터 저장하기
    doc = {
        'name':name_receive,
        'count':count_receive,
        'address':address_receive,
        'phone':phone_receive
    }

    # mongoDB에 데이터를 넣기
    db.orders.insert_one(doc)

    return jsonify({'result': 'success', 'msg': '주문 완료!'})

index.html

function save_order() {
    // 주문내역을 저장하기 위해 서버에게 주어야하는 정보 이름, 수량, 주소, 전화번호
    let name = $('#order-name').val();
    let count = $('#order-count').val();
    let address = $('#order-address').val();
    let phone = $('#order-phone').val();

    $.ajax({
        type: "POST",
        url: "/order",
        data: {name_give:name, count_give:count, address_give:address, phone_give:phone},
        success: function (response) {
           if(response['result'] == 'success') {
                alert(response['msg']);
                window.location.reload();
           }
        }
    })
}

---

GET (주문내역 보여주기)

app.py

# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    # 모든 document 찾기 & _id 값은 출력에서 제외하기
    # orders라는 키 값으로 주문내역정보 내려주기
    orders = list(db.orders.find({}, {'_id': False}))
    return jsonify({'result': 'success', 'orders': orders})

index.html

function view_orders() {
    $.ajax({
        type: "GET",
        url: "/order",
        data: {},
        success: function (response) {
            if (response['result'] == 'success') {
               let orders = response['orders'];
               for (let i = 0; i < orders.length; i++) {
                   let name = orders[i]['name'];
                   let count = orders[i]['count'];
                   let address = orders[i]['address'];
                   let phone = orders[i]['phone'];

                   let temp_html = `<tr>
                                       <th scope="row">${name}</th>
                                       <td>${count}</td>
                                       <td>${address}</td>
                                       <td>${phone}</td>
                                    </tr>`

                   $('#order-box').append(temp_html);
                }
             }
         }
    })
}