4주차(6~9)-화성땅 공동구매(GET, POST)

프로젝트 세팅

1. 새 프로젝트 -> 폴더선택 -> venv확인 -> 3.8버전확인 -> (이창에서 실행)창 클릭

2. 인터프리터 -> 패키지 설치 [Flask, pymongo, dnspython, certifi]

---

POST 연습(주문 저장)

구현해야할 기능 -> 이름, 주소, 평수값을 제출하고, 그 값을 서버에 저장하기 -> 저장이므로 POST방식 사용

• 클라(ajax) → 서버(flask) : name, address, size 
• 서버(flask) → 클라(ajax) : 주문완료확인 메세지 출력

function save_order() {
            let name = $('#name').val()
            let address = $('#address').val()
            let size = $('#size').val()

            $.ajax({
                type: 'POST',
                url: '/mars',
                data: {name_give:name, address_give:address, size_give:size},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }

 

<button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기</button>

클라이언트(ajax)

[버튼 클릭 → save_order함수 실행 → 변수가 각각 '변수_give'에 담김 -> 성공하면 메시지 출력됨]

 

@app.route("/mars", methods=["POST"])
def web_mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {'name':name_receive,
           'address':address_receive,
           'size':size_receive
    }
    db.mars.insert_one(doc)

    return jsonify({'msg': 'POST 연결 완료!'})

서버(flask)

[mongoDB에 저장 → 메시지 출력]

---

GET 연습(주문 보여주기)

 

구현해야할 기능 -> 이미 저장된 이름, 주소, 평수값을 서버로부터 받아오기 -> 요청이므로 GET방식 사용

• 클라(ajax) → 서버(flask) : 없음
• 서버(flask) → 클라(ajax) : 전체 주문을 보내주기

 

<script>
        $(document).ready(function () {
            show_order();
        });
        function show_order() {
            $.ajax({
                type: 'GET',
                url: '/mars',
                data: {},
                success: function (response) {
                    alert(response['msg'])
                }
            });
        }
        function save_order() {
            let name = $('#name').val()
            let address = $('#address').val()
            let size = $('#size').val()
</script>

로딩이 되자마자 showoder을 부른다. -> showorder은 GET방식으로 /mars에 요청한다.

 

서버조작하기

@app.route("/mars", methods=["GET"])
def mars_get():
    orders_list = list(db.orders.find({},{'_id':False}))
    return jsonify({'orders':orders_list})

 

oders라는 이름으로 order_list를 받아간다고 명령한다.

 

클라이언트 조작하기

<script>
        $(document).ready(function () {
            show_order();
        });

        function show_order() {
            $.ajax({
                type: 'GET',
                url: '/mars',
                data: {},
                success: function (response) {
                    let rows = response['orders']
                    for (let i = 0; i < rows.length; i++) {
                        let name = rows[i]['name']
                        let address = rows[i]['address']
                        let size = rows[i]['size']

                        let temp_html = `<tr>
                                            <td>${name}</td>
                                            <td>${address}</td>
                                            <td>${size}</td>
                                          </tr>`
                        $('#order-box').append(temp_html)
                    }
                }
            });
        }
</script>

1. 서버코드에서 oders라는 이름으로 order_list를 받아간다고 명령했으므로, 주문하기를 누르고 콘솔창을 보면 orders에 받아야할 값들이 저장되어있다. 따라서 rows라는 변수에 response['orders']로 값을 받아온다.