웹개발종합반 4주차 - 숙제 : 나홀로쇼핑몰 완성

숙제 : 나홀로쇼핑몰 완성

📃 **1주차에 완성한 쇼핑몰을 완성해주세요!**

쇼핑몰은 두 가지 기능을 수행해야 합니다.

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

나홀로쇼핑몰 API(app.py)

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

from pymongo import MongoClient

client = MongoClient('localhost', 27017)
db = client.dbhomework


## HTML 화면 보여주기
@app.route('/')
def homework():
    return render_template('index.html')


# 주문하기(POST) API
@app.route('/order', methods=['POST'])
def save_order():

    name_receive = request.form['name_give']
    count_receive = request.form['count_give']
    adress_receive = request.form['adress_give']
    number_receive = request.form['number_give']

    # DB에 삽입할 order 만들기
    doc = {
        'name': name_receive,
        'count': count_receive,
        'adress': adress_receive,
        'number': number_receive
    }
    # orders에 order 저장하기
    db.aloneshop.insert_one(doc)

    # 성공 여부 & 성공 메시지 반환
    return jsonify({'msg': '주문이 성공적으로 작성되었습니다.'})


# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    # 1. DB에서 리뷰 정보 모두 가져오기
    orders = list(db.aloneshop.find({}, {'_id': False}))
    # 2. 성공 여부 & 리뷰 목록 반환하기
    return jsonify({'all_orders': orders})


if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

클라이언트(index.html)

    <script>
        $(document).ready(function(){
            showOrder();
            $('#names-q1').empty()


            $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/rate",
            data: {},
            success: function (response) {
                let rates = response['rate']
                let temp_html = `<span>달러-원 환율 : ${rates}`
                $('#names-q1').append(temp_html)
            }
        })
        });

        function makeOrder() {
                let name = $("#name").val()
                let count = $("#count").val()
                let adress = $("#adress").val()
                let number = $("#number").val()
                // 화면에 입력된 데이터를 jquery로 가지고 온다

                // post/ review에 저장(create)을 요청합니다.
                $.ajax({
                    type: "POST",
                    url: "/order",
                    data: { name_give: name, count_give: count, adress_give: adress, number_give: number },
                    success: function (response) {
                        alert(response["msg"]);
                        window.location.reload();
                    }
                })
            }

        function showOrder() {
            $.ajax({
                    type: "GET",
                    url: "/order",
                    data: {},
                    success: function (response) {
                        let orders = response['all_orders']

                        for (let i = 0; i < orders.length; i++) {
                            let name = orders[i]['name']
                            let count = orders[i]['count']
                            let adress = orders[i]['adress']
                            let number = orders[i]['number']

                            let temp_html = `
                                            <tr>
                                                <td>${name}</td>
                                                <td>${count}</td>
                                                <td>${adress}</td>
                                                <td>${number}</td>
                                            </tr>
                                            `
                            $('#order-box').append(temp_html)
                        }

                    }
                })
        }

    </script>