내일 배움단 11일 메이킹 챌린지 3일차

3일차!!
웹페이지 구상에 대한 본격적인 이야기가 끝난 후에
팀원들과 페이지 만들기를 시작했다.
파트를 나눠서 진행하고 싶었는데, 다들 초보이고 직장인이고 나빼고...
그래서 서로 할 수 있는 만큼만 하고 오픈 카톡으로 파일 전체를 공유하기로 했다.

오늘 배운 강의

웹페이지에 API 코드를 작성해야하기 때문에 4주차 API코드를 이용하는 강의를 다시 수강했다.
그리고 다시 연습도 했는데 이렇게 하면 어려워도 어떻게 만들 수 있는데
팀원들과 같이 만드는 페이지는 제로베이스에서 시작하는 것이기 때문에 어떻게 만들지는 알아도 코드로 쓰는게 어려운것 같다.

오늘 배운 코드

파이썬 코드

# 주문하기(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
    }
    db.shopping.insert_one(doc)

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


# 주문 목록보기(Read) API
@app.route('/order', methods=['GET'])
def view_orders():
    orders = list(db.shopping.find({}, {'_id': False}))
    return jsonify({'result': 'success', 'orders': orders})

html 코드

function list() {
            $.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>`
                            $('#orders-box').append(temp_html)
                        }
                    }
                }
            })
        }

        function get_rate() {
            $.ajax({
                type: "GET",
                url: "https://api.manana.kr/exchange/rate.json",
                data: {},
                success: function (response) {
                    let now_rate = response[1]['rate'];
                    $('#now-rate').text(now_rate);
                }
            })
        }

        function 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();
                    }
                }
            })
        }

오늘 한 일

팀원들이 올려준 사진 파일들을 이름과 확장자를 통일해서 static폴더에 모두 올렸다.
그리고 배경화면 전체에 세계지도를 넣기로 했었는데 사진을 화면에 꽉차게 넣는게 생각보다 어려운 작업이었다. 확장자가 .svc여서 더 그런듯?
api코드를 작성해보려고 노력했다.
맨 처음에 말했듯 머리는 '이렇게 해야지' 생각하는데 막상 손으로 코드를 적으려고 하니 너무 어렵다.
같이 백엔드를 맡기로한 팀원과 상의해보고 오후 6시 이후에 다시 손봐야겠다.

내일 할 일

1.api코드 완성하기
2.프론트엔드 돕기