스파르타코딩클럽 8기) 4주차-flask,mongodb,html,python

Mongle·2020년 6월 9일

Dangole Flask html mongodb python 스파르타 코딩클럽 프로젝트

먹방구독서비스(Web)

목록 보기

5/11

엄청난 4주차였다.

flask서버와 index.html 클라이언트 사이의 통신

ajax문법

db에서 데이터를 가져와서 html으로 출력하는 방법

어느 것 하나 제대로 이해하지 못하고 수업을 마쳤기 때문에 일단 코드 분석을 통해 app.py와 index.html의 통신방법을 익히는 것에 주력했다.

methods = ['POST']

index.html

 function order() {
      flag = false
      let name = $('#input_name').val();
      let count = $('#select_count').val();
      let addr = $('#input_addr').val();
      let phone = $('#input_phone').val();
      if (name == "") {
        alert("이름을 입력해주세요")
      } else if (count == "-- 수량을 선택하세요 --") {
        alert("수량을 입력해주세요")
        return
      } else if (addr == "") {
        alert("주소를 입력해주세요")
        return
      } else if (phone == "") {
        alert("전화번호를 입력해주세요")
        return
      } else {
        alert("주문정보 : " + name + " " + count + "개 " + addr + " " + phone)
        flag = true
      }

      if(flag){
        $.ajax({
                  type: 'POST', //타입작성
                  url: '/orders', //url작성
                  data: {name_give:name, count_give:count, addr_give:addr, phone_give:phone},
                  success: function(response){
                      if(response['result'] == 'success'){
                          alert(response['msg']);
                          window.location.reload(); //현재페이지 새로고침
                      }
                  }
              });
      }
    }

app.py

## API 역할을 하는 부분
@app.route('/orders', methods=['POST'])
def write_orders():
    # name 가져오기
    name_receive = request.form['name_give']
    # count 가져오기
    count_receive = request.form['count_give']
    # addr 가져오기
    addr_receive = request.form['addr_give']
    # phone 가져오기
    phone_receive = request.form['phone_give']

    # DB에 삽입할 order 만들기
    order = {
       'name': name_receive,
       'count': count_receive,
       'addr': addr_receive,
       'phone': phone_receive
    }
    # orders에 order 저장하기
    db.orders.insert_one(order)
    # 성공 여부 & 성공 메시지 반환
    return jsonify({'result': 'success', 'msg': '주문이 성공적으로 작성되었습니다.'})

진행 순서 :

1,2) ajax를 통해서 app.py에게 어떤 방식으로, 어떤 주소로 보낼지 알려줍니다.

----> post방식으로 /oders라는 주소로 보냅니다.

----> app.py의 여러 api중 post방식, /orders라는 주소로 받기로 약속한 api와 연결됩니다.

3) 이전에 html파일의 <body>부분에서 받아놓은 정보를 data에 싣어서 app.py에게 보냅니다.

----> name, count, addr, phone 정보를 name_give, count_give, addr_give, phone_give로 포장해서 app.py에게 보내줍니다.

4) app.py에서는 request.form()을 통해서 html로부터 정보를 전달받습니다.

----> name_give, count_give, addr_give, phone_give를 받아서 name_receive, count_receive, addr_receive, phone_receive에 저장합니다.

methods=['GET']

index.html

function listing(){
            //1. 리뷰 목록을 서버에 요청
            //2. 요청 성공 여부 확인
            //3. 요청 성공했을 때, 리뷰를 올바르게 화면에 나타내기

            $.ajax({
                type:"GET",
                url:"/orders",
                data:{},
                success: function(response){
                    if(response['result'] == 'success'){
                        //요청에 성공했으면 list orders를 받아와
                        let orders = response['orders'];
                        //성공했을 때 리뷰를 올바르게 화면에 나타내기
                        for(let i = 0; i<orders.length; i++){
                            make_card(orders[i]['name'],orders[i]['count'],orders[i]['addr'],orders[i]['phone']);
                        }
                    }else{
                        alert('주문을 받아오지 못했습니다.');
                    }

                }
            });
        }

app.py

@app.route('/orders', methods=['GET'])
def read_orders():
        # 1. DB에서 주문 정보 모두 가져오기
    orders = list(db.orders.find({},{'_id':0}))
    
		# 2. 성공 여부 & 주문 목록 반환하기
    return jsonify({'result': 'success', 'orders': orders})