[TIL]221207

grace·2022년 12월 8일

TIL/WIL

목록 보기

7/37

What I Learned Today

Flask 프레임워크를 이용하여 API 만들기

GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
→ 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
→ 예: google.com?q=북극곰

POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
→ 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

POST 연습(주문 저장) 이름, 주소, 평수 저장하기(Create → POST)

요청 정보 : URL= /mars, 요청 방식 = POST

클라(ajax) → 서버(flask) : name, address, size

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

서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)

@app.route("/mars", methods=["POST"])
def 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.orders.insert_one(doc)

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

GET 연습(주문 보여주기) 저장된 주문을 화면에 보여주기(Read → GET)

요청 정보 : URL= /mars, 요청 방식 = GET

클라(ajax) → 서버(flask) : (없음)

받을 것 없이 orders 에 주문정보를 담아서 내려주기만 하면 된다.


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

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

응답을 잘 받아서 for 문으로! 붙여주면 끝


function show_order() {
    $('#order-box').empty()
    $.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)
            }

        }
    });
}

Key Concepts

초기세팅하다가 생긴 에러 중 ec2 로 구매한 가상의 컴퓨터(서버)의 ip 로 연결된 내 도메인 주소로 들어가면 내가 만든 사이트가 접속되어야하는 데 페이지를 찾을 수 없다고 연결에러가 나서 해결해보았다
해결!

Code Snippets

항해99 웹종 프로젝트 버킷리스트 중...

완료버튼을 누르면 선이 그어지면서 완료버튼이 사라져야하는데..
전혀 작동이 안되어 고민…코드..코드를 보자…증맬 어이없는 실수가 군데군데 보인다…

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form['num_give']
    db.bucket.update_one({'num': num_receive}, {'$set': {'done': 1}})
    return jsonify({'msg': '버킷 완료!'})

// > 수정 후

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form["num_give"]
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
    return jsonify({'msg': '버킷 완료!'})

function done_bucket(num) {
          $.ajax({
              type: "POST",
              url: "/bucket/done",
              data: { num_give: num },
              success: function (response) {
                  alert(response["msg"])
                  window.location.reload()
              }
          });
      }

// > 수정 후

function done_bucket(num) {
          $.ajax({
              type: "POST",
              url: "/bucket/done",
              data: {'num_give': num},
              success: function (response) {
                  alert(response["msg"])
                  window.location.reload()
              }
          });
      }